From f239d0b1a96c3e6119135fe6bbf1994dc9984257 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Wed, 5 Apr 2023 13:31:18 -0700 Subject: [PATCH] Font improvements, loading fonts in Storybook, and adding more font Chromatic stories (#4238) --- .chromatic/preview-head.html | 208 +++++++++++++----- .storybook/preview-head.html | 25 ++- .../components/commons/fonts.css | 36 ++- .../chromatic/ActionButton.chromatic.tsx | 11 +- ...IllustratedMessage.Languages.chromatic.tsx | 71 ++++++ .../chromatic/Picker.Languages.chromatic.tsx | 68 ++++++ .../provider/stories/Provider.stories.tsx | 13 +- .../chromatic/StatusLight.chromatic.tsx | 23 ++ .../textfield/chromatic/TextArea.chromatic.js | 28 ++- .../chromatic/Textfield.chromatic.js | 39 +++- packages/dev/docs/src/docs.css | 58 +++++ 11 files changed, 489 insertions(+), 91 deletions(-) create mode 100644 packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx create mode 100644 packages/@react-spectrum/picker/chromatic/Picker.Languages.chromatic.tsx diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html index 9c9d6db567a..b55ba3dee9b 100644 --- a/.chromatic/preview-head.html +++ b/.chromatic/preview-head.html @@ -1,61 +1,151 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 7569aabc587..072aca784fd 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1 +1,24 @@ - + + + + diff --git a/packages/@adobe/spectrum-css-temp/components/commons/fonts.css b/packages/@adobe/spectrum-css-temp/components/commons/fonts.css index bc08a9fcba6..9a458c9c293 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: weight; /* 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); @@ -53,12 +55,24 @@ 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); } - &:lang(zh) { - font-family: var(--spectrum-font-family-zh); + &:lang(zh-Hant) { + font-family: var(--spectrum-font-family-zhhant); + } + + &:lang(zh-SG) { + font-family: var(--spectrum-font-family-zhhans); + } + + &:lang(zh-CN) { + font-family: var(--spectrum-font-family-zhhans); } &:lang(ko) { diff --git a/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx b/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx index 035fa1820ff..c3e7ebfe601 100644 --- a/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx +++ b/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx @@ -112,7 +112,16 @@ storiesOf('Button/ActionButton', module) ) - ) + ); + +storiesOf('Languages/ActionButton', module) + .addParameters({ + chromaticProvider: { + colorSchemes: ['light'], + express: false, + locales: ['en-US', 'ja-JP'], + scales: ['large', 'medium'] + }}) .add( 'Japanese, icon + text, staticColor: white', () => ( 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..d2091afedca --- /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'], + express: false, + locales: ['ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'], + scales: ['large', 'medium'] + } + } +} as ComponentMeta; + +export const _NotFound: IllustratedMessageStory = { + render: () => ( + + + + Error 404 + Page not found + + + + 404 خطأ + الصفحة غير موجودة + + + + 错误 404 + 找不到网页 + + + + 錯誤 404 + 找不到網頁 + + + + エラー 404 + ページが見つかりません + + + + 오류 404 + 페이지를 찾을 수 없음 + + + ), + name: 'Not found: no italic in CCJK' +}; diff --git a/packages/@react-spectrum/picker/chromatic/Picker.Languages.chromatic.tsx b/packages/@react-spectrum/picker/chromatic/Picker.Languages.chromatic.tsx new file mode 100644 index 00000000000..baf25ac6102 --- /dev/null +++ b/packages/@react-spectrum/picker/chromatic/Picker.Languages.chromatic.tsx @@ -0,0 +1,68 @@ +/* + * Copyright 2023 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, Story} from '@storybook/react'; +import {Item, Picker, Section} from '..'; +import React from 'react'; +import {SpectrumPickerProps} from '@react-types/select'; + +export default { + title: 'Languages/Picker', + component: Picker, + parameters: { + chromaticProvider: {colorSchemes: ['light'], express: false, locales: ['en-US'], scales: ['large', 'medium']} + } +} as ComponentMeta; + +const Template = (): Story> => (args) => ( + +
+ Aardvark + Kangaroo + Snake +
+
+ Danni + Devon + Ross +
+ +); + +export const ArabicPlaceholder = Template().bind({}); +ArabicPlaceholder.args = {label: 'Pick your favorite', placeholder: 'دولفين'}; +ArabicPlaceholder.parameters = { + chromaticProvider: {locales: ['ar-AE']} +}; + +export const ChineseSimplifiedPlaceholder = Template().bind({}); +ChineseSimplifiedPlaceholder.args = {label: 'Pick your favorite', placeholder: '海豚'}; +ChineseSimplifiedPlaceholder.parameters = { + chromaticProvider: {locales: ['zh-CN']} +}; + +export const ChineseTraditionalPlaceholder = Template().bind({}); +ChineseTraditionalPlaceholder.args = {label: 'Pick your favorite', placeholder: '海豚'}; +ChineseTraditionalPlaceholder.parameters = { + chromaticProvider: {locales: ['zh-TW']} +}; + +export const JapanesePlaceholder = Template().bind({}); +JapanesePlaceholder.args = {label: 'Pick your favorite', placeholder: 'イルカ'}; +JapanesePlaceholder.parameters = { + chromaticProvider: {locales: ['ja-JP']} +}; + +export const KoreanPlaceholder = Template().bind({}); +KoreanPlaceholder.args = {label: 'Pick your favorite', placeholder: '돌고래'}; +KoreanPlaceholder.parameters = { + chromaticProvider: {locales: ['ko-KR']} +}; 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 ( diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx index 919faf46bcd..37af51f4e35 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: ['ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'], + scales: ['large', 'medium'] + } + }) + .add( + 'Neutral: no italic in CCJK', + () => ( + + Help + مساعدة + 帮助 + 說明 + ヘルプ + 도움말 + + ) + ); + function render() { return ( diff --git a/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js b/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js index 34465249031..b4a3da111b2 100644 --- a/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js +++ b/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js @@ -18,7 +18,7 @@ import {storiesOf} from '@storybook/react'; import {TextArea} from '../'; storiesOf('TextArea', module) - .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}}) + .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE']}}) .add( 'Default', () => render() @@ -85,14 +85,6 @@ storiesOf('TextArea', module) .add('custom height', () => render({icon: , validationState: 'invalid', height: 350}) ) - .add( - 'value: 測試, icon: Info, labelPosition: side, validationState: valid', - () => render({value: '測試', icon: , labelPosition: 'side', validationState: 'valid'}) - ) - .add( - 'value: اختبار, isRequired: false, necessityIndicator: label', - () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'}) - ) .add( 'contextual help', args => render({...args, contextualHelp: ( @@ -121,6 +113,24 @@ storiesOf('TextArea', module) )}, false) ); +storiesOf('Languages/TextArea', module) + .addParameters({ + chromaticProvider: { + colorSchemes: ['light'], + express: false, + locales: ['ar-AE', 'zh-TW'], + scales: ['large', 'medium'] + } + }) + .add( + 'value: 測試, icon: Info, labelPosition: side, validationState: valid', + () => render({value: '測試', icon: , labelPosition: 'side', validationState: 'valid'}) + ) + .add( + 'value: اختبار, isRequired: false, necessityIndicator: label', + () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'}) + ); + // 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 ( diff --git a/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js b/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js index 99a157f3246..f622053d842 100644 --- a/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js +++ b/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js @@ -18,7 +18,7 @@ import {storiesOf} from '@storybook/react'; import {TextField} from '../'; storiesOf('Textfield', module) - .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}}) + .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE']}}) .add( 'Default', () => render() @@ -82,14 +82,6 @@ storiesOf('Textfield', module) .add('custom width', () => render({icon: , validationState: 'invalid', width: 275}) ) - .add( - 'value: 測試, icon: Info, labelPosition: side, validationState: valid', - () => render({value: '測試', icon: , labelPosition: 'side', validationState: 'valid'}) - ) - .add( - 'value: اختبار, isRequired: false, necessityIndicator: label', - () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'}) - ) .add( 'contextual help', args => render({...args, contextualHelp: ( @@ -118,6 +110,35 @@ storiesOf('Textfield', module) )}, false) ); +storiesOf('Languages/Textfield', module) + .addParameters({ + chromaticProvider: { + colorSchemes: ['light'], + express: false, + locales: ['ar-AE', 'fr-FR', 'de-DE', 'zh-TW'], + scales: ['large', 'medium'] + } + }) + .add( + 'diacritics', + () => ( + + + + + + + ) + ) + .add( + 'value: 測試, icon: Info, labelPosition: side, validationState: valid', + () => render({value: '測試', icon: , labelPosition: 'side', validationState: 'valid'}) + ) + .add( + 'value: اختبار, isRequired: false, necessityIndicator: label', + () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'}) + ); + // 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 ( diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css index b14eb68382c..b880e0d1cd8 100644 --- a/packages/dev/docs/src/docs.css +++ b/packages/dev/docs/src/docs.css @@ -51,6 +51,64 @@ font-weight: 900; } +/** pulled from web project id: 'uei1lip' */ +@font-face { + font-family: "myriad-arabic"; + src: url("https://use.typekit.net/af/ad6dbc/00000000000000007735a300/30/l?unicode=AAAHygAAAAdhg4V2jXrgvTqablOmIuR90xJ6f7oYX7HHszHOhbuHChMcgQn5RM8D_2_09h-EDof5QbhEgbbA63nwPrW_c-fWpSq9I3W2wnPr2mXL5hwU9XCfpfCkLYjBT4lM8H7L4ONWX3ugfaTSwXm4HDcbyteaHuCpkuHywfcZB3Qmfrf-lhmtbmdiEYP1_3wmtwTqUe-84RpPif-WvZba-nEoqF8x54v53DpQrOTj48ldu33mIr3t5_p7J-7EIbKWiAPY-6fOlmzgfKcT52EWvLAE-pP79aefMQlHioFliM5EGken-uDgxR0sm5rfhBd4WUTkH-k-gPs7g-WyugAAAb0&features=ALL&v=3"); + font-display: swap; + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "myriad-arabic"; + src: url("https://use.typekit.net/af/d1936b/00000000000000007735a2fd/30/l?unicode=AAAHygAAAAdhg4V2jXrgvTqablOmIuR90xJ6f7oYX7HHszHOhbuHChMcgQn5RM8D_2_09h-EDof5QbhEgbbA63nwPrW_c-fWpSq9I3W2wnPr2mXL5hwU9XCfpfCkLYjBT4lM8H7L4ONWX3ugfaTSwXm4HDcbyteaHuCpkuHywfcZB3Qmfrf-lhmtbmdiEYP1_3wmtwTqUe-84RpPif-WvZba-nEoqF8x54v53DpQrOTj48ldu33mIr3t5_p7J-7EIbKWiAPY-6fOlmzgfKcT52EWvLAE-pP79aefMQlHioFliM5EGken-uDgxR0sm5rfhBd4WUTkH-k-gPs7g-WyugAAAb0&features=ALL&v=3"); + font-display: swap; + font-style: italic; + font-weight: 400; +} +@font-face { + font-family: "myriad-hebrew"; + src: url("https://use.typekit.net/af/e6598e/00000000000000007735a31b/30/l?unicode=AAAHygAAAAdhg4V2jXrgvTqablOmIuR90xJ6f7oYX7HHszHOhbuHChMcgQn5RM8D_2_09h-EDof5QbhEgbbA63nwPrW_c-fWpSq9I3W2wnPr2mXL5hwU9XCfpfCkLYjBT4lM8H7L4ONWX3ugfaTSwXm4HDcbyteaHuCpkuHywfcZB3Qmfrf-lhmtbmdiEYP1_3wmtwTqUe-84RpPif-WvZba-nEoqF8x54v53DpQrOTj48ldu33mIr3t5_p7J-7EIbKWiAPY-6fOlmzgfKcT52EWvLAE-pP79aefMQlHioFliM5EGken-uDgxR0sm5rfhBd4WUTkH-k-gPs7g-WyugAAAb0&features=ALL&v=3"); + font-display: swap; + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "myriad-hebrew"; + src: url("https://use.typekit.net/af/26f595/00000000000000007735a313/30/l?unicode=AAAHygAAAAdhg4V2jXrgvTqablOmIuR90xJ6f7oYX7HHszHOhbuHChMcgQn5RM8D_2_09h-EDof5QbhEgbbA63nwPrW_c-fWpSq9I3W2wnPr2mXL5hwU9XCfpfCkLYjBT4lM8H7L4ONWX3ugfaTSwXm4HDcbyteaHuCpkuHywfcZB3Qmfrf-lhmtbmdiEYP1_3wmtwTqUe-84RpPif-WvZba-nEoqF8x54v53DpQrOTj48ldu33mIr3t5_p7J-7EIbKWiAPY-6fOlmzgfKcT52EWvLAE-pP79aefMQlHioFliM5EGken-uDgxR0sm5rfhBd4WUTkH-k-gPs7g-WyugAAAb0&features=ALL&v=3"); + font-display: swap; + font-style: italic; + font-weight: 400; +} +@font-face { + font-family: "adobe-clean-han-japanese"; + src: url("https://use.typekit.net/af/3a5e38/00000000000000007735dabb/30/m?features=ALL&v=4&chunks=511&order=0"); + font-display: swap; + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "adobe-clean-han-korean"; + src: url("https://use.typekit.net/af/d5dab5/00000000000000007735dabc/30/m?features=ALL&v=4&chunks=511&order=0"); + font-display: swap; + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "adobe-clean-han-simplified-c"; + src: url("https://use.typekit.net/af/e35bab/00000000000000007735dabd/30/m?features=ALL&v=4&chunks=511&order=0"); + font-display: swap; + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "adobe-clean-han-traditional"; + src: url("https://use.typekit.net/af/758ab2/00000000000000007735dabe/30/m?features=ALL&v=4&chunks=511&order=0"); + font-display: swap; + font-style: normal; + font-weight: 400; +} + /* https://use.typekit.net/use4asx.css */ @font-face { font-family: "Source Code Pro";