Merge pull request #106 from 8845musign/improve-text-wrap

Improve text wrap
ubie-oss · Jun 17, 2024 · 5d12e35 · 5d12e35
2 parents 5f859f9 + 3978c64
commit 5d12e35
Show file tree

Hide file tree

Showing 18 changed files with 195 additions and 7 deletions.
diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
@@ -8,7 +8,9 @@
   align-items: center;
   justify-content: space-between;
   width: auto;
+  hyphens: auto;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
   cursor: pointer;
   background: none;
   border: 1px solid var(--color-border);

diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css
@@ -5,8 +5,10 @@
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
   font-size: var(--text-size);
   font-weight: var(--text-bold);
+  hyphens: auto;
   line-height: var(--text-leading);
   color: var(--text-color);
+  overflow-wrap: anywhere;
   border-radius: var(--radius);
 }
 
@@ -77,3 +79,7 @@
 .box.textRight {
   text-align: right;
 }
+
+.box.textNoWrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -56,6 +56,10 @@ type BaseProps = {
    * テキストの配置。指定しない場合、親要素の配置を継承
    */
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * 領域が狭い場合でも、テキストを折り返えさない
+   */
+  textNoWrap?: boolean;
 } & PaddingProps &
   MarginProps &
   RadiusProp &
@@ -177,6 +181,7 @@ export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | Pr
   textColor,
   textBold,
   textAlign,
