@hero-design/rn 8.81.0 → 8.81.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.81.1
+
+### Patch Changes
+
+- [#3518](https://github.com/Thinkei/hero-design/pull/3518) [`b571a2a4e544551d3ed0cfb1baea6da4f2ae33e2`](https://github.com/Thinkei/hero-design/commit/b571a2a4e544551d3ed0cfb1baea6da4f2ae33e2) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Update styling and allow custom label
+
 ## 8.81.0
 
 ### Minor Changes

package/es/index.js

@@ -2671,12 +2671,16 @@ var getChipTheme = function getChipTheme(theme) {
   var shadows = {
     filledWrapper: theme.shadows["default"]
   };
+  var fontSizes = {
+    icon: theme.fontSizes.small
+  };
   return {
     colors: colors,
     space: space,
     radii: radii,
     borderWidths: borderWidths,
-    shadows: shadows
+    shadows: shadows,
+    fontSizes: fontSizes
   };
 };
 
@@ -13172,8 +13176,22 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
+var StyledChipIcon = index$a(Icon)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.__hd__.chip.fontSizes.icon
+  };
+});
 
 var _excluded$s = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var getChipLabel = function getChipLabel(label) {
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__default.createElement(Typography.Body, {
+      variant: "small"
+    }, label);
+  }
+  return label;
+};
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -13185,21 +13203,22 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
+  var shouldShowSelectedIcon = (variant === 'outlined' || variant === 'compact-outlined') && selected && showSelectedIcon;
+  var chipLabel = useMemo(function () {
+    return getChipLabel(label);
+  }, [label]);
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__default.createElement(Box, {
     marginRight: "small"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__default.createElement(StyledChipIcon, {
     icon: icon,
     testID: "chip-icon-".concat(icon)
-  })), /*#__PURE__*/React__default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
+  })), chipLabel, shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
     marginLeft: "small"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__default.createElement(StyledChipIcon, {
     icon: "cancel",
     testID: "selected-chip-icon-cancel"
   })));
@@ -19098,6 +19117,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/lib/index.js

@@ -2698,12 +2698,16 @@ var getChipTheme = function getChipTheme(theme) {
   var shadows = {
     filledWrapper: theme.shadows["default"]
   };
+  var fontSizes = {
+    icon: theme.fontSizes.small
+  };
   return {
     colors: colors,
     space: space,
     radii: radii,
     borderWidths: borderWidths,
-    shadows: shadows
+    shadows: shadows,
+    fontSizes: fontSizes
   };
 };
 
@@ -13199,8 +13203,22 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
+var StyledChipIcon = index$a(Icon)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.__hd__.chip.fontSizes.icon
+  };
+});
 
 var _excluded$s = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var getChipLabel = function getChipLabel(label) {
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+      variant: "small"
+    }, label);
+  }
+  return label;
+};
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -13212,21 +13230,22 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
+  var shouldShowSelectedIcon = (variant === 'outlined' || variant === 'compact-outlined') && selected && showSelectedIcon;
+  var chipLabel = React.useMemo(function () {
+    return getChipLabel(label);
+  }, [label]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__namespace.default.createElement(Box, {
     marginRight: "small"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledChipIcon, {
     icon: icon,
     testID: "chip-icon-".concat(icon)
-  })), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__namespace.default.createElement(Box, {
+  })), chipLabel, shouldShowSelectedIcon && /*#__PURE__*/React__namespace.default.createElement(Box, {
     marginLeft: "small"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledChipIcon, {
     icon: "cancel",
     testID: "selected-chip-icon-cancel"
   })));
@@ -19125,6 +19144,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  React.useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.81.0",
+  "version": "8.81.1-alpha.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

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
+import Icon from '../Icon';
 
 type StyledChipWrapperProps = {
   themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
@@ -112,4 +113,8 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
   }
 );
 
-export { StyledChipWrapper };
+const StyledChipIcon = styled(Icon)(({ theme }) => ({
+  fontSize: theme.__hd__.chip.fontSizes.icon,
+}));
+
+export { StyledChipWrapper, StyledChipIcon };

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

@@ -59,16 +59,16 @@ exports[`Chip does not render selected icon when showSelectedIcon is false 1`] =
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Chip
     </Text>
@@ -155,16 +155,16 @@ exports[`Chip renders correctly when selected is false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -251,16 +251,16 @@ exports[`Chip renders correctly when selected is true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -281,14 +281,19 @@ exports[`Chip renders correctly when selected is true 1`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
-            undefined,
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
           ]
         }
         testID="selected-chip-icon-cancel"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>
@@ -392,14 +397,19 @@ exports[`Chip renders correctly with custom icon 1`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
-            undefined,
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
           ]
         }
         testID="chip-icon-charging-station-outlined"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
     <Text
@@ -409,16 +419,16 @@ exports[`Chip renders correctly with custom icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -523,14 +533,19 @@ exports[`Chip renders correctly with custom icon 2`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
-            undefined,
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
           ]
         }
         testID="chip-icon-charging-station-outlined"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
     <Text
@@ -540,16 +555,16 @@ exports[`Chip renders correctly with custom icon 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -637,16 +652,16 @@ exports[`Chip renders correctly with default icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -734,16 +749,16 @@ exports[`Chip renders correctly with default icon 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -764,14 +779,19 @@ exports[`Chip renders correctly with default icon 2`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
-            undefined,
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
           ]
         }
         testID="selected-chip-icon-cancel"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>
@@ -865,16 +885,16 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -969,16 +989,16 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1066,16 +1086,16 @@ exports[`Chip renders correctly with variant compact-outlined and selected false
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1163,19 +1183,51 @@ exports[`Chip renders correctly with variant compact-outlined and selected true
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
+    <View
+      marginLeft="small"
+      style={
+        [
+          {
+            "marginLeft": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="cancel"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="selected-chip-icon-cancel"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
   </View>
   <View
     pointerEvents="box-none"
@@ -1267,16 +1319,16 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1371,16 +1423,16 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1468,16 +1520,16 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1565,16 +1617,16 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="regular"
+      themeVariant="small"
     >
       Cover my bills
     </Text>
@@ -1595,14 +1647,19 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
-            undefined,
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
           ]
         }
         testID="selected-chip-icon-cancel"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Chip from '..';
+import Typography from '../../Typography';
 
 describe('Chip', () => {
   it.each`
@@ -106,6 +107,18 @@ describe('Chip', () => {
     }
   );
 
+  it('renders custom label correctly', () => {
+    const { getByText } = renderWithTheme(
+      <Chip
+        label={
+          <Typography.Body variant="small">Cover my bills</Typography.Body>
+        }
+      />
+    );
+
+    expect(getByText('Cover my bills')).toBeVisible();
+  });
+
   it('calls onPress when pressed', () => {
     const onPress = jest.fn();