@hero-design/rn 8.80.1 → 8.81.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.81.1
+
+### Patch Changes
+
+- [#3518](https://github.com/Thinkei/hero-design/pull/3518) [`b571a2a4e544551d3ed0cfb1baea6da4f2ae33e2`](https://github.com/Thinkei/hero-design/commit/b571a2a4e544551d3ed0cfb1baea6da4f2ae33e2) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Update styling and allow custom label
+
+## 8.81.0
+
+### Minor Changes
+
+- [#3505](https://github.com/Thinkei/hero-design/pull/3505) [`6b9e214ee7e9fe63374a4ae7c11c8af4902437ac`](https://github.com/Thinkei/hero-design/commit/6b9e214ee7e9fe63374a4ae7c11c8af4902437ac) Thanks [@haudao-eh](https://github.com/haudao-eh)! - [Button] Support inline-text variant
+
 ## 8.80.1
 
 ### Patch Changes

package/es/index.js

@@ -2483,6 +2483,11 @@ var getButtonTheme = function getButtonTheme(theme) {
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface
+    },
+    pressedText: {
+      primary: theme.colors.pressedSurface,
+      secondary: theme.colors.onDefaultGlobalSurface,
+      danger: theme.colors.mutedError
     }
   };
   var lineHeights = {
@@ -2666,12 +2671,16 @@ var getChipTheme = function getChipTheme(theme) {
   var shadows = {
     filledWrapper: theme.shadows["default"]
   };
+  var fontSizes = {
+    icon: theme.fontSizes.small
+  };
   return {
     colors: colors,
     space: space,
     radii: radii,
     borderWidths: borderWidths,
-    shadows: shadows
+    shadows: shadows,
+    fontSizes: fontSizes
   };
 };
 
@@ -9286,12 +9295,17 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
     backgroundColor: 'transparent'
   }, borderColorStyling());
 };
-var genTextStyles = function genTextStyles(theme, intent, disabled) {
+var genTextStyles = function genTextStyles(theme, intent, disabled, isPressed) {
   if (disabled) {
     return {
       color: theme.__hd__.button.colors.disabledText
     };
   }
+  if (isPressed) {
+    return {
+      color: theme.__hd__.button.colors.pressedText[intent]
+    };
+  }
   return {
     color: theme.__hd__.button.colors[intent]
   };
@@ -9302,6 +9316,7 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     themeButtonVariant = _ref.themeButtonVariant,
+    themeInlineText = _ref.themeInlineText,
     theme = _ref.theme;
   switch (themeButtonVariant) {
     case 'filled-primary':
@@ -9320,14 +9335,14 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
     case 'text-secondary':
     case 'text-danger':
       return {
-        height: scale(60),
+        height: themeInlineText ? undefined : scale(60),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.textButtonPadding,
+        padding: themeInlineText ? 0 : theme.__hd__.button.space.textButtonPadding,
         borderWidth: 0,
-        backgroundColor: loading ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
+        backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
@@ -9365,15 +9380,16 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
 var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   var disabled = _ref3.disabled,
     themeButtonVariant = _ref3.themeButtonVariant,
+    themeIsPressed = _ref3.themeIsPressed,
     theme = _ref3.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
   return _objectSpread2({
@@ -9399,6 +9415,7 @@ 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;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
@@ -9415,11 +9432,11 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
       case 'outlined-danger':
         return genTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
   return _objectSpread2({
@@ -9498,11 +9515,16 @@ var Button = function Button(_ref) {
     text = _ref.text,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
-  var themeVariant = getThemeVariant(variant, intent);
+  var isInlineText = variant === 'inline-text';
+  var themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   var theme = useTheme();
   var underlayColor = useMemo(function () {
-    return getUnderlayColor(theme, themeVariant);
-  }, [theme, themeVariant]);
+    return isInlineText ? 'transparent' : getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant, isInlineText]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPressed = _useState2[0],
+    setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   return /*#__PURE__*/React__default.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
@@ -9513,7 +9535,14 @@ var Button = function Button(_ref) {
     testID: testID,
     themeButtonVariant: themeVariant,
     style: style,
-    underlayColor: underlayColor
+    underlayColor: underlayColor,
+    themeInlineText: isInlineText,
+    onPressIn: function onPressIn() {
+      return isInlineText && setIsPressed(true);
+    },
+    onPressOut: function onPressOut() {
+      return isInlineText && setIsPressed(false);
+    }
   }, loading === true ? /*#__PURE__*/React__default.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
@@ -9523,13 +9552,15 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : icon), isTextVariant(themeVariant) ? /*#__PURE__*/React__default.createElement(StyledButtonTitleOfVariantText, {
     variant: "regular-bold",
     ellipsizeMode: "tail",
     numberOfLines: 1,
     disabled: disabled,
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }, text) : /*#__PURE__*/React__default.createElement(StyledButtonText, {
     level: "h5",
     ellipsizeMode: "tail",
@@ -9542,7 +9573,8 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : rightIcon)));
 };
 
@@ -13144,8 +13176,22 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
+var StyledChipIcon = index$a(Icon)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.__hd__.chip.fontSizes.icon
+  };
+});
 
 var _excluded$s = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var getChipLabel = function getChipLabel(label) {
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__default.createElement(Typography.Body, {
+      variant: "small"
+    }, label);
+  }
+  return label;
+};
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -13157,21 +13203,22 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
+  var shouldShowSelectedIcon = (variant === 'outlined' || variant === 'compact-outlined') && selected && showSelectedIcon;
+  var chipLabel = useMemo(function () {
+    return getChipLabel(label);
+  }, [label]);
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__default.createElement(Box, {
     marginRight: "small"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__default.createElement(StyledChipIcon, {
     icon: icon,
     testID: "chip-icon-".concat(icon)
-  })), /*#__PURE__*/React__default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
+  })), chipLabel, shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
     marginLeft: "small"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__default.createElement(StyledChipIcon, {
     icon: "cancel",
     testID: "selected-chip-icon-cancel"
   })));
