Merge remote-tracking branch 'origin/main' into refactor/293-restruct…

…ure-child-components

.changeset/pre.json

@@ -202,6 +202,7 @@
     "sour-candles-beam",
     "sour-ties-impress",
     "spotty-trainers-talk",
+    "spotty-worms-leave",
     "stale-dodos-relax",
     "stale-keys-crash",
     "stale-parrots-fold",
@@ -236,6 +237,7 @@
     "unlucky-jars-chew",
     "unlucky-otters-marry",
     "warm-readers-exercise",
+    "wicked-sloths-obey",
     "wild-days-admire",
     "wild-knives-dress",
     "wild-parrots-change",

.changeset/spotty-worms-leave.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: implement OnyxColorSchemeMenuItem

.changeset/wicked-sloths-obey.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": patch
+---
+
+fix(OnyxMenuItem): make whole button/anchor clickable

apps/alpha-test-app/CHANGELOG.md

@@ -1,5 +1,13 @@
 # alpha-test-app
 
+## 0.1.0-alpha.159
+
+### Patch Changes
+
+- Updated dependencies [90f9f86]
+- Updated dependencies [90f9f86]
+  - [email protected]
+
 ## 0.1.0-alpha.158
 
 ### Patch Changes

apps/alpha-test-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "alpha-test-app",
   "private": true,
