@hero-design/rn 8.83.0 → 8.84.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -1,5 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`StyledButtonContainer has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
   style={
@@ -627,6 +696,145 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonContainer has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonContainer has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonContainer renders disabled correctly 1`] = `
 <View
   style={
@@ -701,6 +909,57 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIcon has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIcon has filled-danger style 1`] = `
 <View
   style={
@@ -1313,6 +1572,108 @@ exports[`StyledButtonIcon has text-secondary style 2`] = `
 </View>
 `;
 
+exports[`StyledButtonIcon has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonIcon has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIcon renders disabled correctly 1`] = `
 <View
   style={
@@ -1364,6 +1725,49 @@ exports[`StyledButtonIcon renders disabled correctly 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIconWrapper has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+    themeIsCompact={false}
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIconWrapper has left style 1`] = `
 <View
   style={
@@ -1448,6 +1852,91 @@ exports[`StyledButtonIconWrapper has right style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIconWrapper has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 8,
+        },
+        undefined,
+      ]
+    }
+    themeIsCompact={true}
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonIconWrapper has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonText has filled-danger style 1`] = `
 <View
   style={

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -289,12 +289,22 @@ exports[`theme returns correct theme object 1`] = `
         "utilityRadii": 8,
       },
       "sizes": {
-        "iconSize": 20,
+        "iconSize": {
+          "compact": 12,
+          "default": 20,
+        },
       },
       "space": {
-        "buttonPadding": 16,
-        "iconPadding": 12,
-        "textButtonPadding": 12,
+        "compact": {
+          "buttonPaddingHorizontal": 16,
+          "buttonPaddingVertical": 8,
+          "iconPadding": 8,
+        },
+        "default": {
+          "buttonPadding": 16,
+          "iconPadding": 12,
+          "textButtonPadding": 12,
+        },
         "utilityPadding": 8,
       },
     },

package/src/theme/components/button.ts

@@ -17,14 +17,24 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    buttonPadding: theme.space.medium,
-    textButtonPadding: theme.space.smallMedium,
-    iconPadding: theme.space.smallMedium,
+    default: {
+      buttonPadding: theme.space.medium,
+      iconPadding: theme.space.smallMedium,
+      textButtonPadding: theme.space.smallMedium,
+    },
+    compact: {
+      buttonPaddingVertical: theme.space.small,
+      buttonPaddingHorizontal: theme.space.medium,
+      iconPadding: theme.space.small,
+    },
     utilityPadding: theme.space.small,
   };
 
   const sizes = {
-    iconSize: theme.fontSizes.xxlarge,
+    iconSize: {
+      default: theme.fontSizes.xxlarge,
+      compact: theme.fontSizes.small,
+    },
   };
 
   const radii = {