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

package/src/Tab/LegacyTab.tsx

@@ -0,0 +1,141 @@
+import React, { cloneElement } from 'react';
+import { Platform, Text, View } from 'react-native';
+import Badge from '../Badge';
+import TabBase from '../TabBase';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import type TabProps from './LegacyTabProps';
+import TabIndicator from './TabIndicator';
+
+const styles = StyleSheet.create({
+    root: {
+        // TODO: Remove redundant platform checking
+        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
+        minHeight: 40,
+    },
+    bottomNavigation: {
+        minHeight: 56,
+    },
+    filledInner: {
+        justifyContent: 'center',
+    },
+    tertiary: {
+        minHeight: 44,
+    },
+});
+
+export default function Tab(props: TabProps) {
+    const {
+        badgeVisible = false,
+        children,
+        enableIndicator = false,
+        icon: defaultIcon,
+        indicatorColor = 'primary',
+        indicatorSize = 'full',
+        selected = false,
+        selectedIcon,
+        variant = 'primary',
+        style,
+        onTabInnerLayout,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const vertical = variant === 'bottom-navigation';
+
+    const color = selected
+        ? theme.palette.text.primary
+        : variant === 'contained'
+            ? theme.palette.text.secondary
+            : theme.palette.text.hint;
+
+    const containedStyle = {
+        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
+        borderRadius: theme.shape.roundnessExtra,
+        borderWidth: selected ? 1.5 : 1,
+        minHeight: 'auto',
+        paddingHorizontal: theme.spacing(3),
+        paddingVertical: theme.spacing(1.5),
+    };
+
+    const tabBaseStyle = css([
+        styles.root,
+        variant === 'bottom-navigation' && styles.bottomNavigation,
+        variant === 'contained' && containedStyle,
+        variant === 'tertiary' && styles.tertiary,
+        style,
+    ]);
+
+    const tabInnerStyle = css([
+        styles.root,
+        styles.filledInner,
+    ]);
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => {
+            switch (variant) {
+                case 'primary':
+                    return typo.h2;
+                case 'secondary':
+                    return typo.button2;
+                case 'tertiary':
+                    return typo.h3;
+                case 'contained':
+                    return selected
+                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
+                        : typo.body2;
+                default:
+                    return typo.flag;
+            }
+        },
+        color,
+    });
+    const pressEffect = selected ? 'none' : 'opacity';
+
+    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
+    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
+
+    const tabElement = typeof children !== 'string' ? (
+        React.cloneElement(children, {
+            selected,
+        })
+    ) : (
+        <React.Fragment>
+            <Badge
+                children={iconElement}
+                invisible={!badgeVisible}
+            />
+
+            <Text
+                children={children}
+                style={css(fontStyle)}
+            />
+        </React.Fragment>
+    );
+    const tabIndicator = (enableIndicator && selected)
+        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
+        : null;
+
+    return (
+        <TabBase
+            pressEffect={pressEffect}
+            style={tabBaseStyle}
+            vertical={vertical}
+            {...otherProps}
+        >
+            {indicatorSize === 'fit-content' ? (
+                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
+                    {tabElement}
+
+                    {tabIndicator}
+                </View>
+            ) : (
+                <React.Fragment>
+                    {tabElement}
+
+                    {tabIndicator}
+                </React.Fragment>
+            )}
+        </TabBase>
+    );
+};

package/src/Tab/LegacyTabProps.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import type { TabBaseProps } from '../TabBase';
+import type { OverridableComponentProps } from '../types';
+
+export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
+export type TabIndicatorColor = 'primary' | 'secondary';
+export type TabIndicatorSize = 'full' | 'fit-content';
+
+export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
+    /**
+     * If `true`, the badge is visible.
+     * @default false
+     */
+    badgeVisible?: boolean;
+
+    /**
+     * The label of the Tab.
+     */
+    children: string | React.ReactElement;
+
+    /**
+     * If `true`, the indicator is enabled.
+     * @default false
+     */
+    enableIndicator?: boolean;
+
+    /**
+     * If `true`, the component is selected.
+     * @default false
+     */
+    selected?: boolean;
+
+    /**
+     * Element placed before the children.
+     */
+    icon?: React.ReactElement;
+
+    /**
+     * Tab indicator color
+     * @default 'primary'
+     */
+    indicatorColor?: TabIndicatorColor;
+
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
+
+    /**
+     * If supplied, use this icon on selected state.
+     */
+    selectedIcon?: React.ReactElement;
+
+    /**
+     * The variant to use.
+     * @default 'primary'
+     */
+    variant?: TabVariant;
+
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
+}> {}

