fix: StatusFilterButtonComponent - css move from base.scss, TabGroup - remove iconType prop, handling via mixins

Author: RohitRaj011

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.scss

@@ -0,0 +1,21 @@
+.gui-yaml-switch.status-filter-button {
+    &.radio-group {
+        .radio__item-label {
+            padding: 2px 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+    }
+
+    &.with-menu-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .radio:last-child > .radio__item-label {
+            border-right: none;
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
+    }
+}

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -21,6 +21,8 @@ import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common'
 import { NodeStatus, StatusFilterButtonType } from './types'
 import { IndexStore } from '../../Store'
 
+import './StatusFilterButtonComponent.scss'
+
 export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
     const [selectedTab, setSelectedTab] = useState('all')
 

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

@@ -1,12 +1,11 @@
-import { Fragment } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { TabGroupProps, TabProps } from './TabGroup.types'
-import { getClassNameBySizeMap, getIconColorClassMap, tabGroupClassMap } from './TabGroup.utils'
+import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils'
 
 import './TabGroup.scss'
 
@@ -16,7 +15,6 @@ const Tab = ({
     tabType,
     active,
     icon: Icon,
-    iconType = 'fill',
     size,
     badge = null,
     alignActiveBorderWithContainer,
@@ -38,9 +36,7 @@ const Tab = ({
                 <p className="m-0 flexbox dc__align-items-center dc__gap-6">
                     {showError && <ICErrorExclamation className={`${iconClassName}`} />}
                     {!showError && showWarning && <ICWarning className={`${iconClassName} warning-icon-y7`} />}
-                    {!showError && !showWarning && Icon && (
-                        <Icon className={`${iconClassName} ${getIconColorClassMap({ active })[iconType] || ''}`} />
-                    )}
+                    {!showError && !showWarning && Icon && <Icon className={`${iconClassName} tab-group__tab__icon`} />}
                     {label}
                     {badge !== null && (
                         <div className={`tab-group__tab__badge bcn-1 cn-7 fw-6 flex px-4 ${badgeClassName}`}>
@@ -50,16 +46,16 @@ const Tab = ({
                     {showIndicator && <span className="tab-group__tab__indicator bcr-5 mt-4 dc__align-self-start" />}
                 </p>
                 {description && (
-                    <p className="m-0 fs-12 lh-16 fw-4 cn-7 flexbox dc__align-items-center dc__gap-4">
+                    <ul className="tab-group__tab__description m-0 p-0 fs-12 lh-16 fw-4 cn-7 flexbox dc__align-items-center dc__gap-4">
                         {Array.isArray(description)
                             ? description.map((desc, idx) => (
-                                  <Fragment key={desc}>
+                                  <li key={desc} className="flex dc__gap-4">
                                       {!!idx && <span className="dc__bullet" />}
                                       {desc}
-                                  </Fragment>
+                                  </li>
                               ))
                             : description}
-                    </p>
+                    </ul>
                 )}
             </>
         )

src/Shared/Components/TabGroup/TabGroup.scss

@@ -1,10 +1,22 @@
+@mixin svg-styles($color) {
+    svg.tab-group__tab__icon *[stroke^='#'] {
+        stroke: $color;
+    }
+
+    svg.tab-group__tab__icon *[fill^='#'] {
+        fill: $color;
+    }
+}
+
 .tab-group {
     list-style: none;
 
     &__tab {
         $parent-selector: &;
         position: relative;
 
+        @include svg-styles(var(--N700));
+
         &::after {
             content: '';
             position: absolute;
@@ -23,30 +35,17 @@
 
         &:hover:not(.tab-group__tab--block) {
             color: var(--B500);
+            @include svg-styles(var(--B500));
+        }
 
-            #{$parent-selector}__icon {
-                &--stroke {
-                    stroke: var(--B500);
-
-                    path {
-                        stroke: var(--B500);
-                    }
-                }
-
-                &--fill {
-                    fill: var(--B500);
+        &--active {
+            @include svg-styles(var(--B500));
 
-                    path {
-                        fill: var(--B500);
-                    }
-                }
+            &::after {
+                background-color: var(--B500);
             }
         }
 
-        &--active::after {
-            background-color: var(--B500);
-        }
-
         &__badge {
             border-radius: 10px;
             min-width: 20px;
@@ -62,26 +61,15 @@
             border-radius: 100%;
         }
 
+        &__description {
+            list-style: none;
+        }
+
         &__nav-link {
             &.active {
                 color: var(--B500);
                 font-weight: 600;
-
-                #{$parent-selector}__icon--fill {
-                    fill: var(--B500);
-
-                    path {
-                        fill: var(--B500);
-                    }
-                }
-
-                #{$parent-selector}__icon--stroke {
-                    stroke: var(--B500);
-
-                    path {
-                        stroke: var(--B500);
-                    }
-                }
+                @include svg-styles(var(--B500));
             }
 
             &:not(.active) {

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

@@ -83,10 +83,6 @@ export type TabProps = {
      * This should be a functional component that renders an SVG.
      */
     icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    /**
-     * Type of the icon, determining whether it uses a stroke or fill style.
-     */
-    iconType?: 'stroke' | 'fill'
     /**
      * Badge number to be displayed on the tab, typically for notifications.
      */

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

@@ -1,6 +1,6 @@
 import { ComponentSizeType } from '@Shared/constants'
 
-import { TabGroupProps, TabProps } from './TabGroup.types'
+import { TabGroupProps } from './TabGroup.types'
 
 export const getClassNameBySizeMap = ({
     hideTopPadding,
@@ -30,11 +30,6 @@ export const getClassNameBySizeMap = ({
     },
 })
 
-export const getIconColorClassMap = ({ active }: Pick<TabProps, 'active'>): Record<TabProps['iconType'], string> => ({
-    fill: `tab-group__tab__icon--fill ${active ? 'fcb-5' : 'fcn-7'}`,
-    stroke: `tab-group__tab__icon--stroke ${active ? 'scb-5' : 'scn-7'}`,
-})
-
 export const tabGroupClassMap: Record<TabGroupProps['size'], string> = {
     [ComponentSizeType.medium]: 'dc__gap-12',
     [ComponentSizeType.large]: 'dc__gap-16',