diff --git a/.changeset/nine-radios-thank.md b/.changeset/nine-radios-thank.md new file mode 100644 index 0000000000..637bfdbc12 --- /dev/null +++ b/.changeset/nine-radios-thank.md @@ -0,0 +1,6 @@ +--- +"@sit-onyx/headless": minor +"sit-onyx": minor +--- + +fix(OnyxFlyoutMenu): When the flyout menu opens on click, should be closed on the second click of the button. Decreased the gap between "more button" and flyout to 8px (0.5 rem) diff --git a/packages/headless/src/composables/menuButton/createMenuButton.ts b/packages/headless/src/composables/menuButton/createMenuButton.ts index 813ca4665e..30af308192 100644 --- a/packages/headless/src/composables/menuButton/createMenuButton.ts +++ b/packages/headless/src/composables/menuButton/createMenuButton.ts @@ -107,11 +107,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions) }; const triggerEvents = () => { - if (options.trigger.value === "click") { - return { - onClick: () => setExpanded(true), - }; - } else { + if (options.trigger.value === "hover") { return { onMouseenter: () => setExpanded(true), onMouseleave: () => setExpanded(false, true), @@ -142,7 +138,9 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions) "aria-controls": menuId, "aria-expanded": options.isExpanded.value, "aria-haspopup": true, - onFocus: () => setExpanded(true), + onFocus: () => setExpanded(true, true), + onClick: () => + options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : undefined, id: buttonId, }) as const, ), diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-edge-linux.png index 6e287e5291..640f0b8ad5 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-firefox-linux.png index 720b417275..a0a04bd4e2 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-webkit-linux.png index af075afd31..865aa69097 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/with-header-interactions-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-edge-linux.png index e101d7a720..6e8c1a8d69 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png index 16d9c8a594..419020573b 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png index 40967cea5f..3d3c9fa346 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-edge-linux.png index f6239080ae..3f8d576376 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-firefox-linux.png index 6428a98cd1..bda3222a2d 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-webkit-linux.png index 00dce6ac45..44783823c4 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxUserMenu/User-menu-webkit-linux.png differ diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue index 7a9858ef4d..32bb2ad476 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue @@ -195,6 +195,10 @@ $gap: var(--onyx-spacing-md); @include layers.component() { --nav-bar-height: 3.5rem; + .onyx-flyout-menu { + --onyx-flyout-menu-gap: var(--onyx-spacing-md); + } + background-color: var(--onyx-color-base-background-blank); font-family: var(--onyx-font-family); color: var(--onyx-color-text-icons-neutral-intense); diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue index 81a1c3d964..4211a293ae 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue @@ -87,13 +87,14 @@ const { .onyx-flyout-menu { @include layers.component() { + --onyx-flyout-menu-gap: var(--onyx-spacing-2xs); display: inline-flex; width: min-content; position: relative; &__list { position: absolute; - top: calc(100% + var(--onyx-spacing-sm)); + top: calc(100% + var(--onyx-flyout-menu-gap)); border-radius: var(--onyx-radius-md); background-color: var(--onyx-color-base-background-blank); padding: var(--onyx-spacing-2xs) 0;