feat(custom-button): fix after code review

core-ds · Dec 11, 2024 · ce7b9cf · ce7b9cf
1 parent 19d173e
commit ce7b9cf
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 156 deletions.
diff --git a/.changeset/tall-mugs-clap.md b/.changeset/tall-mugs-clap.md
@@ -1,5 +1,5 @@
 ---
-'@alfalab/core-components-custom-button': patch
+'@alfalab/core-components-custom-button': minor
 ---
 
 Добавлена возможность импортировать desktop / mobile по отдельности
diff --git a/packages/custom-button/package.json b/packages/custom-button/package.json
@@ -10,6 +10,7 @@
         "access": "public",
         "directory": "dist"
     },
+    "sideEffects": false,
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },

diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx
@@ -101,22 +101,22 @@ describe('CustomButton', () => {
         });
 
         describe('disableType test', () => {
-            it('should have `disableType_default` class', () => {
+            it('should have `disableType-default` class', () => {
                 const { container } = render(<CustomButton disableType='default' />);
                 expect(container.firstElementChild).toHaveClass('disableType-default');
             });
 
-            it('should have `disableType_static` class', () => {
+            it('should have `disableType-static` class', () => {
                 const { container } = render(<CustomButton disableType='static' />);
                 expect(container.firstElementChild).toHaveClass('disableType-static');
             });
 
-            it('should have `disableType_inverted` class', () => {
+            it('should have `disableType-inverted` class', () => {
                 const { container } = render(<CustomButton disableType='inverted' />);
                 expect(container.firstElementChild).toHaveClass('disableType-inverted');
             });
 
-            it('should have `disableType_static-inverted` class', () => {
+            it('should have `disableType-static-inverted` class', () => {
                 const { container } = render(<CustomButton disableType='static-inverted' />);
                 expect(container.firstElementChild).toHaveClass('disableType-static-inverted');
             });

diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx
@@ -1,52 +1,15 @@
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import cn from 'classnames';
+import React, { forwardRef } from 'react';
 
 import { Button } from '@alfalab/core-components-button';
 
-import { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR } from './constants/default-colors';
-import { ComponentProps } from './types/props';
+import { BaseCustomButton } from './components/base-custom-button';
+import { CustomButtonProps } from './types/props';
 
-import styles from './index.module.css';
-
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
-
-export const CustomButton = React.forwardRef<
-    HTMLAnchorElement | HTMLButtonElement,
-    CustomButtonProps
->(
-    (
-        {
-            children,
-            className,
-            loading,
-            backgroundColor = DEFAULT_BUTTON_COLOR,
-            contentColor = DEFAULT_CONTENT_COLOR,
-            stateType = 'darkening',
-            disableType = 'default',
-            ...restProps
-        },
-        ref,
-    ) => (
-        <Button
-            style={{ ...(!restProps.disabled && { background: backgroundColor }) }}
-            {...restProps}
-            view='primary'
-            ref={ref}
-            className={cn(
-                styles.customButton,
-                styles.border,
-                className,
-                styles[contentColor],
-                styles[stateType],
-                styles[`disableType-${disableType}`],
-            )}
-            loading={loading}
-        >
+export const CustomButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, CustomButtonProps>(
+    ({ children, ...restProps }, ref) => (
+        <BaseCustomButton ref={ref} {...restProps} component={Button}>
             {children}
-        </Button>
+        </BaseCustomButton>
     ),
 );
 

diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
@@ -86,15 +86,15 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -166,22 +166,22 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -326,15 +326,15 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -406,22 +406,22 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -566,15 +566,15 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -646,22 +646,22 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -806,15 +806,15 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -886,22 +886,22 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -966,7 +966,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1011,7 +1011,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
@@ -1113,7 +1113,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1157,7 +1157,7 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening customLoading"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1202,7 +1202,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening customLoading"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
@@ -1304,7 +1304,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1348,7 +1348,7 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening customLoading"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1392,7 +1392,7 @@ Object {
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening customLoading"
+        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1437,7 +1437,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening customLoading"
+      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"