feat(*): change touchable highlight to opacity

Author: minheq

src/components/Alert/Alert.tsx

@@ -16,17 +16,22 @@ import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 export interface AlertProps {
   /** Title of the alert. */
   title?: string;
+
   /** Description of the alert. */
   description?: string;
+
   /** Replace the icon of the alert on the left. Set to null to remove icon */
   icon?: React.ReactNode;
+
   /**
    * Intent of the alert.
    * @default info
    */
   intent?: Intent;
+
   /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<GetAlertStyles, DeepPartial<AlertStyles>>;
+
   /** Used to locate this view in end-to-end tests. */
   testID?: string;
 }

src/components/Avatar/Avatar.tsx

@@ -29,31 +29,38 @@ const getInitials: GetInitialsType = (name, fallback = '?') => {
 export interface AvatarProps {
   /** The source attribute of the image. When it's not available, render initials instead. */
   source?: ImageSourcePropType;
+
   /** The size of the avatar. */
   size?: number;
+
   /**
    * The name used for the initials and title attribute.
    * @default 48
    */
   name?: string;
+
   /**
    * When true, render a solid avatar.
    * @default false
    */
   isSolid?: boolean;
+
   /**
    * The color used for the avatar.
    * When the value is `automatic`, use the hash function to determine the color.
-   * @default automatic
+   * @default "automatic"
    */
   color?: 'automatic' | FillColor;
+
   /**
    * When the size is smaller than this number, use a single initial for the avatar.
    * @default 20
    */
   sizeLimitOneCharacter?: number;
+
   /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<GetAvatarStyles, DeepPartial<AvatarStyles>>;
+
   /** Used to locate this view in end-to-end tests. */
   testID?: string;
 }

src/components/Badge/Badge.mdx

@@ -12,9 +12,7 @@ import { Badge, Box } from '..';
 
 <Playground>
   <Box>
-    <Badge color="blue" isSolid size="large" shape="pill">
-      Badge
-    </Badge>
+    <Badge title="Badge" color="blue" isSolid size="large" shape="pill" />
   </Box>
 </Playground>
 

src/components/Badge/Badge.tsx

@@ -9,41 +9,48 @@ import { Text } from '../Typography';
 import { BadgeStyles, GetBadgeStyles, getBadgeStyles } from './Badge.styles';
 
 export interface BadgeProps {
-  children: React.ReactNode;
+  /** Title of the badge */
+  title?: string;
+
   /**
    * Color of the badge
-   * @default neutral
+   * @default "neutral"
    */
   color?: FillColor;
+
   /**
    * Size of the badge
-   * @default medium
+   * @default "medium"
    */
   size?: ControlSize;
+
   /**
    * Shape of the container
-   * @default rounded
+   * @default "rounded"
    */
   shape?: ContainerShape;
+
   /**
    * When true, display in solid mode
    * @default false
    */
   isSolid?: boolean;
+
   /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<GetBadgeStyles, DeepPartial<BadgeStyles>>;
+
   /** Used to locate this view in end-to-end tests. */
   testID?: string;
 }
 
 export const Badge = (props: BadgeProps) => {
   const {
-    children,
     color = 'neutral',
     getStyles,
     isSolid = false,
     shape = 'rounded',
     size = 'medium',
+    title,
     testID,
   } = props;
 
@@ -58,7 +65,7 @@ export const Badge = (props: BadgeProps) => {
   return (
     <View style={containerStyle} testID={testID}>
       <Text weight="bold" size={size} getStyles={() => ({ textStyle })}>
-        {children}
+        {title}
       </Text>
     </View>
   );

src/components/Button/Button.mdx

@@ -10,30 +10,6 @@ import { Box, Button } from '..';
 
 ### Usage
 
-<Playground>
-  <Button
-    color="primary"
-    appearance="primary"
-    size="large"
-    isLoading={false}
-    isActive={false}
-    isDisabled={false}
-    isInline={false}
-    iconBefore={null}
-    iconAfter={null}
-    iconLoading={null}
-    title="Usage"
-    onPress={() => console.log('Pressed!')}
-    getStyles={(props, theme) => ({
-      buttonStyle: {},
-      textStyle: {},
-      focusColor: '#5ab9ae',
-    })}
-  />
-</Playground>
-
-### Variants
-
 <Playground>
   <Box flexDirection="row">
     <Box paddingRight={16} height={240} justifyContent="space-between">
@@ -68,21 +44,31 @@ import { Box, Button } from '..';
   </Box>
 </Playground>
 
-### Positioning inline button with different sizes
+### Customization
 
-<Playground>
-  <Box paddingBottom={16} flexDirection="row" justifyContent="flex-start">
-    <Button isInline color="primary" title="Left small" size="small" />
-  </Box>
-  <Box paddingBottom={16} flexDirection="row" justifyContent="center">
-    <Button isInline color="primary" title="Center medium" size="medium" />
-  </Box>
-  <Box paddingBottom={16} flexDirection="row" justifyContent="flex-end">
-    <Button isInline color="primary" title="Right large" size="large" />
-  </Box>
-</Playground>
+Using `getStyles` prop
+
+```
+ButtonStylesProps {
+  appearance: ButtonAppearance;
+  color: ButtonColor;
+  size: ControlSize;
+  isDisabled: boolean;
+  isLoading: boolean;
+  isInline: boolean;
+  hasIconAfter?: boolean;
+  hasIconBefore?: boolean;
+}
+
+ButtonStyles {
+  buttonStyle: ViewStyle;
+  textStyle: TextStyle;
+  innerButtonWrapperStyle: ViewStyle;
+  buttonContentWrapperStyle: ViewStyle;
+}
 
-If `isInline` does not inline the button, try wrapping it with `Box`
+getStyles={(ButtonStylesProps, Theme) => ButtonStyles}
+```
 
 ### Props
 

src/components/Button/Button.styles.ts

@@ -1,7 +1,6 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
 import { ButtonColor, ControlSize, Theme } from '../../theme/Theme';
-import { darken } from './changeColor';
 
 export interface ButtonColorProps {
   backgroundColor: string;
@@ -102,24 +101,24 @@ export const getButtonAppearances = (theme: Theme): ButtonAppearances => {
   };
 };
 
-export interface ButtonStyles {
-  buttonStyle: ViewStyle;
-  textStyle: TextStyle;
-  focusColor: string;
-  innerButtonWrapperStyle: ViewStyle;
-  buttonContentWrapperStyle: ViewStyle;
-}
-
 export interface ButtonStylesProps {
   appearance: ButtonAppearance;
   color: ButtonColor;
   size: ControlSize;
   isDisabled: boolean;
   isLoading: boolean;
   isInline: boolean;
-  iconBefore?: any;
-  iconAfter?: any;
+  hasIconAfter?: boolean;
+  hasIconBefore?: boolean;
 }
+
+export interface ButtonStyles {
+  buttonStyle: ViewStyle;
+  textStyle: TextStyle;
+  innerButtonWrapperStyle: ViewStyle;
+  buttonContentWrapperStyle: ViewStyle;
+}
+
 export type GetButtonStyles = (
   buttonStylesProps: ButtonStylesProps,
   theme: Theme,
@@ -133,8 +132,8 @@ export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
     isDisabled,
     isLoading,
     isInline,
-    iconBefore,
-    iconAfter,
+    hasIconAfter,
+    hasIconBefore,
   } = buttonStyleProps;
 
   const buttonAppearances = getButtonAppearances(theme);
@@ -167,10 +166,6 @@ export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
           }
         : {}),
     },
-    focusColor:
-      appearance === 'minimal' || appearance === 'outline'
-        ? theme.colors.button.default
-        : darken(buttonStyle.backgroundColor, 0.05),
     textStyle: {
       alignItems: 'center',
       color: isDisabled ? theme.colors.text.muted : textColor,
@@ -188,8 +183,8 @@ export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
     },
 
     buttonContentWrapperStyle: {
-      paddingLeft: iconBefore ? 8 : 0,
-      paddingRight: iconAfter ? 8 : 0,
+      paddingLeft: hasIconBefore ? 8 : 0,
+      paddingRight: hasIconAfter ? 8 : 0,
     },
   };
 };