fix: min width for button and code clean up

Author: eshankvaish

src/Shared/Components/Button/constants.ts

@@ -3,11 +3,11 @@ import { ProgressingProps } from '@Common/Types'
 import { ButtonProps } from './types'
 
 export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
-    [ComponentSizeType.xs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6',
-    [ComponentSizeType.small]: 'px-9 py-3 fs-12 lh-20 fw-6 dc__gap-6',
-    [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8',
-    [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-10',
-    [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12',
+    [ComponentSizeType.xs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6 mw-48',
+    [ComponentSizeType.small]: 'px-9 py-3 fs-12 lh-20 fw-6 dc__gap-8 mw-48',
+    [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8 mw-48',
+    [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-10 mw-64',
+    [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12 mw-64',
 } as const
 
 export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
@@ -18,31 +18,15 @@ export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], str
     [ComponentSizeType.xl]: 'p-7',
 } as const
 
-export const BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
-    [ComponentSizeType.xs]: 'icon-dim-12',
-    [ComponentSizeType.small]: 'icon-dim-12',
-    [ComponentSizeType.medium]: 'icon-dim-16',
-    [ComponentSizeType.large]: 'icon-dim-16',
-    [ComponentSizeType.xl]: 'icon-dim-20',
-} as const
-
-export const ICON_BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
-    [ComponentSizeType.xs]: 'icon-dim-16',
-    [ComponentSizeType.small]: 'icon-dim-16',
-    [ComponentSizeType.medium]: 'icon-dim-16',
-    [ComponentSizeType.large]: 'icon-dim-20',
-    [ComponentSizeType.xl]: 'icon-dim-24',
-} as const
-
-export const BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
+export const BUTTON_SIZE_TO_ICON_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
     [ComponentSizeType.xs]: 12,
-    [ComponentSizeType.small]: 12,
+    [ComponentSizeType.small]: 16,
     [ComponentSizeType.medium]: 16,
     [ComponentSizeType.large]: 16,
     [ComponentSizeType.xl]: 20,
 } as const
 
-export const ICON_BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
+export const ICON_BUTTON_SIZE_TO_ICON_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
     [ComponentSizeType.xs]: 16,
     [ComponentSizeType.small]: 16,
     [ComponentSizeType.medium]: 16,

src/Shared/Components/Button/utils.ts

@@ -1,27 +1,23 @@
 import {
     BUTTON_SIZE_TO_CLASS_NAME_MAP,
-    BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP,
-    BUTTON_SIZE_TO_LOADER_SIZE_MAP,
+    BUTTON_SIZE_TO_ICON_SIZE_MAP,
     ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP,
-    ICON_BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP,
-    ICON_BUTTON_SIZE_TO_LOADER_SIZE_MAP,
+    ICON_BUTTON_SIZE_TO_ICON_SIZE_MAP,
 } from './constants'
 import { ButtonProps } from './types'
 
 export const getButtonIconClassName = ({ size, icon }: Pick<ButtonProps, 'size' | 'icon'>) => {
-    if (icon) {
-        return ICON_BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]
-    }
+    const iconSize = icon ? ICON_BUTTON_SIZE_TO_ICON_SIZE_MAP[size] : BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
 
-    return BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]
+    return `icon-dim-${iconSize}`
 }
 
 export const getButtonLoaderSize = ({ size, icon }: Pick<ButtonProps, 'size' | 'icon'>) => {
     if (icon) {
-        return ICON_BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]
+        return ICON_BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
     }
 
-    return BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]
+    return BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
 }
 
 export const getButtonDerivedClass = ({
@@ -31,4 +27,4 @@ export const getButtonDerivedClass = ({
     isLoading,
     icon,
 }: Pick<ButtonProps, 'variant' | 'size' | 'style' | 'isLoading' | 'icon'>) =>
-    `button button__${variant}--${style} ${icon ? ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP[size] : `${BUTTON_SIZE_TO_CLASS_NAME_MAP[size]} mw-64`} ${isLoading ? 'button--loading' : ''}`
+    `button button__${variant}--${style} ${icon ? ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP[size] : BUTTON_SIZE_TO_CLASS_NAME_MAP[size]} ${isLoading ? 'button--loading' : ''}`