@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.1

package/src/Dialog/useDialogStyle.ts

@@ -4,18 +4,12 @@ import type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/style
 import { useTheme } from '../styles';
 import type { DialogSize } from './DialogProps';
 
-type SizeStyleMap = FountainUiStyle & {
-    maxWidth: number;
-    paddingHorizontal: number;
-}
-
 type DialogStyleKeys =
     | 'root'
     | 'container'
     | 'paper'
     | 'topElementContainer'
-    | 'topElementContent'
-    | 'mediaWrapper';
+    | 'topElementContent';
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
@@ -28,27 +22,22 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
     } = useWindowDimensions();
 
     return useMemo(() => {
-        const sizeStyleMap: Record<DialogSize, SizeStyleMap> = {
+        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {
             small: {
                 maxWidth: 260,
-                paddingHorizontal: theme.spacing(6),
             },
             medium: {
                 maxWidth: 400,
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
             },
             large: {
                 maxWidth: 512,
                 minHeight: 360,
-                paddingHorizontal: theme.spacing(8),
                 width: 512,
             },
         };
 
-        const marginVertical = theme.spacing(6);
-        const dialogMaxHeight = windowHeight - marginVertical * 2;
-        const paddingHorizontal = sizeStyleMap[size]?.paddingHorizontal;
+        const containerPaddingVertical = theme.spacing(6);
+        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
         return {
@@ -61,13 +50,19 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 height: '100%',
                 width: '100%',
             } : {
+                alignItems: 'center',
                 // TODO: need to refactor breakpoints.
-                marginHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingVertical: containerPaddingVertical,
+                width: '100%',
             },
             paper: fullScreen ? {
-                flexGrow: 1,
+                backgroundColor: theme.palette.surface.base,
+                height: '100%',
+                width: '100%',
             } : {
-                marginVertical,
+                backgroundColor: theme.palette.surface.base,
+                borderRadius: theme.shape.radius.xl,
                 maxHeight: dialogMaxHeight,
                 overflow: 'hidden',
                 width: '100%',
@@ -79,12 +74,9 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
             },
             topElementContent: {
                 position: 'absolute',
-                bottom: -1 * theme.spacing(4),
+                bottom: 0,
                 width: '100%',
             },
-            mediaWrapper: {
-                marginHorizontal: theme.spacing(4) - (paddingHorizontal ?? 0),
-            },
         };
     }, [theme, windowHeight, windowWidth, size, fullScreen]);
 }

package/src/DialogActions/DialogActions.tsx

@@ -1,18 +1,43 @@
 import React from 'react';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
-import { EdgeInsets } from '../styles';
+import { useDialogSectionStyle } from '../Dialog';
+import { css, useTheme } from '../styles';
 import type DialogActionsProps from './DialogActionsProps';
 
