@hero-design/rn 8.85.0 → 8.87.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hero-design/rn
 
+## 8.87.1
+
+### Patch Changes
+
+- [#3619](https://github.com/Thinkei/hero-design/pull/3619) [`88bfafcf9fc3dcaea7fd5ce14c29c03f3b9e80d2`](https://github.com/Thinkei/hero-design/commit/88bfafcf9fc3dcaea7fd5ce14c29c03f3b9e80d2) Thanks [@sonnguyen-eh](https://github.com/sonnguyen-eh)! - Bump hero-editor to 1.15.4, create new events and expose new functions in RichTextEditor
+
+## 8.87.0
+
+### Minor Changes
+
+- [#3620](https://github.com/Thinkei/hero-design/pull/3620) [`5a7779f2a1283c746bd918e5f3fd35fec8471369`](https://github.com/Thinkei/hero-design/commit/5a7779f2a1283c746bd918e5f3fd35fec8471369) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel.Card] Support gap prop
+
+## 8.86.0
+
+### Minor Changes
+
+- [#3609](https://github.com/Thinkei/hero-design/pull/3609) [`6cb53946a493e6550c0bdd2b0c2c0fb683e4e77b`](https://github.com/Thinkei/hero-design/commit/6cb53946a493e6550c0bdd2b0c2c0fb683e4e77b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Button] Add white intent
+
 ## 8.85.0
 
 ### Minor Changes

package/es/index.js

@@ -2511,6 +2511,7 @@ var getButtonTheme = function getButtonTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
+    white: theme.colors.defaultGlobalSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
@@ -2522,17 +2523,21 @@ var getButtonTheme = function getButtonTheme(theme) {
       filledPrimary: theme.colors.pressedSurface,
       filledSecondary: theme.colors.pressedSurface,
       filledDanger: theme.colors.errorSurface,
+      filledWhite: theme.colors.highlightedSurface,
       outlinedPrimary: theme.colors.highlightedSurface,
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
+      outlineWhite: theme.colors.pressedSurface,
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
-      textDanger: theme.colors.errorSurface
+      textDanger: theme.colors.errorSurface,
+      textWhite: theme.colors.pressedSurface
     },
     pressedText: {
       primary: theme.colors.pressedSurface,
       secondary: theme.colors.onDefaultGlobalSurface,
-      danger: theme.colors.mutedError
+      danger: theme.colors.mutedError,
+      white: theme.colors.pressedSurface
     }
   };
   var lineHeights = {
@@ -2639,8 +2644,12 @@ var getCarouselTheme = function getCarouselTheme(theme) {
 var getCardCarouselTheme = function getCardCarouselTheme(theme) {
   var space = {
     pageControlMarginTop: theme.space.medium,
-    carouselItemSpacing: theme.space.small,
-    contentContainerPaddingHorizontal: theme.space.large
+    contentContainerPaddingHorizontal: theme.space.large,
+    carouselItemSpacing: {
+      xsmall: theme.space.xxsmall,
+      small: theme.space.xsmall,
+      medium: theme.space.small
+    }
   };
   var colors = {
     carouselItemBackground: theme.colors.defaultSurface
@@ -9567,15 +9576,18 @@ var StyledLoadingDot = index$a(View)(function (_ref) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
+      case 'outlined-white':
+      case 'text-white':
         return {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
+      case 'filled-white':
       case 'outlined-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
       case 'text-primary':
       case 'outlined-secondary':
-      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+      case 'text-secondary':
       case 'outlined-danger':
       case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');
@@ -9749,15 +9761,20 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
       return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
       return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'filled-white':
+      return genFilledContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'outlined-primary':
       return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
       return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
       return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'outlined-white':
+      return genOutlineContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
+    case 'text-white':
       return {
         height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
@@ -9766,14 +9783,51 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
         alignItems: 'center',
         padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
-        backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
+        backgroundColor: loading && !themeInlineText && themeButtonVariant !== 'text-white' ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
-var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
-  var disabled = _ref2.disabled,
-    themeButtonVariant = _ref2.themeButtonVariant,
+var genWhiteTextStyles = function genWhiteTextStyles(_ref2) {
+  var variant = _ref2.variant,
+    disabled = _ref2.disabled,
     theme = _ref2.theme;
+  if (disabled) {
+    switch (variant) {
+      case 'filled-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.invertedText
+          };
+        }
+      case 'outlined-white':
+      case 'text-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.disabledText
+          };
+        }
+    }
+  }
+  switch (variant) {
+    case 'filled-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.primary
+        };
+      }
+    case 'outlined-white':
+    case 'text-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.invertedText
+        };
+      }
+  }
+};
+var StyledButtonText = index$a(Typography.Title)(function (_ref3) {
+  var disabled = _ref3.disabled,
+    themeButtonVariant = _ref3.themeButtonVariant,
+    theme = _ref3.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9794,6 +9848,14 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
         return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9802,11 +9864,11 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
   }, themeStyling());
 });
 var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
