feat(Skeleton): 子要素によって変化しないSkeletonを追加

.changeset/clean-toys-taste.md

@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+feat(Skeleton): 子要素によって変化しないSkeletonを追加

packages/for-ui/src/skeleton/Skeleton.stories.tsx

@@ -21,6 +21,18 @@ export default {
   },
 } as Meta;
 
+export const WithoutChildren = () => (
+  <div className="flex flex-col gap-4">
+    <Skeleton />
+    <Skeleton size="xs" />
+    <Skeleton size="s" />
+    <Skeleton size="r" />
+    <Skeleton size="xr" />
+    <Skeleton size="l" />
+    <Skeleton size="xl" />
+  </div>
+);
+
 export const WithText = () => {
   const [loading, setLoading] = React.useState(false);
   React.useEffect(() => {

packages/for-ui/src/skeleton/Skeleton.tsx

@@ -1,14 +1,41 @@
 import { Children, cloneElement, FC, Fragment, isValidElement, ReactNode } from 'react';
 import MuiSkeleton, { SkeletonProps as MuiSkeletonProps } from '@mui/material/Skeleton';
 import { fsx } from '../system/fsx';
+import { TextProps } from '../text';
 
 export type SkeletonProps = MuiSkeletonProps & {
   loading?: boolean;
   className?: string;
   count?: number;
+
+  /**
+   * テキストの代わりに表示する場合はテキストのサイズを指定
+   */
+  size?: Exclude<TextProps<'span'>['size'], 'inherit'>;
 };
 
-export const Skeleton: FC<SkeletonProps> = ({ loading = false, count = 1, className, children, ...rest }) => {
+export const Skeleton: FC<SkeletonProps> = ({ loading = false, count = 1, className, children, size, ...rest }) => {
+  if (!children) {
+    return (
+      <MuiSkeleton
+        variant="rounded"
+        className={fsx(
+          `bg-shade-medium-disabled h-4 w-full rounded`,
+          size &&
+            {
+              xs: `h-2.5 my-[.1875rem]`,
+              s: `h-3 my-1`,
+              r: `h-3.5 my-[.3125rem]`,
+              xr: `h-4 my-1.5`,
+              l: `h-5 my-1.5`,
+              xl: `h-6 my-2`,
+            }[size],
+          className,
+        )}
+        {...rest}
+      />
+    );
+  }
   if (loading) {
     return (
       <>