@hero-design/rn 8.27.0 → 8.27.1

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

@@ -20,53 +20,76 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
+  <View
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontSize": 24,
+          "alignItems": "center",
+          "backgroundColor": "#ece8ef",
+          "borderRadius": 24,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 12,
         },
         undefined,
       ]
     }
-    testID="toolbar-item-icon-home"
-    themeIntent="disabled-text"
-    themeSize="medium"
-  />
-  <Text
-    allowFontScaling={false}
-    numberOfLines={1}
-    style={
-      Array [
-        Object {
-          "color": "#4d6265",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
-        },
-        undefined,
-      ]
-    }
-    themeFontSize="small"
-    themeFontWeight="semi-bold"
-    themeIntent="subdued"
-    themeTypeface="neutral"
   >
-    Action
-  </Text>
+    <HeroIcon
+      name="home"
+      style={
+        Array [
+          Object {
+            "color": "#bfc1c5",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-item-icon-home"
+      themeIntent="disabled-text"
+      themeSize="medium"
+    />
+    <Text
+      allowFontScaling={false}
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#4d6265",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          Array [
+            Object {
+              "marginLeft": 8,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="semi-bold"
+      themeIntent="subdued"
+      themeTypeface="neutral"
+    >
+      Action
+    </Text>
+  </View>
 </View>
 `;
 
-exports[`ToolbarItems renders correctly when intent is danger 1`] = `
+exports[`ToolbarItems renders correctly when intent is danger, icon is undefined, label is Discard and disabled is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -86,27 +109,14 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
-    style={
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 24,
-        },
-        undefined,
-      ]
-    }
-    testID="toolbar-item-icon-home"
-    themeIntent="danger"
-    themeSize="medium"
-  />
   <Text
     allowFontScaling={false}
     numberOfLines={1}
@@ -115,24 +125,24 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
         Object {
           "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="small"
+    themeFontSize="large"
     themeFontWeight="semi-bold"
     themeIntent="danger"
     themeTypeface="neutral"
   >
-    Action
+    Discard
   </Text>
 </View>
 `;
 
-exports[`ToolbarItems renders correctly when intent is info 1`] = `
+exports[`ToolbarItems renders correctly when intent is info, icon is undefined, label is Save and disabled is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -152,27 +162,14 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
-    style={
-      Array [
-        Object {
-          "color": "#b5c3fd",
-          "fontSize": 24,
-        },
-        undefined,
-      ]
-    }
-    testID="toolbar-item-icon-home"
-    themeIntent="info"
-    themeSize="medium"
-  />
   <Text
     allowFontScaling={false}
     numberOfLines={1}
@@ -181,24 +178,24 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
         Object {
           "color": "#4568fb",
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="small"
+    themeFontSize="large"
     themeFontWeight="semi-bold"
     themeIntent="info"
     themeTypeface="neutral"
   >
-    Action
+    Save
   </Text>
 </View>
 `;
 
-exports[`ToolbarItems renders correctly when intent is primary 1`] = `
+exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outlined, label is Try again and disabled is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -218,53 +215,165 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
+  <View
     style={
       Array [
         Object {
-          "color": "#401960",
-          "fontSize": 24,
+          "alignItems": "center",
+          "backgroundColor": "#ece8ef",
+          "borderRadius": 24,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 12,
         },
         undefined,
       ]
     }
-    testID="toolbar-item-icon-home"
-    themeIntent="primary"
-    themeSize="medium"
-  />
-  <Text
-    allowFontScaling={false}
-    numberOfLines={1}
+  >
+    <HeroIcon
+      name="ai-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#401960",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-item-icon-ai-outlined"
+      themeIntent="primary"
+      themeSize="medium"
+    />
+    <Text
+      allowFontScaling={false}
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#401960",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          Array [
+            Object {
+              "marginLeft": 8,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="semi-bold"
+      themeIntent="primary"
+      themeTypeface="neutral"
+    >
+      Try again
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outlined, label is Try again and disabled is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <View
     style={
       Array [
         Object {
-          "color": "#401960",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
+          "alignItems": "center",
+          "backgroundColor": "#ece8ef",
+          "borderRadius": 24,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 12,
         },
         undefined,
       ]
     }
-    themeFontSize="small"
-    themeFontWeight="semi-bold"
-    themeIntent="primary"
-    themeTypeface="neutral"
   >
-    Action
-  </Text>
+    <HeroIcon
+      name="ai-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#bfc1c5",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-item-icon-ai-outlined"
+      themeIntent="disabled-text"
+      themeSize="medium"
+    />
+    <Text
+      allowFontScaling={false}
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#4d6265",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          Array [
+            Object {
+              "marginLeft": 8,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="semi-bold"
+      themeIntent="subdued"
+      themeTypeface="neutral"
+    >
+      Try again
+    </Text>
+  </View>
 </View>
 `;
 
-exports[`ToolbarItems renders correctly when intent is success 1`] = `
+exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outlined, label is undefined and disabled is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -284,27 +393,76 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
+  <View
     style={
       Array [
         Object {
-          "color": "#5ace7d",
-          "fontSize": 24,
+          "alignItems": "center",
+          "backgroundColor": "#ece8ef",
+          "borderRadius": 24,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 12,
         },
         undefined,
       ]
     }
-    testID="toolbar-item-icon-home"
-    themeIntent="success"
-    themeSize="medium"
-  />
+  >
+    <HeroIcon
+      name="ai-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#401960",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-item-icon-ai-outlined"
+      themeIntent="primary"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is success, icon is undefined, label is Save and disabled is false 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "paddingVertical": 8,
+    }
+  }
+>
   <Text
     allowFontScaling={false}
     numberOfLines={1}
@@ -313,24 +471,24 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
         Object {
           "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="small"
+    themeFontSize="large"
     themeFontWeight="semi-bold"
     themeIntent="success"
     themeTypeface="neutral"
   >
-    Action
+    Save
   </Text>
 </View>
 `;
 
-exports[`ToolbarItems renders correctly when intent is warning 1`] = `
+exports[`ToolbarItems renders correctly when intent is warning, icon is undefined, label is Warning and disabled is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -350,27 +508,14 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "flexDirection": "row",
+      "height": 64,
       "opacity": 1,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
       "paddingVertical": 8,
     }
   }
 >
-  <HeroIcon
-    name="home"
-    style={
-      Array [
-        Object {
-          "color": "#ffbe71",
-          "fontSize": 24,
-        },
-        undefined,
-      ]
-    }
-    testID="toolbar-item-icon-home"
-    themeIntent="warning"
-    themeSize="medium"
-  />
   <Text
     allowFontScaling={false}
     numberOfLines={1}
@@ -379,19 +524,19 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
         Object {
           "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "letterSpacing": 0.36,
-          "lineHeight": 20,
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="small"
+    themeFontSize="large"
     themeFontWeight="semi-bold"
     themeIntent="warning"
     themeTypeface="neutral"
   >
-    Action
+    Warning
   </Text>
 </View>
 `;

package/src/components/Typography/Text/StyledText.tsx

@@ -30,7 +30,8 @@ const StyledText = styled(Text)<{
     | 'warning'
     | 'danger'
     | 'inverted'
-    | 'archived';
+    | 'archived'
+    | 'disabled';
   themeTypeface: 'neutral' | 'playful';
 }>(({ themeFontSize, themeFontWeight, themeIntent, themeTypeface, theme }) => {
   const sizeStyles = {

package/src/components/Typography/Text/index.tsx

@@ -43,7 +43,8 @@ export interface TextProps extends NativeTextProps {
     | 'warning'
     | 'danger'
     | 'inverted'
-    | 'archived';
+    | 'archived'
+    | 'disabled';
   /**
    * Additional style.
    */

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

@@ -1067,13 +1067,22 @@ Object {
         "danger": "#ffbe71",
         "disabled": "#bfc1c5",
         "error": "#f46363",
+        "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
         "primary": "#401960",
         "secondary": "#795e90",
         "success": "#5ace7d",
       },
+      "radii": Object {
+        "iconButtonWrapperBorderRadius": 24,
+      },
+      "sizes": Object {
+        "itemWrapperHeight": 64,
+      },
       "space": Object {
-        "horizontalPadding": 12,
+        "horizontalPadding": 8,
+        "iconButtonLabelMarginLeft": 8,
+        "iconButtonWrapperPadding": 12,
         "verticalPadding": 8,
       },
     },
@@ -1082,6 +1091,7 @@ Object {
         "archived": "#737479",
         "body": "#001f23",
         "danger": "#f46363",
+        "disabled": "#bfc1c5",
         "info": "#4568fb",
         "inverted": "#ffffff",
         "primary": "#401960",

package/src/theme/components/toolbar.ts

@@ -1,3 +1,4 @@
+import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getToolbarTheme = (theme: GlobalTheme) => {
@@ -11,18 +12,29 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     danger: theme.colors.warning,
     error: theme.colors.error,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    iconButtonBackground: theme.colors.highlightedSurface,
   };
 
   const space = {
     verticalPadding: theme.space.small,
-    horizontalPadding: theme.space.smallMedium,
+    horizontalPadding: theme.space.small,
+    iconButtonLabelMarginLeft: theme.space.small,
+    iconButtonWrapperPadding: theme.space.smallMedium,
   };
 
   const borderWidths = {
     default: theme.borderWidths.base,
   };
 
-  return { colors, space, borderWidths };
+  const sizes = {
+    itemWrapperHeight: scale(64),
+  };
+
+  const radii = {
+    iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
+  };
+
+  return { colors, space, borderWidths, sizes, radii };
 };
 
 export default getToolbarTheme;

package/src/theme/components/typography.ts

@@ -12,6 +12,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const fontSizes = {