@hero-design/rn 8.138.0 → 8.138.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.138.1
+
+### Patch Changes
+
+- [#5549](https://github.com/Thinkei/hero-design/pull/5549) [`59baec0`](https://github.com/Thinkei/hero-design/commit/59baec09b5e2e744e76b075c54d6613a65025b92) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [List.Item] Fix childrenContainerTopMargin applied unconditionally when title is absent
+
 ## 8.138.0
 
 ### Minor Changes

package/es/index.js

@@ -15770,13 +15770,15 @@ var StyledContentContainer = index$c(View)(function () {
   };
 });
 var StyledChildrenContainer = index$c(View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
+  var theme = _ref2.theme,
+    themeHasTitle = _ref2.themeHasTitle;
+  return _objectSpread2({
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+  }, themeHasTitle ? {
     marginTop: theme.__hd__.list.space.childrenContainerTopMargin
-  };
+  } : {});
 });
 var StyledLeadingStatus = index$c(View)(function (_ref3) {
   var theme = _ref3.theme,
@@ -15850,7 +15852,9 @@ var ListItem = function ListItem(_ref) {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
     size: "small"
-  }) : suffix)), children && /*#__PURE__*/React__default.createElement(StyledChildrenContainer, null, children))));
+  }) : suffix)), children && /*#__PURE__*/React__default.createElement(StyledChildrenContainer, {
+    themeHasTitle: !!title
+  }, children))));
 };
 
 var StyledPrefixContainer = index$c(View)(function (_ref) {

package/lib/index.js

@@ -15799,13 +15799,15 @@ var StyledContentContainer = index$c(reactNative.View)(function () {
   };
 });
 var StyledChildrenContainer = index$c(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
+  var theme = _ref2.theme,
+    themeHasTitle = _ref2.themeHasTitle;
+  return _objectSpread2({
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+  }, themeHasTitle ? {
     marginTop: theme.__hd__.list.space.childrenContainerTopMargin
-  };
+  } : {});
 });
 var StyledLeadingStatus = index$c(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme,
@@ -15879,7 +15881,9 @@ var ListItem = function ListItem(_ref) {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
     size: "small"
-  }) : suffix)), children && /*#__PURE__*/React__namespace.default.createElement(StyledChildrenContainer, null, children))));
+  }) : suffix)), children && /*#__PURE__*/React__namespace.default.createElement(StyledChildrenContainer, {
+    themeHasTitle: !!title
+  }, children))));
 };
 
 var StyledPrefixContainer = index$c(reactNative.View)(function (_ref) {

package/package.json

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

package/src/components/List/ListItem.tsx

@@ -149,7 +149,9 @@ const ListItem = ({
             )}
           </View>
           {children && (
-            <StyledChildrenContainer>{children}</StyledChildrenContainer>
+            <StyledChildrenContainer themeHasTitle={!!title}>
+              {children}
+            </StyledChildrenContainer>
           )}
         </StyledContentContainer>
       </>

package/src/components/List/StyledListItem.tsx

@@ -44,12 +44,16 @@ const StyledContentContainer = styled(View)(() => ({
   flexGrow: 2,
 }));
 
-const StyledChildrenContainer = styled(View)(({ theme }) => ({
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-start',
-  marginTop: theme.__hd__.list.space.childrenContainerTopMargin,
-}));
+const StyledChildrenContainer = styled(View)<{ themeHasTitle: boolean }>(
+  ({ theme, themeHasTitle }) => ({
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    ...(themeHasTitle
+      ? { marginTop: theme.__hd__.list.space.childrenContainerTopMargin }
+      : {}),
+  })
+);
 
 const StyledLeadingStatus = styled(View)<{
   themeLeadingStatusIntent: LeadingStatusIntent;

package/types/components/List/StyledListItem.d.ts

@@ -17,6 +17,8 @@ declare const StyledContentContainer: import("@emotion/native").StyledComponent<
 declare const StyledChildrenContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    themeHasTitle: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;