From 113200eac47e3924b5e386ad987a46bbd8ce6e65 Mon Sep 17 00:00:00 2001 From: "hiroki.yokouchi" Date: Fri, 14 Jun 2024 10:57:08 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=20=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=81=AE=E6=8A=98=E3=82=8A=E8=BF=94=E3=81=97=E3=82=92=E8=80=83?= =?UTF-8?q?=E6=85=AE=E3=81=97=E3=81=9F=E3=83=87=E3=83=95=E3=82=A9=E3=83=AB?= =?UTF-8?q?=E3=83=88=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=81=AB=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Box/Box.module.css | 6 +++ src/components/Box/Box.tsx | 6 +++ src/components/Heading/Heading.module.css | 6 +++ src/components/Heading/Heading.tsx | 8 +++- src/components/Text/Text.module.css | 6 +++ src/components/Text/Text.tsx | 8 +++- src/stories/Box.stories.tsx | 34 ++++++++++++++ src/stories/Heading.stories.tsx | 51 +++++++++++++++++++- src/stories/Text.stories.tsx | 57 +++++++++++++++++++++-- 9 files changed, 175 insertions(+), 7 deletions(-) diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css index f7d70569..477829c4 100644 --- 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 index e7e3c9db..cf36dd16 100644 --- 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 { let _textVariables: CSSProperties = {}; @@ -197,6 +202,7 @@ export const Box: FC> = ({ @@ -70,6 +74,7 @@ const Heading: FC> = ({ id, htmlFor, bold = true, + noWrap = false, ...otherProps }) => { const className = clsx( @@ -80,7 +85,8 @@ const Heading: FC> = ({ // 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/Text/Text.module.css b/src/components/Text/Text.module.css index c2439b63..fd993f5c 100644 --- 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; +} \ No newline at end of file diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 39911410..4813c994 100644 --- 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> = ({ type = 'body', leading = 'default', bold = false, + noWrap = false, color = 'main', children, id, @@ -148,12 +153,13 @@ export const Text: FC> = ({ 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 index 725c0a53..a3806d10 100644 --- 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) => ( +
+ + +

+ 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 +

+

+ industry. Lorem Ipsum has been the industry'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. +

+ + + +

noWrap

+

+ 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 +

+

+ industry. Lorem Ipsum has been the industry'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. +

+ + +
+ ), + args: { + ...defaultArgs, + }, +}; diff --git a/src/stories/Heading.stories.tsx b/src/stories/Heading.stories.tsx index adaa304a..b986e439 100644 --- 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: () => ( +
+ + + + 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 + + + +
+ + + industry. Lorem Ipsum has been the industry'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. + + +
+ +
+

+ noWrap +

+ + + + 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 + + +
+ +
+

+ noWrap +

+ + + + industry. Lorem Ipsum has been the industry'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. + + +
+ +
+ ), +}; diff --git a/src/stories/Text.stories.tsx b/src/stories/Text.stories.tsx index 7d59f635..87158fdc 100644 --- a/src/stories/Text.stories.tsx +++ b/src/stories/Text.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { Text, Flex, Stack } from '../'; +import { Text, Flex, Stack, Box } from '../'; export default { title: 'Typography/Text', @@ -322,9 +322,58 @@ export const TextAlign: Story = { }; export const CustomDataAttribute: Story = { + render: () => Text, +}; + +export const Bold: Story = { + render: () => Bold, +}; + +export const Wrap: Story = { render: () => ( - - Text - +
+ + + + 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 + + + +
+ + + industry. Lorem Ipsum has been the industry'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. + + +
+ +
+

+ noWrap +

+ + + + 私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111 + + +
+ +
+

+ noWrap +

+ + + + industry. Lorem Ipsum has been the industry'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. + + +
+ +
), }; From 5099fedd41f4c83d2d1dece210aa411c423b4583 Mon Sep 17 00:00:00 2001 From: "hiroki.yokouchi" Date: Fri, 14 Jun 2024 11:59:58 +0900 Subject: [PATCH 2/3] Consider text wrapping --- src/components/Accordion/Accordion.module.css | 2 ++ src/components/Button/Button.module.css | 1 + src/components/Checkbox/Checkbox.module.css | 2 ++ src/components/ErrorMessage/ErrorMessage.module.css | 2 ++ src/components/HelperMessage/HelperMessage.module.css | 2 ++ src/components/Label/Label.module.css | 2 ++ src/components/LinkCard/LinkCard.module.css | 2 ++ src/components/RadioButton/RadioButton.module.css | 5 +++++ src/components/RadioCard/RadioCard.module.css | 2 ++ 9 files changed, 20 insertions(+) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index b04fe4a4..c678a119 100644 --- 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/Button/Button.module.css b/src/components/Button/Button.module.css index fa2c6249..7762ae61 100644 --- 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 index dbf412ff..37243164 100644 --- 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 index f6de54ea..e1014404 100644 --- 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/HelperMessage/HelperMessage.module.css b/src/components/HelperMessage/HelperMessage.module.css index 08c04c26..4531edb4 100644 --- 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 index 28bcb1e8..9e9a0cf9 100644 --- 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 index 0bfc4c35..07ad6dfb 100644 --- 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 index 5f4612bc..28a4e8f7 100644 --- 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 index 2b31d551..7a6dbb8b 100644 --- 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; From 3978c64506cc63bebc6a4fe0d8767fcaaae097a6 Mon Sep 17 00:00:00 2001 From: "hiroki.yokouchi" Date: Fri, 14 Jun 2024 13:27:19 +0900 Subject: [PATCH 3/3] fix format --- src/components/Text/Text.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css index fd993f5c..361321ad 100644 --- a/src/components/Text/Text.module.css +++ b/src/components/Text/Text.module.css @@ -168,4 +168,4 @@ .nowrap { white-space: nowrap; -} \ No newline at end of file +}