Merge pull request #143 from 8845musign/add-spacing-alias-to-flex

Add gap alias prop to Stack Component
ubie-oss · Nov 18, 2024 · 8751851 · 8751851
2 parents adf3a7b + 4de6e56
commit 8751851
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { cloneElement, isValidElement } from 'react';
+import { isValidElement, cloneElement, useMemo } from 'react';
 import styles from './Flex.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
 import { AlignItems, CSSWitdh, FlexDirection, JustifyContent, Spacing, WidthProps } from '../../types/style';
@@ -17,11 +17,6 @@ type Props = {
    * @default div
    */
   as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
-  /**
-   * 子要素同士の間隔。指定しない場合は0
-   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
-   */
-  spacing?: Spacing;
   /**
    * direction 重ねる向き
    * @default row
@@ -54,7 +49,29 @@ type Props = {
    * inline-flexとして扱う
    */
   inline?: boolean;
-} & MarginProps &
+} & (
+  | {
+      /**
+       * 子要素の間隔。指定しない場合は0
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      spacing: Spacing;
+      gap?: never;
+    }
+  | {
+      /**
+       * spacingのエイリアス（どちらかしか指定できません）
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      gap: Spacing;
+      spacing?: never;
+    }
+  | {
+      gap?: never;
+      spacing?: never;
+    }
+) &
+  MarginProps &
   PaddingProps &
   Omit<WidthProps, 'width'> &
   CustomDataAttributeProps;
@@ -67,6 +84,7 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   justifyContent = 'flex-start',
   wrap,
   spacing,
+  gap,
   height,
   inline,
   p,
@@ -98,6 +116,15 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   };
 
   const width = _width === 'full' ? '100%' : _width;
+  const _spacing = useMemo(() => {
+    if (gap != null) {
+      return gap;
+    } else if (spacing != null) {
+      return spacing;
+    } else {
+      return undefined;
+    }
+  }, [gap, spacing]);
 
   return createElement(
     {
@@ -107,7 +134,7 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
         '--align-items': alignItems,
         '--justify-content': justifyContent,
         '--flex-wrap': wrap ? 'wrap' : 'nowrap',
-        ...gapVariables(spacing),
+        ...gapVariables(_spacing),
         ...paddingVariables({
           p,
           px,

diff --git a/src/stories/Flex.stories.tsx b/src/stories/Flex.stories.tsx
@@ -61,6 +61,16 @@ export const Spacing: Story = {
   ),
 };
 
+export const Gap: Story = {
+  render: () => (
+    <Flex gap="xl">
+      <div>xxl</div>
+      <div>xxl</div>
+      <div>xxl</div>
+    </Flex>
+  ),
+};
+
 export const Vertical: Story = {
   render: () => (
     <div>

diff --git a/src/stories/Stack.stories.tsx b/src/stories/Stack.stories.tsx
@@ -143,7 +143,7 @@ export const Width: Story = {
 
 export const Gap: Story = {
   render: () => (
-    <Stack spacing="md">
+    <Stack gap="md">
       <p style={{ margin: 0 }}>Text</p>
       <p style={{ margin: 0 }}>Text</p>
       <p style={{ margin: 0 }}>Text</p>