feat(Skeleton): text wrapping (#2569)

- Fixes [#2518](#2518)
- Discussed with design ✅

Author: eirikbacker

packages/css/skeleton.css

@@ -19,30 +19,18 @@
   }
 
   &[data-variant='text'] {
-    animation: none;
     border-radius: var(--ds-border-radius-full);
-    height: auto;
-    position: relative; /* So we can position ::after */
-
-    /* Render with ::after so we can add some space to top and bottom */
-    &::after {
-      content: '';
-      animation: var(--dsc-skeleton-animation);
-      border-radius: inherit;
-      inset: 20% 0;
-      position: absolute;
-    }
-
-    &:empty::before {
-      content: '\00a0'; /* Add non breaking space if empty so we follow line height */
-    }
+    box-decoration-break: clone;
+    display: inline;
+    font-size: 0.8em; /* Scale down font to have larger gap between lines */
+    letter-spacing: 0.1em; /* But scale up letter-spacing to have circa same line-length */
   }
 
   /* When having children, let them define size */
   &:not(:empty) {
     width: fit-content;
     height: fit-content;
-    color: transparent !important;
+    color: transparent;
 
     & > * {
       visibility: hidden;

packages/react/src/components/loaders/Skeleton/Skeleton.mdx

@@ -23,7 +23,7 @@ Du kan bygge opp komponenter og seksjoner av siden din ved å bruke disse som by
 ### Skalering av komponenten
 
 Alle varianter av skeleton har `height` og `width` props, som kan brukes til å manuelt sette størrelser. Du kan oppgi størrelsene i `px`, `%`, eller andre enheter som kan settes direkte på style.
-For `Skeleton variant="text"` holder det ofte å sette kun `width`, da høyden automatisk skaleres etter tekst-størrelsen til `parent`-elementet.
+For `Skeleton variant="text"` holder det ofte å sette kun `width` til det antallet bokstaver du antar vil oppstå, da høyden automatisk skaleres etter tekstinnholdet.
 
 I de fleste tilfeller er manuell setting av høyde og bredde nok, men du kan også sette andre elementer til å rendres som skeleton, gjennom å bruke propen `asChild`. Dette er hovedsaklig tenkt brukt for typografi komponenter.
 
@@ -36,6 +36,6 @@ Skeleton vil også tilpasse seg etter `children` som du sender inn til komponent
 ## Text
 
 `Skeleton variant="text"` skalerer automatisk etter den lokale fontstørrelsen, enten den kommer fra `parent`, `children` , eller fordi typografi-komponenter er satt til Skeletons gjennom `asChild`-propen.
-For best mulig resultat anbefaler vi at du bruker flere `Skeleton variant="text"` komponenter for å representere en blokk med tekst, én for hver linje.
+For best mulig resultat anbefaler vi at du bruker flere `Skeleton variant="text"` med  `width` til det antallet bokstaver du antar vil oppstå.
 
 <Canvas of={SkeletonStories.TextExample} />

packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx

@@ -9,6 +9,14 @@ type Story = StoryObj<typeof Skeleton>;
 export default {
   title: 'Komponenter/Loaders/Skeleton',
   component: Skeleton,
+  parameters: {
+    a11y: {
+      config: {
+        // Disable a11y empty heading rule as we intentionally set aria-hidden="true" on the Skeleton component inside Headings
+        rules: [{ id: 'empty-heading', selector: ':has(.ds-skeleton)' }],
+      },
+    },
+  },
 } as Meta;
 
 export const Preview: Story = {
@@ -29,7 +37,7 @@ export const Components: StoryFn<typeof Text> = () => {
     >
       <Skeleton variant='circle' width='50px' height='50px' />
       <Skeleton variant='rectangle' width='100px' height='50px' />
-      <Skeleton variant='text' width='50px' height='16px' />
+      <Skeleton variant='text' width='10' />
     </div>
   );
 };
@@ -51,13 +59,11 @@ export const UsageExample: StoryFn<typeof Skeleton> = () => {
         }}
       >
         <Skeleton variant='circle' width='30px' height='30px' />
-        <Heading asChild size='md'>
+        <Heading size='md'>
           <Skeleton variant='text'>En medium tittel</Skeleton>
         </Heading>
       </div>
-      <Skeleton variant='text' />
-      <Skeleton variant='text' />
-      <Skeleton variant='text' width='80%' />
+      <Skeleton variant='text' width='140' />
     </div>
   );
 };