package/src/Tab/Tab.tsx

@@ -1,26 +1,23 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
-import TabBase from '../TabBase';
-import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import Spacer from '../Spacer';
+import TabBase from '../TabBase/TabBase';
+import { css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';
-import TabIndicator from './TabIndicator';
+import type { TabVariant } from './TabProps';
+import useVariantStyleMap from './useVariantStyleMap';
 
 const styles = StyleSheet.create({
     root: {
         // TODO: Remove redundant platform checking
         ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
-        minHeight: 40,
-    },
-    bottomNavigation: {
-        minHeight: 56,
     },
     filledInner: {
+        alignItems: 'center',
         justifyContent: 'center',
     },
-    tertiary: {
-        minHeight: 44,
-    },
 });
 
 export default function Tab(props: TabProps) {
@@ -29,12 +26,10 @@ export default function Tab(props: TabProps) {
         children,
         enableIndicator = false,
         icon: defaultIcon,
-        indicatorColor = 'primary',
-        indicatorSize = 'full',
         selected = false,
         selectedIcon,
-        variant = 'primary',
-        style,
+        variant = 'default' as TabVariant,
+        style: styleProp,
         onTabInnerLayout,
         ...otherProps
     } = props;
@@ -43,78 +38,50 @@ export default function Tab(props: TabProps) {
 
     const vertical = variant === 'bottom-navigation';
 
-    const color = selected
-        ? theme.palette.text.primary
-        : variant === 'contained'
-            ? theme.palette.text.secondary
-            : theme.palette.text.hint;
-
-    const containedStyle = {
-        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
-        borderRadius: theme.shape.roundnessExtra,
-        borderWidth: selected ? 1.5 : 1,
-        minHeight: 'auto',
-        paddingHorizontal: theme.spacing(3),
-        paddingVertical: theme.spacing(1.5),
-    };
+    const {
+        container: containerStyle,
+        inner: innerStyle,
+        label: labelStyle,
+    } = useVariantStyleMap(variant, selected);
 
     const tabBaseStyle = css([
         styles.root,
-        variant === 'bottom-navigation' && styles.bottomNavigation,
-        variant === 'contained' && containedStyle,
-        variant === 'tertiary' && styles.tertiary,
-        style,
+        containerStyle,
+        styleProp,
     ]);
 
     const tabInnerStyle = css([
-        styles.root,
         styles.filledInner,
+        innerStyle,
     ]);
 
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => {
-            switch (variant) {
-                case 'primary':
-                    return typo.h2;
-                case 'secondary':
-                    return typo.button2;
-                case 'tertiary':
-                    return typo.h3;
-                case 'contained':
-                    return selected
-                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
-                        : typo.body2;
-                default:
-                    return typo.flag;
-            }
-        },
-        color,
-    });
     const pressEffect = selected ? 'none' : 'opacity';
 
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
+    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
+    const iconElement = cloneElementSafely(icon, { fill: iconColor });
 
     const tabElement = typeof children !== 'string' ? (
-        React.cloneElement(children, {
+        cloneElementSafely(children, {
             selected,
         })
     ) : (
         <React.Fragment>
-            <Badge
-                children={iconElement}
-                invisible={!badgeVisible}
-            />
+            {iconElement ? (
+                <React.Fragment>
+                    <Badge invisible={!badgeVisible}>
+                        {iconElement}
+                    </Badge>
 
-            <Text
-                children={children}
-                style={css(fontStyle)}
-            />
+                    <Spacer size={1.25}/>
+                </React.Fragment>
+            ) : null}
+
+            <Text style={css(labelStyle)}>
+                {children}
+            </Text>
         </React.Fragment>
     );
-    const tabIndicator = (enableIndicator && selected)
-        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
-        : null;
 
     return (
         <TabBase
@@ -123,19 +90,9 @@ export default function Tab(props: TabProps) {
             vertical={vertical}
             {...otherProps}
         >
-            {indicatorSize === 'fit-content' ? (
-                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
-                    {tabElement}
-
-                    {tabIndicator}
-                </View>
-            ) : (
-                <React.Fragment>
-                    {tabElement}
-
-                    {tabIndicator}
-                </React.Fragment>
-            )}
+            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
+                {tabElement}
+            </View>
         </TabBase>
     );
 };

package/src/Tab/TabIndicator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
-import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
+import type { TabIndicatorColor, TabIndicatorSize } from './LegacyTabProps';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
 
@@ -22,7 +22,10 @@ const useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) =>
         };
     };
 
