Skip to content

Commit f239d0b

Browse files
ktaborsktabors
authored
Font improvements, loading fonts in Storybook, and adding more font Chromatic stories (#4238)
1 parent 1d6ed94 commit f239d0b

File tree

11 files changed

+489
-91
lines changed

11 files changed

+489
-91
lines changed

‎.chromatic/preview-head.html‎

Lines changed: 149 additions & 59 deletions
Large diffs are not rendered by default.

‎.storybook/preview-head.html‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
<link rel="stylesheet" href="https://use.typekit.net/uma8ayv.css" />
1+
<!--
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
-->
12+
13+
<!-- This file loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese, adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
14+
Access to these fonts was provided to a team account. -->
15+
<script>
16+
(function(d) {
17+
var config = {
18+
kitId: 'uei1lip',
19+
scriptTimeout: 3000,
20+
async: true
21+
},
22+
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
23+
})(document);
24+
</script>

‎packages/@adobe/spectrum-css-temp/components/commons/fonts.css‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
:root {
14-
--spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14+
--spectrum-font-fallbacks-sans: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
15+
16+
font-synthesis: weight;
1517

1618
/* Not used
1719
--spectrum-font-fallbacks-serif: serif;
@@ -27,15 +29,15 @@ governing permissions and limitations under the License.
2729
--spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
2830
*/
2931

30-
--spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
32+
--spectrum-font-family-base: var(--spectrum-font-fallbacks-sans);
3133
--spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans);
32-
--spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
33-
--spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans);
34-
--spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
35-
--spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
36-
--spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans);
37-
--spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
38-
--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);
34+
--spectrum-font-family-ar: 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
35+
--spectrum-font-family-he: 'myriad-hebrew', var(--spectrum-font-fallbacks-sans);
36+
--spectrum-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif;
37+
--spectrum-font-family-zh: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif;
38+
--spectrum-font-family-zhhant: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif;
39+
--spectrum-font-family-ko: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif;
40+
--spectrum-font-family-ja: adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
3941
--spectrum-text-size: var(--spectrum-alias-font-size-default);
4042
--spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
4143
--spectrum-text-size-text-label: var(--spectrum-label-text-size);
@@ -53,12 +55,24 @@ governing permissions and limitations under the License.
5355
font-family: var(--spectrum-font-family-he);
5456
}
5557

58+
&:lang(zh) {
59+
font-family: var(--spectrum-font-family-zh);
60+
}
61+
5662
&:lang(zh-Hans) {
5763
font-family: var(--spectrum-font-family-zhhans);
5864
}
5965

