@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/Button/Button.tsx

@@ -1,119 +1,140 @@
 import React from 'react';
-import { Linking, Text } from 'react-native';
-import ButtonBase from '../ButtonBase';
-import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { Linking, Text, View } from 'react-native';
+import type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
+import ButtonBase from '../ButtonBase/ButtonBase';
+import { LoadingSpinner } from '../internal/icons';
+import { createFontStyle, css, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type ButtonProps from './ButtonProps';
-import type { ButtonSize } from './ButtonProps';
+import type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';
+import useVariantStyleMap from './useVariantStyleMap';
 
-type IconSizes = { [n in ButtonSize]: number };
+type ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner'>;
 
-const iconSizes: IconSizes = {
-    small: 20,
-    medium: 24,
+const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            borderRadius: theme.shape.radius.sm,
+            flexDirection: 'row',
+            justifyContent: 'center',
+        },
+        fullWidth: {
+            width: '100%',
+        },
+        large: {
+            gap: theme.spacing(2),
+            minWidth: 104,
+            paddingHorizontal: theme.spacing(6),
+            paddingVertical: theme.spacing(3.5),
+        },
+        medium: {
+            gap: theme.spacing(1.5),
+            minWidth: 88,
+            paddingHorizontal: theme.spacing(6),
+            paddingVertical: theme.spacing(2.75),
+        },
+        small: {
+            minWidth: 64,
+            paddingHorizontal: theme.spacing(6),
+            paddingVertical: theme.spacing(2),
+        },
+        loadingSpinner: {
+            position: 'absolute',
+        },
+    };
 };
 
-const styles = StyleSheet.create({
-    root: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    fullWidth: {
-        width: '100%',
-    },
-    medium: {
-        minWidth: 104,
-        height: 48,
-    },
-    small: {
-        minWidth: 56,
-        height: 32,
-    },
-});
+const fontStyleMap: Record<ButtonSize, FontStyle> = {
+    large: typographyOf({
+        fontSize: 16,
+        lineHeight: 20,
+        fontFamily: 'LexendDeca-SemiBold',
+        letterSpacing: -0.32,
+    }),
+    medium: typographyOf({
+        fontSize: 15,
+        lineHeight: 19.5,
+        fontFamily: 'LexendDeca-SemiBold',
+        letterSpacing: -0.3,
+    }),
+    small: typographyOf({
+        fontSize: 13,
+        lineHeight: 16.9,
+        fontFamily: 'LexendDeca-SemiBold',
+        letterSpacing: -0.26,
+    }),
+};
+
+function getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {
+    if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {
+        return 'white';
+    }
+    return 'gray';
+}
 
 export default function Button(props: ButtonProps) {
     const {
         children,
-        clipHorizontalSpacing = false,
-        color = 'primary',
-        disabled = false,
+        color: colorProp = 'primary' as ButtonColor,
+        disabled: disabledProp = false,
+        disableMinWidth = false,
         endIcon: endIconProp,
         fullWidth = false,
         href,
+        isLoading = false,
         onPress,
         pressEffect,
-        size = 'medium',
+        size = 'medium' as ButtonSize,
         startIcon: startIconProp,
         style: styleProp,
-        variant = 'contained',
+        variant = 'solid' as ButtonVariant,
         ...otherProps
     } = props;
 
     const theme = useTheme();
 
-    const mainColor = theme.palette[color].main;
+    const styles = useStyles();
 
-    const fontColor = variant === 'contained'
-        ? theme.palette[color].contrastTextColor
-        : theme.palette[color].main;
+    const disabled = disabledProp || isLoading;
 
-    const variantStyleMap = {
-        contained: {
-            backgroundColor: mainColor,
-        },
-        outlined: {
-            backgroundColor: 'transparent',
-            borderColor: mainColor,
-            borderStyle: 'solid',
-            borderWidth: 1,
-        },
-        text: {
-            backgroundColor: 'transparent',
-        },
-    };
+    const color = disabledProp ? 'disabled' : colorProp;
+    const {
+        container: containerStyle,
+        iconColor,
+        labelColor,
+    } = useVariantStyleMap(variant, color);
 
     const iconProps = {
-        width: iconSizes[size],
-        height: iconSizes[size],
-        fill: fontColor,
+        fill: iconColor,
     };
 
     const startIcon = cloneElementSafely(startIconProp, iconProps);
     const endIcon = cloneElementSafely(endIconProp, iconProps);
 
-    const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
-    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
-    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
-
-    const borderRadius = theme.shape.roundnessLarge;
     const buttonBaseStyle = css([
         styles.root,
-        variantStyleMap[variant],
-        size === 'medium' ? styles.medium : styles.small,
+        containerStyle,
+        styles[size],
         fullWidth ? styles.fullWidth : undefined,
-        { borderRadius, color: fontColor },
-        (variant === 'text' && clipHorizontalSpacing)
-            ? { minWidth: 0 }
-            : { paddingLeft, paddingRight },
+        disableMinWidth ? { minWidth: 0 } : undefined,
         styleProp,
     ]);
 
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,
-        color: fontColor,
+    const contentStyle = css({
+        opacity: isLoading ? 0 : 1,
     });
 
-    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);
-    const textMarginStyle = startIcon
-        ? { marginLeft: textMarginSize }
-        : endIcon
-            ? { marginRight: textMarginSize }
-            : undefined;
+    const fontStyle = createFontStyle(theme, {
+        selector: (_) => fontStyleMap[size],
+        color: labelColor,
+    });
 
     const textStyle = css([
         fontStyle,
-        textMarginStyle,
         { textAlign: 'center' },
     ]);
 
