fix(Skeleton): text firefox (#2600)

- Fixes
https://designsystemet.slack.com/archives/C05U1MNKYCX/p1728551307551839?thread_ts=1728548967.262829&cid=C05U1MNKYCX

---------

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>

Author: eirikbacker

packages/css/skeleton.css

@@ -21,9 +21,16 @@
   &[data-variant='text'] {
     border-radius: var(--ds-border-radius-full);
     box-decoration-break: clone;
+    color: transparent;
     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 */
+    user-select: none; /* Prevent text selection */
+
+    &:empty::before {
+      content: attr(data-text); /* Only fill with fallback text if empty */
+      word-break: break-word; /* Enable text wrapping */
+    }
   }
 
   /* When having children, let them define size */

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

@@ -25,10 +25,6 @@ Du kan bygge opp komponenter og seksjoner av siden din ved å bruke disse som by
 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` 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.
-
-<Canvas of={SkeletonStories.As} />
-
 Skeleton vil også tilpasse seg etter `children` som du sender inn til komponenten, men dette vil resultere i en høyde og bredde som matcher summen av samtlige barn.
 
 <Canvas of={SkeletonStories.Children} />
@@ -38,4 +34,4 @@ Skeleton vil også tilpasse seg etter `children` som du sender inn til komponent
 `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"` med  `width` til det antallet bokstaver du antar vil oppstå.
 
-<Canvas of={SkeletonStories.TextExample} />
+<Canvas of={SkeletonStories.Text} />

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

@@ -21,8 +21,8 @@ export default {
 
 export const Preview: Story = {
   args: {
-    width: '200px',
-    height: '100px',
+    width: 200,
+    height: 100,
   },
 };
 
@@ -37,7 +37,9 @@ export const Components: StoryFn<typeof Text> = () => {
     >
       <Skeleton variant='circle' width='50px' height='50px' />
       <Skeleton variant='rectangle' width='100px' height='50px' />
-      <Skeleton variant='text' width='10' />
+      <Paragraph>
+        <Skeleton variant='text' width='10' />
+      </Paragraph>
     </div>
   );
 };
@@ -46,7 +48,7 @@ export const UsageExample: StoryFn<typeof Skeleton> = () => {
   return (
     <div
       style={{
-        width: '400px',
+        maxWidth: 400,
       }}
     >
       <Skeleton height='150px' />
@@ -82,39 +84,17 @@ export const Children: StoryFn<typeof Skeleton> = () => {
   );
 };
 
-export const As: StoryFn<typeof Skeleton> = () => {
-  return (
-    <>
-      <Heading size='lg'>
-        <Skeleton variant='text'>Her er en heading</Skeleton>
-      </Heading>
-      <Paragraph>
-        <Skeleton variant='text'>
-          Her er en paragraf-komponent som blir rendret som en Skeleton
-          variant="text".
-        </Skeleton>
-      </Paragraph>
-      <Paragraph>
-        <Skeleton variant='text'>
-          Se hvordan Skeleton da overskriver stylingen til det enkelte
-          elementet.
-        </Skeleton>
-      </Paragraph>
-    </>
-  );
-};
-
-export const TextExample: StoryFn<typeof Text> = () => (
+export const Text: StoryFn<typeof Skeleton> = () => (
   <div style={{ display: 'flex', gap: '20px', maxWidth: 300 }}>
-    <div>
-      <Heading size='md'>Heading</Heading>
+    <div style={{ flex: '1 1 200px' }}>
+      <Heading size='md'>En tittel</Heading>
       <Paragraph size='sm'>
         Her er en paragraf som går over flere linjer
       </Paragraph>
     </div>
-    <div>
+    <div style={{ flex: '1 1 200px' }}>
       <Heading size='md'>
-        <Skeleton variant='text'>Heading</Skeleton>
+        <Skeleton variant='text'>En tittel</Skeleton>
       </Heading>
       <Paragraph size='sm'>
         <Skeleton variant='text' width={40} />

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

@@ -31,7 +31,6 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
     {
       asChild,
       className,
-      children,
       height,
       style,
       variant = 'rectangle',
@@ -42,7 +41,6 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
   ) {
     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',
     );
@@ -52,13 +50,12 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
       <Component
         aria-hidden='true'
         className={cl('ds-skeleton', className)}
+        data-text={isText ? '-'.repeat(Number(width) || 1) : undefined}
         data-variant={variant}
         ref={mergedRefs}
         style={isText ? style : { width, height, ...style }}
         {...rest}
-      >
-        {children || childrenText}
-      </Component>
+      />
     );
   },
 );