@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -1,8 +1,8 @@
-import { View } from 'react-native';
-import styled from '@emotion/native';
-import type { ViewProps } from 'react-native';
 import type { ReactNativeStyle } from '@emotion/native';
+import styled from '@emotion/native';
 import type { Theme } from '@emotion/react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 
 type Intent = 'primary' | 'secondary' | 'danger';
 
@@ -25,13 +25,11 @@ const genLoadingIndicatorStyles = (
   backgroundColor: theme.__hd__.button.colors[intent],
 });
 
-const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>(({ theme }) => ({
+const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>({
   flexDirection: 'row',
   justifyContent: 'center',
   alignItems: 'center',
-  paddingVertical:
-    theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding,
-}));
+});
 
 const StyledLoadingDot = styled(View)<{
   size?: number;
@@ -61,12 +59,10 @@ const StyledLoadingDot = styled(View)<{
   return {
     width: size,
     height: size,
-    marginTop: theme.space.xsmall,
-    marginBottom: theme.space.xsmall,
     marginHorizontal: theme.space.small,
     borderRadius: theme.space.small,
     ...themeStyling(),
   };
 });
 
-export { StyledLoadingIndicatorWrapper, StyledLoadingDot };
+export { StyledLoadingDot, StyledLoadingIndicatorWrapper };

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -8,9 +8,7 @@ exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -28,9 +26,7 @@ exports[`StyledLoadingIndicator has filled-danger style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -48,9 +44,7 @@ exports[`StyledLoadingIndicator has filled-primary style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -68,9 +62,7 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -88,9 +80,7 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -108,9 +98,7 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -128,9 +116,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -148,9 +134,7 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -168,9 +152,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -188,9 +170,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -9,7 +9,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -36,9 +35,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -68,9 +65,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -100,9 +95,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -123,7 +116,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -150,9 +142,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -182,9 +172,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -214,9 +202,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -237,7 +223,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -264,9 +249,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -296,9 +279,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -328,9 +309,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -351,7 +330,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -378,9 +356,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -410,9 +386,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -442,9 +416,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
             "backgroundColor": "#ffffff",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -465,7 +437,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -492,9 +463,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -524,9 +493,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -556,9 +523,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -579,7 +544,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -606,9 +570,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
             "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -638,9 +600,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
             "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -670,9 +630,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
             "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -693,7 +651,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -720,9 +677,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -752,9 +707,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -784,9 +737,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -807,7 +758,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -834,9 +784,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -866,9 +814,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -898,9 +844,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
             "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -921,7 +865,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -948,9 +891,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -980,9 +921,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -1012,9 +951,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -1035,7 +972,6 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 1,
       },
       {},
     ]
@@ -1062,9 +998,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -1094,9 +1028,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},
@@ -1126,9 +1058,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
             "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
-            "marginBottom": 4,
             "marginHorizontal": 8,
-            "marginTop": 4,
             "width": 12,
           },
           {},

package/src/components/Button/StyledButton.tsx

@@ -4,6 +4,7 @@ import type { ReactNativeStyle } from '@emotion/native';
 import type { Theme } from '@emotion/react';
 import Icon from '../Icon';
 import Typography from '../Typography';
+import { scale } from '../../utils/scale';
 
 type Intent = 'primary' | 'secondary' | 'danger';
 
@@ -35,6 +36,7 @@ const genFilledContainerStyles = (
   };
 
   return {
+    height: scale(60),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -62,6 +64,7 @@ const genOutlineContainerStyles = (
   };
 
   return {
+    height: scale(60),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -126,6 +129,7 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
     case 'text-secondary':
     case 'text-danger':
       return {
+        height: scale(60),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2,6 +2,23 @@
 
 exports[`UtilityButton snapshot has intent primary style 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -83,6 +100,23 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
 
 exports[`UtilityButton snapshot has intent text style 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}