@@ -19070,6 +19117,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/lib/index.js

@@ -2510,6 +2510,11 @@ var getButtonTheme = function getButtonTheme(theme) {
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface
+    },
+    pressedText: {
+      primary: theme.colors.pressedSurface,
+      secondary: theme.colors.onDefaultGlobalSurface,
+      danger: theme.colors.mutedError
     }
   };
   var lineHeights = {
@@ -2693,12 +2698,16 @@ var getChipTheme = function getChipTheme(theme) {
   var shadows = {
     filledWrapper: theme.shadows["default"]
   };
+  var fontSizes = {
+    icon: theme.fontSizes.small
+  };
   return {
     colors: colors,
     space: space,
     radii: radii,
     borderWidths: borderWidths,
-    shadows: shadows
+    shadows: shadows,
+    fontSizes: fontSizes
   };
 };
 
@@ -9313,12 +9322,17 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
     backgroundColor: 'transparent'
   }, borderColorStyling());
 };
-var genTextStyles = function genTextStyles(theme, intent, disabled) {
+var genTextStyles = function genTextStyles(theme, intent, disabled, isPressed) {
   if (disabled) {
     return {
       color: theme.__hd__.button.colors.disabledText
     };
   }
+  if (isPressed) {
+    return {
+      color: theme.__hd__.button.colors.pressedText[intent]
+    };
+  }
   return {
     color: theme.__hd__.button.colors[intent]
   };
@@ -9329,6 +9343,7 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     themeButtonVariant = _ref.themeButtonVariant,
+    themeInlineText = _ref.themeInlineText,
     theme = _ref.theme;
   switch (themeButtonVariant) {
     case 'filled-primary':
@@ -9347,14 +9362,14 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
     case 'text-secondary':
     case 'text-danger':
       return {
-        height: scale(60),
+        height: themeInlineText ? undefined : scale(60),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.textButtonPadding,
+        padding: themeInlineText ? 0 : theme.__hd__.button.space.textButtonPadding,
         borderWidth: 0,
-        backgroundColor: loading ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
+        backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
@@ -9392,15 +9407,16 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
 var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   var disabled = _ref3.disabled,
     themeButtonVariant = _ref3.themeButtonVariant,
+    themeIsPressed = _ref3.themeIsPressed,
     theme = _ref3.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
   return _objectSpread2({
@@ -9426,6 +9442,7 @@ var StyledButtonIconWrapper = index$a(reactNative.View)(function (_ref4) {
 var StyledButtonIcon = index$a(Icon)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
+    themeIsPressed = _ref5.themeIsPressed,
     theme = _ref5.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
@@ -9442,11 +9459,11 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
       case 'outlined-danger':
         return genTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
   return _objectSpread2({
@@ -9525,11 +9542,16 @@ var Button = function Button(_ref) {
     text = _ref.text,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
-  var themeVariant = getThemeVariant(variant, intent);
+  var isInlineText = variant === 'inline-text';
+  var themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   var theme = useTheme();
   var underlayColor = React.useMemo(function () {
-    return getUnderlayColor(theme, themeVariant);
-  }, [theme, themeVariant]);
+    return isInlineText ? 'transparent' : getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant, isInlineText]);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPressed = _useState2[0],
+    setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   return /*#__PURE__*/React__namespace.default.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
@@ -9540,7 +9562,14 @@ var Button = function Button(_ref) {
     testID: testID,
     themeButtonVariant: themeVariant,
     style: style,
-    underlayColor: underlayColor
+    underlayColor: underlayColor,
+    themeInlineText: isInlineText,
+    onPressIn: function onPressIn() {
+      return isInlineText && setIsPressed(true);
+    },
+    onPressOut: function onPressOut() {
+      return isInlineText && setIsPressed(false);
+    }
   }, loading === true ? /*#__PURE__*/React__namespace.default.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
@@ -9550,13 +9579,15 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : icon), isTextVariant(themeVariant) ? /*#__PURE__*/React__namespace.default.createElement(StyledButtonTitleOfVariantText, {
     variant: "regular-bold",
     ellipsizeMode: "tail",
     numberOfLines: 1,
     disabled: disabled,
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }, text) : /*#__PURE__*/React__namespace.default.createElement(StyledButtonText, {
     level: "h5",
     ellipsizeMode: "tail",
@@ -9569,7 +9600,8 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : rightIcon)));
 };
 
@@ -13171,8 +13203,22 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
+var StyledChipIcon = index$a(Icon)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.__hd__.chip.fontSizes.icon
+  };
+});
 
 var _excluded$s = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var getChipLabel = function getChipLabel(label) {
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+      variant: "small"
+    }, label);
+  }
+  return label;
+};
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -13184,21 +13230,22 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
+  var shouldShowSelectedIcon = (variant === 'outlined' || variant === 'compact-outlined') && selected && showSelectedIcon;
+  var chipLabel = React.useMemo(function () {
+    return getChipLabel(label);
+  }, [label]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__namespace.default.createElement(Box, {
     marginRight: "small"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledChipIcon, {
     icon: icon,
     testID: "chip-icon-".concat(icon)
-  })), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__namespace.default.createElement(Box, {
+  })), chipLabel, shouldShowSelectedIcon && /*#__PURE__*/React__namespace.default.createElement(Box, {
     marginLeft: "small"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
-    size: "xsmall",
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledChipIcon, {
     icon: "cancel",
     testID: "selected-chip-icon-cancel"
   })));