-var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
-  var disabled = _ref3.disabled,
-    themeButtonVariant = _ref3.themeButtonVariant,
-    themeIsPressed = _ref3.themeIsPressed,
-    theme = _ref3.theme;
+var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref4) {
+  var disabled = _ref4.disabled,
+    themeButtonVariant = _ref4.themeButtonVariant,
+    themeIsPressed = _ref4.themeIsPressed,
+    theme = _ref4.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
@@ -9815,6 +9877,12 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: 'text-white',
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9824,10 +9892,10 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
     textAlign: 'center'
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
-  var themePosition = _ref4.themePosition,
-    theme = _ref4.theme,
-    themeIsCompact = _ref4.themeIsCompact;
+var StyledButtonIconWrapper = index$a(View)(function (_ref5) {
+  var themePosition = _ref5.themePosition,
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
@@ -9839,12 +9907,12 @@ var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
       };
   }
 });
-var StyledButtonIcon = index$a(Icon)(function (_ref5) {
-  var disabled = _ref5.disabled,
-    themeButtonVariant = _ref5.themeButtonVariant,
-    themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme,
-    themeIsCompact = _ref5.themeIsCompact;
+var StyledButtonIcon = index$a(Icon)(function (_ref6) {
+  var disabled = _ref6.disabled,
+    themeButtonVariant = _ref6.themeButtonVariant,
+    themeIsPressed = _ref6.themeIsPressed,
+    theme = _ref6.theme,
+    themeIsCompact = _ref6.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9865,6 +9933,14 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9878,17 +9954,20 @@ var isIconName = function isIconName(icon) {
 var FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
-  danger: 'filled-danger'
+  danger: 'filled-danger',
+  white: 'filled-white'
 };
 var OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
   secondary: 'outlined-secondary',
-  danger: 'outlined-danger'
+  danger: 'outlined-danger',
+  white: 'outlined-white'
 };
 var TEXT_VARIANTS = {
   primary: 'text-primary',
   secondary: 'text-secondary',
-  danger: 'text-danger'
+  danger: 'text-danger',
+  white: 'text-white'
 };
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
@@ -9910,23 +9989,29 @@ var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
       return theme.__hd__.button.colors.pressedBackground.filledSecondary;
     case 'filled-danger':
       return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'filled-white':
+      return theme.__hd__.button.colors.pressedBackground.filledWhite;
     case 'outlined-primary':
       return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
     case 'outlined-secondary':
       return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
     case 'outlined-danger':
       return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'outlined-white':
+      return theme.__hd__.button.colors.pressedBackground.outlineWhite;
     case 'text-primary':
       return theme.__hd__.button.colors.pressedBackground.textPrimary;
     case 'text-secondary':
       return theme.__hd__.button.colors.pressedBackground.textSecondary;
     case 'text-danger':
       return theme.__hd__.button.colors.pressedBackground.textDanger;
+    case 'text-white':
+      return theme.__hd__.button.colors.pressedBackground.textWhite;
   }
 };
 var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 function isTextVariant(themeVariant) {
-  return ['text-primary', 'text-secondary', 'text-danger'].includes(themeVariant);
+  return ['text-primary', 'text-secondary', 'text-danger', 'text-white'].includes(themeVariant);
 }
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
@@ -9971,7 +10056,7 @@ var Button = function Button(_ref) {
   };
   var renderTitle = function renderTitle() {
     return isCompactVariant ? /*#__PURE__*/React__default.createElement(StyledSmallButtonText, {
-      variant: "small",
+      variant: "small-bold",
       ellipsizeMode: "tail",
       numberOfLines: 1,
       disabled: disabled,
@@ -13076,9 +13161,10 @@ var StyledCard = index$a(Card$1)(function (_ref2) {
   };
 });
 var StyledItemWrapper = index$a(View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeGap = _ref3.themeGap;
   return {
-    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing
+    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing[themeGap]
   };
 });
 
@@ -13106,7 +13192,9 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
     _ref$autoPlayInterval = _ref.autoPlayInterval,
     autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
-    onLayout = _ref.onLayout;
+    onLayout = _ref.onLayout,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'medium' : _ref$gap;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -13190,11 +13278,12 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderItem = useCallback(function (_ref3) {
     var item = _ref3.item;
     return /*#__PURE__*/React__default.createElement(StyledItemWrapper, {
+      themeGap: gap,
       style: {
         width: itemWidth
       }
     }, /*#__PURE__*/React__default.createElement(StyledCard, null, item));
-  }, [itemWidth]);
+  }, [itemWidth, gap]);
   var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React__default.createElement(StyledWrapper$9, {
     style: style,