@hero-design/rn 8.105.4 → 8.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.105.4",
+  "version": "8.106.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
     "@hero-design/colors": "8.46.1",
     "d3": "^7.8.5",
     "date-fns": "^2.30.0",
-    "hero-editor": "^1.15.5",
+    "hero-editor": "^1.16.0",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../../theme';
 import { useDeprecation } from '../../utils/hooks';
 import type { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
-import type { Intent, ThemeVariant } from './StyledButton';
+import type { Intent, ThemeVariant, CamelCase } from './StyledButton';
 import {
   StyledButtonContainer,
   StyledButtonIcon,
@@ -35,8 +35,9 @@ export interface ButtonProps {
   icon?: IconName | ReactNode;
   /**
    * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
+   *  intent['white'] - @deprecated
    */
-  intent?: 'primary' | 'secondary' | 'danger' | 'white';
+  intent?: 'primary' | 'secondary' | 'danger' | 'white' | 'inverted';
   /**
    * Loading state of button.
    */
@@ -60,7 +61,7 @@ export interface ButtonProps {
   /**
    * Button label.
    */
-  text: ReactChild;
+  text?: ReactChild;
   /**
    * Button type.
    *
@@ -71,6 +72,9 @@ export interface ButtonProps {
     | 'outlined'
     | 'text'
     | 'inline-text'
+    | 'filled-medium'
+    | 'outlined-medium'
+    | 'text-medium'
     | 'filled-compact'
     | 'outlined-compact'
     | 'text-compact'
@@ -86,6 +90,7 @@ const FILLED_VARIANTS = {
   secondary: 'filled-secondary',
   danger: 'filled-danger',
   white: 'filled-white',
+  inverted: 'filled-inverted',
 } as const;
 
 const OUTLINED_VARIANTS = {
@@ -93,6 +98,7 @@ const OUTLINED_VARIANTS = {
   secondary: 'outlined-secondary',
   danger: 'outlined-danger',
   white: 'outlined-white',
+  inverted: 'outlined-inverted',
 } as const;
 
 const TEXT_VARIANTS = {
@@ -100,6 +106,7 @@ const TEXT_VARIANTS = {
   secondary: 'text-secondary',
   danger: 'text-danger',
   white: 'text-white',
+  inverted: 'text-inverted',
 } as const;
 
 export const getThemeVariant = (
@@ -107,6 +114,9 @@ export const getThemeVariant = (
     | 'filled'
     | 'outlined'
     | 'text'
+    | 'filled-medium'
+    | 'outlined-medium'
+    | 'text-medium'
     | 'filled-compact'
     | 'outlined-compact'
     | 'text-compact',
@@ -114,43 +124,25 @@ export const getThemeVariant = (
 ): ThemeVariant => {
   switch (variant) {
     case 'filled':
+    case 'filled-medium':
     case 'filled-compact':
       return FILLED_VARIANTS[intent];
     case 'outlined':
+    case 'outlined-medium':
     case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
+    case 'text-medium':
     case 'text-compact':
       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 'filled-white':
-      return theme.__hd__.button.colors.pressedBackground.filledWhite;
-    case 'outlined-primary':
-      return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
-    case 'outlined-secondary':
-      return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
-    case 'outlined-danger':
-      return theme.__hd__.button.colors.pressedBackground.outlineDanger;
-    case 'outlined-white':
-      return theme.__hd__.button.colors.pressedBackground.outlineWhite;
-    case 'text-primary':
-      return theme.__hd__.button.colors.pressedBackground.textPrimary;
-    case 'text-secondary':
-      return theme.__hd__.button.colors.pressedBackground.textSecondary;
-    case 'text-danger':
-      return theme.__hd__.button.colors.pressedBackground.textDanger;
-    case 'text-white':
-      return theme.__hd__.button.colors.pressedBackground.textWhite;
-  }
+  const colorKey = themeVariant.replace(/-([a-z])/g, (_, letter) => {
+    return letter.toUpperCase();
+  }) as CamelCase<ThemeVariant>;
+
+  return theme.__hd__.button.colors.pressedBackground[colorKey];
 };
 
 const deprecatedVariants: ThemeVariant[] = [
@@ -166,12 +158,14 @@ function isTextVariant(
   | 'text-primary'
   | 'text-secondary'
   | 'text-danger'
-  | 'text-white' {
+  | 'text-white'
+  | 'text-inverted' {
   return [
     'text-primary',
     'text-secondary',
     'text-danger',
     'text-white',
+    'text-inverted',
   ].includes(themeVariant);
 }
 
@@ -191,6 +185,7 @@ const Button = ({
 }: ButtonProps): JSX.Element => {
   const isInlineText =
     variant === 'inline-text' || variant === 'inline-text-compact';
+  const isIconButtonOnly = !text;
 
   const themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   const theme = useTheme();
@@ -211,10 +206,17 @@ const Button = ({
     'inline-text-compact',
   ].includes(variant);
 
+  const isMediumVariant = [
+    'filled-medium',
+    'outlined-medium',
+    'text-medium',
+  ].includes(variant);
+
   const isRenderTextVariant = isTextVariant(themeVariant);
 
   const renderTextVariantTitle = () => {
-    if (!isRenderTextVariant) return null;
+    if (!isRenderTextVariant || isIconButtonOnly) return null;
+
     return (
       <StyledButtonTitleOfVariantText
         variant={isCompactVariant ? 'small-bold' : 'regular-bold'}
@@ -230,18 +232,38 @@ const Button = ({
     );
   };
 
-  const renderTitle = () =>
-    isCompactVariant ? (
-      <StyledSmallButtonText
-        variant="small-bold"
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        disabled={disabled}
-        themeButtonVariant={themeVariant}
-      >
-        {text}
-      </StyledSmallButtonText>
-    ) : (
+  const renderTitle = () => {
+    if (isIconButtonOnly) return null;
+
+    if (isCompactVariant) {
+      return (
+        <StyledSmallButtonText
+          variant="small-bold"
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          disabled={disabled}
+          themeButtonVariant={themeVariant}
+        >
+          {text}
+        </StyledSmallButtonText>
+      );
+    }
+
+    if (isMediumVariant) {
+      return (
+        <StyledSmallButtonText
+          variant="regular-bold"
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          disabled={disabled}
+          themeButtonVariant={themeVariant}
+        >
+          {text}
+        </StyledSmallButtonText>
+      );
+    }
+
+    return (
       <StyledButtonText
         level="h5"
         ellipsizeMode="tail"
@@ -252,6 +274,7 @@ const Button = ({
         {text}
       </StyledButtonText>
     );
+  };
 
   return (
     <StyledButtonContainer
@@ -268,6 +291,8 @@ const Button = ({
       onPressIn={() => isInlineText && setIsPressed(true)}
       onPressOut={() => isInlineText && setIsPressed(false)}
       themeIsCompact={isCompactVariant}
+      themeIsMedium={isMediumVariant}
+      themeIsIconOnly={isIconButtonOnly}
     >
       {loading === true ? (
         <LoadingIndicator
@@ -280,6 +305,7 @@ const Button = ({
             <StyledButtonIconWrapper
               themePosition="left"
               themeIsCompact={isCompactVariant}
+              themeIsIconOnly={isIconButtonOnly}
             >
               {isIconName(icon) ? (
                 <StyledButtonIcon
@@ -296,7 +322,7 @@ const Button = ({
             </StyledButtonIconWrapper>
           )}
           {isRenderTextVariant ? renderTextVariantTitle() : renderTitle()}
-          {rightIcon !== undefined && (
+          {!isIconButtonOnly && rightIcon !== undefined && (
             <StyledButtonIconWrapper
               themePosition="right"
               themeIsCompact={isCompactVariant}

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

@@ -1,10 +1,7 @@
-import type { ReactNativeStyle } from '@emotion/native';
 import styled from '@emotion/native';
-import type { Theme } from '@emotion/react';
 import type { ViewProps } from 'react-native';
 import { View } from 'react-native';
-
-type Intent = 'primary' | 'secondary' | 'danger';
+import { transformKebabCaseToCamelCase } from '../../../utils/helpers';
 
 type ThemeVariant =
   | 'basic-transparent'
@@ -12,21 +9,17 @@ type ThemeVariant =
   | 'filled-secondary'
   | 'filled-danger'
   | 'filled-white'
+  | 'filled-inverted'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
   | 'outlined-white'
+  | 'outlined-inverted'
   | 'text-primary'
   | 'text-secondary'
   | 'text-danger'
-  | 'text-white';
-
-const genLoadingIndicatorStyles = (
-  theme: Theme,
-  intent: Intent
-): ReactNativeStyle => ({
-  backgroundColor: theme.__hd__.button.colors[intent],
-});
+  | 'text-white'
+  | 'text-inverted';
 
 const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>({
   flexDirection: 'row',
@@ -39,27 +32,13 @@ const StyledLoadingDot = styled(View)<{
   themeVariant: ThemeVariant;
 }>(({ size = 12, themeVariant, theme }) => {
   const themeStyling = () => {
-    switch (themeVariant) {
-      case 'basic-transparent':
-      case 'filled-primary':
-      case 'filled-secondary':
-      case 'filled-danger':
-      case 'outlined-white':
-      case 'text-white':
-        return {
-          backgroundColor: theme.__hd__.button.colors.invertedText,
-        };
-      case 'filled-white':
-      case 'outlined-primary':
-        return genLoadingIndicatorStyles(theme, 'primary');
-      case 'text-primary':
-      case 'outlined-secondary':
-        return genLoadingIndicatorStyles(theme, 'secondary');
-      case 'text-secondary':
-      case 'outlined-danger':
-      case 'text-danger':
-        return genLoadingIndicatorStyles(theme, 'danger');
-    }
+    if (themeVariant === 'basic-transparent')
+      return { backgroundColor: theme.__hd__.button.colors.invertedText };
+
+    const colorKey = transformKebabCaseToCamelCase(themeVariant);
+    return {
+      backgroundColor: theme.__hd__.button.colors.text[colorKey],
+    };
   };
 
   return {

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

@@ -150,7 +150,7 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "#001f23",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -334,7 +334,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#4d6265",
+          "backgroundColor": "#001f23",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -472,7 +472,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#4d6265",
+          "backgroundColor": "#401960",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -518,7 +518,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#cb300a",
+          "backgroundColor": "#001f23",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,

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

@@ -444,7 +444,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
         style={
           [
             {
-              "backgroundColor": "#ffffff",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -474,7 +474,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
         style={
           [
             {
-              "backgroundColor": "#ffffff",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -504,7 +504,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
         style={
           [
             {
-              "backgroundColor": "#ffffff",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -984,7 +984,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1014,7 +1014,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1044,7 +1044,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1389,7 +1389,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1419,7 +1419,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1449,7 +1449,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1524,7 +1524,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#cb300a",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1554,7 +1554,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#cb300a",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1584,7 +1584,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#cb300a",
+              "backgroundColor": "#001f23",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,

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

@@ -12,14 +12,17 @@ type ThemeVariant =
   | 'filled-secondary'
   | 'filled-danger'
   | 'filled-white'
+  | 'filled-inverted'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
   | 'outlined-white'
+  | 'outlined-inverted'
   | 'text-primary'
   | 'text-secondary'
   | 'text-danger'
-  | 'text-white';
+  | 'text-white'
+  | 'text-inverted';
 
 const AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(
   StyledLoadingIndicatorWrapper