[core] Documenting Button component

core/src/Button.tsx

@@ -8,40 +8,116 @@ import ActivityIndicator from "./ActivityIndicator";
 import Pressable, { PressableProps } from "./Pressable";
 
 export interface ButtonProps extends Omit<SurfaceProps, "hitSlop">, Omit<PressableProps, "style" | "children"> {
-  title: string | React.ReactElement | ((props: { color: string }) => React.ReactElement | null) | null;
+  /**
+   * The text content of the button.
+   */
+  title: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;
 
-  leading?: React.ReactElement | ((props: { color: string; size: number }) => React.ReactElement | null) | null;
+  /**
+   * The element placed before the `title`.
+   */
+  leading?: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
 
-  trailing?: React.ReactElement | ((props: { color: string; size: number }) => React.ReactElement | null) | null;
+  /**
+   * The element placed after the `title`.
+   */
+  trailing?: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
 
-  variant?: "contained" | "outlined" | "text";
+  /**
+   * The style of the button.
+   * - `text`: Text buttons are typically used for less important actions (low emphasis).
+   * - `outlined`: Outlined buttons are used for more emphasis than text buttons due to the stroke (medium emphasis).
+   * - `contained`: Contained buttons have more emphasis, as they use a color fill and shadow (high emphasis).
+   *
+   * @default "contained"
+   */
+  variant?: "text" | "outlined" | "contained";
 
+  /**
+   * The main color of the button.
+   * for `contained` buttons, this is the background color.
+   * for `outlined` and `text` buttons, this is the color of the content (text, icons, etc.).
+   *
+   * @default "primary"
+   */
   color?: PaletteColor;
 
+  /**
+   * The color of the `contained` buttons content (text, icons, etc.). No effect on `outlined` and `text` buttons.
+   */
   tintColor?: PaletteColor;
 
-  uppercase?: boolean;
-
+  /**
+   * Smaller horizontal padding, useful for `text` buttons in a row.
+   *
+   * @default false
+   */
   compact?: boolean;
 
+  /**
+   * If `true`, no shadow is used. No effect on `outlined` and `text` buttons.
+   *
+   * @default false
+   */
   disableElevation?: boolean;
 
-  loading?: boolean;
+  /**
+   * If `false`, the button title is not rendered in upper case. No effect if you pass a React.Node as the `title` prop.
+   *
+   * @default true
+   */
+  uppercase?: boolean;
 
-  loadingIndicator?: string | React.ReactElement | ((props: { color: string }) => React.ReactElement | null) | null;
+  /**
+   * Whether to show a loading indicator.
+   *
+   * @default false
+   */
+  loading?: boolean;
 
+  /**
+   * The place where the loading indicator should appear.
+   * - `leading`: The indicator will replace the `leading` element.
+   * - `trailing`: The indicator will replace the `trailing` element.
+   * - `overlay`: The indicator will be added as an overlay over the button.
+   *
+   * @default "leading"
+   */
   loadingIndicatorPosition?: "leading" | "trailing" | "overlay";
 
+  /**
+   * A React.Node to replace the default loading indicator. Also, you can pass a string to show a text (e.g. "Loading...").
+   */
+  loadingIndicator?: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;
+
+  /**
+   * The style of the button's pressable component container.
+   */
   pressableContainerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * The style of the button's container.
+   */
   contentContainerStyle?: PressableProps["style"];
 
+  /**
+   * The style of the button's text. No effect if you pass a React.Node as the `title` prop.
+   */
   titleStyle?: StyleProp<TextStyle>;
 
+  /**
+   * The style of the button's leading element container.
+   */
   leadingContainerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * The style of the button's trailing element container.
+   */
   trailingContainerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * The style of the button's loading indicator overlay view. No effect if `loadingIndicatorPosition` is not `overlay`.
+   */
   loadingOverlayContainerStyle?: StyleProp<ViewStyle>;
 }
 

core/src/Pressable.tsx

@@ -86,7 +86,7 @@ const Pressable: React.FC<PressableProps> = ({
           ),
           easing: Easing.out(Easing.ease),
           duration: 400,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }).start();
       }
     },

example/screens/Screens.js

@@ -56,20 +56,8 @@ export const ButtonScreen = () => (
     <Button title="Button" loading loadingIndicatorPosition="trailing" style={{ margin: 8 }} />
     <Button title="Button" loading loadingIndicatorPosition="overlay" style={{ margin: 8 }} />
     <Button title="Button" variant="outlined" loading style={{ margin: 8 }} />
-    <Button
-      title="Button"
-      variant="outlined"
-      loading
-      loadingIndicatorPosition="trailing"
-      style={{ margin: 8 }}
-    />
-    <Button
-      title="Button"
-      variant="outlined"
-      loading
-      loadingIndicatorPosition="overlay"
-      style={{ margin: 8 }}
-    />
+    <Button title="Button" variant="outlined" loading loadingIndicatorPosition="trailing" style={{ margin: 8 }} />
+    <Button title="Button" variant="outlined" loading loadingIndicatorPosition="overlay" style={{ margin: 8 }} />
     <Button title="Button" variant="text" loading style={{ margin: 8 }} />
     <Button title="Button" variant="text" loading loadingIndicatorPosition="trailing" style={{ margin: 8 }} />
     <Button title="Button" variant="text" loading loadingIndicatorPosition="overlay" style={{ margin: 8 }} />