@hero-design/rn 8.136.1 → 8.136.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.136.3
+
+### Patch Changes
+
+- [#5502](https://github.com/Thinkei/hero-design/pull/5502) [`61d504b`](https://github.com/Thinkei/hero-design/commit/61d504b72a5d2631dd66d10ce0af97cbc5cd30c7) Thanks [@ttkien](https://github.com/ttkien)! - [SectionHeading] Remove redundant icon wrapper spacing when no icon is provided
+
+## 8.136.2
+
+### Patch Changes
+
+- [#5486](https://github.com/Thinkei/hero-design/pull/5486) [`fc7b9e0`](https://github.com/Thinkei/hero-design/commit/fc7b9e08b575111f40c79ea3445c03e286b5cb80) Thanks [@ttkien](https://github.com/ttkien)! - [List.BasicItem] Reduce horizontal padding to smallMedium
+
+- [#5486](https://github.com/Thinkei/hero-design/pull/5486) [`fc7b9e0`](https://github.com/Thinkei/hero-design/commit/fc7b9e08b575111f40c79ea3445c03e286b5cb80) Thanks [@ttkien](https://github.com/ttkien)! - [List.Item] Reduce horizontal padding to smallMedium
+
 ## 8.136.1
 
 ### Patch Changes

package/es/index.js

@@ -6478,7 +6478,8 @@ var getListTheme = function getListTheme(theme) {
     }
   };
   var space = {
-    listItemContainerPadding: theme.space.medium,
+    listItemContainerVerticalPadding: theme.space.medium,
+    listItemContainerHorizontalPadding: theme.space.smallMedium,
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
@@ -15743,7 +15744,8 @@ var StyledListItemContainer$1 = index$c(TouchableHighlight)(function (_ref) {
   var sharedStyles = {
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding,
+    paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+    paddingHorizontal: theme.__hd__.list.space.listItemContainerHorizontalPadding,
     borderRadius: theme.__hd__.list.radii.item
   };
   switch (themeVariant) {
@@ -15873,7 +15875,8 @@ var StyledListItemContainer = index$c(TouchableHighlight)(function (_ref3) {
     alignItems: 'center',
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding,
+    paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+    paddingHorizontal: theme.__hd__.list.space.listItemContainerHorizontalPadding,
     opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled,
     borderRadius: theme.__hd__.list.radii.basicItem
   };
@@ -27464,14 +27467,14 @@ var SectionHeading = function SectionHeading(_ref) {
     themeSize: size,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(StyledWrapper$4, null, /*#__PURE__*/React__default.createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(StyledWrapper$4, null, icon !== undefined && /*#__PURE__*/React__default.createElement(StyledIconWrapper$2, null, typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
   }) : (/*#__PURE__*/React__default.cloneElement(icon, _objectSpread2({
     size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
-  }, icon.props))))), size === 'small' ? /*#__PURE__*/React__default.createElement(Typography.Caption, {
+  }, icon.props)))), size === 'small' ? /*#__PURE__*/React__default.createElement(Typography.Caption, {
     intent: intent
   }, text) : /*#__PURE__*/React__default.createElement(Typography.Body, {
     variant: "small",
@@ -27518,10 +27521,8 @@ var StyledSectionSpacer = index$c(View)(function (_ref3) {
     height: themeCompact ? theme.__hd__.sectionList.space.sectionSpacingCompact : theme.__hd__.sectionList.space.sectionSpacing
   };
 });
-var StyledSectionHeading = index$c(SectionHeading)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSectionHeading = index$c(SectionHeading)(function () {
   return {
-    paddingLeft: theme.__hd__.sectionList.space.headingPaddingLeft,
     marginBottom: 0
   };
 });

package/lib/index.js

@@ -6507,7 +6507,8 @@ var getListTheme = function getListTheme(theme) {
     }
   };
   var space = {
-    listItemContainerPadding: theme.space.medium,
+    listItemContainerVerticalPadding: theme.space.medium,
+    listItemContainerHorizontalPadding: theme.space.smallMedium,
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
@@ -15772,7 +15773,8 @@ var StyledListItemContainer$1 = index$c(reactNative.TouchableHighlight)(function
   var sharedStyles = {
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding,
+    paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+    paddingHorizontal: theme.__hd__.list.space.listItemContainerHorizontalPadding,
     borderRadius: theme.__hd__.list.radii.item
   };
   switch (themeVariant) {
@@ -15902,7 +15904,8 @@ var StyledListItemContainer = index$c(reactNative.TouchableHighlight)(function (
     alignItems: 'center',
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding,
+    paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+    paddingHorizontal: theme.__hd__.list.space.listItemContainerHorizontalPadding,
     opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled,
     borderRadius: theme.__hd__.list.radii.basicItem
   };
@@ -27493,14 +27496,14 @@ var SectionHeading = function SectionHeading(_ref) {
     themeSize: size,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$4, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Icon, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$4, null, icon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$2, null, typeof icon === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
   }) : (/*#__PURE__*/React__namespace.default.cloneElement(icon, _objectSpread2({
     size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
-  }, icon.props))))), size === 'small' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
+  }, icon.props)))), size === 'small' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
     intent: intent
   }, text) : /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
     variant: "small",
