@hero-design/rn 7.16.2 → 7.17.1

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -6,21 +6,30 @@ import TextInput, { getVariant } from '../index';
 
 describe('getVariant', () => {
   it.each`
-    disabled | error                       | editable | isFocused | isEmptyValue | expected
-    ${false} | ${undefined}                | ${true}  | ${false}  | ${true}      | ${'default'}
-    ${false} | ${undefined}                | ${true}  | ${false}  | ${false}     | ${'filled'}
-    ${false} | ${undefined}                | ${true}  | ${true}   | ${true}      | ${'focused'}
-    ${false} | ${undefined}                | ${false} | ${true}   | ${true}      | ${'readonly'}
-    ${false} | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'error'}
-    ${true}  | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'disabled'}
+    disabled | error                       | editable | loading  | isFocused | isEmptyValue | expected
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${'default'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${'filled'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${'focused'}
+    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${'readonly'}
+    ${false} | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'error'}
+    ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'disabled'}
   `(
     'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue',
-    ({ disabled, error, editable, isFocused, isEmptyValue, expected }) => {
+    ({
+      disabled,
+      error,
+      editable,
+      loading,
+      isFocused,
+      isEmptyValue,
+      expected,
+    }) => {
       expect(
         getVariant({
           disabled,
           error,
           editable,
+          loading,
           isFocused,
           isEmptyValue,
         })
@@ -206,6 +215,18 @@ describe('TextInput', () => {
     });
   });
 
+  describe('loading', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
+        <TextInput suffix="arrow-down" loading />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+    });
+  });
+
   describe('max length', () => {
     it('renders correctly', () => {
       const {

package/src/components/TextInput/index.tsx

@@ -79,6 +79,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * Whether the input is disabled.
    */
   disabled?: boolean;
+  /*
+   * Whether the input is loading.
+   */
+  loading?: boolean;
   /*
    * The max length of the input.
    * If the max length is set, the input will display the current length and the max length.
@@ -94,12 +98,14 @@ export const getVariant = ({
   disabled,
   error,
   editable,
+  loading,
   isFocused,
   isEmptyValue,
 }: {
   disabled?: boolean;
   error?: string;
   editable?: boolean;
+  loading: boolean;
   isFocused?: boolean;
   isEmptyValue?: boolean;
 }): Variant => {
@@ -109,7 +115,7 @@ export const getVariant = ({
   if (error) {
     return 'error';
   }
-  if (!editable) {
+  if (!editable || loading) {
     return 'readonly';
   }
   if (isFocused) {
@@ -133,6 +139,7 @@ const TextInput = ({
   required,
   editable = true,
   disabled = false,
+  loading = false,
   maxLength,
   helpText,
   value,
@@ -142,6 +149,7 @@ const TextInput = ({
   const textInputReference = useRef<RNTextInput | null>(null);
   const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
+  const actualSuffix = loading ? 'loading' : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -149,6 +157,7 @@ const TextInput = ({
     disabled,
     error,
     editable,
+    loading,
     isFocused,
     isEmptyValue,
   });
@@ -187,7 +196,7 @@ const TextInput = ({
         )}
         {typeof prefix === 'string' ? (
           <Icon
-            intent={disabled ? 'disabled-text' : 'text'}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -195,7 +204,6 @@ const TextInput = ({
         ) : (
           prefix
         )}
-
         <StyledTextInputAndLabelContainer>
           {!isFocused && isEmptyValue && (
             <StyledLabelContainerInsideTextInput pointerEvents="none">
@@ -224,7 +232,9 @@ const TextInput = ({
               textStyle,
             ])}
             testID="text-input"
-            accessibilityState={{ disabled }}
+            accessibilityState={{
+              disabled: variant === 'disabled' || variant === 'readonly',
+            }}
             // @ts-ignore
             accessibilityLabelledBy={accessibilityLabelledBy}
             {...nativeProps}
@@ -249,11 +259,12 @@ const TextInput = ({
             }
           />
         </StyledTextInputAndLabelContainer>
-        {typeof suffix === 'string' ? (
+        {typeof actualSuffix === 'string' ? (
           <Icon
-            intent={disabled ? 'disabled-text' : 'text'}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-suffix"
-            icon={suffix}
+            icon={actualSuffix}
+            spin={actualSuffix === 'loading'}
             size="xsmall"
           />
         ) : (

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -140,7 +140,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +153,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -140,7 +140,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +153,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,
@@ -266,7 +266,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "backgroundColor": "#292a2b",
+                  "backgroundColor": "#001f23",
                   "bottom": 0,
                   "left": 0,
                   "opacity": 0.48,
@@ -288,7 +288,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "borderTopRightRadius": 16,
                   "elevation": 10,
                   "maxHeight": "94%",
-                  "shadowColor": "#292a2b",
+                  "shadowColor": "#001f23",
                   "shadowOffset": Object {
                     "height": 3,
                     "width": 0,
@@ -334,7 +334,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
                           "letterSpacing": 0.48,
@@ -388,7 +388,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#292a2b",
+                            "color": "#001f23",
                             "fontSize": 20,
                           },
                           undefined,
@@ -404,7 +404,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "borderBottomColor": "#dadbde",
+                      "borderBottomColor": "#e8e9ea",
                       "borderBottomWidth": 1,
                       "maxWidth": "100%",
                     },
@@ -440,7 +440,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "borderBottomColor": "#dadbde",
+                        "borderBottomColor": "#e8e9ea",
                         "borderBottomWidth": 1,
                         "maxWidth": "100%",
                       },
@@ -485,7 +485,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#7622d7",
+                            "color": "#8505a2",
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 16,
                             "letterSpacing": 0.48,

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 0,
           "flex": 1,
           "flexDirection": "row",
@@ -53,7 +53,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -78,7 +78,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -104,7 +104,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#de350b",
+      "backgroundColor": "#f46363",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -124,7 +124,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -151,7 +151,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -176,7 +176,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -218,7 +218,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -263,7 +263,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -290,7 +290,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -315,7 +315,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -357,7 +357,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -382,7 +382,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#01b39c",
+      "backgroundColor": "#5ace7d",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -402,7 +402,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -429,7 +429,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -454,7 +454,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -496,7 +496,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -521,7 +521,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#ffa234",
+      "backgroundColor": "#ffbe71",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -541,7 +541,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -568,7 +568,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -593,7 +593,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -635,7 +635,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -55,7 +55,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -97,7 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -111,7 +111,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -171,7 +171,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -185,7 +185,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -227,7 +227,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -241,7 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -301,7 +301,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -315,7 +315,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -357,7 +357,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -371,7 +371,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#8b8d92",
+          "color": "#808f91",
           "fontSize": 24,
         },
         undefined,
@@ -41,7 +41,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#8b8d92",
+          "color": "#808f91",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -204,7 +204,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontSize": 24,
         },
         undefined,
@@ -218,7 +218,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -263,7 +263,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#01b39c",
+          "color": "#5ace7d",
           "fontSize": 24,
         },
         undefined,
@@ -277,7 +277,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#01b39c",
+          "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -322,7 +322,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontSize": 24,
         },
         undefined,
@@ -336,7 +336,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,