@hero-design/rn 8.97.0 → 8.98.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.98.0
+
+### Minor Changes
+
+- [#3788](https://github.com/Thinkei/hero-design/pull/3788) [`1c42238a8c0b3651f621b04994bd812e14a30c8c`](https://github.com/Thinkei/hero-design/commit/1c42238a8c0b3651f621b04994bd812e14a30c8c) Thanks [@ttkien](https://github.com/ttkien)! - [Button] add compact text and compact inline text
+
 ## 8.97.0
 
 ### Minor Changes

package/es/index.js

@@ -2794,7 +2794,10 @@ var getButtonTheme = function getButtonTheme(theme) {
     }
   };
   var lineHeights = {
-    titleOfTextVariant: theme.lineHeights.medium,
+    titleOfTextVariant: {
+      "default": theme.lineHeights.medium,
+      compact: theme.lineHeights.small
+    },
     buttonText: Platform.select({
       android: theme.lineHeights.medium + theme.space.xxsmall
     }),
@@ -9052,7 +9055,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var isIOS = Platform.OS === 'ios';
+var isIOS$1 = Platform.OS === 'ios';
 var isAndroid = Platform.OS === 'android';
 function pick(keys, obj) {
   return keys.filter(function (key) {
@@ -9786,7 +9789,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       removeClippedSubviews:
       // On iOS, set removeClippedSubviews to true only when not focused
       // This is an workaround for a bug where the clipped view never re-appears.
-      isIOS ? selectedTabKey !== key : true,
+      isIOS$1 ? selectedTabKey !== key : true,
       themeVisibility: active
     }, component);
   })), /*#__PURE__*/React__default.createElement(BottomBarWrapper, {
@@ -10117,6 +10120,24 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
     backgroundColor: 'transparent'
   }, borderColorStyling());
 };
