docs(OnyxSystemButton): add tooltip and flyout menu example (#2295)

Relates to #2139

Add Storybook examples for using the OnyxSystemButton with a tooltip and
a flyout menu.

.changeset/six-buckets-doubt.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSystemButton): show native browser tooltip when hovering for a few seconds

packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue

@@ -25,6 +25,7 @@ const skeleton = useSkeletonContext(props);
     v-else
     :class="['onyx-system-button', 'onyx-text--small', `onyx-system-button--${props.color}`]"
     :aria-label="props.label"
+    :title="props.label"
     type="button"
     :disabled="disabled"
     :autofocus="props.autofocus"

packages/sit-onyx/src/components/OnyxSystemButton/examples/WithFlyoutMenu.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import WithFlyoutMenu from "./WithFlyoutMenu.vue";
+import WithFlyoutMenuSourceCode from "./WithFlyoutMenu.vue?raw";
+
+const meta: Meta<typeof WithFlyoutMenu> = {
+  title: "Buttons/SystemButton/Examples/FlyoutMenu",
+  component: WithFlyoutMenu,
+  parameters: {
+    docs: {
+      source: {
+        code: WithFlyoutMenuSourceCode.replace('from "../../.."', 'from "sit-onyx"'),
+      },
+    },
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+        <div style="height: 16rem;">
+          <story />
+        </div>`,
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof WithFlyoutMenu>;
+
+export const Default = { args: {} } satisfies Story;

packages/sit-onyx/src/components/OnyxSystemButton/examples/WithFlyoutMenu.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import moreVertical from "@sit-onyx/icons/more-vertical.svg?raw";
+import { OnyxFlyoutMenu, OnyxMenuItem, OnyxSystemButton } from "../../..";
+</script>
+
+<template>
+  <OnyxFlyoutMenu label="Actions">
+    <template #button="{ trigger }">
+      <OnyxSystemButton v-bind="trigger" label="Toggle actions" :icon="moreVertical" />
+    </template>
+
+    <template #options>
+      <OnyxMenuItem>Action 1</OnyxMenuItem>
+      <OnyxMenuItem>Action 2</OnyxMenuItem>
+      <OnyxMenuItem>Action 3</OnyxMenuItem>
+    </template>
+  </OnyxFlyoutMenu>
+</template>

packages/sit-onyx/src/components/OnyxSystemButton/examples/WithTooltip.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import WithTooltip from "./WithTooltip.vue";
+import WithTooltipSourceCode from "./WithTooltip.vue?raw";
+
+const meta: Meta<typeof WithTooltip> = {
+  title: "Buttons/SystemButton/Examples/Tooltip",
+  component: WithTooltip,
+  parameters: {
+    docs: {
+      source: {
+        code: WithTooltipSourceCode.replace('from "../../.."', 'from "sit-onyx"'),
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WithTooltip>;
+
+export const Default = { args: {} } satisfies Story;

packages/sit-onyx/src/components/OnyxSystemButton/examples/WithTooltip.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import moreVertical from "@sit-onyx/icons/more-vertical.svg?raw";
+import { OnyxSystemButton, OnyxTooltip } from "../../..";
+</script>
+
+<template>
+  <OnyxTooltip text="Tooltip text">
+    <template #default="{ trigger }">
+      <OnyxSystemButton v-bind="trigger" label="Button label" :icon="moreVertical" />
+    </template>
+  </OnyxTooltip>
+</template>