extend width prop

ubie-oss · Jul 12, 2024 · f36063c · f36063c
1 parent 940cd59
commit f36063c
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 6 deletions.
diff --git a/src/components/Flex/Flex.module.css b/src/components/Flex/Flex.module.css
@@ -4,6 +4,9 @@
   gap: var(--gap);
   align-items: var(--align-items);
   justify-content: var(--justify-content);
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
   padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
 }

diff --git a/src/components/Flex/Flex.spec.tsx b/src/components/Flex/Flex.spec.tsx
@@ -141,4 +141,48 @@ describe('<Flex>', () => {
     expect(div).toHaveStyle('--padding-bottom: var(--size-spacing-lg)');
     expect(div).toHaveStyle('--padding-left: var(--size-spacing-xl)');
   });
+
+  it('receives width', () => {
+    render(
+      <Flex width="100px" data-testid="flex-item">
+        Test
+      </Flex>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100px');
+  });
+
+  it('converted to 100% if full is received in width prop', () => {
+    render(
+      <Flex width="full" data-testid="flex-item">
+        Test
+      </Flex>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100%');
+  });
+
+  it('receives max-width', () => {
+    render(
+      <Flex maxWidth="100px" data-testid="flex-item">
+        Test
+      </Flex>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--max-width: 100px');
+  });
+
+  it('receives min-width', () => {
+    render(
+      <Flex minWidth="100px" data-testid="flex-item">
+        Test
+      </Flex>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--min-width: 100px');
+  });
 });
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
@@ -4,13 +4,15 @@ import clsx from 'clsx';
 import { isValidElement, cloneElement } from 'react';
 import styles from './Flex.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
-import { Spacing, AlignItems, JustifyContent, FlexDirection } from '../../types/style';
-import { paddingVariables, marginVariables, gapVariables } from '../../utils/style';
+import { Spacing, AlignItems, JustifyContent, FlexDirection, WidthProps } from '../../types/style';
+import { paddingVariables, marginVariables, gapVariables, widthVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
 import { Box } from '../Box/Box';
 import type { PaddingProps, MarginProps } from '../../types/style';
 import type { FC, PropsWithChildren, ReactElement, ComponentType, ReactNode } from 'react';
 
+type Width = WidthProps['width'];
+
 type Props = {
   /**
    * レンダリングされるHTML要素
@@ -47,11 +49,13 @@ type Props = {
    */
   height?: 'full';
   /**
-   * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする事が可能
+   * 幅を指定。fullは後方互換のために残している
+   * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする
    */
-  width?: 'full';
+  width?: 'full' | Width;
 } & MarginProps &
   PaddingProps &
+  Omit<WidthProps, 'width'> &
   CustomDataAttributeProps;
 
 export const Flex: FC<PropsWithChildren<Props>> = ({
@@ -63,7 +67,6 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   wrap,
   spacing,
   height,
-  width,
   p,
   px,
   py,
@@ -78,6 +81,9 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   mr,
   mb,
   ml,
+  width: _width,
+  minWidth,
+  maxWidth,
   ...otherProps
 }) => {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -89,9 +95,11 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
     }
   };
 
+  const width = _width === 'full' ? '100%' : _width;
+
   return createElement(
     {
-      className: clsx(styles.flex, height === 'full' && styles.heightFull, width === 'full' && styles.widthFull),
+      className: clsx(styles.flex, height === 'full' && styles.heightFull),
       style: {
         '--flex-direction': direction,
         '--align-items': alignItems,
@@ -116,6 +124,11 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
           mb,
           ml,
         }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
       },
       ...otherProps,
     },

diff --git a/src/stories/Flex.stories.tsx b/src/stories/Flex.stories.tsx
@@ -225,3 +225,77 @@ export const WithFlexItem: Story = {
     </div>
   ),
 };
+
+export const Width: Story = {
+  render: () => (
+    <div>
+      <Flex direction="row" alignItems="center" spacing="lg" wrap width="100%">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+
+      <br />
+
+      <Flex direction="row" alignItems="center" spacing="lg" wrap maxWidth="500px">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+
+      <Flex direction="row" alignItems="center" spacing="lg" wrap minWidth="500px">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+    </div>
+  ),
+};