From a9667747139cecbb6a0e1d5a2d2435cdcb7be31b Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 15:04:53 +0200 Subject: [PATCH 1/9] more --- .../src/DatePicker/VRDateInput.css | 1 - packages/gestalt-design-tokens/build.js | 9 ++- .../src/contexts/ColorSchemeProvider.tsx | 76 ++++++++++++++++--- 3 files changed, 72 insertions(+), 14 deletions(-) diff --git a/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css b/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css index 083f9a3886..7284bdf47d 100644 --- a/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css +++ b/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css @@ -58,7 +58,6 @@ .enabledBorder:focus, .errorBorder:focus { border: 1px solid var(--sema-color-border-focus-inner-default); - outline: 2px solid var(--sema-color-border-focus-outer-default); } .enabledBorder:not(:focus):hover { diff --git a/packages/gestalt-design-tokens/build.js b/packages/gestalt-design-tokens/build.js index 9af412d318..8ca312973e 100644 --- a/packages/gestalt-design-tokens/build.js +++ b/packages/gestalt-design-tokens/build.js @@ -800,6 +800,13 @@ function getWebConfig({ theme, mode, language }) { 'destination': `variables-${mode}.json`, ...jsonFlat, }, + language + ? { + 'destination': `variables-font-lineheight-${language}.json`, + ...jsonFlat, + ...semaLineHeightFilter, + } + : undefined, ], }, 'js': { @@ -1223,7 +1230,7 @@ registerTokenTransformGroups(StyleDictionary); ['classic', 'vr-theme', 'vr-theme-web-mapping'].forEach((theme) => ['light', 'dark'].forEach((mode) => { - // THIS NEEDS A CLEANUP BUT INTERIM SOLUTION 'default'MUST BE LAST + // THIS NEEDS A CLEANUP BUT INTERIM SOLUTION 'default' MUST BE LAST ['ck', 'ja', 'tall', 'th', 'vi', 'default'].forEach((lang) => { // only generate languages for the vr-themes const language = theme === 'vr-theme' || theme === 'vr-theme-web-mapping' ? lang : undefined; diff --git a/packages/gestalt/src/contexts/ColorSchemeProvider.tsx b/packages/gestalt/src/contexts/ColorSchemeProvider.tsx index 33d62b917d..155e634b70 100644 --- a/packages/gestalt/src/contexts/ColorSchemeProvider.tsx +++ b/packages/gestalt/src/contexts/ColorSchemeProvider.tsx @@ -3,6 +3,12 @@ import classnames from 'classnames'; import darkColorDesignTokens from 'gestalt-design-tokens/dist/json/classic/variables-dark.json'; import lightColorDesignTokens from 'gestalt-design-tokens/dist/json/classic/variables-light.json'; import vrDarkColorDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-dark.json'; +import vrCkLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-ck.json'; +import vrDefaultLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-default.json'; +import vrJaLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-ja.json'; +import vrTallLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-tall.json'; +import vrThLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-th.json'; +import vrViLineHeightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-vi.json'; import vrLightColorDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme-web-mapping/variables-light.json'; import layoutStyles from '../Layout.css'; import useInExperiment from '../useInExperiment'; @@ -24,37 +30,75 @@ const darkModeTheme = { const ThemeContext: Context = createContext(lightModeTheme); +const getLanguageFile = (language?: 'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi') => { + switch (language) { + case 'ck': + return vrCkLineHeightDesignTokens; + break; + case 'ja': + return vrJaLineHeightDesignTokens; + break; + case 'tall': + return vrTallLineHeightDesignTokens; + break; + case 'th': + return vrThLineHeightDesignTokens; + break; + case 'vi': + return vrViLineHeightDesignTokens; + break; + case 'default': + return vrDefaultLineHeightDesignTokens; + break; + default: + return vrDefaultLineHeightDesignTokens; + } +}; + /** * Appends tokens as injected CSS tokens */ const themeToStyles = ( theme: { colorSchemeName: 'lightMode' | 'darkMode' }, isVisualRefresh?: boolean, + language?: 'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi', ) => { let styles = ''; + Object.keys(theme).forEach((key) => { styles += ` --gestalt-theme: ${isVisualRefresh ? 'visualRefresh' : 'classic'}-${ // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ colorSchemeName: "lightMode" | "darkMode"; }'. - theme[key] + `${theme[key] }_lineHeight_${ language}` };\n`; }); + if (theme.colorSchemeName === 'darkMode') { Object.keys(isVisualRefresh ? vrDarkColorDesignTokens : darkColorDesignTokens).forEach( (key) => { - styles += ` --${key}: ${ - // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ "color-red-pushpin-0": string; "color-red-pushpin-50": string; "color-red-pushpin-100": string; "color-red-pushpin-200": string; "color-red-pushpin-300": string; "color-red-pushpin-400": string; ... 327 more ...; "elevation-datepicker": string; }'. - (isVisualRefresh ? vrDarkColorDesignTokens : darkColorDesignTokens)[key] - };\n`; + if (isVisualRefresh && key.match(/lineheight/)) { + // @ts-expect-error - TS7053 + styles += ` --${key}: ${getLanguageFile(language)[key]};\n`; + } else { + styles += ` --${key}: ${ + // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ "color-red-pushpin-0": string; "color-red-pushpin-50": string; "color-red-pushpin-100": string; "color-red-pushpin-200": string; "color-red-pushpin-300": string; "color-red-pushpin-400": string; ... 327 more ...; "elevation-datepicker": string; }'. + (isVisualRefresh ? vrDarkColorDesignTokens : darkColorDesignTokens)[key] + };\n`; + } }, ); } if (theme.colorSchemeName === 'lightMode') { Object.keys(isVisualRefresh ? vrLightColorDesignTokens : lightColorDesignTokens).forEach( (key) => { - styles += ` --${key}: ${ - // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ "color-red-pushpin-0": string; "color-red-pushpin-50": string; "color-red-pushpin-100": string; "color-red-pushpin-200": string; "color-red-pushpin-300": string; "color-red-pushpin-400": string; ... 327 more ...; "elevation-datepicker": string; }'. - (isVisualRefresh ? vrLightColorDesignTokens : lightColorDesignTokens)[key] - };\n`; + if (isVisualRefresh && key.match(/lineheight/)) { + // @ts-expect-error - TS7053 + styles += ` --${key}: ${getLanguageFile(language)[key]};\n`; + } else { + styles += ` --${key}: ${ + // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ "color-red-pushpin-0": string; "color-red-pushpin-50": string; "color-red-pushpin-100": string; "color-red-pushpin-200": string; "color-red-pushpin-300": string; "color-red-pushpin-400": string; ... 327 more ...; "elevation-datepicker": string; }'. + (isVisualRefresh ? vrLightColorDesignTokens : lightColorDesignTokens)[key] + };\n`; + } }, ); } @@ -89,6 +133,10 @@ type Props = { * If not passed in, settings will be applied as globally as possible (ex. setting color scheme variables at :root). A global implementation is critical for displaying dark mode correctly: when dark mode is not set globally, [React Portal](https://react.dev/reference/react-dom/createPortal)-based components, mostly Popovers and Tooltips, will not render in dark mode. The main ColorSchemeProvider in your app should NOT have an id set. */ id?: string | null | undefined; + /** + * Sets the line height for the selected language. + */ + language?: 'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi'; }; /** @@ -99,8 +147,11 @@ export default function ColorSchemeProvider({ colorScheme = 'light', fullDimensions = false, id, + language = 'default', }: Props) { const [theme, setTheme] = useState(getTheme(colorScheme)); + const [languageLineHeight, setLanguageLineHeight] = useState(language); + const className = id ? `__gestaltTheme${id}` : undefined; const selector = className ? `.${className}` : ':root'; const isInExperiment = useInExperiment({ @@ -114,6 +165,7 @@ export default function ColorSchemeProvider({ useEffect(() => { setTheme(getTheme(colorScheme)); + setLanguageLineHeight(language); if (colorScheme === 'userPreference' && window.matchMedia) { // @ts-expect-error - TS2345 - Argument of type '(event: MediaQueryList) => void' is not assignable to parameter of type '(this: MediaQueryList, ev: MediaQueryListEvent) => any'. window.matchMedia('(prefers-color-scheme: dark)').addListener(handlePrefChange); @@ -122,7 +174,7 @@ export default function ColorSchemeProvider({ window.matchMedia('(prefers-color-scheme: dark)').removeListener(handlePrefChange); } return undefined; // Flow doesn't like that only userPreference returns a clean up func - }, [colorScheme]); + }, [colorScheme, language]); return ( @@ -133,10 +185,10 @@ export default function ColorSchemeProvider({ colorScheme === 'userPreference' ? `@media(prefers-color-scheme: dark) { ${selector} { -${themeToStyles(darkModeTheme, isInExperiment)} } +${themeToStyles(darkModeTheme, isInExperiment, languageLineHeight)} } }` : `${selector} { -${themeToStyles(theme, isInExperiment)} }`, +${themeToStyles(theme, isInExperiment, languageLineHeight)} }`, }} />
Date: Tue, 24 Sep 2024 16:00:41 +0200 Subject: [PATCH 2/9] more --- .../ColorSchemeProvider.jsdom.test.tsx | 75 + .../ColorSchemeProvider.jsdom.test.tsx.snap | 4714 ++++++++++++++++- 2 files changed, 4782 insertions(+), 7 deletions(-) diff --git a/packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx b/packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx index 85bcacb1f2..e13cec73a8 100644 --- a/packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx +++ b/packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx @@ -141,4 +141,79 @@ describe('visual refresh tokens', () => { // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access expect(container.querySelector('style')).toMatchSnapshot(); }); + + it('uses visual refresh with tall line height', () => { + const { container } = render( + + + + + , + ); + + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('style')).toMatchSnapshot(); + }); + + it('uses visual refresh with ck line height', () => { + const { container } = render( + + + + + , + ); + + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('style')).toMatchSnapshot(); + }); + + it('uses visual refresh with ja line height', () => { + const { container } = render( + + + + + , + ); + + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('style')).toMatchSnapshot(); + }); + + it('uses visual refresh with th line height', () => { + const { container } = render( + + + + + , + ); + + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('style')).toMatchSnapshot(); + }); + + it('uses visual refresh with vi line height', () => { + const { container } = render( + + + + + , + ); + + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('style')).toMatchSnapshot(); + }); }); diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap index 9e626716a0..d854dce690 100644 --- a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap +++ b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap @@ -3,7 +3,7 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] = ` `; + +exports[`visual refresh tokens uses visual refresh with ck line height 1`] = ` + +`; + +exports[`visual refresh tokens uses visual refresh with ja line height 1`] = ` + +`; + +exports[`visual refresh tokens uses visual refresh with tall line height 1`] = ` + +`; + +exports[`visual refresh tokens uses visual refresh with th line height 1`] = ` + +`; + +exports[`visual refresh tokens uses visual refresh with vi line height 1`] = ` + +`; From 77dab646a7e0432bebc5695d63661979a60adea8 Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 17:12:33 +0200 Subject: [PATCH 3/9] more --- docs/examples/heading/languageTokens.tsx | 60 +++++++++++++++++++ .../{variantAlignment.tsx => alignment.tsx} | 0 .../{variantBoxInline.tsx => boxInline.tsx} | 0 .../text/{variantColors.tsx => colors.tsx} | 0 docs/examples/text/languageTokens.tsx | 60 +++++++++++++++++++ ...wTruncation.tsx => overflowTruncation.tsx} | 0 .../text/{variantRefs.tsx => refs.tsx} | 0 .../text/{variantSizes.tsx => sizes.tsx} | 0 .../text/{variantStyles.tsx => styles.tsx} | 0 .../text/{variantTitle.tsx => title.tsx} | 0 docs/examples/textcompact/languageTokens.tsx | 60 +++++++++++++++++++ docs/examples/textui/languageTokens.tsx | 60 +++++++++++++++++++ docs/pages/web/heading.tsx | 8 +-- docs/pages/web/text.tsx | 41 ++++++------- docs/pages/web/textcompact.tsx | 8 +++ docs/pages/web/textui.tsx | 8 +++ 16 files changed, 279 insertions(+), 26 deletions(-) create mode 100644 docs/examples/heading/languageTokens.tsx rename docs/examples/text/{variantAlignment.tsx => alignment.tsx} (100%) rename docs/examples/text/{variantBoxInline.tsx => boxInline.tsx} (100%) rename docs/examples/text/{variantColors.tsx => colors.tsx} (100%) create mode 100644 docs/examples/text/languageTokens.tsx rename docs/examples/text/{variantOverflowTruncation.tsx => overflowTruncation.tsx} (100%) rename docs/examples/text/{variantRefs.tsx => refs.tsx} (100%) rename docs/examples/text/{variantSizes.tsx => sizes.tsx} (100%) rename docs/examples/text/{variantStyles.tsx => styles.tsx} (100%) rename docs/examples/text/{variantTitle.tsx => title.tsx} (100%) create mode 100644 docs/examples/textcompact/languageTokens.tsx create mode 100644 docs/examples/textui/languageTokens.tsx diff --git a/docs/examples/heading/languageTokens.tsx b/docs/examples/heading/languageTokens.tsx new file mode 100644 index 0000000000..16876af8b6 --- /dev/null +++ b/docs/examples/heading/languageTokens.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import { Box, ColorSchemeProvider, Flex, Heading, SelectList } from 'gestalt'; + +export default function Example() { + const [language, setLanguage] = useState<'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi'>( + 'default', + ); + + const content = Object.freeze({ + default: + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + }); + + return ( + + + { + if ( + value === 'default' || + value === 'ja' || + value === 'tall' || + value === 'ck' || + value === 'th' || + value === 'vi' + ) { + setLanguage(value); + } + }} + > + {[ + { label: 'default', value: 'default' }, + { label: 'tall', value: 'tall' }, + { label: 'ck', value: 'ck' }, + { label: 'ja', value: 'ja' }, + { label: 'vi', value: 'vi' }, + { label: 'th', value: 'th' }, + ].map(({ label, value }) => ( + + ))} + + + {content[language]} + + + + ); +} diff --git a/docs/examples/text/variantAlignment.tsx b/docs/examples/text/alignment.tsx similarity index 100% rename from docs/examples/text/variantAlignment.tsx rename to docs/examples/text/alignment.tsx diff --git a/docs/examples/text/variantBoxInline.tsx b/docs/examples/text/boxInline.tsx similarity index 100% rename from docs/examples/text/variantBoxInline.tsx rename to docs/examples/text/boxInline.tsx diff --git a/docs/examples/text/variantColors.tsx b/docs/examples/text/colors.tsx similarity index 100% rename from docs/examples/text/variantColors.tsx rename to docs/examples/text/colors.tsx diff --git a/docs/examples/text/languageTokens.tsx b/docs/examples/text/languageTokens.tsx new file mode 100644 index 0000000000..dca26b0319 --- /dev/null +++ b/docs/examples/text/languageTokens.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import { Box, ColorSchemeProvider, Flex, SelectList, Text } from 'gestalt'; + +export default function Example() { + const [language, setLanguage] = useState<'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi'>( + 'default', + ); + + const content = Object.freeze({ + default: + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + }); + + return ( + + + { + if ( + value === 'default' || + value === 'ja' || + value === 'tall' || + value === 'ck' || + value === 'th' || + value === 'vi' + ) { + setLanguage(value); + } + }} + > + {[ + { label: 'default', value: 'default' }, + { label: 'tall', value: 'tall' }, + { label: 'ck', value: 'ck' }, + { label: 'ja', value: 'ja' }, + { label: 'vi', value: 'vi' }, + { label: 'th', value: 'th' }, + ].map(({ label, value }) => ( + + ))} + + + {content[language]} + + + + ); +} diff --git a/docs/examples/text/variantOverflowTruncation.tsx b/docs/examples/text/overflowTruncation.tsx similarity index 100% rename from docs/examples/text/variantOverflowTruncation.tsx rename to docs/examples/text/overflowTruncation.tsx diff --git a/docs/examples/text/variantRefs.tsx b/docs/examples/text/refs.tsx similarity index 100% rename from docs/examples/text/variantRefs.tsx rename to docs/examples/text/refs.tsx diff --git a/docs/examples/text/variantSizes.tsx b/docs/examples/text/sizes.tsx similarity index 100% rename from docs/examples/text/variantSizes.tsx rename to docs/examples/text/sizes.tsx diff --git a/docs/examples/text/variantStyles.tsx b/docs/examples/text/styles.tsx similarity index 100% rename from docs/examples/text/variantStyles.tsx rename to docs/examples/text/styles.tsx diff --git a/docs/examples/text/variantTitle.tsx b/docs/examples/text/title.tsx similarity index 100% rename from docs/examples/text/variantTitle.tsx rename to docs/examples/text/title.tsx diff --git a/docs/examples/textcompact/languageTokens.tsx b/docs/examples/textcompact/languageTokens.tsx new file mode 100644 index 0000000000..eed5c913fe --- /dev/null +++ b/docs/examples/textcompact/languageTokens.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import { Box, ColorSchemeProvider, Flex, SelectList, TextCompact } from 'gestalt'; + +export default function Example() { + const [language, setLanguage] = useState<'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi'>( + 'default', + ); + + const content = Object.freeze({ + default: + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + }); + + return ( + + + { + if ( + value === 'default' || + value === 'ja' || + value === 'tall' || + value === 'ck' || + value === 'th' || + value === 'vi' + ) { + setLanguage(value); + } + }} + > + {[ + { label: 'default', value: 'default' }, + { label: 'tall', value: 'tall' }, + { label: 'ck', value: 'ck' }, + { label: 'ja', value: 'ja' }, + { label: 'vi', value: 'vi' }, + { label: 'th', value: 'th' }, + ].map(({ label, value }) => ( + + ))} + + + {content[language]} + + + + ); +} diff --git a/docs/examples/textui/languageTokens.tsx b/docs/examples/textui/languageTokens.tsx new file mode 100644 index 0000000000..3782718cd0 --- /dev/null +++ b/docs/examples/textui/languageTokens.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import { Box, ColorSchemeProvider, Flex, SelectList, TextUI } from 'gestalt'; + +export default function Example() { + const [language, setLanguage] = useState<'default' | 'tall' | 'ck' | 'ja' | 'th' | 'vi'>( + 'default', + ); + + const content = Object.freeze({ + default: + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + }); + + return ( + + + { + if ( + value === 'default' || + value === 'ja' || + value === 'tall' || + value === 'ck' || + value === 'th' || + value === 'vi' + ) { + setLanguage(value); + } + }} + > + {[ + { label: 'default', value: 'default' }, + { label: 'tall', value: 'tall' }, + { label: 'ck', value: 'ck' }, + { label: 'ja', value: 'ja' }, + { label: 'vi', value: 'vi' }, + { label: 'th', value: 'th' }, + ].map(({ label, value }) => ( + + ))} + + + {content[language]} + + + + ); +} diff --git a/docs/pages/web/heading.tsx b/docs/pages/web/heading.tsx index 0793155ce2..2230bf35d4 100644 --- a/docs/pages/web/heading.tsx +++ b/docs/pages/web/heading.tsx @@ -19,6 +19,7 @@ import dontUseToEmphasizeText from '../../examples/heading/dontUseToEmphasizeTex import dontUseVagueLanguage from '../../examples/heading/dontUseVagueLanguage'; import groupTextIntoSections from '../../examples/heading/groupTextIntoSections'; import keepHeadingShort from '../../examples/heading/keepHeadingShort'; +import languageTokens from '../../examples/heading/languageTokens'; import mainExample from '../../examples/heading/mainExample'; import overflowAndTruncationExample from '../../examples/heading/overflowAndTruncationExample'; import startAlignHeadings from '../../examples/heading/startAlignHeadings'; @@ -185,6 +186,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen type="info" /> + @@ -263,11 +265,9 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen diff --git a/docs/pages/web/text.tsx b/docs/pages/web/text.tsx index 323b9de41b..f9e181cf84 100644 --- a/docs/pages/web/text.tsx +++ b/docs/pages/web/text.tsx @@ -8,6 +8,9 @@ import Page from '../../docs-components/Page'; import PageHeader from '../../docs-components/PageHeader'; import QualityChecklist from '../../docs-components/QualityChecklist'; import SandpackExample from '../../docs-components/SandpackExample'; +import alignment from '../../examples/text/alignment'; +import boxInline from '../../examples/text/boxInline'; +import colors from '../../examples/text/colors'; import doMinimalStyle from '../../examples/text/doMinimalStyle'; import dontCenterAlign from '../../examples/text/dontCenterAlign'; import dontMixStyles from '../../examples/text/dontMixStyles'; @@ -16,15 +19,13 @@ import dontUseHierarchy from '../../examples/text/dontUseHierarchy'; import doStartAlign from '../../examples/text/doStartAlign'; import doUseSize from '../../examples/text/doUseSize'; import doWeight from '../../examples/text/doWeight'; +import languageTokens from '../../examples/text/languageTokens'; import main from '../../examples/text/main'; -import variantAlignment from '../../examples/text/variantAlignment'; -import variantBoxInline from '../../examples/text/variantBoxInline'; -import variantColors from '../../examples/text/variantColors'; -import variantOverflowTruncation from '../../examples/text/variantOverflowTruncation'; -import variantRefs from '../../examples/text/variantRefs'; -import variantSizes from '../../examples/text/variantSizes'; -import variantStyles from '../../examples/text/variantStyles'; -import variantTitle from '../../examples/text/variantTitle'; +import overflowTruncation from '../../examples/text/overflowTruncation'; +import refs from '../../examples/text/refs'; +import sizes from '../../examples/text/sizes'; +import styles from '../../examples/text/styles'; +import title from '../../examples/text/title'; export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen }) { return ( @@ -178,9 +179,9 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen @@ -188,7 +189,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen description="Use `align` to adjust the positioning of text within wrapper elements." title="Alignment" > - + - + - + @@ -232,7 +229,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen `} title="Sizes" > - + - + - + + + + + Date: Tue, 24 Sep 2024 17:15:02 +0200 Subject: [PATCH 4/9] more --- packages/gestalt-datepicker/src/DatePicker/VRDateInput.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css b/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css index 7284bdf47d..083f9a3886 100644 --- a/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css +++ b/packages/gestalt-datepicker/src/DatePicker/VRDateInput.css @@ -58,6 +58,7 @@ .enabledBorder:focus, .errorBorder:focus { border: 1px solid var(--sema-color-border-focus-inner-default); + outline: 2px solid var(--sema-color-border-focus-outer-default); } .enabledBorder:not(:focus):hover { From 4058da8fd12642bd739d399966fa25ecd12fa900 Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 17:36:02 +0200 Subject: [PATCH 5/9] more --- docs/pages/web/text.tsx | 7 +------ packages/gestalt/src/contexts/ColorSchemeProvider.tsx | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/docs/pages/web/text.tsx b/docs/pages/web/text.tsx index f9e181cf84..070ac6f70d 100644 --- a/docs/pages/web/text.tsx +++ b/docs/pages/web/text.tsx @@ -253,12 +253,7 @@ Note: Use "underline" style with caution. It should be limited to links and it's description={`Don't use \`ref\` to manipulate the underlaying HTML div or span elements. Use \`ref\` to only read HTML attributes. For example, a valid use case can be detecting [truncation](#Overflow-and-truncation). The example below illustrates a case where detecting truncation allows rendering links contained within Text.`} title="Refs" > - + diff --git a/packages/gestalt/src/contexts/ColorSchemeProvider.tsx b/packages/gestalt/src/contexts/ColorSchemeProvider.tsx index 155e634b70..92d67cfbda 100644 --- a/packages/gestalt/src/contexts/ColorSchemeProvider.tsx +++ b/packages/gestalt/src/contexts/ColorSchemeProvider.tsx @@ -68,7 +68,7 @@ const themeToStyles = ( Object.keys(theme).forEach((key) => { styles += ` --gestalt-theme: ${isVisualRefresh ? 'visualRefresh' : 'classic'}-${ // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ colorSchemeName: "lightMode" | "darkMode"; }'. - `${theme[key] }_lineHeight_${ language}` + `${theme[key]}_lineHeight_${language}` };\n`; }); From a1ea63ba67aa9b7a90dfd78be796f90243dd7923 Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 17:45:24 +0200 Subject: [PATCH 6/9] more --- docs/examples/heading/languageTokens.tsx | 20 +++++++++++++------- docs/examples/text/languageTokens.tsx | 19 ++++++++++++------- docs/examples/textui/languageTokens.tsx | 19 ++++++++++++------- docs/pages/web/heading.tsx | 1 + docs/pages/web/text.tsx | 1 + docs/pages/web/textcompact.tsx | 1 + docs/pages/web/textui.tsx | 1 + 7 files changed, 41 insertions(+), 21 deletions(-) diff --git a/docs/examples/heading/languageTokens.tsx b/docs/examples/heading/languageTokens.tsx index 16876af8b6..dfc9f159cd 100644 --- a/docs/examples/heading/languageTokens.tsx +++ b/docs/examples/heading/languageTokens.tsx @@ -8,12 +8,12 @@ export default function Example() { const content = Object.freeze({ default: - 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', - tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', - ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', - ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', - vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', - th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has.', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm ', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่', }); return ( @@ -52,7 +52,13 @@ export default function Example() { id="localizationLanaguage" language={language} > - {content[language]} + + {content[language]} + {content[language]} + {content[language]} + {content[language]} + {content[language]} + diff --git a/docs/examples/text/languageTokens.tsx b/docs/examples/text/languageTokens.tsx index dca26b0319..267c2b574e 100644 --- a/docs/examples/text/languageTokens.tsx +++ b/docs/examples/text/languageTokens.tsx @@ -8,12 +8,12 @@ export default function Example() { const content = Object.freeze({ default: - 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', - tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', - ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', - ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', - vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', - th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has.', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm ', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่', }); return ( @@ -52,7 +52,12 @@ export default function Example() { id="localizationLanaguage" language={language} > - {content[language]} + + {content[language]} + {content[language]} + {content[language]} + {content[language]} + diff --git a/docs/examples/textui/languageTokens.tsx b/docs/examples/textui/languageTokens.tsx index 3782718cd0..2ce4c55764 100644 --- a/docs/examples/textui/languageTokens.tsx +++ b/docs/examples/textui/languageTokens.tsx @@ -8,12 +8,12 @@ export default function Example() { const content = Object.freeze({ default: - 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has. Alienum officiis vulputate sea ne. Nostrud mediocritatem pro in. Euripidis intellegat scriptorem ad vix', - tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण देने शीघ्र सारांश प्रसारन विचरविमर्श उदेशीत आधुनिक विचारशिलता उनको बलवान', - ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教。転図思万応野心信住調策公被常解年間本。自教震済日実産記運聞玲止辛需成上人通点。所再男高北補西集齢訪上根', - ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他。れへ巣課他毛てむゅむす、るふせ素等タヌユツャョ毛露かほれよむつ氏雲区露素やゅて魔巣露樹差。手課擢屋列他無屋手区模露も派二日樹氏くたすゅ。', - vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo', - th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง', + 'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has.', + tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण', + ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教', + ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他', + vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm ', + th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่', }); return ( @@ -52,7 +52,12 @@ export default function Example() { id="localizationLanaguage" language={language} > - {content[language]} + + {content[language]} + {content[language]} + {content[language]} + {content[language]} + diff --git a/docs/pages/web/heading.tsx b/docs/pages/web/heading.tsx index 2230bf35d4..c65b9a4402 100644 --- a/docs/pages/web/heading.tsx +++ b/docs/pages/web/heading.tsx @@ -267,6 +267,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen diff --git a/docs/pages/web/text.tsx b/docs/pages/web/text.tsx index 070ac6f70d..23ff96aa74 100644 --- a/docs/pages/web/text.tsx +++ b/docs/pages/web/text.tsx @@ -180,6 +180,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen diff --git a/docs/pages/web/textcompact.tsx b/docs/pages/web/textcompact.tsx index 19a9012e1c..19415ae371 100644 --- a/docs/pages/web/textcompact.tsx +++ b/docs/pages/web/textcompact.tsx @@ -33,6 +33,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen diff --git a/docs/pages/web/textui.tsx b/docs/pages/web/textui.tsx index 17166e0c5d..633e212b26 100644 --- a/docs/pages/web/textui.tsx +++ b/docs/pages/web/textui.tsx @@ -29,6 +29,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen From 639d0176d6ed831e9682a77d3ac17d390ee7782e Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 17:49:01 +0200 Subject: [PATCH 7/9] more --- docs/pages/web/heading.tsx | 1 + docs/pages/web/text.tsx | 3 ++- docs/pages/web/textcompact.tsx | 1 + docs/pages/web/textui.tsx | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/web/heading.tsx b/docs/pages/web/heading.tsx index c65b9a4402..7d5eb35828 100644 --- a/docs/pages/web/heading.tsx +++ b/docs/pages/web/heading.tsx @@ -266,6 +266,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen diff --git a/docs/pages/web/textcompact.tsx b/docs/pages/web/textcompact.tsx index 19415ae371..8972d1f8c9 100644 --- a/docs/pages/web/textcompact.tsx +++ b/docs/pages/web/textcompact.tsx @@ -32,6 +32,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen Date: Tue, 24 Sep 2024 17:58:02 +0200 Subject: [PATCH 8/9] more --- docs/examples/text/languageTokens.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples/text/languageTokens.tsx b/docs/examples/text/languageTokens.tsx index 267c2b574e..92784d0248 100644 --- a/docs/examples/text/languageTokens.tsx +++ b/docs/examples/text/languageTokens.tsx @@ -52,7 +52,7 @@ export default function Example() { id="localizationLanaguage" language={language} > - + {content[language]} {content[language]} {content[language]} From 8ca038acd531878a0dc67fd5f46ae87edd5d6f76 Mon Sep 17 00:00:00 2001 From: acarreras Date: Tue, 24 Sep 2024 18:23:30 +0200 Subject: [PATCH 9/9] more --- docs/pages/web/heading.tsx | 2 +- docs/pages/web/text.tsx | 2 +- docs/pages/web/textcompact.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/web/heading.tsx b/docs/pages/web/heading.tsx index 7d5eb35828..86e194400d 100644 --- a/docs/pages/web/heading.tsx +++ b/docs/pages/web/heading.tsx @@ -269,7 +269,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen layout="column" name={generatedDocGen?.displayName} noDefaultLabelProvider - notes="Keep text simple and short to avoid truncation or line wrapping in UI controls like buttons when translating languages that require more characters." + notes="Keep text simple and short to avoid truncation or line wrapping when translating languages that require more characters." /> diff --git a/docs/pages/web/text.tsx b/docs/pages/web/text.tsx index 7ba853315b..76c3323fe1 100644 --- a/docs/pages/web/text.tsx +++ b/docs/pages/web/text.tsx @@ -183,7 +183,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen layout="column" name={generatedDocGen?.displayName} noDefaultLabelProvider - notes="Keep text simple and short to avoid truncation or line wrapping in UI controls like buttons when translating languages that require more characters." + notes="Keep text simple and short to avoid truncation or line wrapping when translating languages that require more characters." /> diff --git a/docs/pages/web/textcompact.tsx b/docs/pages/web/textcompact.tsx index 8972d1f8c9..f662830bee 100644 --- a/docs/pages/web/textcompact.tsx +++ b/docs/pages/web/textcompact.tsx @@ -35,7 +35,7 @@ export default function TextPage({ generatedDocGen }: { generatedDocGen: DocGen layout="column" name={generatedDocGen?.displayName} noDefaultLabelProvider - notes="Keep text simple and short to avoid truncation or line wrapping in UI controls like buttons when translating languages that require more characters." + notes="Keep text simple and short to avoid truncation or line wrapping when translating languages that require more characters." />