rename visualSize to showAs

SchwarzIT · Jan 23, 2025 · 258aaad · 258aaad
1 parent 1075823
commit 258aaad
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/.changeset/great-walls-juggle.md b/.changeset/great-walls-juggle.md
@@ -2,4 +2,4 @@
 "sit-onyx": minor
 ---
 
-feat(OnyxHeadline): support `visualSize` property
+feat(OnyxHeadline): support `showAs` property
diff --git a/apps/docs/src/.vitepress/components/OnyxTypography.vue b/apps/docs/src/.vitepress/components/OnyxTypography.vue
@@ -76,7 +76,7 @@ const getTextSizeClass = (fontSize?: TextSize) => {
           <OnyxHeadline
             is="h3"
             v-else
-            :visual-size="variable.htmlTag as OnyxHeadlineProps['visualSize']"
+            :visual-size="variable.htmlTag as OnyxHeadlineProps['showAs']"
             :monospace="isMonospace"
           >
             {{ previewText }}

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

diff --git a/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue b/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue
@@ -22,7 +22,7 @@ const { t } = injectI18n();
 const skeleton = useSkeletonContext(props);
 
 const normalizedHash = computed(() => (props.hash ? normalizeUrlHash(props.hash) : undefined));
-const visualSize = computed(() => props.visualSize ?? props.is);
+const showAs = computed(() => props.showAs ?? props.is);
 
 const copyLink = async (hash: string) => {
   const { origin, pathname, search } = window.location;
@@ -34,14 +34,14 @@ const copyLink = async (hash: string) => {
 <template>
   <OnyxSkeleton
     v-if="skeleton"
-    :class="['onyx-headline-skeleton', `onyx-headline-skeleton--${visualSize}`]"
+    :class="['onyx-headline-skeleton', `onyx-headline-skeleton--${showAs}`]"
   />
 
   <component
     :is="props.is"
     v-else
     :id="normalizedHash"
-    :class="['onyx-component', 'onyx-headline', `onyx-headline--${visualSize}`]"
+    :class="['onyx-component', 'onyx-headline', `onyx-headline--${showAs}`]"
   >
     <a
       v-if="normalizedHash"

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?: Exclude<HeadlineType, "h5" | "h6">;
+  showAs?: 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.