feat(button): update button round property

examples/test.tsx

@@ -19,6 +19,7 @@ const App: React.FC = () => {
         <Button
           btnType="primary"
           size="lg"
+          round
           onClick={(e) => {
             alert('线上包 测试 success!')
           }}

package.json

@@ -11,7 +11,7 @@
     },
     "scripts": {
         "dev": "vite",
-        "build": "npm run clean && vite build && npm run build-css && npm run copy-readme",
+        "build": "npm run test && npm run clean && vite build && npm run build-css && npm run copy-readme",
         "preview": "vite preview",
         "build-css": "sass ./src/styles/index.scss ./lib/index.css",
         "copy-readme": "cp ./README.md ./lib/README.md",
@@ -87,6 +87,7 @@
         "dotenv-cli": "^6.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-scripts": "^5.0.1",
         "rimraf": "^3.0.2",
         "sass": "^1.55.0",
         "semantic-release": "^19.0.5",
@@ -95,4 +96,4 @@
         "typescript": "^4.6.4",
         "vite": "^3.2.0"
     }
-}
+}

src/App.tsx

@@ -7,6 +7,7 @@ const App: React.FC = () => {
     <Button
       btnType={ButtonType.Primary}
       size={ButtonSize.Large}
+      round
       onClick={(e) => {
         alert('本地包 测试 success!')
       }}

src/components/Button/_style.scss

@@ -25,10 +25,20 @@
 }
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-border-radius-lg
+  );
 }
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-border-radius-sm
+  );
 }
 
 .btn-primary {
@@ -62,3 +72,6 @@
     pointer-events: none;
   }
 }
+.btn-round {
+  border-radius: 999px;
+}

src/components/Button/button.test.tsx

@@ -17,6 +17,10 @@ const disabledProps: ButtonProps = {
   onClick: jest.fn(),
 }
 
+const roundProps: ButtonProps = {
+  round: true,
+}
+
 describe('test button components', () => {
   it('should render default button', () => {
     const wrapper = render(<Button {...defaultProps}>Click</Button>)
@@ -53,4 +57,10 @@ describe('test button components', () => {
     fireEvent.click(element)
     expect(disabledProps.onClick).not.toHaveBeenCalled()
   })
+  it('should render round button when round set to true', () => {
+    const wrapper = render(<Button {...roundProps}>Click</Button>)
+    const element = wrapper.getByText('Click') as HTMLButtonElement
+    expect(element).toBeInTheDocument()
+    expect(element).toHaveClass('btn-round')
+  })
 })

src/components/Button/button.tsx

@@ -16,6 +16,7 @@ export enum ButtonType {
 interface BaseButtonProps {
   className?: string
   disabled?: boolean
+  round?: boolean
   size?: ButtonSize
   btnType?: ButtonType
   children: React.ReactNode
@@ -27,13 +28,14 @@ type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElemen
 export type ButtonProps = Partial<NetiveButtonProps & AnchorButtonProps>
 
 const Button: React.FC<ButtonProps> = (props) => {
-  const { btnType, className, disabled, size, children, href, ...restProps } = props
+  const { btnType, className, disabled, round, size, children, href, ...restProps } = props
 
   // btn,btn-lg,btn-primary
   const classes = classNames('btn', className, {
     [`btn-${btnType}`]: btnType,
     [`btn-${size}`]: size,
     disabled: btnType === ButtonType.Link && disabled,
+    'btn-round': round,
   })
 
   if (btnType === ButtonType.Link && href) {
@@ -54,6 +56,7 @@ const Button: React.FC<ButtonProps> = (props) => {
 Button.defaultProps = {
   disabled: false,
   btnType: ButtonType.Default,
+  round: false,
 }
 
 export default Button