Merge pull request #290 from devtron-labs/feat/icon-button

eshankvaish · web-flow · commit 88c0ca63fd1d · 2024-09-11T11:55:37.000+05:30
feat: add icon button
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.30",
+    "version": "0.2.32",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Shared/Components/Button/Button.component.tsx b/src/Shared/Components/Button/Button.component.tsx
@@ -2,10 +2,10 @@ import { ButtonHTMLAttributes, PropsWithChildren } from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
+import { TooltipProps } from '@Common/Tooltip/types'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonComponentType, ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
-import { BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP, BUTTON_SIZE_TO_LOADER_SIZE_MAP } from './constants'
-import { getButtonDerivedClass } from './utils'
+import { getButtonDerivedClass, getButtonIconClassName, getButtonLoaderSize } from './utils'
 import './button.scss'
 
 const ButtonElement = ({
@@ -27,9 +27,11 @@ const ButtonElement = ({
         | 'tooltipProps'
         | 'dataTestId'
         | 'isLoading'
+        | 'ariaLabel'
     > & {
         className: string
         'data-testid': ButtonProps['dataTestId']
+        'aria-label': ButtonProps['ariaLabel']
     }
 >) => {
     if (component === ButtonComponentType.link) {
@@ -113,6 +115,11 @@ const ButtonElement = ({
  * ```tsx
  * <Button component={ButtonComponentType.link} linkProps={{ to: '#' }} />
  * ```
+ *
+ * @example Icon button
+ * ```tsx
+ * <Button icon={<ICCube />} ariaLabel="Label" />
+ * ```
  */
 const Button = ({
     dataTestId,
@@ -126,24 +133,57 @@ const Button = ({
     isLoading = false,
     showTooltip = false,
     tooltipProps = {},
+    icon = null,
+    ariaLabel = null,
     ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
-    const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
+    const iconClass = `dc__no-shrink flex dc__fill-available-space ${getButtonIconClassName({
+        size,
+        icon,
+    })}`
+
+    const getTooltipProps = (): TooltipProps => {
+        if (!showTooltip && icon && ariaLabel) {
+            return {
+                alwaysShowTippyOnHover: true,
+                content: ariaLabel,
+            }
+        }
+
+        return {
+            alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
+            ...tooltipProps,
+        }
+    }
 
     return (
-        <Tooltip {...tooltipProps} alwaysShowTippyOnHover={showTooltip && !!tooltipProps?.content}>
+        <Tooltip {...getTooltipProps()}>
             <div>
                 <ButtonElement
                     {...props}
                     disabled={isDisabled}
-                    className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${isDisabled ? 'dc__disabled' : ''}`}
+                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''}`}
                     data-testid={dataTestId}
+                    aria-label={ariaLabel}
                 >
-                    {startIcon && <span className={iconClass}>{startIcon}</span>}
-                    <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
-                    {endIcon && <span className={iconClass}>{endIcon}</span>}
-                    {isLoading && <Progressing size={BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]} />}
+                    {icon ? (
+                        <span className={iconClass}>{icon}</span>
+                    ) : (
+                        <>
+                            {startIcon && <span className={iconClass}>{startIcon}</span>}
+                            <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
+                            {endIcon && <span className={iconClass}>{endIcon}</span>}
+                        </>
+                    )}
+                    {isLoading && (
+                        <Progressing
+                            size={getButtonLoaderSize({
+                                size,
+                                icon,
+                            })}
+                        />
+                    )}
                 </ButtonElement>
             </div>
         </Tooltip>
diff --git a/src/Shared/Components/Button/button.scss b/src/Shared/Components/Button/button.scss
@@ -1,3 +1,13 @@
+@mixin svg-styles($color) {
+    svg *[stroke^="#"] {
+        stroke: $color;
+    }
+
+    svg *[fill^="#"] {
+        fill: $color;
+    }
+}
+
 @mixin button-variant-styles($background, $text-color, $border-color) {
     background: $background;
     color: $text-color;
@@ -7,11 +17,7 @@
         color: $text-color;
     }
 
-    // Only stroke icons are supposed to be used with button
-    svg,
-    svg * {
-        stroke: $text-color;
-    }
+    @include svg-styles($text-color);
 
     // Custom state for loader
     // Added using css to ensure using the respective text-color
@@ -27,7 +33,7 @@
     }
 }
 
-@mixin pseudo-states($hover-bg-color, $active-bg-color, $hover-border-color: null) {
+@mixin pseudo-states($hover-bg-color, $active-bg-color, $hover-border-color: null, $color: null) {
     $parent-selector: &;
 
     &:hover:not([disabled]) {
@@ -36,10 +42,22 @@
         @if ($hover-border-color) {
             border-color: $hover-border-color;
         }
+
+        @if ($color) {
+            color: $color;
+
+            @include svg-styles($color);
+        }
     }
 
     &:active:not([disabled]) {
         background: $active-bg-color;
+
+        @if ($color) {
+            color: $color;
+    
+            @include svg-styles($color);
+        }
     }
 }
 
@@ -65,6 +83,11 @@
             @include pseudo-states(var(--R600), var(--R700));
         }
 
+        &--negative-grey {
+            @include button-variant-styles(var(--N600), $text-color, $border-color);
+            @include pseudo-states(var(--R600), var(--R700), null, $text-color);
+        }
+
         &--positive {
             @include button-variant-styles(var(--G500), $text-color, $border-color);
             @include pseudo-states(var(--G600), var(--G700));
@@ -92,7 +115,12 @@
 
         &--negative {
             @include button-variant-styles($background, var(--R600), $border-color);
-            @include pseudo-states(var(--R100), var(--R200), var(--R600));
+            @include pseudo-states(var(--R100), var(--R200), var(--R600), var(--R600));
+        }
+
+        &--negative-grey {
+            @include button-variant-styles($background, var(--N700), $border-color);
+            @include pseudo-states(var(--R100), var(--R200), var(--R600), var(--R600));
         }
 
         &--positive {
@@ -125,6 +153,10 @@
             @include button-variant-styles($background, var(--R600), $border-color);
         }
 
+        &--negative-grey {
+            @include button-variant-styles($background, var(--N700), $border-color);
+        }
+
         &--positive {
             @include button-variant-styles($background, var(--G600), $border-color);
         }
@@ -148,6 +180,10 @@
             @include pseudo-states(var(--R100), var(--R200));
         }
 
+        &--negative-grey {
+            @include pseudo-states(var(--R100), var(--R200), null, var(--R600));
+        }
+
         &--positive {
             @include pseudo-states(var(--G100), var(--G200));
         }
@@ -166,6 +202,7 @@
 
         &--default,
         &--negative,
+        &--negative-grey,
         &--positive,
         &--warning,
         &--neutral {
diff --git a/src/Shared/Components/Button/constants.ts b/src/Shared/Components/Button/constants.ts
@@ -10,6 +10,14 @@ export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>
     [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12',
 } as const
 
+export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
+    [ComponentSizeType.xs]: 'p-3',
+    [ComponentSizeType.small]: 'p-5',
+    [ComponentSizeType.medium]: 'p-7',
+    [ComponentSizeType.large]: 'p-7',
+    [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',
@@ -18,10 +26,26 @@ export const BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], str
     [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']> = {
     [ComponentSizeType.xs]: 12,
     [ComponentSizeType.small]: 12,
     [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']> = {
+    [ComponentSizeType.xs]: 16,
+    [ComponentSizeType.small]: 16,
+    [ComponentSizeType.medium]: 16,
+    [ComponentSizeType.large]: 20,
+    [ComponentSizeType.xl]: 24,
+} as const
diff --git a/src/Shared/Components/Button/types.ts b/src/Shared/Components/Button/types.ts
@@ -14,6 +14,7 @@ export enum ButtonVariantType {
 export enum ButtonStyleType {
     default = 'default',
     negative = 'negative',
+    negativeGrey = 'negative-grey',
     positive = 'positive',
     warning = 'warning',
     neutral = 'neutral',
@@ -70,18 +71,6 @@ export type ButtonProps = (
      * @default ButtonStyleType.default
      */
     style?: ButtonStyleType
-    /**
-     * Text to be displayed in the button
-     */
-    text: string
-    /**
-     * If provided, icon to be displayed at the start of the button
-     */
-    startIcon?: ReactElement
-    /**
-     * If provided, icon to be displayed at the end of the button
-     */
-    endIcon?: ReactElement
     /**
      * If true, the loading state is shown for the button with disabled
      */
@@ -111,4 +100,36 @@ export type ButtonProps = (
               showTooltip?: never
               tooltipProps?: never
           }
+    ) &
+    (
+        | {
+              icon?: never
+              ariaLabel?: never
+              /**
+               * Text to be displayed in the button
+               */
+              text: string
+              /**
+               * If provided, icon to be displayed at the start of the button
+               */
+              startIcon?: ReactElement
+              /**
+               * If provided, icon to be displayed at the end of the button
+               */
+              endIcon?: ReactElement
+          }
+        | {
+              /**
+               * If provided, icon button is rendered
+               */
+              icon: ReactElement
+              /**
+               * Label for the icon button for accessibility.
+               * Shown on hover in tooltip if tippy is not provided explicitly
+               */
+              ariaLabel: string
+              text?: never
+              startIcon?: never
+              endIcon?: never
+          }
     )
diff --git a/src/Shared/Components/Button/utils.ts b/src/Shared/Components/Button/utils.ts
@@ -1,10 +1,34 @@
-import { BUTTON_SIZE_TO_CLASS_NAME_MAP } from './constants'
+import {
+    BUTTON_SIZE_TO_CLASS_NAME_MAP,
+    BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP,
+    BUTTON_SIZE_TO_LOADER_SIZE_MAP,
+    ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP,
+    ICON_BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP,
+    ICON_BUTTON_SIZE_TO_LOADER_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]
+    }
+
+    return BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]
+}
+
+export const getButtonLoaderSize = ({ size, icon }: Pick<ButtonProps, 'size' | 'icon'>) => {
+    if (icon) {
+        return ICON_BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]
+    }
+
+    return BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]
+}
+
 export const getButtonDerivedClass = ({
     size,
     variant,
     style,
     isLoading,
-}: Pick<ButtonProps, 'variant' | 'size' | 'style' | 'isLoading'>) =>
-    `button button__${variant}--${style} ${BUTTON_SIZE_TO_CLASS_NAME_MAP[size]} ${isLoading ? 'button--loading' : ''}`
+    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]} dc__mnw-100`} ${isLoading ? 'button--loading' : ''}`

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "0.2.30",`
	`3`	`+ "version": "0.2.32",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`