+  textNoWrap,
   ...props
 }) => {
   let _textVariables: CSSProperties = {};
@@ -197,6 +202,7 @@ export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | Pr
         textBold && styles.textBold,
         textBold === false && styles.textNormal,
         textAlign && styles[`text${capitalize(textAlign)}`],
+        textNoWrap && styles.textNoWrap,
       ])}
       style={{
         ...paddingVariables({

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -13,6 +13,7 @@
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
   font-size: var(--font-size);
   font-weight: bold;
+  hyphens: auto;
   line-height: var(--line-height);
   color: var(--text);
   text-align: center;

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
@@ -2,6 +2,8 @@
   display: flex;
   gap: var(--size-spacing-xs);
   align-items: center;
+  hyphens: auto;
+  overflow-wrap: anywhere;
   cursor: pointer;
   user-select: none;
 }

diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css
@@ -1,6 +1,8 @@
 .error {
   margin: 0;
   font-size: var(--text-body-sm-size);
+  hyphens: auto;
   line-height: var(--text-body-sm-narrow-line);
   color: var(--color-alert);
+  overflow-wrap: anywhere;
 }
diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
@@ -2,7 +2,9 @@
   position: relative;
   box-sizing: border-box;
   font-weight: normal;
+  hyphens: auto;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
 
   --medium-leading-border-width: 4px;
   --large-leading-border-width: 5px;
@@ -203,3 +205,7 @@
   width: calc(var(--text-heading-xl-size) * var(--text-heading-xl-line));
   height: calc(var(--text-heading-xl-size) * var(--text-heading-xl-line));
 }
+
+.heading.noWrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
@@ -56,6 +56,10 @@ type Props = {
    * @default true
    */
   bold?: boolean;
+  /**
+   * ｚ
+   */
+  noWrap?: boolean;
 } & CustomDataAttributeProps;
 
 const Heading: FC<PropsWithChildren<Props>> = ({
@@ -71,6 +75,7 @@ const Heading: FC<PropsWithChildren<Props>> = ({
   id,
   htmlFor,
   bold = true,
+  noWrap = false,
   ...otherProps
 }) => {
   const className = clsx(
@@ -81,7 +86,8 @@ const Heading: FC<PropsWithChildren<Props>> = ({
     // For leadingBorder, only the main text colour is supported.
     leadingBorder ? styles.secondary : styles[color],
     leadingBorder ? styles.leadingBorder : null,
-    bold ? styles.bold : null,
+    bold && styles.bold,
+    noWrap && styles.noWrap,
   );
 
   return (

diff --git a/src/components/HelperMessage/HelperMessage.module.css b/src/components/HelperMessage/HelperMessage.module.css
@@ -1,6 +1,8 @@
 .message {
   margin: 0;
   font-size: var(--text-note-lg-size);
+  hyphens: auto;
   line-height: var(--text-note-lg-tight-line);
   color: var(--color-text-sub);
+  overflow-wrap: anywhere;
 }
diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
@@ -4,7 +4,9 @@
   align-items: center;
   font-size: var(--text-body-sm-size);
   font-weight: bold;
+  hyphens: auto;
   color: var(--color-text-sub);
+  overflow-wrap: anywhere;
 }
 
 legend.label {

diff --git a/src/components/LinkCard/LinkCard.module.css b/src/components/LinkCard/LinkCard.module.css
@@ -3,7 +3,9 @@
   gap: var(--size-spacing-sm);
   align-items: center;
   padding: var(--size-spacing-md);
+  hyphens: auto;
   text-decoration: none;
+  overflow-wrap: anywhere;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
 }

diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
@@ -9,6 +9,11 @@
   border-radius: 24px;
 }
 
+.text {
+  hyphens: auto;
+  overflow-wrap: anywhere;
+}
+
 .medium .icon {
   width: 1.5rem;
   height: 1.5rem;

diff --git a/src/components/RadioCard/RadioCard.module.css b/src/components/RadioCard/RadioCard.module.css
@@ -16,8 +16,10 @@
   padding: 16px 12px 16px 44px;
   font-size: 16px;
   font-weight: normal;
+  hyphens: auto;
   line-height: 23px;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
   vertical-align: text-top;
   cursor: pointer;
   background: #fff;

diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
@@ -1,8 +1,10 @@
 .text {
   font-size: var(--font-size);
   font-weight: normal;
+  hyphens: auto;
   line-height: var(--leading);
   color: var(--color);
+  overflow-wrap: anywhere;
 }
 
 :where(.text) {
@@ -163,3 +165,7 @@
 .right {
   text-align: right;
 }
+
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -43,6 +43,10 @@ type BaseProps = {
    * テキストの配置。指定しない場合、親要素の配置を継承
    */
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * 領域が狭い場合でも折り返えさない
+   */
+  noWrap?: boolean;
 } & CustomDataAttributeProps;
 
 type BodyProps = BaseProps & {
@@ -137,6 +141,7 @@ export const Text: FC<PropsWithChildren<TextProps>> = ({
   type = 'body',
   leading = 'default',
   bold = false,
+  noWrap = false,
   color = 'main',
   children,
   id,
@@ -148,12 +153,13 @@ export const Text: FC<PropsWithChildren<TextProps>> = ({
       id={id}
       className={clsx(
         styles.text,
-        bold && styles.bold,
         styles[size],
         styles[type],
         styles[leading],
         styles[color],
         textAlign && styles[textAlign],
+        bold && styles.bold,
+        noWrap && styles.nowrap,
       )}
       {...props}
     >

diff --git a/src/stories/Box.stories.tsx b/src/stories/Box.stories.tsx
@@ -333,3 +333,37 @@ export const CustomDataAttribute: Story = {
     ...defaultArgs,
   },
 };
+
+export const TextWrap: Story = {
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <Stack spacing="md">
+        <Box {...args}>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen
+            booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+
+        <Box {...args} textNoWrap>
+          <p>noWrap</p>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen
+            booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+      </Stack>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+  },
+};
diff --git a/src/stories/Heading.stories.tsx b/src/stories/Heading.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { UbieIcon, ThumbUpOutlineIcon, SetupIcon } from '@ubie/ubie-icons';
-import { Heading, Stack } from '../';
+import { Box, Heading, Stack } from '../';
 
 export default {
   title: 'Typography/Heading',
@@ -297,3 +297,52 @@ export const CustomDataAttribute: Story = {
     [`data-test-id`]: 'heading-custom-attribute',
   },
 };
+
+export const TextWrap: Story = {
+  render: () => (
+    <div style={{ width: '300px' }}>
+      <Stack spacing="md">
+        <Box border="gray">
+          <Heading>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </Heading>
+        </Box>
+
+        <div lang="en">
+          <Box border="gray">
+            <Heading>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen
+              booooooooooooooooooooooooooooooooooooooooooooook.
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Heading noWrap>
+              私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Heading noWrap>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen book.
+            </Heading>
+          </Box>
+        </div>
+      </Stack>
+    </div>
+  ),
+};