@hero-design/rn 8.136.0 → 8.136.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 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
+
+- [#5482](https://github.com/Thinkei/hero-design/pull/5482) [`d72cd39`](https://github.com/Thinkei/hero-design/commit/d72cd3990c6e614cdc1358b5811b4461b317ae29) Thanks [@ttkien](https://github.com/ttkien)! - [Progress.SegmentedBar] Fix muted intent applied to wrong legend text
+
 ## 8.136.0
 
 ### Minor 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
   };
@@ -26726,14 +26729,14 @@ var ProgressSegmentedBarLegendItem = function ProgressSegmentedBarLegendItem(_re
     color = _ref.color,
     displayValue = _ref.displayValue,
     testID = _ref.testID;
-  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__default.createElement(Typography.Caption, {
-    intent: "muted"
-  }, displayValue));
+  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__default.createElement(Typography.Caption, null, displayValue));
   return /*#__PURE__*/React__default.createElement(LegendItem, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(LegendCircle, {
     themeColor: color
-  }), /*#__PURE__*/React__default.createElement(Typography.Caption, null, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__default.createElement(LegendValue, null, renderedDisplayValue) : null);
+  }), /*#__PURE__*/React__default.createElement(Typography.Caption, {
+    intent: "muted"
+  }, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__default.createElement(LegendValue, null, renderedDisplayValue) : null);
 };
 
 var StyledHeader = index$c(Box)(function (_ref) {

package/eslint.config.js

@@ -1,24 +1,16 @@
 const heroDesign = require('@hero-design/eslint-plugin');
-const _import = require('eslint-plugin-import');
-const { FlatCompat } = require('@eslint/eslintrc');
 const { includeIgnoreFile } = require('@eslint/compat');
 const path = require('path');
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+const hdConfig = require('eslint-config-hd');
 
 const gitignorePath = path.resolve(__dirname, '../../.gitignore');
 
 module.exports = [
-  ...compat.extends('hd', 'plugin:@hero-design/recommendedRn'),
+  ...hdConfig,
+  ...heroDesign.configs.recommendedRn,
   includeIgnoreFile(gitignorePath),
   {
     files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
-    plugins: {
-      '@hero-design': heroDesign,
-      import: _import,
-    },
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: __dirname,

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
   };
@@ -26755,14 +26758,14 @@ var ProgressSegmentedBarLegendItem = function ProgressSegmentedBarLegendItem(_re
     color = _ref.color,
     displayValue = _ref.displayValue,
     testID = _ref.testID;
-  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
-    intent: "muted"
-  }, displayValue));
+  var renderedDisplayValue = getTextComponent(displayValue, /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, null, displayValue));
   return /*#__PURE__*/React__namespace.default.createElement(LegendItem, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(LegendCircle, {
     themeColor: color
-  }), /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, null, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__namespace.default.createElement(LegendValue, null, renderedDisplayValue) : null);
+  }), /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
+    intent: "muted"
+  }, "".concat(title, ":")), renderedDisplayValue ? /*#__PURE__*/React__namespace.default.createElement(LegendValue, null, renderedDisplayValue) : null);
 };
 
 var StyledHeader = index$c(Box)(function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.136.0",
+  "version": "8.136.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -62,9 +62,8 @@
     "@babel/runtime": "^7.29.7",
     "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
-    "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.4",
+    "@hero-design/eslint-plugin": "10.0.0",
     "@hero-design/react-native-month-year-picker": "^8.46.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
@@ -88,7 +87,7 @@
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "eslint-config-hd": "8.42.7",
     "expo-linear-gradient": "55.0.9",
     "jest": "^29.7.0",

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/Progress/SegmentedBar/Legend.tsx

@@ -22,13 +22,13 @@ const ProgressSegmentedBarLegendItem = ({
 }: ProgressSegmentedBarLegendItemProps): ReactNode => {
   const renderedDisplayValue = getTextComponent(
     displayValue,
-    <Typography.Caption intent="muted">{displayValue}</Typography.Caption>
+    <Typography.Caption>{displayValue}</Typography.Caption>
   );
 
   return (
     <LegendItem testID={testID}>
       <LegendCircle themeColor={color} />
-      <Typography.Caption>{`${title}:`}</Typography.Caption>
+      <Typography.Caption intent="muted">{`${title}:`}</Typography.Caption>
       {renderedDisplayValue ? (
         <LegendValue>{renderedDisplayValue}</LegendValue>
       ) : null}

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;