+type DialogActionsStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            paddingTop: theme.spacing(2),
+            paddingBottom: theme.spacing(4),
+        },
+    };
+};
+
 export default function DialogActions(props: DialogActionsProps) {
     const {
         children,
+        style: styleProp,
         ...otherProps
     } = props;
 
+    const styles = useStyles();
+
+    const sectionStyle = useDialogSectionStyle();
+
+    const rootStyle = css([
+        styles.root,
+        sectionStyle,
+        styleProp,
+    ]);
+
     return (
         <Column
-            alignItems={'center'}
-            insets={EdgeInsets.fromLTRB(0, 2, 0, 4)}
+            style={rootStyle}
             {...otherProps}
         >
             {children}

package/src/DialogActions/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogActions';
+export { default } from './DialogActions';
 export type { default as DialogActionsProps } from './DialogActionsProps';

package/src/DialogContent/DialogContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, Text, TextStyle } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
 import type DialogContentProps from './DialogContentProps';
 
@@ -30,8 +31,11 @@ export default function DialogContent(props: DialogContentProps) {
 
     const styles = useStyles();
 
+    const sectionStyle = useDialogSectionStyle();
+
     const rootStyle = css([
         styles.root,
+        sectionStyle,
         styleProp,
     ]);
 
@@ -48,6 +52,7 @@ export default function DialogContent(props: DialogContentProps) {
 
     return (
         <ScrollView
+            bounces={false}
             style={rootStyle}
             {...otherProps}
         >

package/src/DialogContent/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogContent';
-export type { default as DialogContentProps } from './LegacyDialogContentProps';
+export { default } from './DialogContent';
+export type { default as DialogContentProps } from './DialogContentProps';

package/src/DialogMedia/DialogMedia.tsx

@@ -17,6 +17,7 @@ const useStyles: UseStyles<DialogMediaStyles> = function (): DialogMediaStyles {
             paddingTop: theme.spacing(8),
         },
         image: {
+            paddingHorizontal: theme.spacing(4),
             paddingTop: theme.spacing(4),
         },
     };

package/src/DialogMedia/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogMedia';
-export type { default as DialogMediaProps } from './LegacyDialogMediaProps';
+export { default } from './DialogMedia';
+export type { default as DialogMediaProps } from './DialogMediaProps';

package/src/DialogTitle/DialogTitle.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
 import type DialogTitleProps from './DialogTitleProps';
 
@@ -30,8 +31,11 @@ export default function DialogTitle(props: DialogTitleProps) {
 
     const styles = useStyles();
 
+    const sectionStyle = useDialogSectionStyle();
+
     const rootStyle = css([
         styles.root,
+        sectionStyle,
         styleProp,
     ]);
 

package/src/DialogTitle/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogTitle';
-export type { default as DialogTitleProps } from './LegacyDialogTitleProps';
+export { default } from './DialogTitle';
+export type { default as DialogTitleProps } from './DialogTitleProps';

package/src/Divider/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDivider';
-export type { default as DividerProps } from './LegacyDividerProps';
+export { default } from './Divider';
+export type { default as DividerProps } from './DividerProps';

package/src/Empty/Empty.tsx

@@ -19,7 +19,7 @@ const useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {
             alignItems: 'center',
             flex: 1,
             justifyContent: 'center',
-            paddingHorizontal: theme.spacing(12),
+            paddingHorizontal: theme.spacing(5),
         },
         cta: {
             alignSelf: 'center',
@@ -93,13 +93,12 @@ export default function Empty(props: EmptyProps) {
                 <React.Fragment>
                     <Spacer size={6}/>
 
-                    {/* TODO: change Capsule solid variant. */}
                     <Button
                         children={buttonTitle}
                         color={'accent'}
                         onPress={onButtonPress}
                         style={styles.cta}
-                        variant={'solid'}
+                        variant={'capsuleSolid'}
                     />
                 </React.Fragment>
             ) : null}

package/src/IconButton/IconButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { commonColors, Theme } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
+import { LoadingSpinner } from '../internal';
 import { css, useTheme } from '../styles';
 import type { SvgIconSize } from '../SvgIcon/SvgIconProps';
 import { cloneElementSafely } from '../utils';
@@ -15,8 +16,17 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         width: 32,
     },
+    loadingSpinner: {
+        position: 'absolute',
+    },
 });
 
+const loadingSpinnerSizeMap: Record<SvgIconSize, number> = {
+    small: 14,
+    medium: 16,
+    large: 18,
+};
+
 function selectIconColor(theme: Theme, color: IconButtonColor) {
     switch (color) {
         default:
@@ -34,16 +44,18 @@ function selectIconColor(theme: Theme, color: IconButtonColor) {
 export default function IconButton(props: IconButtonProps) {
     const {
         children,
-        color = 'strong' as IconButtonColor,
+        color: colorProp = 'strong' as IconButtonColor,
         disabled = false,
         onPress,
         iconSize = 'medium' as SvgIconSize,
+        isLoading = false,
         style,
         ...otherProps
     } = props;
 
     const theme = useTheme();
 
+    const color: IconButtonColor = disabled ? 'disabled' : colorProp;
     const iconColor = selectIconColor(theme, color);
 
     const icon = cloneElementSafely(children, {
@@ -57,6 +69,18 @@ export default function IconButton(props: IconButtonProps) {
         style,
     ]);
 
+    const contentStyle = css({
+        opacity: isLoading ? 0 : 1,
+    });
+
+    const loadingSpinnerStyle = css([
+        styles.loadingSpinner,
+        {
+            height: loadingSpinnerSizeMap[iconSize],
+            width: loadingSpinnerSizeMap[iconSize],
+        },
+    ]);
+
     const handlePress = () => {
         if (disabled) {
             return;
@@ -72,7 +96,13 @@ export default function IconButton(props: IconButtonProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {icon}
+            <View style={contentStyle}>
+                {icon}
+            </View>
+
+            {isLoading ? (
+                <LoadingSpinner style={loadingSpinnerStyle}/>
+            ) : null}
         </ButtonBase>
     );
 };

package/src/IconButton/IconButtonProps.ts

@@ -28,4 +28,10 @@ export default interface IconButtonProps extends OverridableComponentProps<Butto
      * @default 'medium'
      */
     iconSize?: SvgIconSize;
+
+    /**
+     * Determines whether to show the loading status or not.
+     * @default false
+     */
+    isLoading?: boolean;
 }> {}

package/src/IconButton/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyIconButton';
-export type { default as IconButtonProps } from './LegacyIconButtonProps';
+export { default } from './IconButton';
+export type { default as IconButtonProps } from './IconButtonProps';

package/src/ListItemText/ListItemText.tsx

@@ -44,8 +44,8 @@ export default function ListItemText(props: ListItemTextProps) {
             {primary ? (
                 <Typography
                     children={primary}
-                    color={'textPrimary'}
-                    variant={'body1'}
+                    color={'strong'}
+                    variant={'body3'}
                     style={isMultiline ? styles.multiline : undefined}
                 />
             ) : null}
@@ -53,8 +53,8 @@ export default function ListItemText(props: ListItemTextProps) {
             {secondary ? (
                 <Typography
                     children={secondary}
-                    color={'textSecondary'}
-                    variant={'body2'}
+                    color={'strong'}
+                    variant={'body3'}
                 />
             ) : null}
         </Column>

package/src/ListSubheader/ListSubheader.tsx

@@ -26,8 +26,8 @@ export default function ListSubheader(props: ListSubheaderProps) {
             ) : (
                 <Typography
                     children={children}
-                    color={'textSecondary'}
-                    variant={'caption1'}
+                    color={'strong'}
+                    variant={'caption3'}
                 />
             )}
         </Row>

package/src/Pagination/Pagination.tsx

@@ -110,10 +110,8 @@ export default function Pagination(props: PaginationProps) {
 
     const prevButton = !hidePrevButton ? (
         <IconButton
-            color={'tertiary'}
             disabled={disabled || (!infinite && page <= firstPage)}
             onPress={handlePrevPress}
-            size={'small'}
             style={children ? styles.prevAnchor : styles.prevInline}
         >
             <ChevronLeft/>
@@ -122,10 +120,8 @@ export default function Pagination(props: PaginationProps) {
 
     const nextButton = !hideNextButton ? (
         <IconButton
-            color={'tertiary'}
             disabled={disabled || (!infinite && page + bundleSize > lastPage)}
             onPress={handleNextPress}
-            size={'small'}
             style={children ? styles.nextAnchor : styles.nextInline}
         >
             <ChevronRight/>

package/src/Pagination/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyPagination';
-export type { default as PaginationProps } from './LegacyPaginationProps';
+export { default } from './Pagination';
+export type { default as PaginationProps } from './PaginationProps';

package/src/Radio/Radio.tsx

@@ -57,10 +57,7 @@ export default function Radio(props: RadioProps) {
     const isChecked = context?.value === value ?? checked;
 
     const defaultCheckedIcon = (
-        <CheckedIcon
-            color={'accent'}
-            enableV2={true}
-        />
+        <CheckedIcon color={'accent'}/>
     );
 
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;

package/src/Radio/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyRadio';
-export type { default as RadioProps } from './LegacyRadioProps';
+export { default } from './Radio';
+export type { default as RadioProps } from './RadioProps';

package/src/RadioGroup/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyRadioGroup';
+export { default } from './RadioGroup';
 export type { default as RadioGroupProps } from './RadioGroupProps';

package/src/ShadowView/ShadowView.native.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { View } from 'react-native';
-import type { ShadowVariant } from '@fountain-ui/styles';
+import type { FountainUiStyle, ShadowVariant } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type ShadowViewProps from './ShadowViewProps';
 
 export default function ShadowView(props: ShadowViewProps) {
     const {
         children,
-        style: styleProp,
+        style: styleProp = {},
         variant = 100 as ShadowVariant,
         ...otherProps
     } = props;
@@ -16,22 +16,33 @@ export default function ShadowView(props: ShadowViewProps) {
 
     const { nativeShadows } = theme.shadow[variant];
 
-    const content = nativeShadows.reduce((accumulator, nativeShadow) => {
+    const {
+        borderRadius,
+        height,
+        width,
+    } = styleProp as FountainUiStyle;
+
+    return nativeShadows.reduce((accumulator, nativeShadow) => {
         return (
             <View
                 style={css([
                     { ...nativeShadow },
-                    styleProp,
+                    {
+                        borderRadius: borderRadius ?? 0,
+                        height,
+                        width,
+                    },
                 ])}
             >
                 {accumulator}
             </View>
         );
-    }, children);
-
-    return (
-        <View {...otherProps}>
-            {content}
+    }, (
+        <View
+            style={styleProp}
+            {...otherProps}
+        >
+            {children}
         </View>
-    );
+    ));
 }

package/src/Snackbar/Snackbar.tsx

@@ -3,7 +3,7 @@ import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
-import SnackbarContent from '../SnackbarContent/SnackbarContent';
+import SnackbarContent from '../SnackbarContent';
 import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
 import { isNotAndroid12 } from '../utils';

package/src/Snackbar/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacySnackbar';
-export type { default as SnackbarProps } from './LegacySnackbarProps';
+export { default } from './Snackbar';
+export type { default as SnackbarProps } from './SnackbarProps';

package/src/SnackbarContent/SnackbarContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { typographyOf } from '@fountain-ui/styles';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { createFontStyle, css, useTheme } from '../styles';
@@ -10,7 +10,7 @@ import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
 import StatusIcon from './StatusIcon';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
@@ -19,12 +19,17 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
         root: {
             flexDirection: 'row',
             alignItems: 'center',
+            alignSelf: 'center',
             backgroundColor: theme.palette.surface.accent,
             borderRadius: 22,
+            maxWidth: 400,
             paddingBottom: theme.spacing(2.25),
             paddingHorizontal: theme.spacing(4),
             paddingTop: theme.spacing(2),
         },
+        actionButton: {
+            marginLeft: theme.spacing(6),
+        },
     };
 };
 
@@ -71,12 +76,17 @@ export default function SnackbarContent(props: SnackbarContentProps) {
             fontFamily: 'LexendDeca-SemiBold',
             letterSpacing: -0.26,
         }),
-        color: theme.palette.text.accent,
+        color: '#0BCC99',
+        // TODO: change color.
+        // color: theme.palette.text.accent,
     });
 
+    const hasActionButton = !!(actionContent && onPress);
+
     const rootStyle = css([
         styles.root,
         startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,
+        hasActionButton ? { width: '100%' } : undefined,
         styleProp,
     ]);
 
@@ -119,14 +129,14 @@ export default function SnackbarContent(props: SnackbarContentProps) {
                 <React.Fragment>
                     <Spacer flex={1}/>
 
-                    <Spacer size={1}/>
-
-                    {typeof actionContent === 'string' ? (
-                        <Text
-                            children={actionContent}
-                            style={labelFontStyle}
-                        />
-                    ) : (actionContent)}
+                    <View style={styles.actionButton}>
+                        {typeof actionContent === 'string' ? (
+                            <Text
+                                children={actionContent}
+                                style={labelFontStyle}
+                            />
+                        ) : (actionContent)}
+                    </View>
                 </React.Fragment>
             ) : null}
         </ButtonBase>

package/src/SnackbarContent/StatusIcon.tsx

@@ -17,7 +17,6 @@ export default function StatusIcon(props: StatusIconProps) {
             return (
                 <CheckCircle
                     color={'accent'}
-                    enableV2={true}
                     height={17}
                     width={14}
                 />
@@ -25,7 +24,6 @@ export default function StatusIcon(props: StatusIconProps) {
         case 'fail':
             return (
                 <InfoCircle
-                    enableV2={true}
                     fill={theme.palette.status.danger}
                     height={17}
                     width={14}

package/src/SnackbarContent/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacySnackbarContent';
-export type { default as SnackbarContentProps } from './LegacySnackbarContentProps';
+export { default } from './SnackbarContent';
+export type { default as SnackbarContentProps } from './SnackbarContentProps';

package/src/SvgIcon/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacySvgIcon';
-export type { default as SvgIconProps } from './LegacySvgIconProps';
+export { default } from './SvgIcon';
+export type { default as SvgIconProps } from './SvgIconProps';

package/src/Tab/Tab.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import Spacer from '../Spacer';
-import TabBase from '../TabBase/TabBase';
+import TabBase from '../TabBase';
 import { css, StyleSheet, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';

package/src/Tab/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTab';
-export type { default as TabProps, TabVariant, TabIndicatorSize } from './LegacyTabProps';
+export { default } from './Tab';
+export type { default as TabProps, TabVariant } from './TabProps';

package/src/TabBase/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTabBase';
+export { default } from './TabBase';
 export type { default as TabBaseProps } from './TabBaseProps';