diff --git a/.changeset/eighty-carrots-help.md b/.changeset/eighty-carrots-help.md new file mode 100644 index 0000000000..7c4f099336 --- /dev/null +++ b/.changeset/eighty-carrots-help.md @@ -0,0 +1,7 @@ +--- +"sit-onyx": minor +--- + +feat(OnyxDataGrid): use `OnyxSystemButton` for header actions + +- fix(OnyxFlyoutMenu): correctly position flyout when open diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-edge-linux.png index a568d6fce5..6b514b3d92 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-firefox-linux.png index 2da9b4daf8..a8b4855b3e 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-webkit-linux.png index d763e09aa2..408943bd37 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/Sort-Action-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-edge-linux.png index e1b44db865..913954d487 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-firefox-linux.png index 7cf9b283e9..91d304dcf6 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-webkit-linux.png index 4db004ab04..70e5db9cab 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-asc-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-edge-linux.png index 2e4a393d3c..f245ce3973 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-firefox-linux.png index 85651146d5..bab96aa695 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-webkit-linux.png index a3292af881..7d7a0bfc8d 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-desc-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-edge-linux.png index 90bc98d694..95c3df589b 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-firefox-linux.png index 82e6739049..ba5d780be7 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-webkit-linux.png index feac315438..117242b4c6 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/sorting/data-grid-sorting-initial-webkit-linux.png differ diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.stories.ts b/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.stories.ts index 4e1d3d2941..3f540507cb 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.stories.ts +++ b/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.stories.ts @@ -1,8 +1,8 @@ import sort from "@sit-onyx/icons/sort.svg?raw"; import type { Meta, StoryObj } from "@storybook/vue3"; import { h } from "vue"; -import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue"; import OnyxListItem from "../OnyxListItem/OnyxListItem.vue"; +import OnyxSystemButton from "../OnyxSystemButton/OnyxSystemButton.vue"; import OnyxDataGrid from "./OnyxDataGrid.vue"; /** @@ -38,10 +38,10 @@ export const HeaderInteractions = { header: { actions: () => [ { - iconComponent: h(OnyxIconButton, { + iconComponent: h(OnyxSystemButton, { label: "Column options", icon: sort, - color: "neutral", + color: "medium", }), listItems: [ h(OnyxListItem, () => "Pin column"), @@ -49,10 +49,10 @@ export const HeaderInteractions = { ], }, { - iconComponent: h(OnyxIconButton, { + iconComponent: h(OnyxSystemButton, { label: "Column options", icon: sort, - color: "neutral", + color: "medium", }), listItems: [h(OnyxListItem, () => "Remove column")], }, diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue b/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue index c58d2392a8..1556aa0366 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue @@ -24,5 +24,10 @@ const slots = defineSlots<{ .onyx-data-grid-header-cell { display: flex; align-items: center; + gap: var(--onyx-spacing-2xs); + + &__actions { + display: inline-flex; + } } diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts b/packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts index a8485ce5c8..ac0643b761 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts @@ -2,9 +2,9 @@ import moreHorizontal from "@sit-onyx/icons/more-horizontal.svg?raw"; import { h, type Component, type ComponentInstance, type WatchSource } from "vue"; import type { ComponentSlots } from "vue-component-type-helpers"; import { injectI18n } from "../../../i18n"; -import OnyxIconButton from "../../OnyxIconButton/OnyxIconButton.vue"; import OnyxListItem from "../../OnyxListItem/OnyxListItem.vue"; import OnyxFlyoutMenu from "../../OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"; +import OnyxSystemButton from "../../OnyxSystemButton/OnyxSystemButton.vue"; import type { DataGridRendererColumn, DataGridRendererRow } from "../OnyxDataGridRenderer/types"; import type { DataGridEntry, DataGridMetadata } from "../types"; import HeaderCell from "./HeaderCell.vue"; @@ -138,9 +138,9 @@ export const useDataGridFeatures = < }, { button: ({ trigger }) => - h(OnyxIconButton, { + h(OnyxSystemButton, { label: t.value("navigation.moreActionsTrigger"), - color: "neutral", + color: "medium", icon: moreHorizontal, ...trigger, }), diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue b/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue index e8f07ed20b..ec83ffb41e 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue @@ -3,8 +3,8 @@ import arrowSmallDown from "@sit-onyx/icons/arrow-small-down.svg?raw"; import arrowSmallUp from "@sit-onyx/icons/arrow-small-up.svg?raw"; import arrowsSort from "@sit-onyx/icons/arrows-sort.svg?raw"; import { computed } from "vue"; -import { OnyxIconButton } from "../../../.."; import { injectI18n } from "../../../../i18n"; +import OnyxSystemButton from "../../../OnyxSystemButton/OnyxSystemButton.vue"; import { nextSortDirection } from "./sorting"; import type { SortDirection } from "./types"; @@ -38,6 +38,5 @@ const buttonLabel = computed(() => { 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 e135226530..d84163c478 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue @@ -83,12 +83,13 @@ const { .onyx-flyout-menu { @include layers.component() { - display: inline-block; + display: inline-flex; width: min-content; + position: relative; &__list { position: absolute; - margin-top: var(--onyx-spacing-sm); + top: calc(100% + var(--onyx-spacing-sm)); border-radius: var(--onyx-radius-md); background-color: var(--onyx-color-base-background-blank); padding: var(--onyx-spacing-2xs) 0;