@hero-design/rn 8.70.0 → 8.71.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-(node:2991) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:3001) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:2991) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3001) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 51.7s
+created lib/index.js, es/index.js in 50.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.71.0
+
+### Minor Changes
+
+- [#3422](https://github.com/Thinkei/hero-design/pull/3422) [`a55eee7cee159b592526b978db1eed3beee461c4`](https://github.com/Thinkei/hero-design/commit/a55eee7cee159b592526b978db1eed3beee461c4) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Add compact variant
+
 ## 8.70.0
 
 ### Minor Changes

package/es/index.js

@@ -2636,11 +2636,15 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    compactDefaultBackground: theme.colors.defaultGlobalSurface,
+    compactSelectedBackground: theme.colors.neutralGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
+    compactWrapperHorizontalPadding: theme.space.small,
+    compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
     outlinedSelectedMarginTop: -theme.space.xxsmall
   };
@@ -12886,6 +12890,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
     theme = _ref.theme;
   var getShadowStyles = function getShadowStyles() {
     switch (themeVariant) {
+      case 'compact':
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
@@ -12901,6 +12906,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
             borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
           };
         }
+      case 'compact':
       case 'filled':
         {
           return {
@@ -12919,9 +12925,17 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
             };
           }
         case 'filled':
-          return {
-            backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-          };
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
+            };
+          }
+        case 'compact':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+            };
+          }
       }
     } else {
       switch (themeVariant) {
@@ -12932,22 +12946,46 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
             };
           }
         case 'filled':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
+            };
+          }
+        case 'compact':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+            };
+          }
+      }
+    }
+  };
+  var getPaddingStyles = function getPaddingStyles() {
+    switch (themeVariant) {
+      case 'compact':
+        {
           return {
-            backgroundColor: theme.__hd__.chip.colors.filledBackground
+            paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.compactWrapperVerticalPadding
           };
-      }
+        }
+      default:
+        {
+          return {
+            paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding
+          };
+        }
     }
   };
-  return _objectSpread2(_objectSpread2(_objectSpread2({
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: theme.__hd__.chip.radii.wrapper,
-    paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
-    paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-    marginTop: themeSelected ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
-  }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
+    marginTop: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
+  }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
 var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];

package/lib/index.js

@@ -2663,11 +2663,15 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    compactDefaultBackground: theme.colors.defaultGlobalSurface,
+    compactSelectedBackground: theme.colors.neutralGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
+    compactWrapperHorizontalPadding: theme.space.small,
+    compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
     outlinedSelectedMarginTop: -theme.space.xxsmall
   };
@@ -12913,6 +12917,7 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
     theme = _ref.theme;
   var getShadowStyles = function getShadowStyles() {
     switch (themeVariant) {
+      case 'compact':
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
@@ -12928,6 +12933,7 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
             borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
           };
         }
+      case 'compact':
       case 'filled':
         {
           return {
@@ -12946,9 +12952,17 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
             };
           }
         case 'filled':
-          return {
-            backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-          };
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
+            };
+          }
+        case 'compact':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+            };
+          }
       }
     } else {
       switch (themeVariant) {
@@ -12959,22 +12973,46 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
             };
           }
         case 'filled':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
+            };
+          }
+        case 'compact':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+            };
+          }
+      }
+    }
+  };
+  var getPaddingStyles = function getPaddingStyles() {
+    switch (themeVariant) {
+      case 'compact':
+        {
           return {
-            backgroundColor: theme.__hd__.chip.colors.filledBackground
+            paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.compactWrapperVerticalPadding
           };
-      }
+        }
+      default:
+        {
+          return {
+            paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding
+          };
+        }
     }
   };
