feat(Input): add more size type

shervinchen · Oct 26, 2024 · 2e41e0b · 2e41e0b
1 parent 220be3a
commit 2e41e0b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 12 deletions.
diff --git a/demo/input/index.tsx b/demo/input/index.tsx
@@ -17,9 +17,11 @@ export function DemoInputTypes() {
 export function DemoInputSizes() {
   return (
     <Unit layout="col">
+      <Input size="xs" placeholder="Extra Small" />
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />
+      <Input size="xl" placeholder="Extra Large" />
     </Unit>
   );
 }

diff --git a/packages/Input/Input.styles.ts b/packages/Input/Input.styles.ts
@@ -20,17 +20,30 @@ export const useInputStyles = ({
   const sizes: {
     [key in InputSizes]: InputSizeStyles;
   } = {
+    xs: {
+      fontSize: '12px',
+      height: '24px',
+      horizontalPadding: '8px',
+    },
     sm: {
       fontSize: '14px',
-      height: '32px',
+      height: '28px',
+      horizontalPadding: '12px',
     },
     md: {
       fontSize: '14px',
-      height: '40px',
+      height: '32px',
+      horizontalPadding: '12px',
     },
     lg: {
+      fontSize: '14px',
+      height: '36px',
+      horizontalPadding: '12px',
+    },
+    xl: {
       fontSize: '16px',
-      height: '48px',
+      height: '40px',
+      horizontalPadding: '16px',
     },
   };
   const styles: {
@@ -103,6 +116,7 @@ export const useInputCSS = ({ type, size, width, disabled }: InputProps) => {
   const {
     fontSize,
     height,
+    horizontalPadding,
     color,
     borderColor,
     backgroundColor = 'transparent',
@@ -118,7 +132,7 @@ export const useInputCSS = ({ type, size, width, disabled }: InputProps) => {
       box-sizing: border-box;
       display: inline-flex;
       height: ${height};
-      padding: 0 12px;
+      padding: 0 ${horizontalPadding};
       line-height: normal;
       box-shadow: none;
       font-size: ${fontSize};

diff --git a/packages/Input/Input.types.ts b/packages/Input/Input.types.ts
@@ -2,7 +2,7 @@ import { InputHTMLAttributes, ChangeEvent, FocusEvent } from 'react';
 
 export type InputTypes = 'default' | 'primary' | 'warning' | 'error';
 
-export type InputSizes = 'sm' | 'md' | 'lg';
+export type InputSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface BaseInputProps {
   value?: string;
@@ -31,6 +31,7 @@ export type InputProps = BaseInputProps & NativeInputProps;
 export interface InputSizeStyles {
   fontSize?: string;
   height?: string;
+  horizontalPadding?: string;
 }
 
 export interface InputBasicStyles {

diff --git a/packages/Input/__tests__/Input.test.tsx b/packages/Input/__tests__/Input.test.tsx
@@ -12,9 +12,11 @@ const typeColorMap = {
 };
 
 const sizeHeightMap = {
-  sm: '32px',
-  md: '40px',
-  lg: '48px',
+  xs: '24px',
+  sm: '28px',
+  md: '32px',
+  lg: '36px',
+  xl: '40px',
 };
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -107,7 +109,7 @@ describe('Input', () => {
     }
   );
 
-  ['sm', 'md', 'lg'].forEach((item: InputSizes) => {
+  ['xs', 'sm', 'md', 'lg', 'xl'].forEach((item: InputSizes) => {
     test(`should render ${item} size`, () => {
       render(<Input size={item} />);
       expect(screen.getByRole('textbox')).toHaveStyle(
@@ -231,8 +233,8 @@ describe('Input', () => {
         disabled: false,
       })
     );
-    expect(result1.current.height).toBe('40px');
-    expect(result2.current.height).toBe('40px');
+    expect(result1.current.height).toBe('32px');
+    expect(result2.current.height).toBe('32px');
   });
 
   test('should get default focus style when type is unknown or falsy', () => {

diff --git a/packages/Input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Input should match the snapshot 1`] = `
 <DocumentFragment>
   <input
     autocomplete="off"
-    class="raw-input jsx-2920133267"
+    class="raw-input jsx-2241868620"
     placeholder=""
     type="text"
     value=""

diff --git a/src/app/(article)/components/input/input.mdx b/src/app/(article)/components/input/input.mdx
@@ -40,6 +40,9 @@ import { Input } from 'raw-ui';
   scope={{ Grid, Input }}
   code={`
 <Grid gutter={[0, 32]}>
+  <Grid.Col span={24}>
+    <Input size="xs" placeholder="Extra Small" />
+  </Grid.Col>
   <Grid.Col span={24}>
     <Input size="sm" placeholder="Small" />
   </Grid.Col>
@@ -49,6 +52,9 @@ import { Input } from 'raw-ui';
   <Grid.Col span={24}>
     <Input size="lg" placeholder="Large" />
   </Grid.Col>
+  <Grid.Col span={24}>
+    <Input size="xl" placeholder="Extra Small" />
+  </Grid.Col>
 </Grid>
 `}
 />