@hero-design/rn 8.79.1 → 8.80.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-(node:2859) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2843) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 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 48.6s
+created lib/index.js, es/index.js in 50.8s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.80.0
+
+### Minor Changes
+
+- [#3502](https://github.com/Thinkei/hero-design/pull/3502) [`88c11405abfaf87625b9fde266d58d7fd09e25e9`](https://github.com/Thinkei/hero-design/commit/88c11405abfaf87625b9fde266d58d7fd09e25e9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Add compact-outlined variant
+
 ## 8.79.1
 
 ### Patch Changes

package/es/index.js

@@ -2646,9 +2646,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
-    compactDefaultBackground: theme.colors.defaultGlobalSurface,
-    compactSelectedBackground: theme.colors.neutralGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
@@ -13058,12 +13056,14 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
+      case 'compact-outlined':
         return undefined;
     }
   };
   var getBorderStyles = function getBorderStyles() {
     switch (themeVariant) {
       case 'outlined':
+      case 'compact-outlined':
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
@@ -13083,42 +13083,34 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
     if (themeSelected) {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
             };
           }
       }
     } else {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
             };
           }
       }
@@ -13127,6 +13119,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
   var getPaddingStyles = function getPaddingStyles() {
     switch (themeVariant) {
       case 'compact':
+      case 'compact-outlined':
         {
           return {
             paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,

package/lib/index.js

@@ -2673,9 +2673,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
-    compactDefaultBackground: theme.colors.defaultGlobalSurface,
-    compactSelectedBackground: theme.colors.neutralGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
@@ -13085,12 +13083,14 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
+      case 'compact-outlined':
         return undefined;
     }
   };
   var getBorderStyles = function getBorderStyles() {
     switch (themeVariant) {
       case 'outlined':
+      case 'compact-outlined':
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
@@ -13110,42 +13110,34 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
     if (themeSelected) {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
             };
           }
       }
     } else {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
             };
           }
       }
@@ -13154,6 +13146,7 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var getPaddingStyles = function getPaddingStyles() {
     switch (themeVariant) {
       case 'compact':
+      case 'compact-outlined':
         {
           return {
             paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.79.1",
+  "version": "8.80.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

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' | 'compact';
+  themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
   themeSelected?: boolean;
 };
 
@@ -16,13 +16,15 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
             ...theme.__hd__.chip.shadows.filledWrapper,
           };
         case 'outlined':
+        case 'compact-outlined':
           return undefined;
       }
     };
 
     const getBorderStyles = () => {
       switch (themeVariant) {
-        case 'outlined': {
+        case 'outlined':
+        case 'compact-outlined': {
           return {
             borderColor: themeSelected
               ? theme.__hd__.chip.colors.outlinedSelectedBorder
@@ -42,43 +44,34 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     const getBackgroundStyles = () => {
       if (themeSelected) {
         switch (themeVariant) {
-          case 'outlined': {
+          case 'outlined':
+          case 'compact-outlined': {
             return {
               backgroundColor: themeSelected
                 ? theme.__hd__.chip.colors.outlinedSelectedBackground
                 : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled': {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
-            };
-          }
-
+          case 'filled':
           case 'compact': {
             return {
-              backgroundColor:
-                theme.__hd__.chip.colors.compactSelectedBackground,
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
             };
           }
         }
       } else {
         switch (themeVariant) {
-          case 'outlined': {
+          case 'outlined':
+          case 'compact-outlined': {
             return {
               backgroundColor:
                 theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled': {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground,
-            };
-          }
+          case 'filled':
           case 'compact': {
             return {
-              backgroundColor:
-                theme.__hd__.chip.colors.compactDefaultBackground,
+              backgroundColor: theme.__hd__.chip.colors.filledBackground,
             };
           }
         }
@@ -87,7 +80,8 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
 
     const getPaddingStyles = () => {
       switch (themeVariant) {
-        case 'compact': {
+        case 'compact':
+        case 'compact-outlined': {
           return {
             paddingHorizontal:
               theme.__hd__.chip.space.compactWrapperHorizontalPadding,

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

@@ -942,7 +942,7 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
         "elevation": 3,
@@ -1006,6 +1006,200 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant compact-outlined 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": "#bfc1c5",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 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-outlined 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": "#e8e9ea",
+        "borderColor": "#001f23",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 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={

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

@@ -81,13 +81,15 @@ describe('Chip', () => {
   });
 
   it.each`
-    variant       | selected
-    ${'filled'}   | ${true}
-    ${'filled'}   | ${false}
-    ${'outlined'} | ${true}
-    ${'outlined'} | ${false}
-    ${'compact'}  | ${true}
-    ${'compact'}  | ${false}
+    variant               | selected
+    ${'filled'}           | ${true}
+    ${'filled'}           | ${false}
+    ${'outlined'}         | ${true}
+    ${'outlined'}         | ${false}
+    ${'compact'}          | ${true}
+    ${'compact'}          | ${false}
+    ${'compact-outlined'} | ${true}
+    ${'compact-outlined'} | ${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' | 'compact';
+  variant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
   /**
    * Whether the chip is selected.
    */

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

@@ -388,8 +388,6 @@ exports[`theme returns correct theme object 1`] = `
         "wrapper": 1,
       },
       "colors": {
-        "compactDefaultBackground": "#ffffff",
-        "compactSelectedBackground": "#f6f6f7",
         "filledBackground": "#ffffff",
         "outlinedDefaultBackground": "#ffffff",
         "outlinedDefaultBorder": "#bfc1c5",

package/src/theme/components/chip.ts

@@ -9,8 +9,6 @@ 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 = {