From 5252d7c35cc04c23795fbd167efe2acbc150db28 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 17 Sep 2024 10:38:41 +0200
Subject: [PATCH] fix(Skeleton): css alignment

---
 packages/css/skeleton.css                     | 73 +++++++++----------
 .../loaders/Skeleton/Circle/Circle.test.tsx   | 15 ----
 .../loaders/Skeleton/Circle/Circle.tsx        | 44 -----------
 .../Skeleton/Rectangle/Rectangle.test.tsx     | 15 ----
 .../loaders/Skeleton/Rectangle/Rectangle.tsx  | 44 -----------
 .../loaders/Skeleton/Skeletons.test.tsx       | 31 ++++++++
 .../components/loaders/Skeleton/Skeletons.tsx | 63 ++++++++++++++++
 .../loaders/Skeleton/Text/Text.test.tsx       | 15 ----
 .../components/loaders/Skeleton/Text/Text.tsx | 44 -----------
 .../src/components/loaders/Skeleton/index.ts  | 30 ++------
 10 files changed, 136 insertions(+), 238 deletions(-)
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Circle/Circle.test.tsx
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Circle/Circle.tsx
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.test.tsx
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.tsx
 create mode 100644 packages/react/src/components/loaders/Skeleton/Skeletons.test.tsx
 create mode 100644 packages/react/src/components/loaders/Skeleton/Skeletons.tsx
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Text/Text.test.tsx
 delete mode 100644 packages/react/src/components/loaders/Skeleton/Text/Text.tsx

diff --git a/packages/css/skeleton.css b/packages/css/skeleton.css
index 4699cc62f2..006645a4e4 100644
--- a/packages/css/skeleton.css
+++ b/packages/css/skeleton.css
@@ -2,58 +2,55 @@
   --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);
   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;
-}
+  &[data-type='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));
-}
+  &[data-type='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-type='text'] {
+    width: 100%;
+    height: auto;
+    transform-origin: 0 55%;
+    transform: scale(1, 0.6);
+    border-radius: var(--ds-border-radius-full);
 
-.ds-skeleton--text:empty::before {
-  content: '\00a0';
-}
+    &:empty::before {
+      content: '\00a0';
+    }
+  }
 
