fix(Skeleton): css alignment (#2435)

- Part of #2295

---------

Co-authored-by: Tobias Barsnes <[email protected]>

.changeset/six-trees-tie.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Skeleton: Replace Skeleton.Text, Skeleton.Circle and Skeleton.Rectangle with <Skeleton variant="">

apps/theme/components/Previews/Components/Components.tsx

@@ -405,11 +405,11 @@ export const Components = () => {
       </div>
       <div className={cl(classes.card, classes.loaders)}>
         <div className={classes.loadersRest}>
-          <Skeleton.Circle width='70px' height='70px' />
-          <Skeleton.Rectangle height='70px' width='100px' />
+          <Skeleton variant='circle' width='70px' height='70px' />
+          <Skeleton variant='rectangle' height='70px' width='100px' />
         </div>
-        <Skeleton.Text width='100%' />
-        <Skeleton.Text width='100%' />
+        <Skeleton variant='text' />
+        <Skeleton variant='text' />
         <div>
           <Spinner title='laster innhold' size='md' />
           <Spinner title='laster innhold' size='md' color='accent' />

packages/css/skeleton.css

@@ -2,58 +2,50 @@
   --dsc-skeleton-animation-duration: 0.8s;
   --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
 
+  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
+  background: var(--dsc-skeleton-background);
+  border-radius: min(1rem, var(--ds-border-radius-lg));
+  box-sizing: border-box;
+  display: block;
   height: 1.3em;
   pointer-events: none;
   user-select: none;
-  background-color: var(--dsc-skeleton-background);
-  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-}
-
-.ds-skeleton--circle {
-  width: 1.3em;
-  border-radius: var(--ds-border-radius-full);
-  aspect-ratio: 1 / 1;
-}
-
-.ds-skeleton--rectangle {
   width: 100%;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-}
 
-.ds-skeleton--text {
-  width: 100%;
-  height: auto;
-  transform-origin: 0 55%;
-  transform: scale(1, 0.6);
-  border-radius: var(--ds-border-radius-full);
-}
+  &[data-variant='circle'] {
+    aspect-ratio: 1 / 1;
+    border-radius: var(--ds-border-radius-full);
+    width: 1.3em;
+  }
 
-.ds-skeleton--text:empty::before {
-  content: '\00a0';
-}
+  &[data-variant='text'] {
+    border-radius: var(--ds-border-radius-full);
+    height: auto;
+    margin-block: calc(1lh - 1em);
 
-.ds-skeleton--has-children {
-  width: fit-content;
-  height: fit-content;
-  color: transparent !important;
-}
+    &:empty::before {
+      content: '\00a0';
+    }
+  }
 
-.ds-skeleton--has-children > * {
-  visibility: hidden;
-}
+  /* When having children, let them define size */
+  &:not(:empty) {
+    width: fit-content;
+    height: fit-content;
+    color: transparent !important;
+
+    & > * {
+      visibility: hidden;
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-skeleton {
+  @media (prefers-reduced-motion: reduce) {
     --dsc-skeleton-animation-duration: 1.6s;
   }
 }
 
 @keyframes ds-skeleton-opacity-fade {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
+  to {
     opacity: 0.4;
   }
 }

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

@@ -15,15 +15,15 @@ import * as SkeletonStories from './Skeleton.stories';
 
 <Canvas of={SkeletonStories.Components} />
 
-Skeleton kommer i tre ulike varianter: `Skeleton.Circle`, `Skeleton.Rectangle`, og `Skeleton.Text`
+Skeleton kommer i tre ulike varianter: `Skeleton variant="rectangle"`, `Skeleton variant="circle"`, og `Skeleton variant="text"`
 Du kan bygge opp komponenter og seksjoner av siden din ved å bruke disse som byggeklosser. Målet er at resultatet skal etterligne innholdet som lastes.
 
 <Canvas of={SkeletonStories.UsageExample} />
 
 ### 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.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`, da høyden automatisk skaleres etter tekst-størrelsen til `parent`-elementet.
 
 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.
 
@@ -35,7 +35,7 @@ Skeleton vil også tilpasse seg etter `children` som du sender inn til komponent
 
 ## Text
 
-`Skeleton.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.Text` komponenter for å representere en blokk med tekst, én for hver linje.
+`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.
 
 <Canvas of={SkeletonStories.TextExample} />

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

@@ -4,11 +4,11 @@ import { Button, Heading, Paragraph } from '../../';
 
 import { Skeleton } from '.';
 
-type Story = StoryObj<typeof Skeleton.Rectangle>;
+type Story = StoryObj<typeof Skeleton>;
 
 export default {
   title: 'Komponenter/Loaders/Skeleton',
-  component: Skeleton.Rectangle,
+  component: Skeleton,
 } as Meta;
 
 export const Preview: Story = {
@@ -27,9 +27,9 @@ export const Components: StoryFn<typeof Text> = () => {
         gap: '20px',
       }}
     >
-      <Skeleton.Circle width='50px' height='50px' />
-      <Skeleton.Rectangle width='100px' height='50px' />
-      <Skeleton.Text width='50px' height='16px' />
+      <Skeleton variant='circle' width='50px' height='50px' />
+      <Skeleton variant='rectangle' width='100px' height='50px' />
+      <Skeleton variant='text' width='50px' height='16px' />
     </div>
   );
 };
@@ -41,7 +41,7 @@ export const UsageExample: StoryFn<typeof Skeleton> = () => {
         width: '400px',
       }}
     >
-      <Skeleton.Rectangle width='100%' height='150px' />
+      <Skeleton height='150px' />
       <div
         style={{
           display: 'flex',
@@ -50,50 +50,49 @@ export const UsageExample: StoryFn<typeof Skeleton> = () => {
           padding: '5px 0 5px 0',
         }}
       >
-        <Skeleton.Circle width='30px' height='30px' />
+        <Skeleton variant='circle' width='30px' height='30px' />
         <Heading asChild size='md'>
-          <Skeleton.Text>En medium tittel</Skeleton.Text>
+          <Skeleton variant='text'>En medium tittel</Skeleton>
         </Heading>
       </div>
-      <Skeleton.Text width='100%' />
-      <Skeleton.Text width='100%' />
-      <Skeleton.Text width='80%' />
+      <Skeleton variant='text' />
+      <Skeleton variant='text' />
+      <Skeleton variant='text' width='80%' />
     </div>
   );
 };
 
 export const Children: StoryFn<typeof Skeleton> = () => {
   return (
-    <>
-      <Skeleton.Text>
-        <Paragraph>
-          Her er en tekst som blir sendt inn som barn av en Skeleton.Text.
-        </Paragraph>
-        <Paragraph>
-          Se hvordan Skeleton da dekker den samlede bredden og høyden til barna.
-        </Paragraph>
-        <Button>Knapp</Button>
-      </Skeleton.Text>
-    </>
+    <Skeleton variant='rectangle'>
+      <Paragraph>
+        Her er en tekst som blir sendt inn som barn av en Skeleton.
+      </Paragraph>
+      <Paragraph>
+        Se hvordan Skeleton da dekker den samlede bredden og høyden til barna.
+      </Paragraph>
+      <Button>Knapp</Button>
+    </Skeleton>
   );
 };
 
 export const As: StoryFn<typeof Skeleton> = () => {
   return (
     <>
       <Heading size='lg' asChild>
-        <Skeleton.Text>Her er en heading</Skeleton.Text>
+        <Skeleton variant='text'>Her er en heading</Skeleton>
       </Heading>
       <Paragraph asChild>
-        <Skeleton.Text>
-          Her er en paragraf-komponent som blir rendret som en Skeleton.Text.
-        </Skeleton.Text>
+        <Skeleton variant='text'>
+          Her er en paragraf-komponent som blir rendret som en Skeleton
+          variant="text".
+        </Skeleton>
       </Paragraph>
       <Paragraph asChild>
-        <Skeleton.Text>
+        <Skeleton variant='text'>
           Se hvordan Skeleton da overskriver stylingen til det enkelte
           elementet.
-        </Skeleton.Text>
+        </Skeleton>
       </Paragraph>
     </>
   );
@@ -111,13 +110,13 @@ export const TextExample: StoryFn<typeof Text> = () => {
         </div>
         <div style={{ width: '140px' }}>
           <Heading size='md' asChild>
-            <Skeleton.Text>Heading</Skeleton.Text>
+            <Skeleton variant='text'>Heading</Skeleton>
           </Heading>
           <Paragraph size='sm'>
-            <Skeleton.Text width='100%' />
+            <Skeleton variant='text' />
 
-            <Skeleton.Text width='100%' />
-            <Skeleton.Text width='40%' />
+            <Skeleton variant='text' />
+            <Skeleton variant='text' />
           </Paragraph>
         </div>
       </div>