feat(OnyxDataGrid): use OnyxSystemButton for header actions (#2303)

Relates to #2139

- use system button for header actions of data grid
- fix OnyxFlyout position for flyout

.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

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,21 +38,21 @@ 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"),
                 h(OnyxListItem, () => "Unpin column"),
               ],
             },
             {
-              iconComponent: h(OnyxIconButton, {
+              iconComponent: h(OnyxSystemButton, {
                 label: "Column options",
                 icon: sort,
-                color: "neutral",
+                color: "medium",
               }),
               listItems: [h(OnyxListItem, () => "Remove column")],
             },

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;
+  }
 }
 </style>

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,
               }),

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(() => {
 </script>
 
 <template>
-  <!-- TODO: Replace with OnyxSupportButton as soon as [#2053](https://github.com/SchwarzIT/onyx/issues/2053) is implemented -->
-  <OnyxIconButton color="neutral" :icon="icon" :label="buttonLabel" />
+  <OnyxSystemButton :label="buttonLabel" :icon="icon" color="medium" />
 </template>

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;