feat(OnyxDataGrid): Render icons in flyout (#2322)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #1939 

When listItems are not set the icons will be rendered inside the flyout

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)

packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.stories.ts

@@ -1,7 +1,10 @@
-import sort from "@sit-onyx/icons/sort.svg?raw";
+import pinDisabled from "@sit-onyx/icons/pin-disabled.svg?raw";
+import pin from "@sit-onyx/icons/pin.svg?raw";
+import trash from "@sit-onyx/icons/trash.svg?raw";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { h } from "vue";
-import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
+import OnyxMenuItem from "../OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue";
 import OnyxSystemButton from "../OnyxSystemButton/OnyxSystemButton.vue";
 import OnyxDataGrid from "./OnyxDataGrid.vue";
 
@@ -40,21 +43,21 @@ export const HeaderInteractions = {
             {
               iconComponent: h(OnyxSystemButton, {
                 label: "Column options",
-                icon: sort,
+                icon: pin,
                 color: "medium",
               }),
               listItems: [
-                h(OnyxListItem, () => "Pin column"),
-                h(OnyxListItem, () => "Unpin column"),
+                h(OnyxMenuItem, () => [h(OnyxIcon, { icon: pin }), "Pin column"]),
+                h(OnyxMenuItem, () => [h(OnyxIcon, { icon: pinDisabled }), "Unpin column"]),
               ],
             },
             {
               iconComponent: h(OnyxSystemButton, {
                 label: "Column options",
-                icon: sort,
+                icon: trash,
                 color: "medium",
               }),
-              listItems: [h(OnyxListItem, () => "Remove column")],
+              listItems: [h(OnyxMenuItem, () => [h(OnyxIcon, { icon: trash }), "Remove column"])],
             },
           ],
         },

packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts

@@ -1,5 +1,5 @@
 import moreHorizontal from "@sit-onyx/icons/more-horizontal.svg?raw";
-import { h, type Component, type ComponentInstance, type WatchSource } from "vue";
+import { h, type Component, type WatchSource } from "vue";
 import type { ComponentSlots } from "vue-component-type-helpers";
 import { injectI18n } from "../../../i18n";
 import OnyxListItem from "../../OnyxListItem/OnyxListItem.vue";
@@ -38,7 +38,7 @@ export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends s
      */
     actions?: (column: keyof TEntry) => {
       iconComponent: Component;
-      listItems?: ComponentInstance<typeof OnyxListItem>[];
+      listItems: Component<typeof OnyxListItem>[];
     }[];
   };
 };
@@ -124,12 +124,12 @@ export const useDataGridFeatures = <
 
     return columns.map((column) => {
       const actions = headerActions.flatMap((actionFactory) => actionFactory(column));
+      const iconComponent = actions.map(({ iconComponent }) => iconComponent);
 
       if (actions.length > 1) {
         const { t } = injectI18n();
-        const listItems = headerActions
-          .flatMap((actionFactory) => actionFactory(column))
-          .map(({ listItems }) => listItems);
+
+        const listItems = actions.map(({ listItems }) => listItems).filter((item) => !!item);
 
         const flyoutMenu = h(
           OnyxFlyoutMenu,
@@ -156,10 +156,6 @@ export const useDataGridFeatures = <
         };
       }
 
-      const iconComponent = headerActions
-        .flatMap((actionFactory) => actionFactory(column))
-        .map(({ iconComponent }) => iconComponent);
-
       return {
         key: column,
         component: () => h(HeaderCell, { label: String(column) }, { actions: () => iconComponent }),

packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/sorting.ts

@@ -1,6 +1,7 @@
 import { computed, h, toRef, toValue, type Ref } from "vue";
 import { createFeature } from "..";
 import { injectI18n } from "../../../../i18n";
+import OnyxListItem from "../../../OnyxListItem/OnyxListItem.vue";
 import type { DataGridEntry } from "../../types";
 import SortAction from "./SortAction.vue";
 import type { SortDirection, SortOptions, SortState } from "./types";
@@ -85,6 +86,7 @@ export const useSorting = createFeature(
                       sortState.value.column === column ? sortState.value.direction : undefined,
                     onClick: () => handleClick(column),
                   }),
+                  listItems: [h(OnyxListItem, () => "Sort column")],
                 },
               ]
             : [],