@hero-design/rn 8.80.1 → 8.81.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-(node:2906) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2840) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 49.8s
+created lib/index.js, es/index.js in 50.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 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 = {
@@ -9286,12 +9291,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 +9312,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 +9331,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 +9376,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 +9411,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 +9428,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 +9511,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 +9531,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 +9548,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 +9569,8 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : rightIcon)));
 };
 

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 = {
@@ -9313,12 +9318,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 +9339,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 +9358,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 +9403,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 +9438,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 +9455,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 +9538,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 +9558,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 +9575,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 +9596,8 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
-    themeButtonVariant: themeVariant
+    themeButtonVariant: themeVariant,
+    themeIsPressed: isPressed
   }) : rightIcon)));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.80.1",
+  "version": "8.81.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

package/src/components/Button/StyledButton.tsx

@@ -82,7 +82,8 @@ const genOutlineContainerStyles = (
 const genTextStyles = (
   theme: Theme,
   intent: Intent,
-  disabled?: boolean
+  disabled?: boolean,
+  isPressed?: boolean
 ): ReactNativeStyle => {
   if (disabled) {
     return {
@@ -90,6 +91,12 @@ const genTextStyles = (
     };
   }
 
+  if (isPressed) {
+    return {
+      color: theme.__hd__.button.colors.pressedText[intent],
+    };
+  }
+
   return { color: theme.__hd__.button.colors[intent] };
 };
 
@@ -97,37 +104,49 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
   loading?: boolean;
-}>(({ disabled = false, loading = false, themeButtonVariant, theme }) => {
-  switch (themeButtonVariant) {
-    case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled, loading);
-    case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
-    case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled, loading);
-    case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
-    case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
-    case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
-    case 'text-primary':
-    case 'text-secondary':
-    case 'text-danger':
-      return {
-        height: scale(60),
-        borderRadius: theme.__hd__.button.radii.text,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: theme.__hd__.button.space.textButtonPadding,
-        borderWidth: 0,
-        backgroundColor: loading
-          ? theme.__hd__.button.colors.textLoadingBackground
-          : 'transparent',
-      };
+  themeInlineText?: boolean;
+}>(
+  ({
+    disabled = false,
+    loading = false,
+    themeButtonVariant,
+    themeInlineText,
+    theme,
+  }) => {
+    switch (themeButtonVariant) {
+      case 'filled-primary':
+        return genFilledContainerStyles(theme, 'primary', disabled, loading);
+      case 'filled-secondary':
+        return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+      case 'filled-danger':
+        return genFilledContainerStyles(theme, 'danger', disabled, loading);
+      case 'outlined-primary':
+        return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+      case 'outlined-secondary':
+        return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+      case 'outlined-danger':
+        return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+      case 'text-primary':
+      case 'text-secondary':
+      case 'text-danger':
+        return {
+          height: themeInlineText ? undefined : scale(60),
+          borderRadius: theme.__hd__.button.radii.text,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: themeInlineText
+            ? 0
+            : theme.__hd__.button.space.textButtonPadding,
+          borderWidth: 0,
+          backgroundColor:
+            loading && !themeInlineText
+              ? theme.__hd__.button.colors.textLoadingBackground
+              : 'transparent',
+        };
+    }
   }
-});
+);
 
 const StyledButtonText = styled(Typography.Title)<{
   disabled?: boolean;
@@ -165,15 +184,16 @@ const StyledButtonText = styled(Typography.Title)<{
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
   themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
-}>(({ disabled, themeButtonVariant, theme }) => {
+  themeIsPressed?: boolean;
+}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
   const 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 {
@@ -198,7 +218,8 @@ const StyledButtonIconWrapper = styled(View)<{
 const StyledButtonIcon = styled(Icon)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
-}>(({ disabled, themeButtonVariant, theme }) => {
+  themeIsPressed?: boolean;
+}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
   const themeStyling = () => {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -212,11 +233,11 @@ const StyledButtonIcon = styled(Icon)<{
       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);
     }
   };
 

package/src/components/Button/__tests__/Button.spec.tsx

@@ -108,22 +108,27 @@ describe('Button', () => {
   });
 
   it.each`
-    variant       | intent         | loading  | disabled
-    ${'filled'}   | ${'primary'}   | ${false} | ${false}
-    ${'filled'}   | ${'primary'}   | ${true}  | ${false}
-    ${'filled'}   | ${'primary'}   | ${false} | ${true}
-    ${'outlined'} | ${'primary'}   | ${false} | ${false}
-    ${'outlined'} | ${'primary'}   | ${true}  | ${false}
-    ${'outlined'} | ${'primary'}   | ${false} | ${true}
-    ${'text'}     | ${'primary'}   | ${false} | ${false}
-    ${'text'}     | ${'primary'}   | ${true}  | ${false}
-    ${'text'}     | ${'primary'}   | ${false} | ${true}
-    ${'text'}     | ${'secondary'} | ${false} | ${false}
-    ${'text'}     | ${'secondary'} | ${true}  | ${false}
-    ${'text'}     | ${'secondary'} | ${false} | ${true}
-    ${'text'}     | ${'danger'}    | ${false} | ${false}
-    ${'text'}     | ${'danger'}    | ${true}  | ${false}
-    ${'text'}     | ${'danger'}    | ${false} | ${true}
+    variant          | intent         | loading  | disabled
+    ${'filled'}      | ${'primary'}   | ${false} | ${false}
+    ${'filled'}      | ${'primary'}   | ${true}  | ${false}
+    ${'filled'}      | ${'primary'}   | ${false} | ${true}
+    ${'outlined'}    | ${'primary'}   | ${false} | ${false}
+    ${'outlined'}    | ${'primary'}   | ${true}  | ${false}
+    ${'outlined'}    | ${'primary'}   | ${false} | ${true}
+    ${'text'}        | ${'primary'}   | ${false} | ${false}
+    ${'text'}        | ${'primary'}   | ${true}  | ${false}
+    ${'text'}        | ${'primary'}   | ${false} | ${true}
+    ${'text'}        | ${'secondary'} | ${false} | ${false}
+    ${'text'}        | ${'secondary'} | ${true}  | ${false}
+    ${'text'}        | ${'secondary'} | ${false} | ${true}
+    ${'text'}        | ${'danger'}    | ${false} | ${false}
+    ${'text'}        | ${'danger'}    | ${true}  | ${false}
+    ${'text'}        | ${'danger'}    | ${false} | ${true}
+    ${'inline-text'} | ${'primary'}   | ${false} | ${false}
+    ${'inline-text'} | ${'secondary'} | ${true}  | ${false}
+    ${'inline-text'} | ${'danger'}    | ${false} | ${false}
+    ${'inline-text'} | ${'primary'}   | ${true}  | ${false}
+    ${'inline-text'} | ${'primary'}   | ${false} | ${true}
   `('renders correctly', ({ variant, intent, loading, disabled }) => {
     const { toJSON } = renderWithTheme(
       <Button

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -92,19 +92,26 @@ describe('StyledButtonIconWrapper', () => {
 
 describe('StyledButtonIcon', () => {
   it.each`
-    themeVariant
-    ${'filled-primary'}
-    ${'filled-secondary'}
-    ${'filled-danger'}
-    ${'outlined-primary'}
-    ${'outlined-secondary'}
-    ${'outlined-danger'}
-    ${'text-primary'}
-    ${'text-secondary'}
-    ${'text-danger'}
-  `('has $themeVariant style', ({ themeVariant }) => {
+    themeVariant            | themeIsPressed
+    ${'filled-primary'}     | ${undefined}
+    ${'filled-secondary'}   | ${undefined}
+    ${'filled-danger'}      | ${undefined}
+    ${'outlined-primary'}   | ${undefined}
+    ${'outlined-secondary'} | ${undefined}
+    ${'outlined-danger'}    | ${undefined}
+    ${'text-primary'}       | ${false}
+    ${'text-secondary'}     | ${false}
+    ${'text-danger'}        | ${false}
+    ${'text-primary'}       | ${true}
+    ${'text-secondary'}     | ${true}
+    ${'text-danger'}        | ${true}
+  `('has $themeVariant style', ({ themeVariant, themeIsPressed }) => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonIcon icon="bell" themeButtonVariant={themeVariant} />
+      <StyledButtonIcon
+        icon="bell"
+        themeButtonVariant={themeVariant}
+        themeIsPressed={themeIsPressed}
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();