refactor: use guard clauses in button colors getters

callstack · May 12, 2022 · 734cbe7 · 734cbe7
1 parent de96492
commit 734cbe7
Show file tree

Hide file tree

Showing 7 changed files with 937 additions and 96 deletions.
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
@@ -15,7 +15,7 @@ const ButtonExample = () => {
           <Button onPress={() => {}} style={styles.button}>
             Default
           </Button>
-          <Button color={color} onPress={() => {}} style={styles.button}>
+          <Button textColor={color} onPress={() => {}} style={styles.button}>
             Custom
           </Button>
           <Button disabled onPress={() => {}} style={styles.button}>
@@ -49,7 +49,7 @@ const ButtonExample = () => {
             </Button>
             <Button
               mode="contained-tonal"
-              color={color}
+              buttonColor={color}
               onPress={() => {}}
               style={styles.button}
             >
@@ -98,7 +98,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="outlined"
-            color={color}
+            textColor={color}
             onPress={() => {}}
             style={styles.button}
           >
@@ -146,7 +146,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="contained"
-            color={color}
+            buttonColor={color}
             onPress={() => {}}
             style={styles.button}
           >
@@ -195,7 +195,7 @@ const ButtonExample = () => {
             </Button>
             <Button
               mode="elevated"
-              color={color}
+              buttonColor={color}
               onPress={() => {}}
               style={styles.button}
             >

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -238,7 +238,7 @@ const Banner = ({
                 compact
                 mode="text"
                 style={styles.button}
-                color={theme.colors?.primary}
+                textColor={theme.colors?.primary}
                 {...others}
               >
                 {label}

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -16,7 +16,7 @@ import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
-import { buttonMode, getButtonColors } from './helpers';
+import { ButtonMode, getButtonColors } from './helpers';
 
 type Props = React.ComponentProps<typeof Surface> & {
   /**
@@ -29,17 +29,30 @@ type Props = React.ComponentProps<typeof Surface> & {
    */
   mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
   /**
-   * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for `contained` mode.
+   * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:
+   *  * `contained` mode for theme version 2
+   *  * `contained`, `contained-tonal` and `elevated` modes for theme version 3.
    */
   dark?: boolean;
   /**
    * Use a compact look, useful for `text` buttons in a row.
    */
   compact?: boolean;
   /**
+   * @deprecated Deprecated in v3.x - use `buttonColor` or `textColor` instead.
    * Custom text color for flat button, or background color for contained button.
    */
   color?: string;
+  /**
+   * @supported Available in v3.x
+   * Custom button's background color.
+   */
+  buttonColor?: string;
+  /**
+   * @supported Available in v3.x
+   * Custom button's text color.
+   */
+  textColor?: string;
   /**
    * Whether to show a loading indicator.
    */
@@ -135,7 +148,8 @@ const Button = ({
   dark,
   loading,
   icon,
-  color: buttonColor,
+  buttonColor: customButtonColor,
+  textColor: customTextColor,
   children,
   accessibilityLabel,
   accessibilityHint,
@@ -151,7 +165,7 @@ const Button = ({
   ...rest
 }: Props) => {
   const isMode = React.useCallback(
-    (modeToCompare: buttonMode) => {
+    (modeToCompare: ButtonMode) => {
       return mode === modeToCompare;
     },
     [mode]
@@ -197,7 +211,8 @@ const Button = ({
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
-      buttonColor,
+      customButtonColor,
+      customTextColor,
       theme,
       mode,
       disabled,