Merge pull request #679 from devtron-labs/uat/approval-policy-exceptions-1

feat: TabGroup - add support for icon to be rendered via Icon component

Author: RohitRaj011

src/Shared/Components/Icon/styles.scss

@@ -17,10 +17,11 @@
 .icon-component-color {
     &:not([data-style-override='false']) {
         :where([stroke^='#']:not([data-style-override='false'])) {
-            stroke: var(--iconColor);
+            stroke: var(--overrideIconColor, var(--iconColor));
+
         }
         :where([fill^='#']:not([data-style-override='false'])) {
-            fill: var(--iconColor);
+            fill: var(--overrideIconColor, var(--iconColor));
         }
     }
 }

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -63,7 +63,7 @@ const Tab = ({
         const content = (
             <>
                 <p className="m-0 flexbox dc__align-items-center dc__gap-6">
-                    {getTabIcon({ className: iconClassName, icon, showError, showWarning })}
+                    {getTabIcon({ className: iconClassName, icon, showError, showWarning, size, active })}
                     {label}
                     {getTabBadge(badge, badgeClassName)}
                     {getTabIndicator(showIndicator)}

src/Shared/Components/TabGroup/TabGroup.helpers.tsx

@@ -17,22 +17,31 @@
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 
-import { TabProps } from './TabGroup.types'
+import { Icon } from '../Icon'
+import { TabGroupProps, TabProps } from './TabGroup.types'
+import { TAB_ICON_SIZE_MAP } from './TabGroup.utils'
 
 export const getTabIcon = ({
-    icon: Icon,
+    icon,
     showError,
     showWarning,
     className,
-}: Pick<TabProps, 'showError' | 'showWarning' | 'icon'> & { className: string }) => {
+    size,
+    active,
+}: Pick<TabProps, 'showError' | 'showWarning' | 'icon' | 'active'> &
+    Pick<TabGroupProps, 'size'> & { className: string }) => {
     if (showError) {
         return <ICErrorExclamation className={className} />
     }
     if (showWarning) {
         return <ICWarning className={`${className} warning-icon-y7`} />
     }
-    if (Icon) {
-        return <Icon className={`${className} tab-group__tab__icon`} />
+    if (typeof icon === 'string') {
+        return <Icon name={icon} color={active ? 'B500' : 'N700'} size={TAB_ICON_SIZE_MAP[size]} />
+    }
+    if (icon) {
+        const RenderIcon = icon
+        return <RenderIcon className={`${className} tab-group__tab__icon`} />
     }
     return null
 }

src/Shared/Components/TabGroup/TabGroup.scss

@@ -52,6 +52,10 @@
         &:hover:not(.tab-group__tab--block):not(.dc__disabled) {
             color: var(--B500);
             @include svg-styles(var(--B500));
+
+            svg.icon-component-color {
+                --overrideIconColor: var(--B500);
+            }
         }
 
         &--active {
@@ -92,7 +96,7 @@
                 color: var(--N900);
             }
 
-            &:hover:not([aria-disabled="true"]) {
+            &:hover:not([aria-disabled='true']) {
                 color: var(--B500);
             }
         }

src/Shared/Components/TabGroup/TabGroup.types.ts

@@ -20,6 +20,8 @@ import { ComponentSizeType } from '@Shared/constants'
 import { DataAttributes } from '@Shared/types'
 import { TooltipProps } from '@Common/Tooltip/types'
 
+import { IconName } from '../Icon'
+
 type TabComponentProps<TabTypeProps> = TabTypeProps & DataAttributes
 
 type ConditionalTabType =
@@ -106,10 +108,11 @@ export type TabProps = {
      */
     description?: string | string[]
     /**
-     * Icon component to be displayed in the tab.
-     * This should be a functional component that renders an SVG.
+     * Icon to be displayed in the tab.
+     * This can either be a functional component that renders a SVG
+     * or a string representing the name of the icon to be rendered by the Icon component.
      */
-    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | IconName
     /**
      * Badge number to be displayed on the tab, typically for notifications.
      */

src/Shared/Components/TabGroup/TabGroup.utils.ts

@@ -16,6 +16,7 @@
 
 import { ComponentSizeType } from '@Shared/constants'
 
+import { IconsProps } from '../Icon'
 import { TabGroupProps } from './TabGroup.types'
 
 export const getClassNameBySizeMap = ({
@@ -46,6 +47,12 @@ export const getClassNameBySizeMap = ({
     },
 })
 
+export const TAB_ICON_SIZE_MAP: Record<TabGroupProps['size'], IconsProps['size']> = {
+    [ComponentSizeType.medium]: 14,
+    [ComponentSizeType.large]: 16,
+    [ComponentSizeType.xl]: 16,
+}
+
 export const tabGroupClassMap: Record<TabGroupProps['size'], string> = {
     [ComponentSizeType.medium]: 'dc__gap-12',
     [ComponentSizeType.large]: 'dc__gap-16',