@fountain-ui/core 3.0.0-alpha.23 → 3.0.0-alpha.25

package/src/Chip/Chip.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import ButtonBase from '../ButtonBase';
-import { Close } from '../internal';
+import { ChipClose } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type ChipProps from './ChipProps';
@@ -24,7 +24,8 @@ export default function Chip(props: ChipProps) {
 
     const {
         container: containerStyle,
-        closeButton: closeButtonStyle,
+        closeButtonContainer: closeButtonContainerStyle,
+        closeIconSize,
         label: labelStyle,
         startElement: startElementStyle,
         startElementContainer: startElementContainerStyle,
@@ -57,10 +58,13 @@ export default function Chip(props: ChipProps) {
             />
 
             {selected ? (
-                <Close
-                    color={'baseInverse'}
-                    style={closeButtonStyle}
-                />
+                <View style={closeButtonContainerStyle}>
+                    <ChipClose
+                        color={'baseInverse'}
+                        height={closeIconSize?.height}
+                        width={closeIconSize?.width}
+                    />
+                </View>
             ) : null}
         </ButtonBase>
     );

package/src/Chip/useChipStyle.ts

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
 import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    closeButton?: FountainUiStyle;
+    closeButtonContainer?: FountainUiStyle;
+    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;
     label: TextStyle;
     startElement?: FountainUiStyle;
     startElementContainer?: FountainUiStyle;
@@ -14,6 +16,28 @@ interface ChipStyle {
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 
+const closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {
+    small: {
+        marginLeft: 8,
+        paddingTop: 1,
+    },
+    large: {
+        marginLeft: 10,
+        paddingTop: 1,
+    },
+};
+
+const closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {
+    small: {
+        height: 14,
+        width: 8.17,
+    },
+    large: {
+        height: 16,
+        width: 9,
+    },
+};
+
 // TODO: need to refactoring...
 export default function useChipStyle(
     size: ChipSize,
@@ -35,19 +59,6 @@ export default function useChipStyle(
             }),
         };
 
-        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {
-            small: {
-                height: 14,
-                marginLeft: theme.spacing(2),
-                width: 8.17,
-            },
-            large: {
-                height: 17,
-                marginLeft: theme.spacing(2.5),
-                width: 9,
-            },
-        };
-
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
             backgroundColor: selected ? theme.palette.fill.base
@@ -115,7 +126,8 @@ export default function useChipStyle(
             default: {
                 container: {
                     paddingBottom: theme.spacing(1.75),
-                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
                     paddingTop: theme.spacing(1.5),
                 },
             },
@@ -127,7 +139,8 @@ export default function useChipStyle(
                 ...variantStyleMap[startElementVariant]?.container,
                 ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            closeButton: closeButtonStyleMap[size],
+            closeButtonContainer: closeButtonContainerStyleMap[size],
+            closeIconSize: closeIconSize[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
             startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,

package/src/Dialog/useDialogStyle.ts

@@ -42,7 +42,7 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
             },
             full: {
                 paddingBottom: bottomSafeAreaInset,
-                paddingTop: topSafeAreaInset,
+                paddingTop: Math.max(0, topSafeAreaInset - 3),
             },
         };
 

package/src/TextField/TextField.tsx

@@ -19,6 +19,13 @@ const styles = StyleSheet.create({
     input: {
         flexGrow: 1,
     },
+    inputWrapper: {
+        flexGrow: 1,
+    },
+    placeholderWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+    },
     secureToggleButton: {
         alignItems: 'flex-end',
         padding: 0,
@@ -49,6 +56,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
@@ -103,11 +111,15 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const inputStyle = css([
         styles.input,
         variantStyles.inputStyle,
+        variantStyles.inputFontStyle,
         Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
-    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+    const placeholderFontStyle = css([
+        variantStyles.inputFontStyle,
+        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },
+    ]);
 
     const containerStyle = css([
         styles.root,
@@ -140,19 +152,33 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                     </View>
                 ) : null}
 
-                <TextInput
-                    autoFocus={autoFocus}
-                    editable={!disabled}
-                    onBlur={handleBlur}
-                    onChangeText={handleChangeText}
-                    onFocus={handleFocus}
-                    placeholderTextColor={placeholderTextColor}
-                    ref={ref}
-                    secureTextEntry={secureTextEntry}
-                    style={inputStyle}
-                    value={value}
-                    {...otherProps}
-                />
+                <View style={styles.inputWrapper}>
+                    <View
+                        pointerEvents={'none'}
+                        style={styles.placeholderWrapper}
+                    >
+                        {placeholderProp && !value ? (
+                            <Text
+                                children={placeholderProp}
+                                numberOfLines={1}
+                                style={placeholderFontStyle}
+                            />
+                        ) : null}
+                    </View>
+
+                    <TextInput
+                        autoFocus={autoFocus}
+                        editable={!disabled}
+                        onBlur={handleBlur}
+                        onChangeText={handleChangeText}
+                        onFocus={handleFocus}
+                        ref={ref}
+                        secureTextEntry={secureTextEntry}
+                        style={inputStyle}
+                        value={value}
+                        {...otherProps}
+                    />
+                </View>
 
                 {showClearButton && value?.length && value.length > 0 ? (
                     <IconButton

package/src/TextField/useVariantStyleMap.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
@@ -6,6 +7,7 @@ import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
@@ -53,16 +55,16 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     inputStyle: {
                         padding: 0,
                         paddingRight: 16,
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 18,
-                                lineHeight: 27,
-                                fontFamily: 'PretendardStd-SemiBold',
-                                letterSpacing: 0,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 18,
+                            lineHeight: 27,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
@@ -84,16 +86,16 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     },
                     inputStyle: {
                         padding: 0,
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 16,
-                                lineHeight: 19.2,
-                                fontFamily: 'PretendardStd-SemiBold',
-                                letterSpacing: -0.16,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 16,
+                            lineHeight: 19.2,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: -0.16,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                 };
         }
     }, [theme, borderColor, hintColor, variant, isFocused]);

package/src/internal/icons/ChipClose.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z"
+    />,
+    'ChipClose',
+    '0 0 9 15',
+);

package/src/internal/icons/index.ts

@@ -7,6 +7,7 @@ export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
+export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';