60-
&:lang(zh) {
61-
font-family: var(--spectrum-font-family-zh);
66+
&:lang(zh-Hant) {
67+
font-family: var(--spectrum-font-family-zhhant);
68+
}
69+
70+
&:lang(zh-SG) {
71+
font-family: var(--spectrum-font-family-zhhans);
72+
}
73+
74+
&:lang(zh-CN) {
75+
font-family: var(--spectrum-font-family-zhhans);
6276
}
6377

6478
&:lang(ko) {

‎packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,16 @@ storiesOf('Button/ActionButton', module)
112112
</Flex>
113113
</View>
114114
)
115-
)
115+
);
116+
117+
storiesOf('Languages/ActionButton', module)
118+
.addParameters({
119+
chromaticProvider: {
120+
colorSchemes: ['light'],
121+
express: false,
122+
locales: ['en-US', 'ja-JP'],
123+
scales: ['large', 'medium']
124+
}})
116125
.add(
117126
'Japanese, icon + text, staticColor: white',
118127
() => (

‎packages/@react-spectrum/illustratedmessage/chromatic/IllustratedMessage.Languages.chromatic.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
13+
import {Content} from '@react-spectrum/view';
14+
import {Flex} from '@react-spectrum/layout';
15+
import {Heading} from '@react-spectrum/text';
16+
import {IllustratedMessage} from '..';
17+
import NotFound from '@spectrum-icons/illustrations/src/NotFound';
18+
import React from 'react';
19+
20+
type IllustratedMessageStory = ComponentStoryObj<typeof IllustratedMessage>;
21+
22+
export default {
23+
title: 'Languages/IllustratedMessage',
24+
component: IllustratedMessage,
25+
parameters: {
26+
chromaticProvider: {
27+
colorSchemes: ['light'],
28+
express: false,
29+
locales: ['ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'],
30+
scales: ['large', 'medium']
31+
}
32+
}
33+
} as ComponentMeta<typeof IllustratedMessage>;
34+
35+
export const _NotFound: IllustratedMessageStory = {
36+
render: () => (
37+
<Flex gap="size-200" direction="row" wrap>
38+
<IllustratedMessage width="size-2000">
39+
<NotFound />
40+
<Heading>Error 404</Heading>
41+
<Content>Page not found</Content>
42+
</IllustratedMessage>
43+
<IllustratedMessage width="size-2000">
44+
<NotFound />
45+
<Heading>404 خطأ</Heading>
46+
<Content>الصفحة غير موجودة</Content>
47+
</IllustratedMessage>
48+
<IllustratedMessage width="size-2000">
49+
<NotFound />
50+
<Heading>错误 404</Heading>
51+
<Content>找不到网页</Content>
52+
</IllustratedMessage>
53+
<IllustratedMessage width="size-2000">
54+
<NotFound />
55+
<Heading>錯誤 404</Heading>
56+
<Content>找不到網頁</Content>
57+
</IllustratedMessage>
58+
<IllustratedMessage width="size-2000">
59+
<NotFound />
60+
<Heading>エラー 404</Heading>
61+
<Content>ページが見つかりません</Content>
62+
</IllustratedMessage>
63+
<IllustratedMessage width="size-2000">
64+
<NotFound />
65+
<Heading>오류 404</Heading>
66+
<Content>페이지를 찾을 수 없음</Content>
67+
</IllustratedMessage>
68+
</Flex>
69+
),
70+
name: 'Not found: no italic in CCJK'
71+
};

‎packages/@react-spectrum/picker/chromatic/Picker.Languages.chromatic.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Copyright 2023 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
import {ComponentMeta, Story} from '@storybook/react';
13+
import {Item, Picker, Section} from '..';
14+
import React from 'react';
15+
import {SpectrumPickerProps} from '@react-types/select';
16+
17+
export default {
18+
title: 'Languages/Picker',
19+
component: Picker,
20+
parameters: {
21+
chromaticProvider: {colorSchemes: ['light'], express: false, locales: ['en-US'], scales: ['large', 'medium']}
22+
}
23+
} as ComponentMeta<typeof Picker>;
24+
25+
const Template = <T extends object>(): Story<SpectrumPickerProps<T>> => (args) => (
26+
<Picker {...args}>
27+
<Section title="Animals">
28+
<Item key="Aardvark">Aardvark</Item>
29+
<Item key="Kangaroo">Kangaroo</Item>
30+
<Item key="Snake">Snake</Item>
31+
</Section>
32+
<Section title="People">
33+
<Item key="Danni">Danni</Item>
34+
<Item key="Devon">Devon</Item>
35+
<Item key="Ross">Ross</Item>
36+
</Section>
37+
</Picker>
38+
);
39+
40+
export const ArabicPlaceholder = Template().bind({});
41+
ArabicPlaceholder.args = {label: 'Pick your favorite', placeholder: 'دولفين'};
42+
ArabicPlaceholder.parameters = {
43+
chromaticProvider: {locales: ['ar-AE']}
44+
};
45+
46+
export const ChineseSimplifiedPlaceholder = Template().bind({});
47+
ChineseSimplifiedPlaceholder.args = {label: 'Pick your favorite', placeholder: '海豚'};
48+
ChineseSimplifiedPlaceholder.parameters = {
49+
chromaticProvider: {locales: ['zh-CN']}
50+
};
51+
52+
export const ChineseTraditionalPlaceholder = Template().bind({});
53+
ChineseTraditionalPlaceholder.args = {label: 'Pick your favorite', placeholder: '海豚'};
54+
ChineseTraditionalPlaceholder.parameters = {
55+
chromaticProvider: {locales: ['zh-TW']}
56+
};
57+
58+
export const JapanesePlaceholder = Template().bind({});
59+
JapanesePlaceholder.args = {label: 'Pick your favorite', placeholder: 'イルカ'};
60+
JapanesePlaceholder.parameters = {
61+
chromaticProvider: {locales: ['ja-JP']}
62+
};
63+
64+
export const KoreanPlaceholder = Template().bind({});
65+
KoreanPlaceholder.args = {label: 'Pick your favorite', placeholder: '돌고래'};
66+
KoreanPlaceholder.parameters = {
67+
chromaticProvider: {locales: ['ko-KR']}
68+
};

‎packages/@react-spectrum/provider/stories/Provider.stories.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,18 @@ storiesOf('Provider', module)
166166
<Breakpoint />
167167
</Provider>
168168
);
169-
});
169+
})
170+
.add(
171+
'locale: zh-Hant',
172+
() => (
173+
<div>
174+
<div>Heaven and earth are mysterious and yellow, the universe is prehistoric</div>
175+
<Provider locale="zh-Hant">
176+
<div>天地玄黃，宇宙洪荒</div>
177+
</Provider>
178+
</div>
179+
)
180+
);
170181