+var getTextButtonPaddingVertical = function getTextButtonPaddingVertical(theme, themeInlineText, themeIsCompact) {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingVertical;
+  }
+  return theme.__hd__.button.space["default"].textButtonPadding;
+};
+var getTextButtonPaddingHorizontal = function getTextButtonPaddingHorizontal(theme, themeInlineText, themeIsCompact) {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingHorizontal;
+  }
+  return theme.__hd__.button.space["default"].textButtonPadding;
+};
 var genTextStyles = function genTextStyles(theme, intent, disabled, isPressed) {
   if (disabled) {
     return {
@@ -10164,16 +10185,22 @@ var StyledButtonContainer = index$b(TouchableHighlight)(function (_ref) {
     case 'text-secondary':
     case 'text-danger':
     case 'text-white':
-      return {
+      return _objectSpread2(_objectSpread2({
         height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
-        alignItems: 'center',
-        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
+        alignItems: 'center'
+      }, themeIsCompact ? {
+        alignSelf: 'flex-start',
+        paddingVertical: getTextButtonPaddingVertical(theme, themeInlineText, themeIsCompact),
+        paddingHorizontal: getTextButtonPaddingHorizontal(theme, themeInlineText, themeIsCompact)
+      } : {
+        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding
+      }), {}, {
         borderWidth: 0,
         backgroundColor: loading && !themeInlineText && themeButtonVariant !== 'text-white' ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
-      };
+      });
   }
 });
 var genWhiteTextStyles = function genWhiteTextStyles(_ref2) {
@@ -10264,7 +10291,8 @@ var StyledButtonTitleOfVariantText = index$b(Typography.Body)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
     themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme;
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
@@ -10283,7 +10311,7 @@ var StyledButtonTitleOfVariantText = index$b(Typography.Body)(function (_ref5) {
   };
   return _objectSpread2({
     flexShrink: 1,
-    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant[themeIsCompact ? 'compact' : 'default'],
     textAlign: 'center',
     textAlignVertical: 'center'
   }, themeStyling());
@@ -10374,6 +10402,7 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
     case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
+    case 'text-compact':
       return TEXT_VARIANTS[intent];
   }
 };
@@ -10426,7 +10455,7 @@ var Button = function Button(_ref) {
     text = _ref.text,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
-  var isInlineText = variant === 'inline-text';
+  var isInlineText = variant === 'inline-text' || variant === 'inline-text-compact';
   var themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   var theme = useTheme();
   var underlayColor = useMemo(function () {
@@ -10437,7 +10466,7 @@ var Button = function Button(_ref) {
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
-  var isCompactVariant = ['filled-compact', 'outlined-compact'].includes(variant);
+  var isCompactVariant = ['filled-compact', 'outlined-compact', 'text-compact', 'inline-text-compact'].includes(variant);
   var isRenderTextVariant = isTextVariant(themeVariant);
   var renderTextVariantTitle = function renderTextVariantTitle() {
     if (!isRenderTextVariant) return null;
@@ -10447,7 +10476,8 @@ var Button = function Button(_ref) {
       numberOfLines: 1,
       disabled: disabled,
       themeButtonVariant: themeVariant,
-      themeIsPressed: isPressed
+      themeIsPressed: isPressed,
+      themeIsCompact: isCompactVariant
     }, text);
   };
   var renderTitle = function renderTitle() {
@@ -20887,6 +20917,8 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
+var isAndroid8 = Platform.OS === 'android' && (Platform.Version === 26 || Platform.Version === 27);
+var isIOS = Platform.OS === 'ios';
 var TabScreen = index$b(View)({
   flex: 1
 });
@@ -20926,13 +20958,14 @@ var HeaderTabItemOutline = index$b(Animated.View)(function (_ref4) {
 });
 var HeaderTabItemWrapper = index$b(View)(function (_ref5) {
   var theme = _ref5.theme;
-  return {
+  return _objectSpread2({
     paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
     paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
     position: 'relative',
-    justifyContent: 'center',
+    justifyContent: 'center'
+  }, (!isAndroid8 || isIOS) && {
     alignItems: 'center'
-  };
+  });
 });
 var HeaderTabItemIndicator = index$b(Animated.View)(function (_ref6) {
   var theme = _ref6.theme;

package/lib/index.js

@@ -2823,7 +2823,10 @@ var getButtonTheme = function getButtonTheme(theme) {
     }
   };
   var lineHeights = {
-    titleOfTextVariant: theme.lineHeights.medium,
+    titleOfTextVariant: {
+      "default": theme.lineHeights.medium,
+      compact: theme.lineHeights.small
+    },
     buttonText: reactNative.Platform.select({
       android: theme.lineHeights.medium + theme.space.xxsmall
     }),
@@ -9081,7 +9084,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var isIOS = reactNative.Platform.OS === 'ios';
+var isIOS$1 = reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
 function pick(keys, obj) {
   return keys.filter(function (key) {
@@ -9815,7 +9818,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       removeClippedSubviews:
       // On iOS, set removeClippedSubviews to true only when not focused
       // This is an workaround for a bug where the clipped view never re-appears.
-      isIOS ? selectedTabKey !== key : true,
+      isIOS$1 ? selectedTabKey !== key : true,
       themeVisibility: active
     }, component);
   })), /*#__PURE__*/React__namespace.default.createElement(BottomBarWrapper, {
@@ -10146,6 +10149,24 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
     backgroundColor: 'transparent'
   }, borderColorStyling());
 };
+var getTextButtonPaddingVertical = function getTextButtonPaddingVertical(theme, themeInlineText, themeIsCompact) {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingVertical;
+  }
+  return theme.__hd__.button.space["default"].textButtonPadding;
+};
+var getTextButtonPaddingHorizontal = function getTextButtonPaddingHorizontal(theme, themeInlineText, themeIsCompact) {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingHorizontal;
+  }
+  return theme.__hd__.button.space["default"].textButtonPadding;
+};
 var genTextStyles = function genTextStyles(theme, intent, disabled, isPressed) {
   if (disabled) {
     return {
@@ -10193,16 +10214,22 @@ var StyledButtonContainer = index$b(reactNative.TouchableHighlight)(function (_r
     case 'text-secondary':
     case 'text-danger':
     case 'text-white':
-      return {
+      return _objectSpread2(_objectSpread2({
         height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
-        alignItems: 'center',
-        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
+        alignItems: 'center'
+      }, themeIsCompact ? {
+        alignSelf: 'flex-start',
+        paddingVertical: getTextButtonPaddingVertical(theme, themeInlineText, themeIsCompact),
+        paddingHorizontal: getTextButtonPaddingHorizontal(theme, themeInlineText, themeIsCompact)
+      } : {
+        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding
+      }), {}, {
         borderWidth: 0,
         backgroundColor: loading && !themeInlineText && themeButtonVariant !== 'text-white' ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
-      };
+      });
   }
 });
 var genWhiteTextStyles = function genWhiteTextStyles(_ref2) {
@@ -10293,7 +10320,8 @@ var StyledButtonTitleOfVariantText = index$b(Typography.Body)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
     themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme;
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
@@ -10312,7 +10340,7 @@ var StyledButtonTitleOfVariantText = index$b(Typography.Body)(function (_ref5) {
   };
   return _objectSpread2({
     flexShrink: 1,
-    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant[themeIsCompact ? 'compact' : 'default'],
     textAlign: 'center',
     textAlignVertical: 'center'
   }, themeStyling());
@@ -10403,6 +10431,7 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
     case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
+    case 'text-compact':
       return TEXT_VARIANTS[intent];
   }
 };
@@ -10455,7 +10484,7 @@ var Button = function Button(_ref) {
     text = _ref.text,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
-  var isInlineText = variant === 'inline-text';
+  var isInlineText = variant === 'inline-text' || variant === 'inline-text-compact';
   var themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   var theme = useTheme();
   var underlayColor = React.useMemo(function () {
@@ -10466,7 +10495,7 @@ var Button = function Button(_ref) {
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
-  var isCompactVariant = ['filled-compact', 'outlined-compact'].includes(variant);
+  var isCompactVariant = ['filled-compact', 'outlined-compact', 'text-compact', 'inline-text-compact'].includes(variant);
   var isRenderTextVariant = isTextVariant(themeVariant);
   var renderTextVariantTitle = function renderTextVariantTitle() {
     if (!isRenderTextVariant) return null;
@@ -10476,7 +10505,8 @@ var Button = function Button(_ref) {
       numberOfLines: 1,
       disabled: disabled,
       themeButtonVariant: themeVariant,
-      themeIsPressed: isPressed
+      themeIsPressed: isPressed,
+      themeIsCompact: isCompactVariant
     }, text);
   };
   var renderTitle = function renderTitle() {
@@ -20916,6 +20946,8 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
+var isAndroid8 = reactNative.Platform.OS === 'android' && (reactNative.Platform.Version === 26 || reactNative.Platform.Version === 27);
+var isIOS = reactNative.Platform.OS === 'ios';
 var TabScreen = index$b(reactNative.View)({
   flex: 1
 });
@@ -20955,13 +20987,14 @@ var HeaderTabItemOutline = index$b(reactNative.Animated.View)(function (_ref4) {
 });
 var HeaderTabItemWrapper = index$b(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
-  return {
+  return _objectSpread2({
     paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
     paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
     position: 'relative',
-    justifyContent: 'center',
+    justifyContent: 'center'
+  }, (!isAndroid8 || isIOS) && {
     alignItems: 'center'
-  };
+  });
 });
 var HeaderTabItemIndicator = index$b(reactNative.Animated.View)(function (_ref6) {
   var theme = _ref6.theme;

package/locales/en_AU.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/locales/en_CA.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/locales/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'en-AU': import("./types").LocaleValues;
+    'en-CA': import("./types").LocaleValues;
+};
+export default _default;

package/locales/types.d.ts

@@ -0,0 +1,10 @@
+declare const LOCALES: readonly ["en-AU", "en-CA"];
+export type LocaleCode = typeof LOCALES[number];
+export type DateTimeFormats = {
+    fullDate: string;
+};
+export type LocaleValues = {
+    lang: LocaleCode;
+    dateTimeFormats: DateTimeFormats;
+};
+export {};

package/package.json

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

package/src/components/Button/Button.tsx

@@ -68,7 +68,9 @@ export interface ButtonProps {
     | 'text'
     | 'inline-text'
     | 'filled-compact'
-    | 'outlined-compact';
+    | 'outlined-compact'
+    | 'text-compact'
+    | 'inline-text-compact';
 }
 
 const isIconName = (icon: IconName | ReactNode): icon is IconName => {
@@ -102,7 +104,8 @@ export const getThemeVariant = (
     | 'outlined'
     | 'text'
     | 'filled-compact'
-    | 'outlined-compact',
+    | 'outlined-compact'
+    | 'text-compact',
   intent: Intent
 ): ThemeVariant => {
   switch (variant) {
@@ -113,6 +116,7 @@ export const getThemeVariant = (
     case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
+    case 'text-compact':
       return TEXT_VARIANTS[intent];
   }
 };
@@ -181,7 +185,9 @@ const Button = ({
   text,
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
-  const isInlineText = variant === 'inline-text';
+  const isInlineText =
+    variant === 'inline-text' || variant === 'inline-text-compact';
+
   const themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   const theme = useTheme();
   const underlayColor = useMemo(() => {
@@ -194,9 +200,12 @@ const Button = ({
     deprecatedVariants.includes(themeVariant)
   );
 
-  const isCompactVariant = ['filled-compact', 'outlined-compact'].includes(
-    variant
-  );
+  const isCompactVariant = [
+    'filled-compact',
+    'outlined-compact',
+    'text-compact',
+    'inline-text-compact',
+  ].includes(variant);
 
   const isRenderTextVariant = isTextVariant(themeVariant);
 
@@ -210,6 +219,7 @@ const Button = ({
         disabled={disabled}
         themeButtonVariant={themeVariant}
         themeIsPressed={isPressed}
+        themeIsCompact={isCompactVariant}
       >
         {text}
       </StyledButtonTitleOfVariantText>

package/src/components/Button/StyledButton.tsx

@@ -114,6 +114,34 @@ const genOutlineContainerStyles = (
   };
 };
 
+const getTextButtonPaddingVertical = (
+  theme: Theme,
+  themeInlineText: boolean,
+  themeIsCompact: boolean
+) => {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingVertical;
+  }
+  return theme.__hd__.button.space.default.textButtonPadding;
+};
+
+const getTextButtonPaddingHorizontal = (
+  theme: Theme,
+  themeInlineText: boolean,
+  themeIsCompact: boolean
+) => {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingHorizontal;
+  }
+  return theme.__hd__.button.space.default.textButtonPadding;
+};
+
 const genTextStyles = (
   theme: Theme,
   intent: Intent,
@@ -225,10 +253,25 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
           flexDirection: 'row',
           justifyContent: 'center',
           alignItems: 'center',
-
-          padding: themeInlineText
-            ? 0
-            : theme.__hd__.button.space.default.textButtonPadding,
+          ...(themeIsCompact
+            ? {
+                alignSelf: 'flex-start',
+                paddingVertical: getTextButtonPaddingVertical(
+                  theme,
+                  themeInlineText,
+                  themeIsCompact
+                ),
+                paddingHorizontal: getTextButtonPaddingHorizontal(
+                  theme,
+                  themeInlineText,
+                  themeIsCompact
+                ),
+              }
+            : {
+                padding: themeInlineText
+                  ? 0
+                  : theme.__hd__.button.space.default.textButtonPadding,
+              }),
 
           borderWidth: 0,
           backgroundColor:
@@ -339,31 +382,37 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
     | 'text-danger'
     | 'text-white';
   themeIsPressed?: boolean;
-}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
-  const themeStyling = () => {
-    switch (themeButtonVariant) {
-      case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
-      case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
-      case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
-      case 'text-white':
-        return genWhiteTextStyles({
-          variant: 'text-white',
-          disabled,
-          theme,
-        });
-    }
-  };
-  return {
-    flexShrink: 1,
-    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    ...themeStyling(),
-  };
-});
+  themeIsCompact: boolean;
+}>(
+  ({ disabled, themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
+    const themeStyling = () => {
+      switch (themeButtonVariant) {
+        case 'text-primary':
+          return genTextStyles(theme, 'primary', disabled, themeIsPressed);
+        case 'text-secondary':
+          return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
+        case 'text-danger':
+          return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+        case 'text-white':
+          return genWhiteTextStyles({
+            variant: 'text-white',
+            disabled,
+            theme,
+          });
+      }
+    };
+    return {
+      flexShrink: 1,
+      lineHeight:
+        theme.__hd__.button.lineHeights.titleOfTextVariant[
+          themeIsCompact ? 'compact' : 'default'
+        ],
+      textAlign: 'center',
+      textAlignVertical: 'center',
+      ...themeStyling(),
+    };
+  }
+);
 
 const StyledButtonIconWrapper = styled(View)<{
   themePosition: 'left' | 'right';

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

@@ -108,42 +108,56 @@ describe('Button', () => {
   });
 
   it.each`
-    variant               | intent         | loading  | disabled
-    ${'filled'}           | ${'primary'}   | ${false} | ${false}
-    ${'filled'}           | ${'primary'}   | ${true}  | ${false}
-    ${'filled'}           | ${'primary'}   | ${false} | ${true}
-    ${'filled'}           | ${'white'}     | ${false} | ${false}
-    ${'filled'}           | ${'white'}     | ${true}  | ${false}
-    ${'filled'}           | ${'white'}     | ${false} | ${true}
-    ${'outlined'}         | ${'primary'}   | ${false} | ${false}
-    ${'outlined'}         | ${'primary'}   | ${true}  | ${false}
-    ${'outlined'}         | ${'primary'}   | ${false} | ${true}
-    ${'outlined'}         | ${'white'}     | ${false} | ${false}
-    ${'outlined'}         | ${'white'}     | ${true}  | ${false}
-    ${'outlined'}         | ${'white'}     | ${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}
-    ${'text'}             | ${'white'}     | ${false} | ${false}
-    ${'text'}             | ${'white'}     | ${true}  | ${false}
-    ${'text'}             | ${'white'}     | ${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}
-    ${'filled-compact'}   | ${'primary'}   | ${false} | ${false}
-    ${'filled-compact'}   | ${'primary'}   | ${true}  | ${false}
-    ${'filled-compact'}   | ${'primary'}   | ${false} | ${true}
-    ${'outlined-compact'} | ${'primary'}   | ${false} | ${false}
-    ${'outlined-compact'} | ${'primary'}   | ${true}  | ${false}
-    ${'outlined-compact'} | ${'primary'}   | ${false} | ${true}
+    variant                  | intent         | loading  | disabled
+    ${'filled'}              | ${'primary'}   | ${false} | ${false}
+    ${'filled'}              | ${'primary'}   | ${true}  | ${false}
+    ${'filled'}              | ${'primary'}   | ${false} | ${true}
+    ${'filled'}              | ${'white'}     | ${false} | ${false}
+    ${'filled'}              | ${'white'}     | ${true}  | ${false}
+    ${'filled'}              | ${'white'}     | ${false} | ${true}
+    ${'outlined'}            | ${'primary'}   | ${false} | ${false}
+    ${'outlined'}            | ${'primary'}   | ${true}  | ${false}
+    ${'outlined'}            | ${'primary'}   | ${false} | ${true}
+    ${'outlined'}            | ${'white'}     | ${false} | ${false}
+    ${'outlined'}            | ${'white'}     | ${true}  | ${false}
+    ${'outlined'}            | ${'white'}     | ${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}
+    ${'text'}                | ${'white'}     | ${false} | ${false}
+    ${'text'}                | ${'white'}     | ${true}  | ${false}
+    ${'text'}                | ${'white'}     | ${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}
+    ${'filled-compact'}      | ${'primary'}   | ${false} | ${false}
+    ${'filled-compact'}      | ${'primary'}   | ${true}  | ${false}
+    ${'filled-compact'}      | ${'primary'}   | ${false} | ${true}
+    ${'outlined-compact'}    | ${'primary'}   | ${false} | ${false}
+    ${'outlined-compact'}    | ${'primary'}   | ${true}  | ${false}
+    ${'outlined-compact'}    | ${'primary'}   | ${false} | ${true}
+    ${'text-compact'}        | ${'primary'}   | ${false} | ${false}
+    ${'text-compact'}        | ${'primary'}   | ${true}  | ${false}
+    ${'text-compact'}        | ${'primary'}   | ${false} | ${true}
+    ${'text-compact'}        | ${'secondary'} | ${false} | ${false}
+    ${'text-compact'}        | ${'secondary'} | ${true}  | ${false}
+    ${'text-compact'}        | ${'secondary'} | ${false} | ${true}
+    ${'text-compact'}        | ${'danger'}    | ${false} | ${false}
+    ${'text-compact'}        | ${'danger'}    | ${true}  | ${false}
+    ${'text-compact'}        | ${'danger'}    | ${false} | ${true}
+    ${'inline-text-compact'} | ${'primary'}   | ${false} | ${false}
+    ${'inline-text-compact'} | ${'secondary'} | ${true}  | ${false}
+    ${'inline-text-compact'} | ${'danger'}    | ${false} | ${false}
+    ${'inline-text-compact'} | ${'primary'}   | ${true}  | ${false}
+    ${'inline-text-compact'} | ${'primary'}   | ${false} | ${true}
   `('renders correctly', ({ variant, intent, loading, disabled }) => {
     const { toJSON } = renderWithTheme(
       <Button
@@ -177,6 +191,7 @@ describe('getThemeVariant', () => {
     ${'text'}             | ${'secondary'} | ${'text-secondary'}
     ${'text'}             | ${'danger'}    | ${'text-danger'}
     ${'text'}             | ${'white'}     | ${'text-white'}
+    ${'text-compact'}     | ${'danger'}    | ${'text-danger'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });