@hero-design/rn 8.127.1-test-auto-workflow.0 → 8.127.1

package/CHANGELOG.md

@@ -1,14 +1,17 @@
 # @hero-design/rn
 
-## 8.127.1-test-auto-workflow.0
+## 8.127.1
 
 ### Patch Changes
 
-- bump version
+- [#5068](https://github.com/Thinkei/hero-design/pull/5068) [`b613e31036219c871e4f238501f3ed0170843ae6`](https://github.com/Thinkei/hero-design/commit/b613e31036219c871e4f238501f3ed0170843ae6) Thanks [@kristellegangano-debug](https://github.com/kristellegangano-debug)! - [UXT-8928] fix(BottomSheet): reduce close button icon size and enforce header minimum height
 
-- Updated dependencies []:
-  - @hero-design/colors@8.47.4-test-auto-workflow.0
-  - @hero-design/react-native-month-year-picker@8.45.3-test-auto-workflow.0
+  - Added explicit `minHeight` (64px) to the header wrapper, codifying the layout that previously existed implicitly
+  - Reduced close button icon size from 16px to 12px by changing `Button.Icon` size from `xsmall` to `xxxsmall`
+  - Centred the close icon within its 48x48px touch target (was right-aligned)
+  - Renamed `floatingCloseIcon` theme token to `closeIconSize` since both variants now share the same value
+
+  **Note:** If you reference `theme.__hd__.bottomSheet.sizes.floatingCloseIcon` directly, update it to `theme.__hd__.bottomSheet.sizes.closeIconSize`.
 
 ## 8.127.0
 

package/es/index.js

@@ -5815,7 +5815,9 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   var sizes = {
     closeIcon: theme.sizes.xxxlarge,
-    floatingCloseIcon: theme.sizes.smallMedium
+    // Renamed from floatingCloseIcon — shared by both fixed and floating variants
+    closeIconSize: theme.sizes.smallMedium,
+    headerMinHeight: theme.sizes.xxxxxlarge
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
@@ -10825,6 +10827,7 @@ var StyledHeaderWrapper = index$c(View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     flexDirection: 'row',
+    minHeight: theme.__hd__.bottomSheet.sizes.headerMinHeight,
     paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
     paddingHorizontal: theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding
   };
@@ -10846,7 +10849,7 @@ var StyledFooter = index$c(View)(function (_ref6) {
 var StyledIconWrapper$3 = index$c(View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    alignItems: 'flex-end',
+    alignItems: 'center',
     justifyContent: 'center',
     width: theme.__hd__.bottomSheet.sizes.closeIcon,
     height: theme.__hd__.bottomSheet.sizes.closeIcon,
@@ -11550,14 +11553,14 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "xsmall"
+    size: "xxxsmall"
   }) : /*#__PURE__*/React__default.createElement(StyledFloatingHeaderWrapper, {
     onPress: onRequestClose,
     testID: "bottom-sheet-close-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: "cancel",
     style: {
-      fontSize: theme.__hd__.bottomSheet.sizes.floatingCloseIcon
+      fontSize: theme.__hd__.bottomSheet.sizes.closeIconSize
     }
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };

package/lib/index.js

@@ -5845,7 +5845,9 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   var sizes = {
     closeIcon: theme.sizes.xxxlarge,
-    floatingCloseIcon: theme.sizes.smallMedium
+    // Renamed from floatingCloseIcon — shared by both fixed and floating variants
+    closeIconSize: theme.sizes.smallMedium,
+    headerMinHeight: theme.sizes.xxxxxlarge
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
@@ -10855,6 +10857,7 @@ var StyledHeaderWrapper = index$c(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     flexDirection: 'row',
+    minHeight: theme.__hd__.bottomSheet.sizes.headerMinHeight,
     paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
     paddingHorizontal: theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding
   };
@@ -10876,7 +10879,7 @@ var StyledFooter = index$c(reactNative.View)(function (_ref6) {
 var StyledIconWrapper$3 = index$c(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    alignItems: 'flex-end',
+    alignItems: 'center',
     justifyContent: 'center',
     width: theme.__hd__.bottomSheet.sizes.closeIcon,
     height: theme.__hd__.bottomSheet.sizes.closeIcon,
@@ -11580,14 +11583,14 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "xsmall"
+    size: "xxxsmall"
   }) : /*#__PURE__*/React__namespace.default.createElement(StyledFloatingHeaderWrapper, {
     onPress: onRequestClose,
     testID: "bottom-sheet-close-icon"
   }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
     icon: "cancel",
     style: {
-      fontSize: theme.__hd__.bottomSheet.sizes.floatingCloseIcon
+      fontSize: theme.__hd__.bottomSheet.sizes.closeIconSize
     }
   }))) : null), showDivider ? /*#__PURE__*/React__namespace.default.createElement(Divider, null) : null);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.127.1-test-auto-workflow.0",
+  "version": "8.127.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,14 +22,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.47.4-test-auto-workflow.0",
+    "@hero-design/colors": "8.47.3",
     "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "hero-editor": "^1.17.0",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.45.3-test-auto-workflow.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/slider": "^5.0.1",
@@ -58,8 +58,8 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.4-test-auto-workflow.0",
-    "@hero-design/react-native-month-year-picker": "^8.45.3-test-auto-workflow.0",
+    "@hero-design/eslint-plugin": "9.2.3",
+    "@hero-design/react-native-month-year-picker": "^8.45.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
@@ -83,12 +83,12 @@
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.6-test-auto-workflow.0",
+    "eslint-config-hd": "8.42.5",
     "expo-linear-gradient": "55.0.9",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-test-auto-workflow.0",
+    "prettier-config-hd": "8.42.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",

package/src/components/BottomSheet/Header.tsx

@@ -47,7 +47,7 @@ const Header = ({
                 onPress={onRequestClose}
                 intent="text"
                 testID="bottom-sheet-close-icon"
-                size="xsmall"
+                size="xxxsmall"
               />
             ) : (
               <StyledFloatingHeaderWrapper
@@ -57,7 +57,7 @@ const Header = ({
                 <Icon
                   icon="cancel"
                   style={{
-                    fontSize: theme.__hd__.bottomSheet.sizes.floatingCloseIcon,
+                    fontSize: theme.__hd__.bottomSheet.sizes.closeIconSize,
                   }}
                 />
               </StyledFloatingHeaderWrapper>

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -58,6 +58,7 @@ const StyledBackdrop = styled(AnimatedPressable)<
 
 const StyledHeaderWrapper = styled(View)(({ theme }) => ({
   flexDirection: 'row',
+  minHeight: theme.__hd__.bottomSheet.sizes.headerMinHeight,
   paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
   paddingHorizontal:
     theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding,
@@ -77,7 +78,7 @@ const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  alignItems: 'flex-end',
+  alignItems: 'center',
   justifyContent: 'center',
   width: theme.__hd__.bottomSheet.sizes.closeIcon,
   height: theme.__hd__.bottomSheet.sizes.closeIcon,

package/src/theme/components/bottomSheet.ts

@@ -10,7 +10,9 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     closeIcon: theme.sizes.xxxlarge,
-    floatingCloseIcon: theme.sizes.smallMedium,
+    // Renamed from floatingCloseIcon — shared by both fixed and floating variants
+    closeIconSize: theme.sizes.smallMedium,
+    headerMinHeight: theme.sizes.xxxxxlarge,
   };
 
   const space = {

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

@@ -13,7 +13,8 @@ declare const getBottomSheetTheme: (theme: GlobalTheme) => {
     };
     sizes: {
         closeIcon: number;
-        floatingCloseIcon: number;
+        closeIconSize: number;
+        headerMinHeight: number;
     };
     space: {
         headerWrapperVerticalPadding: number;