feat(OnyxTabs): support size property

SchwarzIT · Nov 13, 2024 · eb99a76 · eb99a76
1 parent 3f82176
commit eb99a76
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 33 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue b/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue
@@ -19,34 +19,15 @@ defineSlots<{
 
 <style lang="scss">
 @use "../../styles/mixins/layers";
+@use "../../styles/mixins/sizes";
 
 .onyx-headline {
   @include layers.component() {
     font-weight: 600;
     font-family: var(--onyx-font-family);
     color: var(--onyx-color-text-icons-neutral-intense);
 
-    &--h1 {
-      font-size: 1.75rem;
-      line-height: 2.5rem;
-    }
-
-    &--h2 {
-      font-size: 1.25rem;
-      line-height: 1.75rem;
-    }
-
-    &--h3 {
-      font-size: 1rem;
-      line-height: 1.5rem;
-    }
-
-    &--h4,
-    &--h5,
-    &--h6 {
-      font-size: 0.8125rem;
-      line-height: 1.25rem;
-    }
+    @include sizes.define-headline-sizes();
   }
 }
 </style>
diff --git a/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue b/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue
@@ -25,6 +25,7 @@ defineSlots<{
 const { densityClass } = useDensity(props);
 const tabsContext = inject(TABS_INJECTION_KEY);
 const skeleton = useSkeletonContext(props);
+const sizeClass = computed(() => `onyx-tab--${tabsContext?.size.value}`);
 
 const tab = computed(() =>
   tabsContext?.headless.elements.tab.value({
@@ -35,13 +36,17 @@ const tab = computed(() =>
 </script>
 
 <template>
-  <OnyxSkeleton v-if="skeleton" :class="['onyx-tab-skeleton', densityClass]" v-bind="tab" />
+  <OnyxSkeleton
+    v-if="skeleton"
+    :class="['onyx-tab-skeleton', densityClass, sizeClass]"
+    v-bind="tab"
+  />
   <button
     v-else
     :class="[
       'onyx-tab',
-      'onyx-text--large',
       densityClass,
+      sizeClass,
       tab?.['aria-selected'] ? 'onyx-tab--selected' : '',
     ]"
     v-bind="tab"
@@ -72,12 +77,16 @@ const tab = computed(() =>
 
 <style lang="scss">
 @use "../../styles/mixins/layers.scss";
+@use "../../styles/mixins/sizes.scss";
 
 .onyx-tab,
 .onyx-tab-skeleton {
-  --onyx-tab-padding-vertical: var(--onyx-density-xs);
-  --onyx-tab-line-height: 1.75rem;
-  --onyx-tab-highlight-gap: var(--onyx-density-3xs);
+  @include layers.component() {
+    --onyx-tab-padding-vertical: var(--onyx-density-xs);
+    --onyx-tab-highlight-gap: var(--onyx-density-3xs);
+
+    @include sizes.define-headline-sizes();
+  }
 }
 
 .onyx-tab {
@@ -141,7 +150,6 @@ const tab = computed(() =>
       justify-content: center;
       gap: var(--onyx-density-xs);
       position: relative;
-      line-height: var(--onyx-tab-line-height);
     }
 
     &__panel {
@@ -151,10 +159,7 @@ const tab = computed(() =>
 
     &-skeleton {
       width: var(--onyx-density-4xl);
-      height: calc(
-        var(--onyx-tab-line-height) + 2 * var(--onyx-tab-padding-vertical) +
-          var(--onyx-tab-highlight-gap)
-      );
+      height: calc(1lh + 2 * var(--onyx-tab-padding-vertical) + var(--onyx-tab-highlight-gap));
       display: inline-block;
       vertical-align: middle;
     }

diff --git a/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx b/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx
@@ -85,6 +85,38 @@ test.describe("Screenshot tests (custom content)", () => {
   });
 });
 
+for (const type of ["default", "skeleton"] as const) {
+  test.describe(`Screenshot tests (sizes, ${type})`, () => {
+    executeMatrixScreenshotTest({
+      name: `Tabs (sizes, ${type})`,
+      columns: DENSITIES,
+      rows: ["h2", "h3", "h4"],
+      // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
+      disabledAccessibilityRules: ["color-contrast"],
+      component: (column, row) => {
+        return (
+          <OnyxTabs
+            label="Example tabs"
+            modelValue="tab-1"
+            density={column}
+            size={row}
+            skeleton={type === "skeleton"}
+          >
+            {Array.from({ length: 3 }, (_, index) => {
+              const id = index + 1;
+              return (
+                <OnyxTab value={`tab-${id}`} label={`Tab ${id}`}>
+                  Panel content {id}...
+                </OnyxTab>
+              );
+            })}
+          </OnyxTabs>
+        );
+      },
+    });
+  });
+}
+
 test.describe("Screenshot tests (overflow)", () => {
   executeMatrixScreenshotTest({
     name: "Tabs (overflow)",

diff --git a/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue b/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue
@@ -5,7 +5,9 @@ import { useDensity } from "../../composables/density";
 import { provideSkeletonContext } from "../../composables/useSkeletonState";
 import { TABS_INJECTION_KEY, type OnyxTabsProps, type TabsInjectionKey } from "./types";
 
-const props = defineProps<OnyxTabsProps<TValue>>();
+const props = withDefaults(defineProps<OnyxTabsProps<TValue>>(), {
+  size: "h2",
+});
 
 const emit = defineEmits<{
   /**
@@ -32,7 +34,11 @@ defineSlots<{
 const panelRef = ref<HTMLElement>();
 provideSkeletonContext(props);
 
-provide(TABS_INJECTION_KEY as TabsInjectionKey<TValue>, { headless, panelRef });
+provide(TABS_INJECTION_KEY as TabsInjectionKey<TValue>, {
+  headless,
+  panelRef,
+  size: toRef(props, "size"),
+});
 </script>
 
 <template>

diff --git a/packages/sit-onyx/src/components/OnyxTabs/types.ts b/packages/sit-onyx/src/components/OnyxTabs/types.ts
@@ -2,6 +2,7 @@ import type { createTabs } from "@sit-onyx/headless";
 import type { InjectionKey, Ref } from "vue";
 import type { DensityProp } from "../../composables/density";
 import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
+import type { HeadlineType } from "../OnyxHeadline/types";
 
 export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityProp &
   Partial<SkeletonProvidedProp> & {
@@ -17,6 +18,11 @@ export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityPro
      * If `true`, the tabs will be stretched to the full available width.
      */
     stretched?: boolean;
+    /**
+     * Tab font size. Note: This only affects the visual size of the tab font and has NO effect on the semantic meaning.
+     * Size will be aligned with the corresponding `OnyxHeadline` size.
+     */
+    size?: TabSize;
   };
 
 export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = InjectionKey<{
@@ -29,10 +35,16 @@ export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = Injecti
    * to maintain the correct HTML structure.
    */
   panelRef: Ref<HTMLElement | undefined>;
+  /**
+   * Tab size passed down from the parent so it can be set once for all tabs.
+   */
+  size: Ref<TabSize>;
 }>;
 
 /**
  * Injection key to provide relevant context data from the tabs parent to the
  * individual child tab components.
  */
 export const TABS_INJECTION_KEY = Symbol() as TabsInjectionKey;
+
+export type TabSize = Extract<HeadlineType, "h2" | "h3" | "h4">;
diff --git a/packages/sit-onyx/src/styles/mixins/sizes.scss b/packages/sit-onyx/src/styles/mixins/sizes.scss
@@ -15,3 +15,30 @@
     @content ($name, $size);
   }
 }
+
+/**
+* Mixin to define h1-h6 headline font size and line height.
+*/
+@mixin define-headline-sizes() {
+  &--h1 {
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+  }
+
+  &--h2 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  &--h3 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  &--h4,
+  &--h5,
+  &--h6 {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+  }
+}