@fountain-ui/core 3.0.0-alpha.22 → 3.0.0-alpha.24

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/Image/Image.tsx

@@ -34,7 +34,7 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
             backgroundColor: theme.palette.paper.grey,
         },
         outlined: {
-            borderWidth: StyleSheet.hairlineWidth,
+            borderWidth: 0.5,
             borderStyle: 'solid',
             borderColor: theme.palette.border.weak,
         },
@@ -156,4 +156,4 @@ export default function Image(props: ImageProps) {
             ) : null}
         </View>
     );
-};
+};

package/src/TextField/useVariantStyleMap.ts

@@ -48,11 +48,11 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
                         minHeight: 60,
+                        paddingVertical: 16,
                     },
                     inputStyle: {
-                        paddingLeft: 0,
-                        paddingRight: theme.spacing(4),
-                        paddingVertical: theme.spacing(4),
+                        padding: 0,
+                        paddingRight: 16,
                         ...createFontStyle(theme, {
                             selector: (_) => typographyOf({
                                 fontSize: 18,
@@ -83,6 +83,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         paddingTop: 11,
                     },
                     inputStyle: {
+                        padding: 0,
                         ...createFontStyle(theme, {
                             selector: (_) => typographyOf({
                                 fontSize: 16,

package/src/hooks/useContentContainerStyle.ts

@@ -7,6 +7,7 @@ type Breakpoint = keyof Theme['breakpoints']['values'];
 export interface Config {
     maxWidth?: number;
     styleProvider?: (theme: Theme) => FountainUiStyle;
+    isHomeScreen?: boolean;
 }
 
 function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
@@ -19,7 +20,25 @@ function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: numb
     }
 }
 
-function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
+function getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
+    switch (breakpoint) {
+        case 'xxs':
+        case 'xs':
+            return theme.spacing(3);
+        case 'sm':
+            return theme.spacing(6);
+        case 'md':
+        case 'lg':
+        default:
+            return theme.spacing(4);
+    }
+}
+
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {
+    if (isHomeScreen) {
+        return getHomeScreenPaddingHorizontal(theme, breakpoint);
+    }
+
     switch (breakpoint) {
         case 'sm':
             return theme.spacing(6);
@@ -32,6 +51,7 @@ export default function useContentContainerStyle(config: Config = {}): FountainU
     const {
         maxWidth: customMaxWidth,
         styleProvider,
+        isHomeScreen = false,
     } = config;
 
     const theme = useTheme();
@@ -44,7 +64,7 @@ export default function useContentContainerStyle(config: Config = {}): FountainU
         {
             alignSelf: 'center',
             maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
-            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
             width: '100%',
         },
         additionalStyle,

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';