-  return _objectSpread2(_objectSpread2(_objectSpread2({
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: theme.__hd__.chip.radii.wrapper,
-    paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
-    paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-    marginTop: themeSelected ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
-  }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
+    marginTop: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
+  }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
 var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.70.0",
+  "version": "8.71.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Chip/StyledChip.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
 
 type StyledChipWrapperProps = {
-  themeVariant?: 'outlined' | 'filled';
+  themeVariant?: 'outlined' | 'filled' | 'compact';
   themeSelected?: boolean;
 };
 
@@ -10,6 +10,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
   ({ themeVariant, themeSelected, theme }) => {
     const getShadowStyles = () => {
       switch (themeVariant) {
+        case 'compact':
         case 'filled':
           return {
             ...theme.__hd__.chip.shadows.filledWrapper,
@@ -31,6 +32,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
               : theme.__hd__.chip.sizes.outlinedDefaultBorder,
           };
         }
+        case 'compact':
         case 'filled': {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
@@ -49,10 +51,18 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
                 : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filled': {
             return {
               backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
             };
+          }
+
+          case 'compact': {
+            return {
+              backgroundColor:
+                theme.__hd__.chip.colors.compactSelectedBackground,
+            };
+          }
         }
       } else {
         switch (themeVariant) {
@@ -62,10 +72,36 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
                 theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filled': {
             return {
               backgroundColor: theme.__hd__.chip.colors.filledBackground,
             };
+          }
+          case 'compact': {
+            return {
+              backgroundColor:
+                theme.__hd__.chip.colors.compactDefaultBackground,
+            };
+          }
+        }
+      }
+    };
+
+    const getPaddingStyles = () => {
+      switch (themeVariant) {
+        case 'compact': {
+          return {
+            paddingHorizontal:
+              theme.__hd__.chip.space.compactWrapperHorizontalPadding,
+            paddingVertical:
+              theme.__hd__.chip.space.compactWrapperVerticalPadding,
+          };
+        }
+        default: {
+          return {
+            paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
+          };
         }
       }
     };
@@ -76,13 +112,13 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: theme.__hd__.chip.radii.wrapper,
-      paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
-      paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-      marginTop: themeSelected
-        ? theme.__hd__.chip.space.outlinedSelectedMarginTop
-        : undefined,
+      marginTop:
+        themeSelected && themeVariant === 'outlined'
+          ? theme.__hd__.chip.space.outlinedSelectedMarginTop
+          : undefined,
       ...getShadowStyles(),
       ...getBorderStyles(),
+      ...getPaddingStyles(),
       ...getBackgroundStyles(),
     };
   }

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -496,7 +496,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -805,6 +805,216 @@ exports[`Chip renders correctly with default icon 2`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant compact and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 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={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": undefined,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </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[`Chip renders correctly with variant compact and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 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={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#f6f6f7",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": undefined,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </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[`Chip renders correctly with variant filled and selected false 1`] = `
 <View
   style={
@@ -956,7 +1166,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,

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

@@ -86,6 +86,8 @@ describe('Chip', () => {
     ${'filled'}   | ${false}
     ${'outlined'} | ${true}
     ${'outlined'} | ${false}
+    ${'compact'}  | ${true}
+    ${'compact'}  | ${false}
   `(
     'renders correctly with variant $variant and selected $selected',
     ({ variant, selected }) => {

package/src/components/Chip/index.tsx

@@ -13,7 +13,7 @@ export interface ChipProps extends ViewProps {
   /**
    * Variant of the chip.
    */
-  variant?: 'outlined' | 'filled';
+  variant?: 'outlined' | 'filled' | 'compact';
   /**
    * Whether the chip is selected.
    */

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

@@ -379,6 +379,8 @@ exports[`theme returns correct theme object 1`] = `
         "wrapper": 1,
       },
       "colors": {
+        "compactDefaultBackground": "#ffffff",
+        "compactSelectedBackground": "#f6f6f7",
         "filledBackground": "#ffffff",
         "outlinedDefaultBackground": "#ffffff",
         "outlinedDefaultBorder": "#bfc1c5",
@@ -407,6 +409,8 @@ exports[`theme returns correct theme object 1`] = `
         "outlinedSelectedBorder": 2,
       },
       "space": {
+        "compactWrapperHorizontalPadding": 8,
+        "compactWrapperVerticalPadding": 4,
         "iconWrapperHorizontalMargin": 8,
         "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,

package/src/theme/components/chip.ts

@@ -9,11 +9,15 @@ const getChipTheme = (theme: GlobalTheme) => {
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
     outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    compactDefaultBackground: theme.colors.defaultGlobalSurface,
+    compactSelectedBackground: theme.colors.neutralGlobalSurface,
   };
 
   const space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
+    compactWrapperHorizontalPadding: theme.space.small,
+    compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
     outlinedSelectedMarginTop: -theme.space.xxsmall,
   };