Chromatic adding some Arabic, Chinese, and Japanese string to test fonts

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

@@ -19,6 +19,7 @@ import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
 
 storiesOf('Button/ActionButton', module)
+  .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'ja-JP']}})
   .add(
     'text',
     () => (
@@ -111,4 +112,25 @@ storiesOf('Button/ActionButton', module)
         </Flex>
       </View>
     )
+  )
+  .add(
+    'Japanese, icon + text, staticColor: white',
+    () => (
+      <View backgroundColor="static-seafoam-600" padding="size-1000">
+        <Flex direction="column" rowGap="size-150">
+          <ActionButton staticColor="white">
+            <Add />
+            <Text>ディフォルト</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isQuiet>
+            <Add />
+            <Text>静かな</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isDisabled>
+            <Text>無効</Text>
+            <Add />
+          </ActionButton>
+        </Flex>
+      </View>
+    )
   );

packages/@react-spectrum/button/chromatic/Button.chromatic.tsx

@@ -18,6 +18,7 @@ import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
 
 storiesOf('Button', module)
+  .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}})
   .add(
     'variant: cta',
     () => render({variant: 'cta'})
@@ -42,6 +43,12 @@ storiesOf('Button', module)
           <Bell />
           <Text>Quiet</Text>
         </Button>
+        <Button
+          isQuiet
+          variant="primary">
+          <Bell />
+          <Text>هادئ</Text>
+        </Button>
       </Flex>
     )
   )
@@ -110,6 +117,10 @@ function render(props: any = {}) {
         Quiet
       </Button>
       )}
+      <Button
+        {...props}>
+        默認
+      </Button>
     </Flex>
   );
 }

packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx

@@ -50,4 +50,9 @@ storiesOf('Button/ToggleButton', module)
         {combinations.map(c => <ToggleButton {...c} staticColor="black">Button</ToggleButton>)}
       </Grid>
     </View>
+  ))
+  .add('Arabic', () => (
+    <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+      {combinations.map(c => <ToggleButton {...c}>زر</ToggleButton>)}
+    </Grid>
   ));

packages/@react-spectrum/menu/chromatic/MenuTrigger.chromatic.tsx

@@ -91,6 +91,12 @@ let withSection = [
   ]}
 ];
 
+let withArabic = [
+  {name: 'نسخ', icon: 'Copy', shortcut: '⌘C'},
+  {name: 'قص', icon: 'Cut', shortcut: '⌘X'},
+  {name: 'لصق', icon: 'Paste', shortcut: '⌘V'}
+];
+
 const Template = (): Story<SpectrumMenuTriggerProps> => (args) => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
@@ -143,6 +149,17 @@ const TemplateWithIcons = (): Story<SpectrumMenuTriggerProps> => (args) => (
   </MenuTrigger>
 );
 
+const TemplateArabicWithIcons = (): Story<SpectrumMenuTriggerProps> => (args) => (
+  <MenuTrigger {...args} isOpen>
+    <ActionButton>
+      Menu Button
+    </ActionButton>
+    <Menu items={withArabic}>
+      {item => customMenuItem(item)}
+    </Menu>
+  </MenuTrigger>
+);
+
 export const Default = Template().bind({});
 Default.storyName = 'flat list';
 
@@ -195,3 +212,6 @@ DirectionRight.args = {direction: 'right'};
 export const DirectionRightEnd = Template().bind({});
 DirectionRightEnd.storyName = 'direction="right", align="end"';
 DirectionRightEnd.args = {direction: 'right', align: 'end'};
+
+export const ArabicComplex = TemplateArabicWithIcons().bind({});
+ArabicComplex.storyName = 'Arabic complex items';

packages/@react-spectrum/menu/chromatic/MenuTriggerRTL.chromatic.tsx

@@ -39,5 +39,6 @@ export {
   DirectionLeft,
   DirectionLeftEnd,
   DirectionRight,
-  DirectionRightEnd
+  DirectionRightEnd,
+  ArabicComplex
 } from './MenuTrigger.chromatic';

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

@@ -17,6 +17,7 @@ import {storiesOf} from '@storybook/react';
 import {TextArea} from '../';
 
 storiesOf('TextArea', module)
+  .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}})
   .add(
     'Default',
     () => render()
@@ -79,12 +80,20 @@ storiesOf('TextArea', module)
   )
   .add('custom width',
     () => render({icon: <Info />, validationState: 'invalid', width: 275})
+  )
+  .add(
+    'value: 測試, icon: Info, labelPosition: side, validationState: valid',
+    () => render({value: '測試', icon: <Info />, 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 (
-    <Flex gap="size-100">
+    <Flex gap="size-100" wrap>
       <TextArea
         label="Default"
         placeholder="React"

packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js

@@ -17,6 +17,7 @@ import {storiesOf} from '@storybook/react';
 import {TextField} from '../';
 
 storiesOf('Textfield', module)
+  .addParameters({chromaticProvider: {locales: ['en-US', 'ar-AE', 'zh-TW']}})
   .add(
     'Default',
     () => render()
@@ -79,12 +80,20 @@ storiesOf('Textfield', module)
   )
   .add('custom width',
     () => render({icon: <Info />, validationState: 'invalid', width: 275})
+  )
+  .add(
+    'value: 測試, icon: Info, labelPosition: side, validationState: valid',
+    () => render({value: '測試', icon: <Info />, 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 (
-    <Flex gap="size-100">
+    <Flex gap="size-100" wrap>
       <TextField
         label="Default"
         placeholder="React"