Skip to content

Commit e3f85c7

Browse files
RohitRaj011RohitRaj011
committed
feat: TabGroup - add xl size variant, add description support; StatusFilterButton - UI update; Drawer - onClose prop support
1 parent 52daa53 commit e3f85c7

File tree

6 files changed

+78
-43
lines changed

6 files changed

+78
-43
lines changed

‎src/Common/Drawer/Drawer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const Drawer = ({
4141
maxWidth,
4242
parentClassName,
4343
onEscape,
44+
onClose,
4445
}: drawerInterface) => {
4546
const drawerRef = useRef(null)
4647
useEffect(() => {
@@ -61,7 +62,7 @@ export const Drawer = ({
6162
style['--height'] = height
6263
}
6364
return (
64-
<VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape}>
65+
<VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape} close={onClose}>
6566
<aside style={style} ref={drawerRef} className={`drawer ${position}`}>
6667
{children}
6768
</aside>

‎src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@ import { StyledRadioGroup as RadioGroup } from '../../../Common'
2020
import { NodeStatus, StatusFilterButtonType } from './types'
2121
import { IndexStore } from '../../Store'
2222

23-
interface TabState {
24-
status: string
25-
count: number
26-
isSelected: boolean
27-
}
28-
2923
export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
3024
const [selectedTab, setSelectedTab] = useState('all')
3125

@@ -83,28 +77,36 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
8377

8478
return (
8579
<RadioGroup
86-
className="gui-yaml-switch"
87-
name="yaml-mode"
80+
className="gui-yaml-switch status-filter-button"
81+
name="status-filter-button"
8882
initialTab={selectedTab}
8983
disabled={false}
9084
onChange={handleTabSwitch}
9185
>
92-
{filters.length &&
93-
filters.map(
94-
(filter: TabState, index: number) =>
95-
filter.count > 0 && (
96-
<RadioGroup.Radio value={filter.status}>
97-
{index !== 0 && (
86+
{filters.map(
87+
(filter, index) =>
88+
filter.count > 0 && (
89+
<RadioGroup.Radio
90+
value={filter.status}
91+
showTippy={index !== 0}
92+
tippyPlacement="top"
93+
tippyContent={filter.status}
94+
tippyClass="w-100 dc__first-letter-capitalize"
95+
>
96+
{index !== 0 ? (
97+
<>
9898
<span
99-
className={`dc__app-summary__icon icon-dim-16 mr-6 ${filter.status} ${filter.status}--node`}
99+
className={`dc__app-summary__icon icon-dim-16 ${filter.status} ${filter.status}--node`}
100100
style={{ zIndex: 'unset' }}
101101
/>
102-
)}
103-
<span className="dc__first-letter-capitalize">{filter.status}</span>
104-
<span className="pl-4">({filter.count})</span>
105-
</RadioGroup.Radio>
106-
),
107-
)}
102+
<span>{filter.count}</span>
103+
</>
104+
) : (
105+
<span className="dc__first-letter-capitalize">{`${filter.status} (${filter.count})`}</span>
106+
)}
107+
</RadioGroup.Radio>
108+
),
109+
)}
108110
</RadioGroup>
109111
)
110112
}

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

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1+
import { Fragment } from 'react'
12
import { Link, NavLink } from 'react-router-dom'
23

34
import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
45
import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
56
import { ComponentSizeType } from '@Shared/constants'
67

78
import { TabGroupProps, TabProps } from './TabGroup.types'
9+
import { getClassNameBySizeMap, getIconColorClassMap, tabGroupClassMap } from './TabGroup.utils'
10+
811
import './TabGroup.scss'
9-
import { getClassNameBySizeMap, getIconColorClassMap } from './TabGroup.utils'
1012

1113
const Tab = ({
1214
label,
@@ -23,6 +25,7 @@ const Tab = ({
2325
showError,
2426
showWarning,
2527
disabled,
28+
description,
2629
}: TabProps & Pick<TabGroupProps, 'size' | 'alignActiveBorderWithContainer' | 'hideTopPadding'>) => {
2730
const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
2831
hideTopPadding,
@@ -32,24 +35,40 @@ const Tab = ({
3235
const getTabComponent = () => {
3336
const content = (
3437
<>
35-
{showError && <ICErrorExclamation className={`${iconClassName}`} />}
36-
{!showError && showWarning && <ICWarning className={`${iconClassName} warning-icon-y7`} />}
37-
{!showError && !showWarning && Icon && (
38-
<Icon className={`${iconClassName} ${getIconColorClassMap({ active })[iconType] || ''}`} />
39-
)}
40-
{label}
41-
{badge !== null && (
42-
<div className={`tab-group__tab__badge bcn-1 cn-7 fw-6 flex px-4 ${badgeClassName}`}>{badge}</div>
38+
<p className="m-0 flexbox dc__align-items-center dc__gap-6">
39+
{showError && <ICErrorExclamation className={`${iconClassName}`} />}
40+
{!showError && showWarning && <ICWarning className={`${iconClassName} warning-icon-y7`} />}
41+
{!showError && !showWarning && Icon && (
42+
<Icon className={`${iconClassName} ${getIconColorClassMap({ active })[iconType] || ''}`} />
43+
)}
44+
{label}
45+
{badge !== null && (
46+
<div className={`tab-group__tab__badge bcn-1 cn-7 fw-6 flex px-4 ${badgeClassName}`}>
47+
{badge}
48+
</div>
49+
)}
50+
{showIndicator && <span className="tab-group__tab__indicator bcr-5 mt-4 dc__align-self-start" />}
51+
</p>
52+
{description && (
53+
<p className="m-0 fs-12 lh-16 fw-4 cn-7 flex dc__gap-4">
54+
{Array.isArray(description)
55+
? description.map((desc, idx) => (
56+
<Fragment key={desc}>
57+
{!!idx && <span className="dc__bullet" />}
58+
{desc}
59+
</Fragment>
60+
))
61+
: description}
62+
</p>
4363
)}
44-
{showIndicator && <span className="tab-group__tab__indicator bcr-5 mt-4 dc__align-self-start" />}
4564
</>
4665
)
4766

4867
switch (tabType) {
4968
case 'link':
5069
return (
5170
<Link
52-
className={`${tabClassName} dc__no-decor flexbox dc__align-items-center dc__gap-6 ${disabled ? 'cursor-not-allowed' : ''}`}
71+
className={`${tabClassName} dc__no-decor flexbox-col ${disabled ? 'cursor-not-allowed' : ''}`}
5372
aria-disabled={disabled}
5473
{...props}
5574
>
@@ -59,7 +78,7 @@ const Tab = ({
5978
case 'navLink':
6079
return (
6180
<NavLink
62-
className={`${tabClassName} dc__no-decor tab-group__tab__nav-link flexbox dc__align-items-center dc__gap-6 ${disabled ? 'cursor-not-allowed' : ''}`}
81+
className={`${tabClassName} dc__no-decor flexbox-col tab-group__tab__nav-link ${disabled ? 'cursor-not-allowed' : ''}`}
6382
aria-disabled={disabled}
6483
{...props}
6584
>
@@ -70,7 +89,7 @@ const Tab = ({
7089
return (
7190
<button
7291
type="button"
73-
className={`dc__unset-button-styles ${tabClassName} flexbox dc__align-items-center dc__gap-6 ${disabled ? 'cursor-not-allowed' : ''}`}
92+
className={`dc__unset-button-styles flexbox-col ${tabClassName} ${disabled ? 'cursor-not-allowed' : ''}`}
7493
disabled={disabled}
7594
{...props}
7695
>
@@ -96,11 +115,8 @@ export const TabGroup = ({
96115
alignActiveBorderWithContainer,
97116
hideTopPadding,
98117
}: TabGroupProps) => (
99-
<div className="flexbox dc__align-items-center dc__content-space">
100-
<ul
101-
role="tablist"
102-
className={`tab-group flexbox dc__align-items-center p-0 m-0 ${size === ComponentSizeType.large ? 'dc__gap-16' : 'dc__gap-12'}`}
103-
>
118+
<div className="flexbox dc__align-items-center dc__content-space">
119+
<ul role="tablist" className={`tab-group flexbox dc__align-items-center p-0 m-0 ${tabGroupClassMap[size]}`}>
104120
{tabs.map(({ id, ...resProps }) => (
105121
<Tab
106122
key={id}

‎src/Shared/Components/TabGroup/TabGroup.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,15 @@
6767
color: var(--B500);
6868
font-weight: 600;
6969

70-
> #{$parent-selector}__icon--fill {
70+
#{$parent-selector}__icon--fill {
7171
fill: var(--B500);
7272

7373
path {
7474
fill: var(--B500);
7575
}
7676
}
7777

78-
> #{$parent-selector}__icon--stroke {
78+
#{$parent-selector}__icon--stroke {
7979
stroke: var(--B500);
8080

8181
path {

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ export type TabProps = {
5858
* Text label for the tab.
5959
*/
6060
label: string
61+
/**
62+
* Description for the tab.
63+
* @note - If passed as a `string[]`, it will be rendered with a bullet in-between strings.
64+
*/
65+
description?: string | string[]
6166
/**
6267
* Icon component to be displayed in the tab.
6368
* This should be a functional component that renders an SVG.
@@ -100,7 +105,7 @@ export interface TabGroupProps {
100105
* Size of the tabs.
101106
* @default ComponentSizeType.large
102107
*/
103-
size?: ComponentSizeType.large | ComponentSizeType.medium
108+
size?: ComponentSizeType.large | ComponentSizeType.medium | ComponentSizeType.xl
104109
/**
105110
* Optional component to be rendered on the right side of the tab list.
106111
*/

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,20 @@ export const getClassNameBySizeMap = ({
2323
iconClassName: 'icon-dim-16',
2424
badgeClassName: 'fs-12 lh-20',
2525
},
26+
[ComponentSizeType.xl]: {
27+
tabClassName: `min-w-200 fs-13 ${!hideTopPadding ? 'pt-10' : ''} ${alignActiveBorderWithContainer ? 'pb-9' : 'pb-10'}`,
28+
iconClassName: 'icon-dim-16',
29+
badgeClassName: 'fs-12 lh-20',
30+
},
2631
})
2732

2833
export const getIconColorClassMap = ({ active }: Pick<TabProps, 'active'>): Record<TabProps['iconType'], string> => ({
2934
fill: `tab-group__tab__icon--fill ${active ? 'fcb-5' : 'fcn-7'}`,
3035
stroke: `tab-group__tab__icon--stroke ${active ? 'scb-5' : 'scn-7'}`,
3136
})
37+
38+
export const tabGroupClassMap: Record<TabGroupProps['size'], string> = {
39+
[ComponentSizeType.medium]: 'dc__gap-12',
40+
[ComponentSizeType.large]: 'dc__gap-16',
41+
[ComponentSizeType.xl]: 'dc__gap-16',
42+
}

0 commit comments

Comments
 (0)