💄 style: Update Form style

lobehub · Apr 27, 2024 · 734a226 · 734a226
1 parent 53090c1
commit 734a226
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 171 deletions.
diff --git a/src/Form/components/FormDivider.tsx b/src/Form/components/FormDivider.tsx
@@ -3,6 +3,6 @@ import { memo } from 'react';
 
 export type FormDividerProps = DividerProps;
 const Divider = memo<FormDividerProps>(({ style, ...rest }) => (
-  <AntDivider style={{ margin: 0, opacity: 0.5, ...style }} {...rest} />
+  <AntDivider style={{ margin: 0, opacity: 0.66, ...style }} {...rest} />
 ));
 export default Divider;
diff --git a/src/Form/components/FormFooter.tsx b/src/Form/components/FormFooter.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { DivProps } from '@/types';
+import { type DivProps } from '@/types';
 
 export type FormFooterProps = DivProps;
 

diff --git a/src/Form/components/FormGroup.tsx b/src/Form/components/FormGroup.tsx
@@ -9,137 +9,140 @@ import Icon, { type IconProps } from '@/Icon';
 export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
 export type ItemsType = 'group' | 'flat';
 
-export const useStyles = createStyles(
-  ({ css, cx, token, isDarkMode, responsive, prefixCls }, variant: FormVariant) => {
-    const pureStyle = css`
-      background: transparent;
-      border: none;
-      border-radius: 0;
-
-      .${prefixCls}-collapse-header {
-        background: transparent !important;
-        border-radius: 0 !important;
-      }
-
-      .${prefixCls}-collapse-content-box {
-        background: transparent;
-        border-radius: 0;
-      }
-    `;
+export const useStyles = createStyles(({ css, cx, token, isDarkMode, responsive, prefixCls }) => {
+  const pureStyle = css`
+    background: transparent;
+    border: none;
+    border-radius: 0;
+
+    .${prefixCls}-collapse-header {
+      padding-block: 0 20px !important;
+      padding-inline: 2px !important;
+      background: transparent !important;
+      border-radius: 0 !important;
+    }
 
-    const blockStyle = css`
-      background: ${token.colorFillQuaternary};
-      border: none;
-      border-radius: ${token.borderRadiusLG}px;
+    .${prefixCls}-collapse-content {
+      border-color: ${token.colorFillSecondary};
+    }
 
-      .${prefixCls}-collapse-content {
-        border: none !important;
-      }
-    `;
-    const ghostStyle = css`
+    .${prefixCls}-collapse-content-box {
+      padding-inline: 2px !important;
       background: transparent;
-      border: 1px solid ${token.colorBorderSecondary};
-      .${prefixCls}-collapse-header {
-        background: transparent !important;
-      }
-
-      .${prefixCls}-collapse-content-box {
-        background: transparent;
-      }
-    `;
+      border-radius: 0;
+    }
+  `;
 
-    const defaultStyle = css`
-      background: ${token.colorFillQuaternary};
-      border: 1px solid ${token.colorBorderSecondary};
-      border-radius: ${token.borderRadiusLG}px;
-    `;
+  const blockStyle = css`
+    background: ${token.colorFillQuaternary};
+    border: none;
+    border-radius: ${token.borderRadiusLG}px;
 
-    const variantStyle = cx(
-      variant === 'default' && defaultStyle,
-      variant === 'block' && blockStyle,
-      variant === 'ghost' && ghostStyle,
-      variant === 'pure' && pureStyle,
-    );
+    .${prefixCls}-collapse-content {
+      border: none !important;
+    }
+  `;
+  const ghostStyle = css`
+    background: transparent;
+    border: 1px solid ${token.colorBorderSecondary};
+    .${prefixCls}-collapse-header {
+      background: transparent !important;
+    }
 
-    return {
-      flatGroup: cx(
-        css`
-          overflow: hidden;
-          padding-inline: 16px;
-        `,
-        variantStyle,
-      ),
-
-      group: cx(
-        isDarkMode &&
-          css`
-            .${prefixCls}-collapse-content {
-              background: transparent;
-              border-color: ${token.colorBorderSecondary};
-            }
-
-            .${prefixCls}-collapse-header {
-              background: ${token.colorFillTertiary};
-            }
-          `,
+    .${prefixCls}-collapse-content-box {
+      background: transparent;
+    }
+  `;
+
+  const defaultStyle = css`
+    background: ${token.colorFillQuaternary};
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `;
+
+  return {
+    blockStyle,
+    defaultStyle,
+    flatGroup: css`
+      overflow: hidden;
+      padding-inline: 16px;
+    `,
+    ghostStyle,
+    group: cx(
+      isDarkMode &&
         css`
-          overflow: hidden;
-          flex: none;
-
-          .${prefixCls}-collapse-item {
-            border: none;
+          .${prefixCls}-collapse-content {
+            background: transparent;
+            border-color: ${token.colorBorderSecondary};
           }
 
           .${prefixCls}-collapse-header {
-            align-items: center !important;
-            border-radius: 0 !important;
+            background: ${token.colorFillTertiary};
           }
+        `,
+      css`
+        overflow: hidden;
+        flex: none;
 
-          .${prefixCls}-collapse-content-box {
-            padding-block: 0 !important;
-          }
+        .${prefixCls}-collapse-item {
+          border: none;
+        }
 
-          .${prefixCls}-form-item-label {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-          }
-        `,
-        variantStyle,
-      ),
-      icon: css`
-        transition: all 100ms ${token.motionEaseOut};
-      `,
-      mobileFlatGroup: css`
-        border-radius: ${token.borderRadiusLG}px;
-      `,
-      mobileGroupBody: css`
-        padding-block: 0;
-        padding-inline: 16px;
-        background: ${token.colorBgContainer};
-      `,
-      mobileGroupHeader: css`
-        padding: 16px;
-        background: ${token.colorBgLayout};
-      `,
-      title: css`
-        align-items: center;
-        font-size: 16px;
-        font-weight: 600;
+        .${prefixCls}-collapse-header {
+          align-items: center !important;
+          border-radius: 0 !important;
+        }
 
-        .anticon {
-          color: ${token.colorPrimary};
+        .${prefixCls}-collapse-content-box {
+          padding-block: 0 !important;
         }
 
-        ${responsive.mobile} {
-          font-size: 14px;
-          font-weight: 400;
-          opacity: 0.5;
+        .${prefixCls}-form-item-label {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
         }
       `,
-    };
-  },
-);
+    ),
+
+    icon: css`
+      transition: all 100ms ${token.motionEaseOut};
+    `,
+    mobileFlatGroup: css`
+      border-radius: ${token.borderRadiusLG}px;
+    `,
+    mobileGroupBody: css`
+      padding-block: 0;
+      padding-inline: 16px;
+      background: ${token.colorBgContainer};
+    `,
+    mobileGroupHeader: css`
+      padding: 16px;
+      background: ${token.colorBgLayout};
+    `,
+    pureStyle,
+    pureTitle: css`
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 24px;
+    `,
+    title: css`
+      align-items: center;
+      font-size: 16px;
+      font-weight: 600;
+
+      .anticon {
+        color: ${token.colorPrimary};
+      }
+
+      ${responsive.mobile} {
+        font-size: 14px;
+        font-weight: 400;
+        opacity: 0.5;
+      }
+    `,
+  };
+});
 
 export interface FormGroupProps extends CollapseProps {
   children: ReactNode;
@@ -166,21 +169,32 @@ const FormGroup = memo<FormGroupProps>(
     const { mobile } = useResponsive();
     const { cx, styles } = useStyles(variant);
 
+    const variantStyle = cx(
+      variant === 'default' && styles.defaultStyle,
+      variant === 'block' && styles.blockStyle,
+      variant === 'ghost' && styles.ghostStyle,
+      variant === 'pure' && styles.pureStyle,
+    );
+
     const titleContent = (
-      <Flexbox className={styles.title} gap={8} horizontal>
+      <Flexbox
+        className={cx(styles.title, variant === 'pure' && styles.pureTitle)}
+        gap={8}
+        horizontal
+      >
         {icon && <Icon icon={icon} />}
         {title}
       </Flexbox>
     );
 
     if (itemsType === 'flat') {
-      if (mobile)
-        return (
-          <Flexbox className={cx(styles.mobileFlatGroup, styles.mobileGroupBody, className)}>
-            {children}
-          </Flexbox>
-        );
-      return <Flexbox className={cx(styles.flatGroup, className)}>{children}</Flexbox>;
+      return mobile ? (
+        <Flexbox className={cx(styles.mobileFlatGroup, styles.mobileGroupBody, className)}>
+          {children}
+        </Flexbox>
+      ) : (
+        <Flexbox className={cx(styles.flatGroup, variantStyle, className)}>{children}</Flexbox>
+      );
     }
 
     if (mobile)
@@ -196,16 +210,18 @@ const FormGroup = memo<FormGroupProps>(
 
     return (
       <Collapse
-        className={cx(styles.group, className)}
+        className={cx(styles.group, variantStyle, className)}
         defaultActiveKey={defaultActive ? [1] : undefined}
-        expandIcon={({ isActive }) => (
-          <Icon
-            className={styles.icon}
-            icon={ChevronDown}
-            size={{ fontSize: 16 }}
-            style={isActive ? {} : { rotate: '-90deg' }}
-          />
-        )}
+        expandIcon={({ isActive }) =>
+          variant === 'pure' ? null : (
+            <Icon
+              className={styles.icon}
+              icon={ChevronDown}
+              size={{ fontSize: 16 }}
+              style={isActive ? {} : { rotate: '-90deg' }}
+            />
+          )
+        }
         items={[
           {
             children,

diff --git a/src/Form/components/FormInput.tsx b/src/Form/components/FormInput.tsx