171182
function render(props = {}) {
172183
return (

‎packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,29 @@ storiesOf('StatusLight', module)
3333
)
3434
);
3535

36+
storiesOf('Languages/StatusLight', module)
37+
.addParameters({
38+
chromaticProvider: {
39+
colorSchemes: ['light'],
40+
express: false,
41+
locales: ['ar-AE', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'],
42+
scales: ['large', 'medium']
43+
}
44+
})
45+
.add(
46+
'Neutral: no italic in CCJK',
47+
() => (
48+
<Flex gap="size-200" direction="row" wrap>
49+
<StatusLight variant="neutral">Help</StatusLight>
50+
<StatusLight variant="neutral">مساعدة</StatusLight>
51+
<StatusLight variant="neutral">帮助</StatusLight>
52+
<StatusLight variant="neutral">說明</StatusLight>
53+
<StatusLight variant="neutral">ヘルプ</StatusLight>
54+
<StatusLight variant="neutral">도움말</StatusLight>
55+
</Flex>
56+
)
57+
);
58+
3659
function render() {
3760
return (
3861
<Flex wrap>

‎packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {storiesOf} from '@storybook/react';
1818
import {TextArea} from '../';
1919

2020
storiesOf('TextArea', module)
21-
.addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}})
21+
.addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE']}})
2222
.add(
2323
'Default',
2424
() => render()
@@ -85,14 +85,6 @@ storiesOf('TextArea', module)
8585
.add('custom height',
8686
() => render({icon: <Info />, validationState: 'invalid', height: 350})
8787
)
88-
.add(
89-
'value: 測試, icon: Info, labelPosition: side, validationState: valid',
90-
() => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'})
91-
)
92-
.add(
93-
'value: اختبار, isRequired: false, necessityIndicator: label',
94-
() => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'})
95-
)
9688
.add(
9789
'contextual help',
9890
args => render({...args, contextualHelp: (
@@ -121,6 +113,24 @@ storiesOf('TextArea', module)
121113
)}, false)
122114
);
123115

116+
storiesOf('Languages/TextArea', module)
117+
.addParameters({
118+
chromaticProvider: {
119+
colorSchemes: ['light'],
120+
express: false,
121+
locales: ['ar-AE', 'zh-TW'],
122+
scales: ['large', 'medium']
123+
}
124+
})
125+
.add(
126+
'value: 測試, icon: Info, labelPosition: side, validationState: valid',
127+
() => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'})
128+
)
129+
.add(
130+
'value: اختبار, isRequired: false, necessityIndicator: label',
131+
() => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'})
132+
);
133+
124134
// allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter
125135
function render(props = {}, disabled = true) {
126136
return (

0 commit comments

Comments
 (0)