💄 style: Update SumbitFooter

Author: canisminor1990

src/ColorSwatches/demos/index.tsx

@@ -12,7 +12,7 @@ export default () => {
       enableColorSwatches: true,
       gap: {
         step: 1,
-        value: 4,
+        value: 6,
       },
       shape: {
         options: ['circle', 'square'],
@@ -33,7 +33,7 @@ export default () => {
       <ColorSwatches
         colors={[
           {
-            color: '',
+            color: 'rgba(0, 0, 0, 0)',
             label: 'Default',
           },
           {

src/ColorSwatches/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { ColorPicker } from 'antd';
+import chroma from 'chroma-js';
 import { CheckIcon } from 'lucide-react';
 import { readableColor, rgba } from 'polished';
 import { memo } from 'react';
@@ -57,18 +58,23 @@ const ColorSwatches = memo<ColorSwatchesProps>(
       active && active !== theme.colorPrimary && !colors.some((c) => c.color === active);
 
     return (
-      <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap', ...style }} {...rest}>
+      <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap', ...style }} {...rest}>
         {enableColorSwatches &&
           colors.map((c) => {
             const color = c.color || theme.colorPrimary;
             const isActive = (!active && !c.color) || color === active;
+            const isTransparent = c.color === 'transparent' || chroma(c.color).alpha() === 0;
             return (
               <Tooltip key={c.label} title={c.label}>
                 <Center
-                  className={cx(styles.container, isActive && styles.active)}
+                  className={cx(
+                    styles.container,
+                    isTransparent && styles.transparent,
+                    isActive && styles.active,
+                  )}
                   onClick={() => setActive(c.color || undefined)}
                   style={{
-                    background: color,
+                    background: isTransparent ? undefined : color,
                     borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,
                   }}
                 >

src/ColorSwatches/style.ts

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token, prefixCls }, size: number) => {
   return {
     active: css`
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 20%);
+      box-shadow: inset 0 0 0 1px ${token.colorFill};
     `,
     conic: css`
       background: conic-gradient(
@@ -37,7 +37,7 @@ export const useStyles = createStyles(({ css, token, prefixCls }, size: number)
       min-height: ${size}px;
 
       background: ${token.colorBgContainer};
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);
+      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};
 
       &:hover {
         box-shadow:
@@ -57,11 +57,11 @@ export const useStyles = createStyles(({ css, token, prefixCls }, size: number)
       padding: 0;
 
       border: none;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);
+      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};
 
       &:hover {
         box-shadow:
-          inset 0 0 0 1px rgba(0, 0, 0, 5%),
+          inset 0 0 0 1px ${token.colorFillSecondary},
           0 0 0 2px ${token.colorText};
       }
 
@@ -72,5 +72,15 @@ export const useStyles = createStyles(({ css, token, prefixCls }, size: number)
         border-radius: inherit;
       }
     `,
+
+    transparent: css`
+      background-image: conic-gradient(
+        ${token.colorFillSecondary} 25%,
+        transparent 25% 50%,
+        ${token.colorFillSecondary} 50% 75%,
+        transparent 75% 100%
+      );
+      background-size: 50% 50%;
+    `,
   };
 });

src/Form/components/FormSubmitFooter.tsx

@@ -45,10 +45,10 @@ export interface FormSubmitFooterProps extends FlexboxProps {
   float?: boolean;
   onReset?: () => void;
   resetButtonProps?: Omit<ButtonProps, 'children'>;
-  resetText?: ReactNode;
   saveButtonProps?: Omit<ButtonProps, 'children'>;
-  saveText?: ReactNode;
   texts?: {
+    reset?: string;
+    submit?: string;
     unSaved?: string;
     unSavedWarning?: string;
   };
@@ -59,8 +59,6 @@ const FormSubmitFooter = memo<FormSubmitFooterProps>(
     enableReset = true,
     buttonProps,
     float,
-    saveText = 'Submit',
-    resetText = 'Reset',
     onReset,
     saveButtonProps,
     resetButtonProps,
@@ -135,7 +133,7 @@ const FormSubmitFooter = memo<FormSubmitFooterProps>(
             {...buttonProps}
             {...resetButtonProps}
           >
-            {resetText}
+            {texts?.reset || 'Reset'}
           </Button>
         )}
         <Button
@@ -146,7 +144,7 @@ const FormSubmitFooter = memo<FormSubmitFooterProps>(
           {...buttonProps}
           {...saveButtonProps}
         >
-          {saveText}
+          {texts?.submit || 'Submit'}
         </Button>
       </>
     );