restrict select options

SchwarzIT · Jan 23, 2025 · b2caf92 · b2caf92
1 parent bf97b81
commit b2caf92
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/apps/docs/src/.vitepress/components/OnyxTypography.vue b/apps/docs/src/.vitepress/components/OnyxTypography.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { OnyxHeadline, OnyxLink, type HeadlineType, type TextSize } from "sit-onyx";
+import {
+  OnyxHeadline,
+  OnyxLink,
+  type HeadlineType,
+  type OnyxHeadlineProps,
+  type TextSize,
+} from "sit-onyx";
 import { computed, ref } from "vue";
 import DesignVariable from "./DesignVariable.vue";
 import DesignVariableCard from "./DesignVariableCard.vue";
@@ -67,7 +73,12 @@ const getTextSizeClass = (fontSize?: TextSize) => {
             {{ previewText }}
           </OnyxLink>
 
-          <OnyxHeadline is="h3" v-else :visual-size="variable.htmlTag" :monospace="isMonospace">
+          <OnyxHeadline
+            is="h3"
+            v-else
+            :visual-size="variable.htmlTag as OnyxHeadlineProps['visualSize']"
+            :monospace="isMonospace"
+          >
             {{ previewText }}
           </OnyxHeadline>
         </template>

diff --git a/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.ct.tsx b/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.ct.tsx
@@ -19,7 +19,7 @@ test.describe("Screenshot tests", () => {
 test.describe("Screenshot tests (visual size)", () => {
   executeMatrixScreenshotTest({
     name: "Headline (visual sizes)",
-    columns: HEADLINE_TYPES,
+    columns: ["h1", "h2", "h3", "h4"],
     rows: HEADLINE_TYPES,
     component: (column, row) => (
       <OnyxHeadline is={row} visualSize={column}>

diff --git a/packages/sit-onyx/src/components/OnyxHeadline/types.ts b/packages/sit-onyx/src/components/OnyxHeadline/types.ts
@@ -9,7 +9,7 @@ export type OnyxHeadlineProps = {
    * Visual size of the headline (h1-h6). Will default to but can be different from the semantical `is` property.
    * Please note that only h1-h4 are intended to be used from UX perspective, h5 and h6 will have the same styles as h4.
    */
-  visualSize?: HeadlineType;
+  visualSize?: Exclude<HeadlineType, "h5" | "h6">;
   /**
    * Unique headline hash/ID (without "#") that is used to show a "#" icon on hover. Makes the headline clickable and a URL that points to this headline
    * is copied to the users clipboard. Will be automatically normalized when containing non URL-safe characters.