@@ -79,16 +85,16 @@ export const Children: StoryFn<typeof Skeleton> = () => {
 export const As: StoryFn<typeof Skeleton> = () => {
   return (
     <>
-      <Heading size='lg' asChild>
+      <Heading size='lg'>
         <Skeleton variant='text'>Her er en heading</Skeleton>
       </Heading>
-      <Paragraph asChild>
+      <Paragraph>
         <Skeleton variant='text'>
           Her er en paragraf-komponent som blir rendret som en Skeleton
           variant="text".
         </Skeleton>
       </Paragraph>
-      <Paragraph asChild>
+      <Paragraph>
         <Skeleton variant='text'>
           Se hvordan Skeleton da overskriver stylingen til det enkelte
           elementet.
@@ -98,27 +104,21 @@ export const As: StoryFn<typeof Skeleton> = () => {
   );
 };
 
-export const TextExample: StoryFn<typeof Text> = () => {
-  return (
-    <>
-      <div style={{ display: 'flex', gap: '20px' }}>
-        <div style={{ width: '140px' }}>
-          <Heading size='md'>Heading</Heading>
-          <Paragraph size='sm'>
-            Her er en paragraf som går over flere linjer
-          </Paragraph>
-        </div>
-        <div style={{ width: '140px' }}>
-          <Heading size='md' asChild>
-            <Skeleton variant='text'>Heading</Skeleton>
-          </Heading>
-          <Paragraph size='sm'>
-            <Skeleton variant='text' />
-            <Skeleton variant='text' />
-            <Skeleton variant='text' width={80} />
-          </Paragraph>
-        </div>
-      </div>
-    </>
-  );
-};
+export const TextExample: StoryFn<typeof Text> = () => (
+  <div style={{ display: 'flex', gap: '20px', maxWidth: 300 }}>
+    <div>
+      <Heading size='md'>Heading</Heading>
+      <Paragraph size='sm'>
+        Her er en paragraf som går over flere linjer
+      </Paragraph>
+    </div>
+    <div>
+      <Heading size='md'>
+        <Skeleton variant='text'>Heading</Skeleton>
+      </Heading>
+      <Paragraph size='sm'>
+        <Skeleton variant='text' width={40} />
+      </Paragraph>
+    </div>
+  </div>
+);

packages/react/src/components/loaders/Skeleton/Skeleton.tsx

@@ -20,13 +20,18 @@ export type SkeletonProps = {
    * @default 'rectangle'
    * */
   variant?: 'rectangle' | 'circle' | 'text';
-} & HTMLAttributes<HTMLSpanElement>;
+} & HTMLAttributes<HTMLSpanElement> &
+  (
+    | { variant: 'text'; characters?: number }
+    | { variant?: 'rectangle' | 'circle'; characters?: never }
+  );
 
 export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
   function Skeleton(
     {
       asChild,
       className,
+      children,
       height,
       style,
       variant = 'rectangle',
@@ -36,6 +41,8 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
     ref,
   ) {
     const Component = asChild ? Slot : 'span';
+    const isText = variant === 'text';
+    const childrenText = isText && '-'.repeat(Number(width) || 1); // s followed by a &shy; makes the most average character length
     const animationRef = useSynchronizedAnimation<HTMLSpanElement>(
       'ds-skeleton-opacity-fade',
     );
@@ -47,9 +54,11 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
         className={cl('ds-skeleton', className)}
         data-variant={variant}
         ref={mergedRefs}
-        style={{ width, height, ...style }}
+        style={isText ? style : { width, height, ...style }}
         {...rest}
-      />
+      >
+        {children || childrenText}
+      </Component>
     );
   },
 );