-  "version": "0.1.0-alpha.158",
+  "version": "0.1.0-alpha.159",
   "type": "module",
   "scripts": {
     "start": "pnpm run dev",

apps/alpha-test-app/src/App.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import circleContrast from "@sit-onyx/icons/circle-contrast.svg?raw";
 import logout from "@sit-onyx/icons/logout.svg?raw";
 import { useColorMode } from "@vueuse/core";
 import {
   OnyxAppLayout,
-  OnyxColorSchemeDialog,
+  OnyxColorSchemeMenuItem,
   OnyxIcon,
   OnyxListItem,
   OnyxNavBar,
@@ -13,7 +12,6 @@ import {
   OnyxUserMenu,
   type OnyxNavItemProps,
 } from "sit-onyx";
-import { ref } from "vue";
 import { RouterView, useRoute, useRouter } from "vue-router";
 import onyxLogo from "./assets/onyx-logo.svg";
 import { useGridStore } from "./stores/grid-store";
@@ -30,7 +28,6 @@ const navItems = [
 ] satisfies OnyxNavItemProps[];
 
 const { store: colorScheme } = useColorMode();
-const isColorSchemeDialogOpen = ref(false);
 </script>
 
 <template>
@@ -66,10 +63,7 @@ const isColorSchemeDialogOpen = ref(false);
 
         <template #contextArea>
           <OnyxUserMenu username="John Doe">
-            <OnyxListItem @click="isColorSchemeDialogOpen = true">
-              <OnyxIcon :icon="circleContrast" />
-              Appearance
-            </OnyxListItem>
+            <OnyxColorSchemeMenuItem v-model="colorScheme" />
 
             <OnyxListItem color="danger">
               <OnyxIcon :icon="logout" />
@@ -87,12 +81,6 @@ const isColorSchemeDialogOpen = ref(false);
 
     <RouterView />
 
-    <OnyxColorSchemeDialog
-      v-model="colorScheme"
-      :open="isColorSchemeDialogOpen"
-      @close="isColorSchemeDialogOpen = false"
-    />
-
     <OnyxToastProvider />
   </OnyxAppLayout>
 </template>

apps/docs/src/development/theming.md

@@ -9,45 +9,26 @@ Per default, onyx will be displayed in light mode after the [initial setup](/dev
 
 ## Let the user decide
 
-In order to let the user switch between light, dark and auto mode, we recommend to use the [OnyxColorSchemeDialog](https://storybook.onyx.schwarz/?path=/docs/navigation-modules-colorschemedialog--docs) component inside the [nav bar](https://storybook.onyx.schwarz/?path=/story/navigation-navbar--with-context-area) together with the [@vueuse/core](https://vueuse.org/core/useColorMode) library:
+In order to let the user switch between light, dark and auto mode, we recommend to use the pre-built [OnyxColorSchemeMenuItem](https://storybook.onyx.schwarz/?path=/docs/navigation-modules-colorschememenuitem--docs) component inside the [nav bar](https://storybook.onyx.schwarz/?path=/story/navigation-navbar--with-context-area) together with the [@vueuse/core](https://vueuse.org/core/useColorMode) library as shown in the example below.
 
 ```vue
 <script setup lang="ts">
-import circleContrast from "@sit-onyx/icons/circle-contrast.svg?raw";
 import { useColorMode } from "@vueuse/core";
-import { OnyxColorSchemeDialog, OnyxNavBar, OnyxUserMenu, type SelectOption } from "sit-onyx";
+import { OnyxNavBar, OnyxUserMenu, OnyxColorSchemeMenuItem } from "sit-onyx";
 import { ref } from "vue";
 
-const userMenuOptions = [
-  { value: "color-scheme", label: "Appearance", icon: circleContrast },
-  // your other user menu options
-] as const satisfies SelectOption[];
-
 const { store: colorScheme } = useColorMode();
-const isColorSchemeDialogOpen = ref(false);
-
-const handleOptionClick = (value: (typeof userMenuOptions)[number]["value"]) => {
-  if (value === "color-scheme") {
-    isColorSchemeDialogOpen.value = true;
-  }
-};
 </script>
 
 <template>
   <OnyxNavBar app-name="Example app">
     <template #contextArea>
-      <OnyxUserMenu
-        username="John Doe"
-        :options="userMenuOptions"
-        @option-click="handleOptionClick"
-      />
+      <OnyxUserMenu username="John Doe">
+        <OnyxColorSchemeMenuItem v-model="colorScheme" />
+      </OnyxUserMenu>
     </template>
   </OnyxNavBar>
-
-  <OnyxColorSchemeDialog
-    v-model="colorScheme"
-    :open="isColorSchemeDialogOpen"
-    @close="isColorSchemeDialogOpen = false"
-  />
 </template>
 ```
+
+Alternatively, you can use the [OnyxColorSchemeDialog](https://storybook.onyx.schwarz/?path=/docs/navigation-modules-colorschemedialog--docs) component to build your own custom component.

apps/playground/CHANGELOG.md

@@ -1,5 +1,13 @@
 # playground
 
+## 0.0.1-alpha.101
+
+### Patch Changes
+
+- Updated dependencies [90f9f86]
+- Updated dependencies [90f9f86]
+  - [email protected]
+
 ## 0.0.1-alpha.100
 
 ### Patch Changes

apps/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "0.0.1-alpha.100",
+  "version": "0.0.1-alpha.101",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

packages/chartjs-plugin/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-alpha.118
+
+### Patch Changes
+
+- Updated dependencies [90f9f86]
+- Updated dependencies [90f9f86]
+  - [email protected]
+
 ## 1.0.0-alpha.117
 
 ### Patch Changes

packages/chartjs-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-alpha.117",
+  "version": "1.0.0-alpha.118",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/nuxt/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-alpha.44
+
+### Patch Changes
+
+- Updated dependencies [90f9f86]
+- Updated dependencies [90f9f86]
+  - [email protected]
+
 ## 1.0.0-alpha.43
 
 ### Patch Changes

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-alpha.43",
+  "version": "1.0.0-alpha.44",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/sit-onyx/CHANGELOG.md

@@ -1,5 +1,15 @@
 # sit-onyx
 
+## 1.0.0-alpha.162
+
+### Minor Changes
+
+- 90f9f86: feat: implement OnyxColorSchemeMenuItem
+
+### Patch Changes
+
+- 90f9f86: fix(OnyxMenuItem): make whole button/anchor clickable
+
 ## 1.0.0-alpha.161
 
 ### Minor Changes

packages/sit-onyx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-alpha.161",
+  "version": "1.0.0-alpha.162",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.ct.tsx

@@ -34,8 +34,7 @@ test.describe("Screenshot tests", () => {
       );
 
       if (row === "hover") {
-        // eslint-disable-next-line playwright/no-force-option -- since the radio button is visually hidden, we need to use force here
-        await component.getByLabel("Auto").hover({ force: true });
+        await component.getByRole("heading", { name: "Auto" }).hover();
       }
     },
   });
@@ -59,8 +58,7 @@ test("should behave correctly", async ({ mount, page }) => {
   );
 
   const clickOption = (label: string) => {
-    // eslint-disable-next-line playwright/no-force-option -- since the radio button is visually hidden, we need to use force here
-    return component.getByLabel(label).click({ force: true });
+    return component.getByRole("heading", { name: label }).click();
   };
 
   // ASSERT (should be focussed initially)

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx

@@ -0,0 +1,55 @@
+import { expect, test } from "../../../../playwright/a11y";
+import { executeMatrixScreenshotTest } from "../../../../playwright/screenshots";
+import type { ColorSchemeValue } from "../OnyxColorSchemeDialog/types";
+import OnyxColorSchemeMenuItem from "./OnyxColorSchemeMenuItem.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Color scheme menu item",
+    columns: ["default"],
+    rows: ["default", "hover"],
+    // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
+    disabledAccessibilityRules: ["color-contrast"],
+    component: () => (
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        <OnyxColorSchemeMenuItem modelValue="auto" />
+      </ul>
+    ),
+    beforeScreenshot: async (component, page, column, row) => {
+      if (row === "hover") await component.getByText("Appearance: Auto").hover();
+    },
+  });
+});
+
+test("should behave correctly", async ({ page, mount }) => {
+  const modelValueEvents: ColorSchemeValue[] = [];
+
+  // ARRANGE
+  const component = await mount(OnyxColorSchemeMenuItem, {
+    props: {
+      modelValue: "auto",
+    },
+    on: {
+      "update:modelValue": (value: ColorSchemeValue) => modelValueEvents.push(value),
+    },
+  });
+
+  // ASSERT
+  await expect(component).toContainText("Appearance: Auto");
+
+  // ACT
+  await component.click();
+
+  // ASSERT
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+
+  // ACT
+  await dialog.getByRole("heading", { name: "Light" }).click();
+  await dialog.getByRole("button", { name: "Apply" }).click();
+  await component.update({ props: { modelValue: "light" } });
+
+  // ASSERT
+  await expect(modelValueEvents).toStrictEqual(["light"]);
+  await expect(component).toContainText("Appearance: Light");
+});

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.stories.ts

@@ -0,0 +1,30 @@
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import OnyxColorSchemeMenuItem from "./OnyxColorSchemeMenuItem.vue";
+
+/**
+ * Pre-built menu item for the `OnyxUserMenu` that can be used inside the nav bar to
+ * display the current color scheme to the user and allow changing it by displaying a `OnyxColorSchemeDialog`.
+ */
+const meta: Meta<typeof OnyxColorSchemeMenuItem> = {
+  title: "Navigation/modules/ColorSchemeMenuItem",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxColorSchemeMenuItem,
+    events: ["update:modelValue"],
+    decorators: [
+      (story) => ({
+        components: { story },
+        template: `<div style="max-width: 16rem;"> <story /> </div>`,
+      }),
+    ],
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxColorSchemeMenuItem>;
+
+export const Default = {
+  args: {
+    modelValue: "auto",
+  },
+} satisfies Story;