@@ -27547,10 +27550,8 @@ var StyledSectionSpacer = index$c(reactNative.View)(function (_ref3) {
     height: themeCompact ? theme.__hd__.sectionList.space.sectionSpacingCompact : theme.__hd__.sectionList.space.sectionSpacing
   };
 });
-var StyledSectionHeading = index$c(SectionHeading)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSectionHeading = index$c(SectionHeading)(function () {
   return {
-    paddingLeft: theme.__hd__.sectionList.space.headingPaddingLeft,
     marginBottom: 0
   };
 });

package/package.json

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

package/src/components/List/StyledBasicListItem.tsx

@@ -20,7 +20,8 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   backgroundColor: themeSelected
     ? theme.__hd__.list.colors.checkedListItemContainerBackground
     : theme.__hd__.list.colors.listItemContainerBackground,
-  padding: theme.__hd__.list.space.listItemContainerPadding,
+  paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+  paddingHorizontal: theme.__hd__.list.space.listItemContainerHorizontalPadding,
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled
     : theme.__hd__.list.opacity.enabled,

package/src/components/List/StyledListItem.tsx

@@ -18,7 +18,9 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
     backgroundColor: themeSelected
       ? theme.__hd__.list.colors.checkedListItemContainerBackground
       : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding,
+    paddingVertical: theme.__hd__.list.space.listItemContainerVerticalPadding,
+    paddingHorizontal:
+      theme.__hd__.list.space.listItemContainerHorizontalPadding,
     borderRadius: theme.__hd__.list.radii.item,
   };
 

package/src/components/SectionHeading/index.tsx

@@ -87,9 +87,9 @@ const SectionHeading = ({
   return (
     <StyledHeading themeSize={size} style={style} testID={testID}>
       <StyledWrapper>
-        <StyledIconWrapper>
-          {icon !== undefined &&
-            (typeof icon === 'string' ? (
+        {icon !== undefined && (
+          <StyledIconWrapper>
+            {typeof icon === 'string' ? (
               <Icon
                 icon={icon}
                 size={ICON_SIZE_MAP[size]}
@@ -101,8 +101,9 @@ const SectionHeading = ({
                 intent: ICON_INTENT_MAP[intent],
                 ...icon.props,
               })
-            ))}
-        </StyledIconWrapper>
+            )}
+          </StyledIconWrapper>
+        )}
 
         {size === 'small' ? (
           <Typography.Caption intent={intent}>{text}</Typography.Caption>

package/src/components/SectionList/StyledSectionList.tsx

@@ -52,8 +52,7 @@ const StyledSectionSpacer = styled(View)<{ themeCompact: boolean }>(
   })
 );
 
-const StyledSectionHeading = styled(SectionHeading)(({ theme }) => ({
-  paddingLeft: theme.__hd__.sectionList.space.headingPaddingLeft,
+const StyledSectionHeading = styled(SectionHeading)(() => ({
   marginBottom: 0,
 }));
 

package/src/theme/components/list.ts

@@ -15,7 +15,8 @@ const getListTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    listItemContainerPadding: theme.space.medium,
+    listItemContainerVerticalPadding: theme.space.medium,
+    listItemContainerHorizontalPadding: theme.space.smallMedium,
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,

package/types/theme/components/list.d.ts

@@ -13,7 +13,8 @@ declare const getListTheme: (theme: GlobalTheme) => {
         };
     };
     space: {
-        listItemContainerPadding: number;
+        listItemContainerVerticalPadding: number;
+        listItemContainerHorizontalPadding: number;
         leadingStatusMarginRight: number;
         prefixContainerMarginRight: number;
         suffixContainerMarginLeft: number;