Skip to content

Commit

Permalink
feat(menu): refactor class names to match other components class name…
Browse files Browse the repository at this point in the history
… patterns (#1097)
  • Loading branch information
mlmoravek authored Nov 5, 2024
1 parent f269065 commit f3ce20a
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 39 deletions.
43 changes: 20 additions & 23 deletions packages/oruga/src/components/menu/MenuItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,28 @@ const props = defineProps({
default: () => getOption("menu.itemAriaRole", "menuitem"),
},
// class props (will not be displayed in the docs)
/** Class of the menu item */
/** Class of the root element of menu item */
itemClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/** Class of the menu item */
itemButtonClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/** Class of the active menu item */
itemActiveClass: {
itemButtonActiveClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/** Class of the disabled menu item */
itemDisabledClass: {
itemButtonDisabledClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/** Class of the icon of menu item */
itemIconTextClass: {
/** Class of the menu item with icon */
itemButtonIconClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
Expand All @@ -102,11 +107,6 @@ const props = defineProps({
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/** Class of the root element of menu item */
itemWrapperClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
});
defineEmits<{
Expand Down Expand Up @@ -184,23 +184,20 @@ useProviderParent(rootRef, { key: "menu-item", data: provideData });
// --- Computed Component Classes ---
const wrapperClasses = defineClasses([
"itemWrapperClass",
"o-menu__item__wrapper",
]);
const itemClasses = defineClasses(["itemClass", "o-menu__item"]);
const itemClasses = defineClasses(
["itemClass", "o-menu__item"],
["itemActiveClass", "o-menu__item--active", null, isActive],
const buttonClasses = defineClasses(
["itemButtonClass", "o-menu__item__button"],
["itemButtonActiveClass", "o-menu__item__button--active", null, isActive],
[
"itemDisabledClass",
"o-menu__item--disabled",
"itemButtonDisabledClass",
"o-menu__item__button--disabled",
null,
computed(() => props.disabled),
],
[
"itemIconTextClass",
"o-menu__item--icon-text",
"itemButtonIconClass",
"o-menu__item__button--icon",
null,
computed(() => !!props.icon),
],
Expand All @@ -216,14 +213,14 @@ const submenuClasses = defineClasses([
<li
ref="rootElement"
:role="ariaRole"
:class="wrapperClasses"
:class="itemClasses"
:data-id="identifier"
data-oruga="menu-item"
aria-roledescription="item">
<component
:is="tag"
v-bind="$attrs"
:class="itemClasses"
:class="buttonClasses"
role="button"
:disabled="disabled"
@keyup.enter="onClick()"
Expand Down
18 changes: 9 additions & 9 deletions packages/oruga/src/components/menu/examples/inspector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,36 @@ const inspectData = [
},
{
class: "itemClass",
description: "Class of the root element of menu item",
subitem: true,
},
{
class: "itemButtonClass",
description: "Class of the menu item",
subitem: true,
},
{
class: "itemActiveClass",
class: "itemButtonActiveClass",
description: "Class of the active menu item",
subitem: true,
},
{
class: "itemDisabledClass",
class: "itemButtonDisabledClass",
properties: ["disabled"],
description: "Class of the disabled menu item",
subitem: true,
},
{
class: "itemIconTextClass",
class: "itemButtonIconClass",
properties: ["icon"],
description: "Class of the icon of menu item",
description: "Class of the menu item with icon",
subitem: true,
},
{
class: "itemSubmenuClass",
description: "Class of the menu item when is a submenu",
subitem: true,
},
{
class: "itemWrapperClass",
description: "Class of the root element of menu item",
subitem: true,
},
];
</script>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`Menu integration tests > render correctly 1`] = `
<!--
@slot Place menu items here
-->
<li role="menuitem" class="o-menu__item__wrapper" data-id="menu-1" data-oruga="menu-item" aria-roledescription="item"><button class="o-menu__item o-menu__item--icon-text" role="button"><span class="o-icon" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-user mdi-24px"></i></span>
<li role="menuitem" class="o-menu__item" data-id="menu-1" data-oruga="menu-item" aria-roledescription="item"><button class="o-menu__item__button o-menu__item__button--icon" role="button"><span class="o-icon" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-user mdi-24px"></i></span>
<!--
@slot Override label
@binding {boolean} expanded - item expanded state
Expand All @@ -20,7 +20,7 @@ exports[`Menu integration tests > render correctly 1`] = `
</button><!-- sub menu items -->
<!--v-if-->
</li>
<li role="menuitem" class="o-menu__item__wrapper" data-id="menu-2" data-oruga="menu-item" aria-roledescription="item"><button class="o-menu__item o-menu__item--icon-text" role="button"><span class="o-icon" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-mobile mdi-24px"></i></span>
<li role="menuitem" class="o-menu__item" data-id="menu-2" data-oruga="menu-item" aria-roledescription="item"><button class="o-menu__item__button o-menu__item__button--icon" role="button"><span class="o-icon" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-mobile mdi-24px"></i></span>
<!--
@slot Override label
@binding {boolean} expanded - item expanded state
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ describe("Menu integration tests", () => {
"menu-item",
);
expect(itemComps.at(idx)!.text()).toBe(value.label);
expect(itemComps.at(idx)!.classes()).toContain(
"o-menu__item__wrapper",
);
expect(itemComps.at(idx)!.classes()).toContain("o-menu__item");
});
});

Expand Down Expand Up @@ -76,7 +74,9 @@ describe("Menu integration tests", () => {
const itemButtonTwo = itemTwo.find("button");

expect(itemButtonOne.attributes("disabled")).toBe("");
expect(itemButtonOne.classes()).toContain("o-menu__item--disabled");
expect(itemButtonOne.classes()).toContain(
"o-menu__item__button--disabled",
);
expect(itemButtonTwo.attributes("disabled")).toBeUndefined();

await itemButtonOne.trigger("click");
Expand All @@ -99,7 +99,7 @@ describe("Menu integration tests", () => {
const itemComp = wrapper.findComponent(OMenuItem);
expect(itemComp.exists()).toBeTruthy();
const itemButton = itemComp.find("button");
expect(itemButton.classes()).toContain("o-menu__item--active");
expect(itemButton.classes()).toContain("o-menu__item__button--active");

await itemButton.trigger("click");
expect(itemComp.emitted("update:active")).toHaveLength(1);
Expand Down

0 comments on commit f3ce20a

Please sign in to comment.