@@ -136,6 +157,8 @@ export default function Button(props: ButtonProps) {
         }
     };
 
+    const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);
+
     return (
         <ButtonBase
             disabled={disabled}
@@ -144,14 +167,23 @@ export default function Button(props: ButtonProps) {
             pressEffect={modifiedPressEffect}
             {...otherProps}
         >
-            {startIcon}
-
-            <Text
-                children={children}
-                style={textStyle}
-            />
-
-            {endIcon}
+            <View style={contentStyle}>
+                {startIcon}
+
+                <Text style={textStyle}>
+                    {children}
+                </Text>
+
+                {endIcon}
+            </View>
+
+            {isLoading ? (
+                <LoadingSpinner
+                    color={loadingSpinnerColor}
+                    size={size}
+                    style={styles.loadingSpinner}
+                />
+            ) : null}
         </ButtonBase>
     );
 };

package/src/Button/ButtonProps.ts

@@ -1,12 +1,32 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { OverridableComponentProps, CommonComponentColor } from '../types';
+import type { OverridableComponentProps } from '../types';
 
-export type ButtonColor = CommonComponentColor;
+export const ButtonColors = [
+    'accent',
+    'primary',
+    'danger',
+    'disabled',
+    'secondary',
+    'accentAlt',
+] as const;
+export type ButtonColor = typeof ButtonColors[number];
 
-export type ButtonSize = 'small' | 'medium';
+export const ButtonSizes = [
+    'small',
+    'medium',
+    'large',
+] as const;
+export type ButtonSize = typeof ButtonSizes[number];
 
-export type ButtonVariant = 'contained' | 'outlined' | 'text';
+export const ButtonVariants = [
+    'solid',
+    'outlined',
+    'text',
+    'capsuleSolid',
+    'capsuleOutlined',
+] as const;
+export type ButtonVariant = typeof ButtonVariants[number];
 
 export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
@@ -14,19 +34,18 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      */
     children: string;
 
-    /**
-     * If `true`, remove horizontal padding and minimum width.
-     * This prop only applied on `text` variant.
-     * @default false
-     */
-    clipHorizontalSpacing?: boolean;
-
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
      */
     color?: ButtonColor;
 
+    /**
+     * Determines whether minWidth should be applied.
+     * @default false
+     */
+    disableMinWidth?: boolean;
+
     /**
      * Element placed after the children.
      */
@@ -43,6 +62,12 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      */
     href?: string;
 
+    /**
+     * Determines whether to show the loading status or not.
+     * @default false
+     */
+    isLoading?: boolean;
+
     /**
      * The size of the button.
      * @default 'medium'
@@ -56,7 +81,7 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
 
     /**
      * The variant to use.
-     * @default 'contained'
+     * @default 'solid'
      */
     variant?: ButtonVariant;
 }> {}

