-
Notifications
You must be signed in to change notification settings - Fork 347
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Text: Add CJK wrapping to Text (#3095)
- Loading branch information
1 parent
cd434e8
commit ccdb314
Showing
3 changed files
with
110 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
// @flow strict | ||
import React, { type Node } from 'react'; | ||
import { Box, Flex, Text } from 'gestalt'; | ||
|
||
export default function cjkText(): Node { | ||
const languages = [ | ||
{ | ||
id: 'English', | ||
code: 'en', | ||
lang: 'Your account options and more', | ||
}, | ||
{ | ||
id: 'Chinese', | ||
code: 'zh', | ||
lang: '帐户和更多选项', | ||
}, | ||
{ | ||
id: 'Korean', | ||
code: 'ko', | ||
lang: '계정 및추 가옵션', | ||
}, | ||
]; | ||
|
||
return ( | ||
<Box | ||
padding={4} | ||
width="100%" | ||
height="100%" | ||
display="flex" | ||
alignItems="center" | ||
direction="column" | ||
> | ||
<Flex direction="row" gap={8}> | ||
<Flex gap={2} direction="column"> | ||
<Box> | ||
<Text weight="bold">With Keep-All</Text> | ||
</Box> | ||
<Flex direction="column" gap={4}> | ||
{languages.map(({ id, lang, code }) => ( | ||
<Box key={id}> | ||
<Box marginBottom={2}> | ||
<Text size="200">{id}</Text> | ||
</Box> | ||
<div lang={code}> | ||
<Box key={id} width={120} color="dark" rounding={2} padding={2}> | ||
<Box width={24} color="dark"> | ||
<Text overflow="normal" size="200" color="inverse"> | ||
{lang} | ||
</Text> | ||
</Box> | ||
</Box> | ||
</div> | ||
</Box> | ||
))} | ||
</Flex> | ||
</Flex> | ||
|
||
<Flex gap={2} direction="column"> | ||
<Box> | ||
<Text weight="bold">Without Keep-All</Text> | ||
</Box> | ||
<Flex direction="column" gap={4}> | ||
{languages.map(({ id, lang }) => ( | ||
<Box key={id}> | ||
<Box marginBottom={2}> | ||
<Text size="200">{id}</Text> | ||
</Box> | ||
<Box key={id} width={70} color="dark" rounding={2} padding={2}> | ||
<Box width={24} color="dark"> | ||
<Text overflow="normal" size="200" color="inverse"> | ||
{lang} | ||
</Text> | ||
</Box> | ||
</Box> | ||
</Box> | ||
))} | ||
</Flex> | ||
</Flex> | ||
</Flex> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,15 @@ | ||
.Text { | ||
composes: antialiased sansSerif from "./Typography.css"; | ||
} | ||
|
||
/** | ||
See keep-all usage for CJK languages. | ||
If a language code is specified higher in the parent-tree, then this class is applied | ||
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break | ||
**/ | ||
|
||
*:lang(zh) .Text, | ||
*:lang(ko) .Text, | ||
*:lang(ja) .Text { | ||
word-break: keep-all; | ||
} |