-const TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
+const TabIndicator = function TabIndicator({
+    indicatorSize,
+    color,
+}: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
     const styles = useStyles(color, indicatorSize);
 
     return (

package/src/Tab/TabProps.ts

@@ -3,9 +3,8 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
-export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
-export type TabIndicatorColor = 'primary' | 'secondary';
-export type TabIndicatorSize = 'full' | 'fit-content';
+export const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;
+export type TabVariant = typeof tabVariants[number];
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
@@ -36,20 +35,6 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     icon?: React.ReactElement;
 
-    /**
-     * Tab indicator color
-     * @default 'primary'
-     */
-    indicatorColor?: TabIndicatorColor;
-
-    /**
-     * The size of tab indicator.
-     * 'full' adjusts the indicator to the size of the Tab,
-     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
-     * @default 'full'
-     */
-    indicatorSize?: TabIndicatorSize;
-
     /**
      * If supplied, use this icon on selected state.
      */
@@ -57,7 +42,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
 
     /**
      * The variant to use.
-     * @default 'primary'
+     * @default 'default'
      */
     variant?: TabVariant;
 

package/src/Tab/index.ts

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

package/src/Tab/useVariantStyleMap.ts

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import { TextStyle } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+import type { TabVariant } from './TabProps';
+
+interface VariantStyle {
+    container: FountainUiStyle;
+    inner?: FountainUiStyle;
+    label: TextStyle;
+}
+
+export default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {
+    const theme = useTheme();
+
+    return useMemo<VariantStyle>(() => {
+        switch (variant) {
+            case 'circular':
+                return {
+                    container: {
+                        paddingHorizontal: theme.spacing(0.75),
+                        paddingVertical: theme.spacing(1),
+                    },
+                    inner: {
+                        backgroundColor: selected
+                            ? theme.palette.fill.base
+                            : theme.palette.fill.weaker,
+                        borderRadius: theme.shape.radius.full,
+                        paddingHorizontal: theme.spacing(4),
+                        paddingVertical: theme.spacing(1.75),
+                    },
+                    label: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 14,
+                            lineHeight: 18.2,
+                            fontFamily: 'Pretendard-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: selected
+                            ? theme.palette.text.strongInverse
+                            : theme.palette.text.strong,
+                    }),
+                };
+            case 'bottom-navigation':
+                return {
+                    container: {
+                        alignItems: 'center',
+                        height: 49,
+                        justifyContent: 'flex-start',
+                        paddingTop: theme.spacing(2.625),
+                        width: 48,
+                    },
+                    label: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 10,
+                            lineHeight: 10,
+                            fontFamily: 'Pretendard-Medium',
+                            letterSpacing: -0.1,
+                        }),
+                        color: selected
+                            ? theme.palette.text.strong
+                            : theme.palette.text.base,
+                    }),
+                };
+            case 'default':
+            default:
+                return {
+                    container: {
+                        padding: theme.spacing(2.5),
+                    },
+                    label: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 15,
+                            lineHeight: 18.75,
+                            fontFamily: 'Pretendard-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: selected
+                            ? theme.palette.text.strong
+                            : theme.palette.text.base,
+                    }),
+                };
+        }
+    }, [theme, variant, selected]);
+}

package/src/TabBase/LegacyTabBase.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import ButtonBase from '../ButtonBase';
+import type TabBaseProps from './TabBaseProps';
+
+type TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;
+
+const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingHorizontal: theme.spacing(3),
+            minHeight: 48,
+        },
+        row: {
+            flexDirection: 'row',
+        },
+        column: {
+            flexDirection: 'column',
+        },
+    };
+};
+
+export default function TabBase(props: TabBaseProps) {
+    const {
+        children,
+        disabled = false,
+        onPress,
+        selected = false,
+        vertical = false,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    return (
+        <ButtonBase
+            onPress={onPress}
+            disabled={disabled}
+            style={css([
+                styles.root,
+                vertical ? styles.column : styles.row,
+                style,
+            ])}
+            {...otherProps}
+        >
+            {children}
+        </ButtonBase>
+    );
+};

package/src/TabBase/TabBase.tsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
 import ButtonBase from '../ButtonBase';
 import type TabBaseProps from './TabBaseProps';
 
 type TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;
 
 const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
-    const theme = useTheme();
-
     return {
         root: {
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: theme.spacing(3),
-            minHeight: 48,
         },
         row: {
             flexDirection: 'row',

package/src/TabBase/index.ts

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