fix: skeleton fill

Author: alexcambose

packages/component-library/src/Skeleton/index.module.scss

@@ -11,13 +11,13 @@
   }
 }
 
-.fullSkeleton {
-  display: inline-block;
-}
-
 .skeleton {
   border-radius: theme.border-radius("lg");
 
+  .fullSkeleton {
+    width: 100%;
+  }
+
   .skeletonInner {
     display: inline flow-root;
     width: calc(theme.spacing(1) * var(--skeleton-width));

packages/component-library/src/Skeleton/index.stories.tsx

@@ -31,6 +31,17 @@ export const Skeleton = {
   args: {
     label: "Loading",
     width: 20,
-    fill: false,
   },
 } satisfies StoryObj<typeof SkeletonComponent>;
+
+export const SkeletonFill: StoryObj<typeof SkeletonComponent> = {
+  render: (args) => (
+    <div style={{ width: "100vw" }}>
+      <SkeletonComponent {...args} />
+    </div>
+  ),
+  args: {
+    label: "Loading",
+    fill: true,
+  },
+};

packages/component-library/src/Skeleton/index.tsx

@@ -12,21 +12,15 @@ type Props = Omit<ComponentProps<"span">, "children"> & {
 };
 
 export const Skeleton = ({ className, label, width, fill, ...props }: Props) =>
-  fill ? (
-    <span className={clsx(styles.fullSkeleton, className)} {...props}>
-      <Label>{label ?? "Loading"}</Label>
-    </span>
-  ) : (
     <span
       data-fill-width={width === undefined ? "" : undefined}
       {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
-      className={clsx(styles.skeleton, { [className ?? ""]: fill })}
+      className={clsx(styles.skeleton, { [styles.fullSkeleton ?? '']: fill }, { [className ?? ""]: fill })}
     >
       <span className={clsx(styles.skeletonInner, className)} {...props}>
         <Label>{label ?? "Loading"}</Label>
       </span>
     </span>
-  );
 
 const Label = ({ children }: { children: string | undefined }) => (
   <span className={styles.skeletonLabel}>{children ?? "Loading"}</span>