Merge pull request #137 from 8845musign/fix-icon-size-unit

feat: add white-space prop to Buttons
ubie-oss · Oct 4, 2024 · f06477c · f06477c
2 parents e0c35da + 932995e
commit f06477c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 19 deletions.
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -20,7 +20,7 @@
   text-align: center;
   text-decoration: none;
   overflow-wrap: anywhere;
-  white-space: normal;
+  white-space: var(--white-space, 'normal');
   appearance: none;
   cursor: pointer;
   background-color: var(--bg);

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { type CSSProperties, forwardRef } from 'react';
 import styles from './Button.module.css';
 import { VariantIcon } from './VariantIcon';
 import { marginVariables } from '../../utils/style';
@@ -22,6 +22,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       loading = false,
       loadingLabel = '通信中',
       onClick,
+      whiteSpace = 'normal',
       m,
       mx,
       my,
@@ -58,17 +59,20 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         type={type}
         className={cls}
-        style={{
-          ...marginVariables({
-            m,
-            mx,
-            my,
-            mt,
-            mr,
-            mb,
-            ml,
-          }),
-        }}
+        style={
+          {
+            ...marginVariables({
+              m,
+              mx,
+              my,
+              mt,
+              mr,
+              mb,
+              ml,
+            }),
+            '--white-space': whiteSpace,
+          } as CSSProperties
+        }
         ref={ref}
         disabled={disabled}
         aria-disabled={loading}

diff --git a/src/components/Button/ButtonTypes.ts b/src/components/Button/ButtonTypes.ts
@@ -1,6 +1,6 @@
 import { CustomDataAttributeProps } from '../../types/attributes';
 import type { MarginProps } from '../../types/style';
-import type { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, ReactElement } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 export type BaseProps = {
   /**
@@ -43,6 +43,10 @@ export type BaseProps = {
    * 後方配置のアイコン
    */
   suffixIcon?: 'default' | ReactNode;
+  /**
+   * ラベルの折り返しを指定
+   */
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
 } & MarginProps &
   CustomDataAttributeProps;
 

diff --git a/src/components/Button/LinkButton.tsx b/src/components/Button/LinkButton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement, CSSProperties, forwardRef } from 'react';
 import styles from './Button.module.css';
 import { VariantIcon } from './VariantIcon';
 import { marginVariables } from '../../utils/style';
@@ -19,6 +19,7 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       icon: _icon,
       fixedIcon: _fixedIcon,
       suffixIcon: _suffixIcon,
+      whiteSpace = 'normal',
       m,
       mx,
       my,
@@ -58,7 +59,8 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
             mb,
             ml,
           }),
-        },
+          '--white-space': whiteSpace,
+        } as CSSProperties,
         ...props,
         ref: forwardedRef,
       },

diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { BlankLinkIcon, TrashIcon } from '@ubie/ubie-icons';
-import { Button, Stack, Icon } from '../';
-import type { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
+import { Button, Icon, Stack } from '../';
 
 export default {
   title: 'Button/Button',
@@ -191,3 +191,15 @@ export const CustomDataAttribute: Story = {
     ...defaultArgs,
   },
 };
+
+export const TextWrap: Story = {
+  render: (args) => {
+    return <Button {...args} />;
+  },
+  args: {
+    ...defaultArgs,
+    children: '[抽選で謝礼あり]\nアンケートにご協力ください',
+    whiteSpace: 'pre-wrap',
+    block: true,
+  },
+};
diff --git a/src/stories/LinkButton.stories.tsx b/src/stories/LinkButton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { BlankLinkIcon, UbieIcon, TrashIcon } from '@ubie/ubie-icons';
+import { BlankLinkIcon, TrashIcon, UbieIcon } from '@ubie/ubie-icons';
 import { LinkButton, Stack } from '../';
 import type { ComponentProps } from 'react';
 
@@ -131,3 +131,15 @@ export const CustomDataAttribute: Story = {
   },
   render: (args) => <LinkButton {...args}>Please enter in English</LinkButton>,
 };
+
+export const TextWrap: Story = {
+  render: (args) => {
+    return <LinkButton {...args} />;
+  },
+  args: {
+    ...defaultArgs,
+    children: '[抽選で謝礼あり]\nアンケートにご協力ください',
+    whiteSpace: 'pre-wrap',
+    block: true,
+  },
+};