@hero-design/rn 8.85.0 → 8.86.0

package/src/components/Button/Button.tsx

@@ -34,7 +34,7 @@ export interface ButtonProps {
   /**
    * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
    */
-  intent?: 'primary' | 'secondary' | 'danger';
+  intent?: 'primary' | 'secondary' | 'danger' | 'white';
   /**
    * Loading state of button.
    */
@@ -79,18 +79,21 @@ const FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
   danger: 'filled-danger',
+  white: 'filled-white',
 } as const;
 
 const OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
   secondary: 'outlined-secondary',
   danger: 'outlined-danger',
+  white: 'outlined-white',
 } as const;
 
 const TEXT_VARIANTS = {
   primary: 'text-primary',
   secondary: 'text-secondary',
   danger: 'text-danger',
+  white: 'text-white',
 } as const;
 
 export const getThemeVariant = (
@@ -121,18 +124,24 @@ const getUnderlayColor = (theme: Theme, themeVariant: ThemeVariant) => {
       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;
   }
 };
 
@@ -145,10 +154,17 @@ const deprecatedVariants: ThemeVariant[] = [
 
 function isTextVariant(
   themeVariant: ThemeVariant
-): themeVariant is 'text-primary' | 'text-secondary' | 'text-danger' {
-  return ['text-primary', 'text-secondary', 'text-danger'].includes(
-    themeVariant
-  );
+): themeVariant is
+  | 'text-primary'
+  | 'text-secondary'
+  | 'text-danger'
+  | 'text-white' {
+  return [
+    'text-primary',
+    'text-secondary',
+    'text-danger',
+    'text-white',
+  ].includes(themeVariant);
 }
 
 const Button = ({
@@ -203,7 +219,7 @@ const Button = ({
   const renderTitle = () =>
     isCompactVariant ? (
       <StyledSmallButtonText
-        variant="small"
+        variant="small-bold"
         ellipsizeMode="tail"
         numberOfLines={1}
         disabled={disabled}

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

@@ -11,12 +11,15 @@ type ThemeVariant =
   | 'filled-primary'
   | 'filled-secondary'
   | 'filled-danger'
+  | 'filled-white'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
+  | 'outlined-white'
   | 'text-primary'
   | 'text-secondary'
-  | 'text-danger';
+  | 'text-danger'
+  | 'text-white';
 
 const genLoadingIndicatorStyles = (
   theme: Theme,
@@ -41,15 +44,18 @@ const StyledLoadingDot = styled(View)<{
       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':
-      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+      case 'text-secondary':
       case 'outlined-danger':
       case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');

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

@@ -10,12 +10,15 @@ describe('StyledLoadingIndicator', () => {
     ${'filled-primary'}
     ${'filled-secondary'}
     ${'filled-danger'}
+    ${'filled-white'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'outlined-white'}
     ${'text-primary'}
     ${'text-secondary'}
     ${'text-danger'}
+    ${'text-white'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledLoadingDot themeVariant={themeVariant} />

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

@@ -184,6 +184,52 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledLoadingIndicator has filled-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 8,
+          "height": 12,
+          "marginHorizontal": 8,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    themeVariant="filled-white"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
 <View
   style={
@@ -322,6 +368,52 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledLoadingIndicator has outlined-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "height": 12,
+          "marginHorizontal": 8,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    themeVariant="outlined-white"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledLoadingIndicator has text-danger style 1`] = `
 <View
   style={
@@ -426,7 +518,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#4d6265",
+          "backgroundColor": "#cb300a",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -459,3 +551,49 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
   />
 </View>
 `;
+
+exports[`StyledLoadingIndicator has text-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "height": 12,
+          "marginHorizontal": 8,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    themeVariant="text-white"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;