-.ds-skeleton--has-children {
-  width: fit-content;
-  height: fit-content;
-  color: transparent !important;
-}
+  /* When having children, let them define size */
+  &:not(:empty) {
+    width: fit-content;
+    height: fit-content;
+    color: transparent !important;
 
-.ds-skeleton--has-children > * {
-  visibility: hidden;
-}
+    & > * {
+      visibility: hidden;
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-skeleton {
-    --dsc-skeleton-animation-duration: 1.6s;
+  @media (prefers-reduced-motion: reduce) {
+    & {
+      --dsc-skeleton-animation-duration: 1.6s;
+    }
   }
 }
 
 @keyframes ds-skeleton-opacity-fade {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
+  to {
     opacity: 0.4;
   }
 }
diff --git a/packages/react/src/components/loaders/Skeleton/Circle/Circle.test.tsx b/packages/react/src/components/loaders/Skeleton/Circle/Circle.test.tsx
deleted file mode 100644
index d877c49e1d..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Circle/Circle.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { Skeleton } from '..';
-
-beforeAll(() => {
-  document.getAnimations = () => [];
-});
-
-describe('Skeleton.Circle', () => {
-  it('should render skeleton', () => {
-    render(<Skeleton.Circle data-testid={'skeleton-circle'} />);
-
-    expect(screen.getByTestId('skeleton-circle'));
-  });
-});
diff --git a/packages/react/src/components/loaders/Skeleton/Circle/Circle.tsx b/packages/react/src/components/loaders/Skeleton/Circle/Circle.tsx
deleted file mode 100644
index fb417114ad..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Circle/Circle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-
-import { useSynchronizedAnimation } from '../../../../utilities';
-
-export type CircleProps = {
-  /** The width of the component */
-  width?: string | number;
-  /** The height of the component */
-  height?: string | number;
-} & HTMLAttributes<HTMLDivElement>;
-
-/**  Skeleton component used for indicating loading elements of circular shape */
-export const Circle = ({
-  width,
-  height,
-  className,
-  children,
-  style,
-  ...rest
-}: CircleProps) => {
-  const ref = useSynchronizedAnimation<HTMLDivElement>(
-    'ds-skeleton-opacity-fade',
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={cl(
-        'ds-skeleton',
-        'ds-skeleton--circle',
-        Boolean(children) && 'ds-skeleton--has-children',
-        className,
-      )}
-      style={{ width, height, ...style }}
-      aria-hidden
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-Circle.displayName = 'SkeletonCircle';
diff --git a/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.test.tsx b/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.test.tsx
deleted file mode 100644
index 4448a56891..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { Skeleton } from '..';
-
-beforeAll(() => {
-  document.getAnimations = () => [];
-});
-
-describe('Skeleton.Rectangle', () => {
-  it('should render skeleton', () => {
-    render(<Skeleton.Rectangle data-testid={'skeleton-rectangle'} />);
-
-    expect(screen.getByTestId('skeleton-rectangle'));
-  });
-});
diff --git a/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.tsx b/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.tsx
deleted file mode 100644
index 9afccb73ca..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-
-import { useSynchronizedAnimation } from '../../../../utilities';
-
-export type RectangleProps = {
-  /** The width of the component */
-  width?: string | number;
-  /** The height of the component */
-  height?: string | number;
-} & HTMLAttributes<HTMLDivElement>;
-
-/**  Skeleton component used for indicating loading elements of rectangle shape */
-export const Rectangle = ({
-  width,
-  height,
-  className,
-  children,
-  style,
-  ...rest
-}: RectangleProps) => {
-  const ref = useSynchronizedAnimation<HTMLDivElement>(
-    'ds-skeleton-opacity-fade',
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={cl(
-        'ds-skeleton',
-        'ds-skeleton--rectangle',
-        Boolean(children) && 'ds-skeleton--has-children',
-        className,
-      )}
-      style={{ width, height, ...style }}
-      aria-hidden
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-Rectangle.displayName = 'SkeletonRectangle';
diff --git a/packages/react/src/components/loaders/Skeleton/Skeletons.test.tsx b/packages/react/src/components/loaders/Skeleton/Skeletons.test.tsx
new file mode 100644
index 0000000000..a4e09f821b
--- /dev/null
+++ b/packages/react/src/components/loaders/Skeleton/Skeletons.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+
+import { Skeleton } from '.';
+
+beforeAll(() => {
+  document.getAnimations = () => [];
+});
+
+describe('Skeleton.Text', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Text data-testid={'skeleton-text'} />);
+
+    expect(screen.getByTestId('skeleton-text'));
+  });
+});
+
+describe('Skeleton.Circle', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Circle data-testid={'skeleton-circle'} />);
+
+    expect(screen.getByTestId('skeleton-circle'));
+  });
+});
+
+describe('Skeleton.Rectangle', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Rectangle data-testid={'skeleton-rectangle'} />);
+
+    expect(screen.getByTestId('skeleton-rectangle'));
+  });
+});
diff --git a/packages/react/src/components/loaders/Skeleton/Skeletons.tsx b/packages/react/src/components/loaders/Skeleton/Skeletons.tsx
new file mode 100644
index 0000000000..7543257b45
--- /dev/null
+++ b/packages/react/src/components/loaders/Skeleton/Skeletons.tsx
@@ -0,0 +1,63 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { type ForwardedRef, type HTMLAttributes, forwardRef } from 'react';
+
+import { useSynchronizedAnimation } from '../../../utilities';
+
+type SkeletonProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** The width of the component */
+  width?: string | number;
+  /** The height of the component */
+  height?: string | number;
+} & HTMLAttributes<HTMLDivElement>;
+
+const render = (
+  type: string,
+  { asChild, className, width, height, style, ...rest }: SkeletonProps,
+  ref: ForwardedRef<HTMLSpanElement>,
+) => {
+  const Component = asChild ? Slot : 'span';
+  const animationRef = useSynchronizedAnimation<HTMLSpanElement>(
+    'ds-skeleton-opacity-fade',
+  );
+  const mergedRefs = useMergeRefs([animationRef, ref]);
+
+  return (
+    <Component
+      aria-hidden='true'
+      className={cl('ds-skeleton', className)}
+      data-type={type}
+      ref={mergedRefs}
+      style={{ width, height, ...style }}
+      {...rest}
+    />
+  );
+};
+
+export type SkeletonCircleProps = SkeletonProps;
+export const SkeletonCircle = forwardRef<HTMLSpanElement, SkeletonCircleProps>(
+  function SkeletonCircle(props, ref) {
+    return render('circle', props, ref);
+  },
+);
+
+export type SkeletonRectangleProps = SkeletonProps;
+export const SkeletonRectangle = forwardRef<
+  HTMLSpanElement,
+  SkeletonRectangleProps
+>(function SkeletonRectangle(props, ref) {
+  return render('rectangle', props, ref);
+});
+
+export type SkeletonTextProps = SkeletonProps;
+export const SkeletonText = forwardRef<HTMLSpanElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    return render('text', props, ref);
+  },
+);
diff --git a/packages/react/src/components/loaders/Skeleton/Text/Text.test.tsx b/packages/react/src/components/loaders/Skeleton/Text/Text.test.tsx
deleted file mode 100644
index 9b89c32e2c..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Text/Text.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { Skeleton } from '..';
-
-beforeAll(() => {
-  document.getAnimations = () => [];
-});
-
-describe('Skeleton.Text', () => {
-  it('should render skeleton', () => {
-    render(<Skeleton.Text data-testid={'skeleton-text'} />);
-
-    expect(screen.getByTestId('skeleton-text'));
-  });
-});
diff --git a/packages/react/src/components/loaders/Skeleton/Text/Text.tsx b/packages/react/src/components/loaders/Skeleton/Text/Text.tsx
deleted file mode 100644
index 63b738885d..0000000000
--- a/packages/react/src/components/loaders/Skeleton/Text/Text.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-
-import { useSynchronizedAnimation } from '../../../../utilities';
-
-export type TextProps = {
-  /** The width of the component */
-  width?: string | number;
-  /** The height of the component */
-  height?: string | number;
-} & HTMLAttributes<HTMLDivElement>;
-
-/**  Skeleton component used for indicating loading elements of text */
-export const Text = ({
-  width,
-  height,
-  className,
-  style,
-  children,
-  ...rest
-}: TextProps) => {
-  const ref = useSynchronizedAnimation<HTMLDivElement>(
-    'ds-skeleton-opacity-fade',
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={cl(
-        'ds-skeleton',
-        'ds-skeleton--text',
-        Boolean(children) && 'ds-skeleton--has-children',
-        className,
-      )}
-      style={{ width, height, ...style }}
-      aria-hidden
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-Text.displayName = 'SkeletonText';
diff --git a/packages/react/src/components/loaders/Skeleton/index.ts b/packages/react/src/components/loaders/Skeleton/index.ts
index 90892b9829..596f02e877 100644
--- a/packages/react/src/components/loaders/Skeleton/index.ts
+++ b/packages/react/src/components/loaders/Skeleton/index.ts
@@ -1,15 +1,4 @@
-import {
-  Circle as SkeletonCircle,
-  type CircleProps as SkeletonCircleProps,
-} from './Circle/Circle';
-import {
-  Rectangle as SkeletonRectangle,
-  type RectangleProps as SkeletonRectangleProps,
-} from './Rectangle/Rectangle';
-import {
-  Text as SkeletonText,
-  type TextProps as SkeletonTextProps,
-} from './Text/Text';
+import { SkeletonCircle, SkeletonRectangle, SkeletonText } from './Skeletons';
 
 /**
  * Represent a draft of page while the content loads. Mix different skeleton components to create your layout.
@@ -20,16 +9,7 @@ import {
  *   <Skeleton.Text />
  *   <Skeleton.Rectangle />
  */
-type SkeletonComponent = {
-  /**  Skeleton component used for indicating loading elements of circular shape */
-  Circle: typeof SkeletonCircle;
-  /**  Skeleton component used for indicating loading elements of rectangle shape */
-  Rectangle: typeof SkeletonRectangle;
-  /**  Skeleton component used for indicating loading elements of text */
-  Text: typeof SkeletonText;
-};
-
-const Skeleton: SkeletonComponent = {
+const Skeleton = {
   Circle: SkeletonCircle,
   Rectangle: SkeletonRectangle,
   Text: SkeletonText,
@@ -39,5 +19,9 @@ Skeleton.Circle.displayName = 'Skeleton.Circle';
 Skeleton.Rectangle.displayName = 'Skeleton.Rectangle';
 Skeleton.Text.displayName = 'Skeleton.Text';
 
-export type { SkeletonCircleProps, SkeletonRectangleProps, SkeletonTextProps };
+export type {
+  SkeletonCircleProps,
+  SkeletonRectangleProps,
+  SkeletonTextProps,
+} from './Skeletons';
 export { Skeleton, SkeletonCircle, SkeletonRectangle, SkeletonText };