@hero-design/rn 8.23.0 → 8.24.0-alpha.1

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

@@ -76,7 +76,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>
@@ -295,7 +299,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -342,8 +346,8 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -379,8 +383,11 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -391,6 +398,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>
@@ -520,7 +528,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -567,8 +575,8 @@ exports[`DatePicker renders variant Calendar 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -604,8 +612,11 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -616,6 +627,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -134,7 +134,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
   const [isFocused, setIsFocused] = useState(false);
   const isEmptyValue = useMemo(() => isEmptyContent(value), [value]);
-  const variant = useMemo(() => {
+  const state = useMemo(() => {
     if (error) {
       return 'error';
     }
@@ -309,11 +309,11 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   return (
     <StyledContainer testID={testID}>
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} themeFocused={isFocused} />
+        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
-              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+              <StyledAsteriskLabel themeState={state} fontSize="small">
                 *
               </StyledAsteriskLabel>
             )}
@@ -321,7 +321,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               <StyledLabel
                 testID="input-label"
                 fontSize="small"
-                themeVariant={variant}
+                themeState={state}
               >
                 {label}
               </StyledLabel>
@@ -330,9 +330,12 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
         )}
         <StyledTextInputAndLabelContainer>
           {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput pointerEvents="none">
+            <StyledLabelContainerInsideTextInput
+              themeVariant="text"
+              pointerEvents="none"
+            >
               {required && (
-                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                <StyledAsteriskLabelInsideTextInput themeState={state}>
                   *
                 </StyledAsteriskLabelInsideTextInput>
               )}
@@ -340,7 +343,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
                 <StyledLabelInsideTextInput
                   testID="input-label"
                   fontSize="medium"
-                  themeVariant={variant}
+                  themeState={state}
                 >
                   {label}
                 </StyledLabelInsideTextInput>

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

@@ -43,7 +43,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         ]
       }
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       style={
@@ -76,6 +76,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -93,7 +94,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -105,8 +106,8 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           Rich Text Editor
         </Text>
@@ -169,7 +170,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           Array [
             Object {
               "backgroundColor": "transparent",
-              "fontSize": 14,
+              "fontSize": 16,
               "height": 480,
               "marginHorizontal": 8,
               "minHeight": 24,
@@ -313,7 +314,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         ]
       }
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       style={
@@ -346,6 +347,7 @@ exports[`RichTextEditor should render correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -363,7 +365,7 @@ exports[`RichTextEditor should render correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -375,8 +377,8 @@ exports[`RichTextEditor should render correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           Rich Text Editor
         </Text>
@@ -438,7 +440,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           Array [
             Object {
               "backgroundColor": "transparent",
-              "fontSize": 14,
+              "fontSize": 16,
               "height": undefined,
               "marginHorizontal": 8,
               "minHeight": 24,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -74,7 +74,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="default"
+              themeState="default"
             />
             <View
               style={
@@ -107,6 +107,7 @@ Array [
                     undefined,
                   ]
                 }
+                themeVariant="text"
               >
                 <Text
                   allowFontScaling={false}
@@ -124,7 +125,7 @@ Array [
                           "alignContent": "center",
                           "alignItems": "center",
                           "color": "#001f23",
-                          "fontSize": 14,
+                          "fontSize": 16,
                           "marginTop": -2,
                           "textAlignVertical": "center",
                         },
@@ -136,8 +137,8 @@ Array [
                   themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
+                  themeState="default"
                   themeTypeface="neutral"
-                  themeVariant="default"
                 >
                   Choose collaborators
                 </Text>
@@ -161,8 +162,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -173,6 +177,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value=""
               />
             </View>
@@ -1469,7 +1474,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1516,8 +1521,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1555,8 +1560,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1567,6 +1575,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -1696,7 +1705,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1743,8 +1752,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1782,8 +1791,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1794,6 +1806,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -3270,7 +3283,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="readonly"
+              themeState="readonly"
             />
             <View
               pointerEvents="none"
@@ -3317,8 +3330,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="readonly"
                 themeTypeface="neutral"
-                themeVariant="readonly"
               >
                 Allow notifications
               </Text>
@@ -3356,8 +3369,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3368,6 +3384,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -3510,7 +3527,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -3557,8 +3574,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -3596,8 +3613,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3608,6 +3628,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="B1, B2"
               />
             </View>