@@ -19097,6 +19144,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  React.useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.80.1",
+  "version": "8.81.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, ReactNode, useMemo } from 'react';
+import React, { ReactChild, ReactNode, useMemo, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Theme, useTheme } from '../../theme';
 import { useDeprecation } from '../../utils/hooks';
@@ -61,7 +61,7 @@ export interface ButtonProps {
   /**
    * Button type.
    */
-  variant?: 'filled' | 'outlined' | 'text';
+  variant?: 'filled' | 'outlined' | 'text' | 'inline-text';
 }
 
 const isIconName = (icon: IconName | ReactNode): icon is IconName => {
@@ -151,11 +151,13 @@ const Button = ({
   text,
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
-  const themeVariant = getThemeVariant(variant, intent);
+  const isInlineText = variant === 'inline-text';
+  const themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   const theme = useTheme();
   const underlayColor = useMemo(() => {
-    return getUnderlayColor(theme, themeVariant);
-  }, [theme, themeVariant]);
+    return isInlineText ? 'transparent' : getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant, isInlineText]);
+  const [isPressed, setIsPressed] = useState(false);
 
   useDeprecation(
     `Button variant ${deprecatedVariants.join(', ')} are deprecated.`,
@@ -173,6 +175,9 @@ const Button = ({
       themeButtonVariant={themeVariant}
       style={style}
       underlayColor={underlayColor}
+      themeInlineText={isInlineText}
+      onPressIn={() => isInlineText && setIsPressed(true)}
+      onPressOut={() => isInlineText && setIsPressed(false)}
     >
       {loading === true ? (
         <LoadingIndicator
@@ -189,6 +194,7 @@ const Button = ({
                   icon={icon}
                   testID={`${testID}-left-icon`}
                   themeButtonVariant={themeVariant}
+                  themeIsPressed={isPressed}
                 />
               ) : (
                 icon
@@ -202,6 +208,7 @@ const Button = ({
               numberOfLines={1}
               disabled={disabled}
               themeButtonVariant={themeVariant}
+              themeIsPressed={isPressed}
             >
               {text}
             </StyledButtonTitleOfVariantText>
@@ -224,6 +231,7 @@ const Button = ({
                   icon={rightIcon}
                   testID={`${testID}-right-icon`}
                   themeButtonVariant={themeVariant}
+                  themeIsPressed={isPressed}
                 />
               ) : (
                 rightIcon