Skip to content

Commit 2ebf878

Browse files
committed
feat: add styles and update StatusFilterButtonComponent for improved UI
- Introduced new SCSS styles for the StatusFilterButton, enhancing the segmented control appearance. - Updated StatusFilterButtonComponent to apply new styles and ensure proper handling of selected tab values.
1 parent c1b619e commit 2ebf878

File tree

2 files changed

+30
-3
lines changed

2 files changed

+30
-3
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.status-filter {
2+
&__container {
3+
.segmented-control {
4+
border-radius: 6px;
5+
}
6+
7+
8+
&:has(.popup-button-kebab) {
9+
.segmented-control {
10+
border-top-right-radius: 0px !important;
11+
border-bottom-right-radius: 0px !important;
12+
}
13+
14+
.popup-button-kebab {
15+
background: var(--bg-segmented-control);
16+
17+
&:hover {
18+
background: var(--bg-hover);
19+
}
20+
}
21+
}
22+
}
23+
}

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import { PopupMenu, SegmentedControl } from '../../../Common'
2424
import { StatusFilterButtonType } from './types'
2525
import { getAppStatusIcon, getNodesCount, getStatusFilters } from './utils'
2626

27+
import './StatusFilterButton.scss'
28+
2729
export const StatusFilterButtonComponent = ({
2830
nodes,
2931
selectedTab,
@@ -100,11 +102,13 @@ export const StatusFilterButtonComponent = ({
100102
})),
101103
]
102104

105+
const segmentValue = segments.find(({ value }) => value === selectedTab)?.value || null
106+
103107
return (
104-
<div className="flexbox">
108+
<div className="flexbox status-filter__container">
105109
<SegmentedControl
106110
segments={segments}
107-
value={selectedTab}
111+
value={segmentValue}
108112
onChange={handleInlineFilterClick}
109113
name="status-filter-button"
110114
size={ComponentSizeType.small}
@@ -114,7 +118,7 @@ export const StatusFilterButtonComponent = ({
114118
<PopupMenu autoClose>
115119
<PopupMenu.Button
116120
isKebab
117-
rootClassName="flex p-4 dc__border dc__no-left-radius dc__right-radius-4 bg__primary dc__hover-n50"
121+
rootClassName="flex p-4 dc__no-left-radius dc__right-radius-4 bg__primary dc__hover-n50"
118122
>
119123
<ICCaretDown className="icon-dim-14 scn-6" />
120124
</PopupMenu.Button>

0 commit comments

Comments
 (0)