Merge pull request ubie-oss#123 from 8845musign/add-wdith-props

Add Width Props to Layout Components
8845musign · Jul 18, 2024 · 70a1465 · 70a1465
2 parents 2c53526 + d1b3a55
commit 70a1465
Show file tree

Hide file tree

Showing 18 changed files with 384 additions and 32 deletions.
diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css
@@ -1,6 +1,9 @@
 .box {
   box-sizing: border-box;
   display: block;
+  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);
   font-size: var(--text-size);
@@ -56,10 +59,6 @@
   border: 2px solid var(--color-primary);
 }
 
-.box.widthFull {
-  width: 100%;
-}
-
 .box.textBold {
   font-weight: bold;
 }

diff --git a/src/components/Box/Box.spec.tsx b/src/components/Box/Box.spec.tsx
@@ -141,4 +141,48 @@ describe('<Box>', () => {
     expect(div).toHaveStyle('--padding-bottom: var(--size-spacing-lg)');
     expect(div).toHaveStyle('--padding-left: var(--size-spacing-xl)');
   });
+
+  it('receives width', () => {
+    render(
+      <Box width="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100px');
+  });
+
+  it('converted to 100% if full is received in width prop', () => {
+    render(
+      <Box width="full" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100%');
+  });
+
+  it('receives max-width', () => {
+    render(
+      <Box maxWidth="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--max-width: 100px');
+  });
+
+  it('receives min-width', () => {
+    render(
+      <Box minWidth="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--min-width: 100px');
+  });
 });
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -9,6 +9,7 @@ import {
   cssFontSizeToken,
   cssLeadingToken,
   colorVariable,
+  widthVariables,
 } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
 import type { CustomDataAttributeProps } from '../../types/attributes';
@@ -23,9 +24,12 @@ import type {
   BodyLeading,
   NoteFontSize,
   NoteLeading,
+  WidthProps,
 } from '../../types/style';
 import type { CSSProperties, FC, ReactNode } from 'react';
 
+type Width = WidthProps['width'];
+
 type BaseProps = {
   /**
    * Box内に表示するコンテンツやコンポーネント
@@ -45,9 +49,10 @@ type BaseProps = {
    */
   border?: 'gray' | 'grayThick' | 'primary' | 'primaryThick';
   /**
-   * 幅を指定。他のスタイルの影響を受け、幅が100%とならない場合にのみ使用
+   * 幅を指定。fullは後方互換のため残している
+   * @defaultValue 'autp'
    */
-  width?: "full";
+  width?: "full" | Width;
   /**
    * 内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal
    */
@@ -72,6 +77,7 @@ type BaseProps = {
 } & PaddingProps &
   MarginProps &
   RadiusProp &
+  Omit<WidthProps, 'width'> &
   CustomDataAttributeProps;
 
 type PropsWithoutText = BaseProps & {
@@ -189,7 +195,9 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
   radius,
   backgroundColor,
   border,
-  width,
+  width: _width,
+  minWidth,
+  maxWidth,
   inline = false,
   textType,
   textSize,
@@ -208,6 +216,8 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
     _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
   }
 
+  const width = _width === 'full' ? '100%' : _width;
+
   return (
     <BoxComponent
       className={clsx([
@@ -243,6 +253,11 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
         ...radiusVariables(radius),
         ..._textVariables,
         ...colorVariable(textColor),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
       }}
       {...props}
     >

diff --git a/src/components/Center/Center.module.css b/src/components/Center/Center.module.css
@@ -1,4 +1,6 @@
 .center {
+  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-inline: auto;

diff --git a/src/components/Center/Center.spec.tsx b/src/components/Center/Center.spec.tsx
@@ -107,4 +107,37 @@ describe('<Center>', () => {
     expect(div).toHaveStyle('--padding-bottom: var(--size-spacing-lg)');
     expect(div).toHaveStyle('--padding-left: var(--size-spacing-xl)');
   });
+
+  it('receives width', () => {
+    render(
+      <Center width="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100px');
+  });
+
+  it('receives max-width', () => {
+    render(
+      <Center maxWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--max-width: 100px');
+  });
+
+  it('receives min-width', () => {
+    render(
+      <Center minWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--min-width: 100px');
+  });
 });
diff --git a/src/components/Center/Center.tsx b/src/components/Center/Center.tsx
@@ -13,10 +13,10 @@ import {
 } from 'react';
 import styles from './Center.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
-import { marginVariables, paddingVariables } from "../../utils/style";
+import { marginVariables, paddingVariables, widthVariables } from "../../utils/style";
 import { HTMLTagname } from '../../utils/types';
 import { Box } from '../Box/Box';
-import type { MarginYProps, PaddingProps } from "../../types/style";
+import type { MarginYProps, PaddingProps, WidthProps } from "../../types/style";
 
 type Props = {
   /**
@@ -34,17 +34,13 @@ type Props = {
    * @default false
    */
   childrenCenter?: boolean;
-  /**
-   * 横幅の最大値
-   * @default none
-   */
-  maxWidth?: string;
   /**
    * HTMLのID属性の値
    */
   id?: string;
 } & MarginYProps &
   PaddingProps &
+  WidthProps &
   CustomDataAttributeProps;
 
 export const Center: FC<PropsWithChildren<Props>> = ({
@@ -63,7 +59,9 @@ export const Center: FC<PropsWithChildren<Props>> = ({
   textCenter,
   childrenCenter,
   id,
-  maxWidth = 'none',
+  width,
+  minWidth,
+  maxWidth,
   ...props
 }) => {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -95,6 +93,11 @@ export const Center: FC<PropsWithChildren<Props>> = ({
           mt,
           mb,
         }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
       } as CSSProperties,
       ...props,
     },

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,16 +49,18 @@ type Props = {
    */
   height?: 'full';
   /**
-   * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする事が可能
+   * 幅を指定。fullは後方互換のために残している
+   * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする
    */
-  width?: "full";
+  width?: "full" | Width;
   /**
    * inline-flexとして扱う
    * @default false
    */
   inline?: boolean;
 } & MarginProps &
   PaddingProps &
+  Omit<WidthProps, 'width'> &
   CustomDataAttributeProps;
 
 export const Flex: FC<PropsWithChildren<Props>> = ({
@@ -68,7 +72,6 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   wrap,
   spacing,
   height,
-  width,
   inline,
   p,
   px,
@@ -84,6 +87,9 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   mr,
   mb,
   ml,
+  width: _width,
+  minWidth,
+  maxWidth,
   ...otherProps
 }) => {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -95,14 +101,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,
-        inline && styles.inline,
-      ),
+      className: clsx(styles.flex, height === 'full' && styles.heightFull, inline && styles.inline),
       style: {
         '--flex-direction': direction,
         '--align-items': alignItems,
@@ -127,6 +130,11 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
           mb,
           ml,
         }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
       },
       ...otherProps,
     },

diff --git a/src/components/Stack/Stack.module.css b/src/components/Stack/Stack.module.css
@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap);
+  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);
 }