From 01bd964b00bf35787697d8e3cf00370e4f580ee0 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Mon, 20 Mar 2023 22:57:33 -0700 Subject: [PATCH 01/13] additional font loading for storybook and chromatic font stories --- .storybook/preview-head.html | 60 ++++++++++++++++ .../components/commons/fonts.css | 24 ++++--- ...IllustratedMessage.Languages.chromatic.tsx | 71 +++++++++++++++++++ .../chromatic/StatusLight.chromatic.tsx | 23 ++++++ .../chromatic/Textfield.chromatic.js | 21 ++++++ 5 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 7569aabc587..9c9d6db567a 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/@adobe/spectrum-css-temp/components/commons/fonts.css b/packages/@adobe/spectrum-css-temp/components/commons/fonts.css index bc08a9fcba6..45a0aa548c9 100644 --- a/packages/@adobe/spectrum-css-temp/components/commons/fonts.css +++ b/packages/@adobe/spectrum-css-temp/components/commons/fonts.css @@ -11,7 +11,9 @@ governing permissions and limitations under the License. */ :root { - --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --spectrum-font-fallbacks-sans: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + + font-synthesis: none; /* Not used --spectrum-font-fallbacks-serif: serif; @@ -27,15 +29,15 @@ governing permissions and limitations under the License. --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base); */ - --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-base: var(--spectrum-font-fallbacks-sans); --spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-zh: var(--spectrum-font-family-zhhans); - --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-ar: 'myriad-arabic', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-he: 'myriad-hebrew', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif; + --spectrum-font-family-zh: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif; + --spectrum-font-family-zhhant: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif; + --spectrum-font-family-ko: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif; + --spectrum-font-family-ja: adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; --spectrum-text-size: var(--spectrum-alias-font-size-default); --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium); --spectrum-text-size-text-label: var(--spectrum-label-text-size); @@ -57,6 +59,10 @@ governing permissions and limitations under the License. font-family: var(--spectrum-font-family-zhhans); } + &:lang(zh-Hant) { + font-family: var(--spectrum-font-family-zhhant); + } + &:lang(zh) { font-family: var(--spectrum-font-family-zh); } diff --git a/packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx b/packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx new file mode 100644 index 00000000000..6c1e9a8c121 --- /dev/null +++ b/packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx @@ -0,0 +1,71 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ +import {ComponentMeta, ComponentStoryObj} from '@storybook/react'; +import {Content} from '@react-spectrum/view'; +import {Flex} from '@react-spectrum/layout'; +import {Heading} from '@react-spectrum/text'; +import {IllustratedMessage} from '..'; +import NotFound from '@spectrum-icons/illustrations/src/NotFound'; +import React from 'react'; + +type IllustratedMessageStory = ComponentStoryObj; + +export default { + title: 'Languages/IllustratedMessage', + component: IllustratedMessage, + parameters: { + chromaticProvider: { + colorSchemes: ['light'], + locales: ['en-US', 'ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'], + scales: ['large'], + express: false + } + } +} as ComponentMeta; + +export const _NotFound: IllustratedMessageStory = { + render: () => ( + + + + Error 404 + Page not found + + + + 404 خطأ + الصفحة غير موجودة + + + + 错误 404 + 找不到网页 + + + + 錯誤 404 + 找不到網頁 + + + + エラー 404 + ページが見つかりません + + + + 오류 404 + 페이지를 찾을 수 없음 + + + ), + name: 'Not found: no italic in CCJK' +}; \ No newline at end of file diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx index 919faf46bcd..4894ba9b444 100644 --- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx +++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx @@ -33,6 +33,29 @@ storiesOf('StatusLight', module) ) ); +storiesOf('Languages/StatusLight', module) + .addParameters({ + chromaticProvider: { + colorSchemes: ['light'], + express: false, + locales: ['en-US', 'ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'], + scales: ['large'] + } + }) + .add( + 'Neutral: no italic in CCJK', + () => ( + + Help + مساعدة + 帮助 + 說明 + ヘルプ + 도움말 + + ) + ); + function render() { return ( diff --git a/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js b/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js index 99a157f3246..425b5dd4e37 100644 --- a/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js +++ b/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js @@ -118,6 +118,27 @@ storiesOf('Textfield', module) )}, false) ); +storiesOf('Languages/Textfield', module) + .addParameters({ + chromaticProvider: { + colorSchemes: ['light'], + express: false, + locales: ['en-US', 'ar-AE', 'fr-FR', 'de-DE'], + scales: ['large'] + } + }) + .add( + 'diacritics', + () => ( + + + + + + + ) + ); + // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter function render(props = {}, disabled = true) { return ( From b79f4758aac804005912c26acf1a1bf2525b4284 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Tue, 21 Mar 2023 16:55:09 -0700 Subject: [PATCH 02/13] adding a zh-Hant font story --- .../provider/stories/Provider.stories.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx index 5f3548b2fff..d5ac7658876 100644 --- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx +++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx @@ -166,7 +166,18 @@ storiesOf('Provider', module) ); - }); + }) + .add( + 'locale: zh-Hant', + () => ( +
+
Heaven and earth are mysterious and yellow, the universe is prehistoric
+ +
天地玄黃，宇宙洪荒
+ +
+ ) + ); function render(props = {}) { return ( From 068da66dfe3234d955a15c01c8191048c155ee8a Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Thu, 23 Mar 2023 10:31:39 -0700 Subject: [PATCH 03/13] using a single fonts web project to proload fonts --- .chromatic/preview-head.html | 189 +++++++++++++----- .storybook/preview-head.html | 189 +++++++++++++----- ...IllustratedMessage.Languages.chromatic.tsx | 2 +- 3 files changed, 277 insertions(+), 103 deletions(-) diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html index 9c9d6db567a..83678f4ce09 100644 --- a/.chromatic/preview-head.html +++ b/.chromatic/preview-head.html @@ -1,58 +1,145 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From b5b602e19f08910ab4078f8c51b131373bf59f54 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Tue, 28 Mar 2023 08:55:32 -0700 Subject: [PATCH 08/13] improving chinese locale selection --- .chromatic/preview-head.html | 18 +++++++++++++++--- .../components/commons/fonts.css | 12 ++++++++++-- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html index ab4b49491fd..1f031275184 100644 --- a/.chromatic/preview-head.html +++ b/.chromatic/preview-head.html @@ -134,6 +134,18 @@ - - + + diff --git a/packages/@adobe/spectrum-css-temp/components/commons/fonts.css b/packages/@adobe/spectrum-css-temp/components/commons/fonts.css index 0b8d4a85bf9..9a458c9c293 100644 --- a/packages/@adobe/spectrum-css-temp/components/commons/fonts.css +++ b/packages/@adobe/spectrum-css-temp/components/commons/fonts.css @@ -55,6 +55,10 @@ governing permissions and limitations under the License. font-family: var(--spectrum-font-family-he); } + &:lang(zh) { + font-family: var(--spectrum-font-family-zh); + } + &:lang(zh-Hans) { font-family: var(--spectrum-font-family-zhhans); } @@ -63,8 +67,12 @@ governing permissions and limitations under the License. font-family: var(--spectrum-font-family-zhhant); } - &:lang(zh) { - font-family: var(--spectrum-font-family-zh); + &:lang(zh-SG) { + font-family: var(--spectrum-font-family-zhhans); + } + + &:lang(zh-CN) { + font-family: var(--spectrum-font-family-zhhans); } &:lang(ko) { From 2b54537627e1385645f23c1cdc79797a50d7e2a8 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Tue, 28 Mar 2023 16:00:22 -0700 Subject: [PATCH 09/13] myriad arabic with features all --- .chromatic/preview-head.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html index 1f031275184..b55ba3dee9b 100644 --- a/.chromatic/preview-head.html +++ b/.chromatic/preview-head.html @@ -45,16 +45,16 @@ 84ebdd font: myriad-arabic, style: italic, weight: 900 c16b85 font: myriad-arabic, weight: 900 --> - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -