@hero-design/rn 8.12.0 → 8.12.2

package/lib/index.js

@@ -1619,7 +1619,8 @@ var getRadii = function getRadii(baseRadius) {
     large: baseRadius * 3,
     xlarge: baseRadius * 4,
     xxlarge: baseRadius * 5,
-    xxxlarge: baseRadius * 6 // 24
+    xxxlarge: baseRadius * 6,
+    '5xlarge': baseRadius * 8 // 32
   };
 };
 
@@ -1882,6 +1883,7 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small
   };
@@ -1889,8 +1891,9 @@ var getButtonTheme = function getButtonTheme(theme) {
     iconSize: theme.fontSizes.xxlarge
   };
   var radii = {
-    "default": theme.space.xlarge,
-    utilityRadii: theme.space.small
+    "default": theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base
   };
   var colors = {
     primary: theme.colors.primary,
@@ -1901,7 +1904,19 @@ var getButtonTheme = function getButtonTheme(theme) {
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    utilityBackground: theme.colors.neutralGlobalSurface
+    utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface
+    }
   };
   return {
     borderWidth: borderWidth,
@@ -2166,9 +2181,11 @@ var getEmptyTheme = function getEmptyTheme(theme) {
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
@@ -2703,6 +2720,7 @@ var getTagTheme = function getTagTheme(theme) {
 var getTextInputTheme = function getTextInputTheme(theme) {
   var colors = {
     labelBackground: theme.colors.defaultGlobalSurface,
+    containerBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
       "default": theme.colors.onErrorSurface,
       error: theme.colors.onErrorSurface,
@@ -7371,8 +7389,8 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
       case 'outlined-primary':
-      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
+      case 'text-primary':
       case 'outlined-secondary':
       case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
@@ -7454,9 +7472,9 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled) {
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
   var backgroundColorStyling = function backgroundColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         backgroundColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7474,9 +7492,9 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
   var borderColorStyling = function borderColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         borderColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7528,33 +7546,37 @@ var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent,
     lineHeight: theme.__hd__.button.lineHeight["default"]
   }, textColorStyling());
 };
-var StyledButtonContainer = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
     themeVariant = _ref.themeVariant,
     theme = _ref.theme;
   switch (themeVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
+        borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.buttonPadding,
-        borderWidth: 0
+        padding: theme.__hd__.button.space.textButtonPadding,
+        borderWidth: 0,
+        backgroundColor: loading ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
@@ -7662,6 +7684,29 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
       return TEXT_VARIANTS[intent];
   }
 };
+var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
+  switch (themeVariant) {
+    case 'filled-primary':
+      return theme.__hd__.button.colors.pressedBackground.filledPrimary;
+    case 'filled-secondary':
+      return theme.__hd__.button.colors.pressedBackground.filledSecondary;
+    case 'filled-danger':
+      return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    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 '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;
+  }
+};
+var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
     accessibilityLabel = _ref.accessibilityLabel,
@@ -7680,14 +7725,21 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var themeVariant = getThemeVariant(variant, intent);
+  var theme = useTheme();
+  var underlayColor = React.useMemo(function () {
+    return getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant]);
+  useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   return /*#__PURE__*/React__default["default"].createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
     disabled: disabled || loading,
+    loading: loading,
     onPress: onPress,
     testID: testID,
     themeVariant: themeVariant,
-    style: style
+    style: style,
+    underlayColor: underlayColor
   }, loading === true ? /*#__PURE__*/React__default["default"].createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
@@ -11463,7 +11515,9 @@ var StyledTextInputContainer = index$a(reactNative.View)(function (_ref13) {
   return {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: theme.__hd__.textInput.space.containerPadding
+    padding: theme.__hd__.textInput.space.containerPadding,
+    backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+    borderRadius: theme.__hd__.textInput.radii.container
   };
 });
 var StyledTextInputAndLabelContainer = index$a(reactNative.View)(function () {
@@ -11597,8 +11651,24 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, [textStyle]),
     borderStyle = _useMemo.borderStyle,
     textStyleWithoutBorderStyle = _useMemo.textStyleWithoutBorderStyle;
+  var _useMemo2 = React.useMemo(function () {
+      var _flattenTextStyle$bac;
+      if (!style) {
+        return {
+          backgroundColor: theme.__hd__.textInput.colors.containerBackground
+        };
+      }
+      var flattenTextStyle = reactNative.StyleSheet.flatten(style);
+      return {
+        backgroundColor: (_flattenTextStyle$bac = flattenTextStyle.backgroundColor) !== null && _flattenTextStyle$bac !== void 0 ? _flattenTextStyle$bac : theme.__hd__.textInput.colors.containerBackground,
+        styleWithoutBackgroundColor: omit(['backgroundColor'], flattenTextStyle)
+      };
+    }, [style, theme]),
+    backgroundColor = _useMemo2.backgroundColor,
+    styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
+      backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
     testID: 'text-input',
@@ -11630,15 +11700,22 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    style: style,
+    style: styleWithoutBackgroundColor,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeVariant: variant,
-    style: borderStyle
+    testID: "text-input-border",
+    style: [{
+      backgroundColor: backgroundColor
+    }, borderStyle]
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
-    pointerEvents: "none"
+    pointerEvents: "none",
+    testID: "label-container",
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,
     fontSize: "small"
@@ -11646,7 +11723,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant
+    themeVariant: variant,
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
@@ -12278,11 +12358,12 @@ var FAB = function FAB(_ref3) {
     active = _ref3.active,
     style = _ref3.style;
   var isIconOnly = !title;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     testID: testID,
     style: style,
-    onPress: onPress,
-    activeOpacity: 0.6
+    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -12293,7 +12374,7 @@ var FAB = function FAB(_ref3) {
   }));
 };
 
-var StyledActionItem = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
@@ -12333,13 +12414,15 @@ var ActionItem = function ActionItem(_ref) {
     onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
     icon: icon
-  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
 };
 
 var StyledContainer$1 = index$a(reactNative.View)({
@@ -12466,7 +12549,7 @@ var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var StyledListItemContainer$1 = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledListItemContainer$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeSelected = _ref.themeSelected,
     themeSelected = _ref$themeSelected === void 0 ? false : _ref$themeSelected,
@@ -12552,13 +12635,15 @@ var ListItem = function ListItem(_ref) {
     onPress = _ref.onPress,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledListItemContainer$1, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeVariant: variant,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, leadingStatus && /*#__PURE__*/React__default["default"].createElement(StyledLeadingStatus, {
     themeLeadingStatusIntent: leadingStatus,
     testID: "leadingStatus"
@@ -12600,7 +12685,7 @@ var StyledTitleContainer = index$a(reactNative.View)(function () {
     flex: 1
   };
 });
-var StyledListItemContainer = index$a(reactNative.TouchableOpacity)(function (_ref3) {
+var StyledListItemContainer = index$a(reactNative.TouchableHighlight)(function (_ref3) {
   var theme = _ref3.theme,
     themeSelected = _ref3.themeSelected,
     themeDisabled = _ref3.themeDisabled;
@@ -12626,13 +12711,15 @@ var BasicListItem = function BasicListItem(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onPress = _ref.onPress;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledListItemContainer, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeDisabled: disabled,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, prefix && /*#__PURE__*/React__default["default"].createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.0",
+  "version": "8.12.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.0",
+    "@hero-design/colors": "8.12.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.0",
+    "@hero-design/eslint-plugin": "8.12.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.0",
+    "eslint-config-hd": "8.12.2",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.0",
+    "prettier-config-hd": "8.12.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
-import type { ReactChild } from 'react';
-import React from 'react';
+import React, { ReactChild, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Theme, useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -10,6 +10,7 @@ import {
   StyledButtonIconWrapper,
   StyledButtonText,
 } from './StyledButton';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ButtonProps {
   /**
@@ -93,7 +94,35 @@ export const getThemeVariant = (
       return TEXT_VARIANTS[intent];
   }
 };
+const getUnderlayColor = (theme: Theme, themeVariant: ThemeVariant) => {
+  switch (themeVariant) {
+    case 'filled-primary':
+      return theme.__hd__.button.colors.pressedBackground.filledPrimary;
+    case 'filled-secondary':
+      return theme.__hd__.button.colors.pressedBackground.filledSecondary;
+    case 'filled-danger':
+      return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    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 '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;
+  }
+};
 
+const deprecatedVariants: ThemeVariant[] = [
+  'filled-secondary',
+  'filled-danger',
+  'outlined-secondary',
+  'outlined-danger',
+];
 const Button = ({
   accessibilityHint,
   accessibilityLabel,
@@ -109,16 +138,27 @@ const Button = ({
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
   const themeVariant = getThemeVariant(variant, intent);
+  const theme = useTheme();
+  const underlayColor = useMemo(() => {
+    return getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant]);
+
+  useDeprecation(
+    `Button variant ${deprecatedVariants.join(', ')} are deprecated.`,
+    deprecatedVariants.includes(themeVariant)
+  );
 
   return (
     <StyledButtonContainer
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
       disabled={disabled || loading}
+      loading={loading}
       onPress={onPress}
       testID={testID}
       themeVariant={themeVariant}
       style={style}
+      underlayColor={underlayColor}
     >
       {loading === true ? (
         <LoadingIndicator

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -46,8 +46,8 @@ const StyledLoadingDot = styled(View)<{
           backgroundColor: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
-      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
+      case 'text-primary':
       case 'outlined-secondary':
       case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -165,7 +165,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -945,7 +945,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -977,7 +977,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1009,7 +1009,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

package/src/components/Button/StyledButton.tsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ReactNativeStyle } from '@emotion/native';
 import type { Theme } from '@emotion/react';
@@ -21,10 +21,11 @@ type ThemeVariant =
 const genFilledContainerStyles = (
   theme: Theme,
   intent: Intent,
-  disabled: boolean
+  disabled: boolean,
+  loading: boolean
 ): ReactNativeStyle => {
   const backgroundColorStyling = () => {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         backgroundColor: theme.__hd__.button.colors.disabledBorder,
       };
@@ -47,10 +48,11 @@ const genFilledContainerStyles = (
 const genOutlineContainerStyles = (
   theme: Theme,
   intent: Intent,
-  disabled: boolean
+  disabled: boolean,
+  loading: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         borderColor: theme.__hd__.button.colors.disabledBorder,
       };
@@ -118,32 +120,37 @@ const genTextVariantTextStyles = (
   };
 };
 
-const StyledButtonContainer = styled(TouchableOpacity)<{
+const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   themeVariant: ThemeVariant;
-}>(({ disabled = false, themeVariant, theme }) => {
+  loading?: boolean;
+}>(({ disabled = false, loading = false, themeVariant, theme }) => {
   switch (themeVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
+        borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.buttonPadding,
+        padding: theme.__hd__.button.space.textButtonPadding,
         borderWidth: 0,
+        backgroundColor: loading
+          ? theme.__hd__.button.colors.textLoadingBackground
+          : 'transparent',
       };
   }
 });