package/src/Button/LegacyButton.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Linking, Text } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
+import type ButtonProps from './LegacyButtonProps';
+import type { ButtonSize } from './LegacyButtonProps';
+
+type IconSizes = { [n in ButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    small: 20,
+    medium: 24,
+};
+
+const styles = StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullWidth: {
+        width: '100%',
+    },
+    medium: {
+        minWidth: 104,
+        height: 48,
+    },
+    small: {
+        minWidth: 56,
+        height: 32,
+    },
+});
+
+export default function Button(props: ButtonProps) {
+    const {
+        children,
+        clipHorizontalSpacing = false,
+        color = 'primary',
+        disabled = false,
+        endIcon: endIconProp,
+        fullWidth = false,
+        href,
+        onPress,
+        pressEffect,
+        size = 'medium',
+        startIcon: startIconProp,
+        style: styleProp,
+        variant = 'contained',
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const mainColor = theme.palette[color].main;
+
+    const fontColor = variant === 'contained'
+        ? theme.palette[color].contrastTextColor
+        : theme.palette[color].main;
+
+    const variantStyleMap = {
+        contained: {
+            backgroundColor: mainColor,
+        },
+        outlined: {
+            backgroundColor: 'transparent',
+            borderColor: mainColor,
+            borderStyle: 'solid',
+            borderWidth: 1,
+        },
+        text: {
+            backgroundColor: 'transparent',
+        },
+    };
+
+    const iconProps = {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        fill: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
+
+    const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
+    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
+    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
+
+    const borderRadius = theme.shape.roundnessLarge;
+    const buttonBaseStyle = css([
+        styles.root,
+        variantStyleMap[variant],
+        size === 'medium' ? styles.medium : styles.small,
+        fullWidth ? styles.fullWidth : undefined,
+        { borderRadius, color: fontColor },
+        (variant === 'text' && clipHorizontalSpacing)
+            ? { minWidth: 0 }
+            : { paddingLeft, paddingRight },
+        styleProp,
+    ]);
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,
+        color: fontColor,
+    });
+
+    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);
+    const textMarginStyle = startIcon
+        ? { marginLeft: textMarginSize }
+        : endIcon
+            ? { marginRight: textMarginSize }
+            : undefined;
+
+    const textStyle = css([
+        fontStyle,
+        textMarginStyle,
+        { textAlign: 'center' },
+    ]);
+
+    const modifiedPressEffect = variant !== 'text' && !pressEffect
+        ? 'scale'
+        : pressEffect;
+
+    const handlePress = async () => {
+        if (disabled) {
+            return;
+        }
+        if (onPress) {
+            onPress();
+            return;
+        }
+        if (href) {
+            if (await Linking.canOpenURL(href)) {
+                await Linking.openURL(href);
+            }
+        }
+    };
+
+    return (
+        <ButtonBase
+            disabled={disabled}
+            onPress={handlePress}
+            style={buttonBaseStyle}
+            pressEffect={modifiedPressEffect}
+            {...otherProps}
+        >
+            {startIcon}
+
+            <Text
+                children={children}
+                style={textStyle}
+            />
+
+            {endIcon}
+        </ButtonBase>
+    );
+};

package/src/Button/LegacyButtonProps.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ButtonBaseProps } from '../ButtonBase';
+import type { OverridableComponentProps, CommonComponentColor } from '../types';
+
+export type ButtonColor = CommonComponentColor;
+
+export type ButtonSize = 'small' | 'medium';
+
+export type ButtonVariant = 'contained' | 'outlined' | 'text';
+
+export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
+    /**
+     * The content of the button.
+     */
+    children: string;
+
+    /**
+     * If `true`, remove horizontal padding and minimum width.
+     * This prop only applied on `text` variant.
+     * @default false
+     */
+    clipHorizontalSpacing?: boolean;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+
+    /**
+     * Element placed after the children.
+     */
+    endIcon?: React.ReactElement;
+
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+
+    /**
+     * The URL to link to when the button is clicked.
+     */
+    href?: string;
+
+    /**
+     * The size of the button.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+
+    /**
+     * Element placed before the children.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The variant to use.
+     * @default 'contained'
+     */
+    variant?: ButtonVariant;
+}> {}

package/src/Button/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Button';
-export type { default as ButtonProps } from './ButtonProps';
+export { default } from './LegacyButton';
+export type { default as ButtonProps } from './LegacyButtonProps';