@hero-design/rn-work-uikit 1.13.7 → 1.13.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hero-design/rn-work-uikit
 
+## 1.13.8
+
+### Patch Changes
+
+- [#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
+
+  - 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`.
+
+- Updated dependencies [[`b613e31036219c871e4f238501f3ed0170843ae6`](https://github.com/Thinkei/hero-design/commit/b613e31036219c871e4f238501f3ed0170843ae6)]:
+  - @hero-design/rn@8.127.1
+
 ## 1.13.7
 
 ### Patch Changes

package/es/index.js

@@ -3776,6 +3776,7 @@ var StyledHeaderWrapper$1 = 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
   };
@@ -3797,7 +3798,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,
@@ -6125,7 +6126,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,
@@ -9957,14 +9960,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

@@ -3806,6 +3806,7 @@ var StyledHeaderWrapper$1 = 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
   };
@@ -3827,7 +3828,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,
@@ -6155,7 +6156,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,
@@ -9987,14 +9990,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-work-uikit",
-  "version": "1.13.7",
+  "version": "1.13.8",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.127.0",
+    "@hero-design/rn": "8.127.1",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {