Skip to content

Commit 167aeaa

Browse files
javiert-oktajaviert-okta
authored
Merge pull request #877 from jsonwebtoken/update-panel-picker
Update panel picker and card components
2 parents 22e093e + 38d521d commit 167aeaa

File tree

54 files changed

+1177
-741
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1177
-741
lines changed

‎src/features/common/components/card-message/card-message.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.span,
55
.p,
66
.code {
7-
font-size: 0.75rem;
7+
font-size: .875rem;
88
line-height: 1.125rem;
99
}
1010

‎src/features/common/components/card-tabs/card-tabs.component.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -129,16 +129,20 @@ const CardTabs: React.FC<CardTabsProps> = ({
129129
<span className={styles.cardTab__title__compact}>
130130
{compactTitle}
131131
</span>
132+
{activeCard.slots?.toolbar && (
133+
<div className={styles.cardTabs__actionButtons}>
134+
<div
135+
className={styles.cardTabs__tooltipContainer}
136+
>
137+
{activeCard.slots.toolbar}
138+
</div>
139+
</div>
140+
)}
132141
</Tab>
133142
</React.Fragment>
134143
);
135144
})}
136145
</TabList>
137-
{activeCard.slots?.toolbar && (
138-
<div className={styles.cardTabs__actionButtons}>
139-
{activeCard.slots.toolbar}
140-
</div>
141-
)}
142146
</>
143147
{cards.map((card) => {
144148
return (
@@ -181,7 +185,7 @@ const CardTabs: React.FC<CardTabsProps> = ({
181185
onSelectionChange={(e) => {
182186
handleActiveCardChange(e.toString());
183187
}}
184-
className={clsx(MonoFont.className, styles.cardTabs)}
188+
className={styles.cardTabs}
185189
>
186190
<>
187191
<TabList className={styles.cardTabs__tabList}>
@@ -197,16 +201,18 @@ const CardTabs: React.FC<CardTabsProps> = ({
197201
<span className={styles.cardTab__title__compact}>
198202
{compactTitle}
199203
</span>
204+
{activeCard.slots?.toolbar && (
205+
<div className={styles.cardTabs__actionButtons}>
206+
<div className={styles.cardTabs__tooltipContainer}>
207+
{activeCard.slots.toolbar}
208+
</div>
209+
</div>
210+
)}
200211
</Tab>
201212
</React.Fragment>
202213
);
203214
})}
204215
</TabList>
205-
{activeCard.slots?.toolbar && (
206-
<div className={styles.cardTabs__actionButtons}>
207-
{activeCard.slots.toolbar}
208-
</div>
209-
)}
210216
</>
211217
{cards.map((card) => {
212218
return (

‎src/features/common/components/card-tabs/card-tabs.module.scss‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,42 @@
88
width: 100%;
99
max-height: fit-content;
1010
flex-direction: column;
11-
row-gap: 0.5rem;
11+
row-gap: 1rem;
1212

1313
cursor: default;
1414
}
1515

1616
.cardTabs__title {
17-
grid-column: 1 / -1;
17+
grid-column: 1/-1;
1818
display: flex;
1919
align-items: center;
20-
gap: 0.25rem;
21-
text-transform: uppercase;
20+
gap: .25rem;
2221
color: var(--color_fg_default);
23-
font-size: 0.875rem;
24-
line-height: 1.375rem;
25-
font-weight: 500;
26-
letter-spacing: 0.24px;
27-
margin-right: 8px;
22+
font-size: 1rem;
23+
line-height: 1.15rem;
24+
font-weight: 700;
25+
letter-spacing: -.1px;
2826
}
2927

3028
.cardTabs {
31-
position: relative;
32-
grid-column: span 6;
33-
display: flex;
34-
height: 100%;
35-
width: 100%;
36-
flex-direction: column;
37-
border-radius: 0.5rem;
38-
border: 1px solid var(--color_border_bold);
39-
background: var(--color_bg_layer_alternate);
40-
overflow: hidden;
29+
grid-column: span 6;
30+
display: flex;
31+
flex-direction: column;
32+
border-radius: 1rem;
33+
border: .5px solid var(--color_border_default);
34+
background: var(--color_bg_layer_alternate-bold);
35+
letter-spacing: -.1px;
36+
gap: .25rem;
4137
}
4238

4339
$cardTabs__tabList__height: 2.5rem;
4440

4541
.cardTabs__tabList {
46-
position: relative;
47-
display: flex;
48-
border-bottom: 1px solid var(--color_border_bold);
49-
height: $cardTabs__tabList__height;
50-
flex-shrink: 0;
42+
position: relative;
43+
display: flex;
44+
height: 2.5rem;
45+
padding: .5rem;
46+
gap: .25rem;
5147
}
5248

5349
.cardTabs__title__container {
@@ -56,23 +52,21 @@ $cardTabs__tabList__height: 2.5rem;
5652
}
5753

5854
.cardTab__title {
59-
position: relative;
60-
display: flex;
61-
align-items: center;
62-
gap: 0.25rem;
63-
text-transform: uppercase;
64-
padding: 0.5rem 0.75rem;
65-
border-bottom: 0.125rem solid transparent;
66-
color: var(--color_fg_default);
67-
font-size: 0.75rem;
68-
line-height: 1.125rem;
69-
font-weight: 500;
70-
letter-spacing: 0.24px;
71-
cursor: pointer;
55+
display: flex;
56+
align-items: center;
57+
gap: .25rem;
58+
border-radius: .5rem;
59+
padding: 0 .5rem;
60+
color: var(--color_fg_default);
61+
font-size: .875rem;
62+
line-height: 1.125rem;
63+
font-weight: 500;
64+
letter-spacing: -.1px;
65+
cursor: pointer;
7266

7367
&[data-selected="true"] {
74-
color: var(--color_fg_selected);
75-
border-bottom: 0.125rem solid var(--color_border_selected);
68+
background-color: var(--color_bg_layer);
69+
box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 1px -.5px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.04);
7670
}
7771

7872
&[data-focus-visible]:after {
@@ -86,6 +80,7 @@ $cardTabs__tabList__height: 2.5rem;
8680

8781
.cardTab__title__full {
8882
display: none;
83+
font-weight: 500;
8984

9085
@media #{$breakpoint-dimension-sm} {
9186
display: flex;
@@ -99,14 +94,24 @@ $cardTabs__tabList__height: 2.5rem;
9994
}
10095

10196
.cardTabs__actionButtons {
102-
position: absolute;
103-
right: 0.75rem;
104-
top: 0;
105-
display: flex;
106-
align-items: center;
107-
justify-content: center;
108-
gap: 0.5rem;
109-
height: $cardTabs__tabList__height;
97+
position: absolute;
98+
right: 0.75rem;
99+
top: 50%;
100+
transform: translateY(-50%);
101+
display: flex;
102+
align-items: center;
103+
justify-content: center;
104+
gap: 0.5rem;
105+
}
106+
107+
.cardTabs__tooltipContainer {
108+
position: relative;
109+
display: inline-block;
110+
&:hover {
111+
.button__tooltip {
112+
opacity: 1;
113+
}
114+
}
110115
}
111116

112117
.cardTabs__body {

‎src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ import { MonoFont } from "@/libs/theme/fonts";
77
export interface CardToolbarButtonComponentProps
88
extends AriaButtonOptions<"span"> {
99
variant: "standard" | "icon";
10+
tooltipText?: string;
1011
}
1112

1213
export const CardToolbarButtonComponent: React.FC<
1314
PropsWithChildren<CardToolbarButtonComponentProps>
1415
> = (props) => {
15-
const { variant, children } = props;
16+
const { variant, tooltipText, children } = props;
1617

1718
const ref = useRef<HTMLButtonElement | null>(null);
1819

@@ -22,20 +23,25 @@ export const CardToolbarButtonComponent: React.FC<
2223
elementType: "span",
2324
preventFocusOnPress: true,
2425
},
25-
ref,
26+
ref
2627
);
2728

2829
return (
29-
<button
30-
{...buttonProps}
31-
type="button"
32-
className={clsx(
33-
variant === "icon" ? styles.button__icon : styles.button__standard,
34-
MonoFont.className,
30+
<div className={styles.button__tooltipContainer}>
31+
<button
32+
{...buttonProps}
33+
type="button"
34+
className={clsx(
35+
variant === "icon" ? styles.button__icon : styles.button__standard,
36+
MonoFont.className
37+
)}
38+
data-style="compact"
39+
>
40+
{children}
41+
</button>
42+
{tooltipText && (
43+
<span className={styles.button__tooltip}>{tooltipText}</span>
3544
)}
36-
data-style="compact"
37-
>
38-
{children}
39-
</button>
45+
</div>
4046
);
4147
};

‎src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,56 @@
1+
.button__tooltipContainer {
2+
position: relative;
3+
display: inline-block;
4+
&:hover {
5+
.button__tooltip {
6+
opacity: 1;
7+
}
8+
}
9+
}
110
.button__standard {
2-
gap: 0.75rem;
3-
border-radius: 0.25rem;
4-
border: 1px solid var(--color_border_button);
11+
gap: .75rem;
12+
border-radius: .5rem;
513
color: var(--color_fg_on_button_subtle);
6-
font-variant-numeric: slashed-zero;
7-
font-feature-settings:
8-
"clig" off,
9-
"liga" off;
14+
z-index: 2;
1015
background-color: transparent;
1116
text-transform: uppercase;
1217
cursor: pointer;
13-
letter-spacing: 0.2px;
18+
padding: .75rem;
19+
letter-spacing: .2px;
1420
appearance: none;
1521
display: flex;
1622
align-items: center;
23+
justify-content: center;
24+
border: 1px solid transparent;
25+
transition: all .2s ease-out;
26+
width: 2rem;
27+
height: 2rem;
28+
font-size: .875rem;
29+
line-height: 1.375rem;
1730

1831
&[aria-disabled="true"] {
1932
opacity: 0.48;
2033
cursor: not-allowed;
2134
}
2235

36+
&:hover {
37+
background-color: var(--color_bg_layer);
38+
border: 1px solid var(--color_border_default);
39+
transition: all .2s ease-out;
40+
}
41+
2342
padding: 0 0.75rem;
2443
width: 5rem;
2544
height: 2rem;
2645
font-size: 0.875rem;
2746
line-height: 1.375rem;
2847

2948
&[data-style="compact"] {
30-
padding: 0.125rem 0.375rem;
31-
width: unset;
32-
height: unset;
33-
font-size: 0.75rem;
34-
line-height: 1.25rem;
49+
padding: .25rem;
50+
width: 2rem;
51+
height: 2rem;
52+
font-size: .8125rem;
53+
line-height: 1.35;
3554
}
3655

3756
svg {
@@ -46,6 +65,25 @@
4665
}
4766
}
4867

68+
.button__tooltip {
69+
position: absolute;
70+
top: -30px;
71+
left: 50%;
72+
transform: translateX(-50%);
73+
padding: 4px 8px;
74+
color: var(--color_fg_bold);
75+
background-color: var(--color_bg_layer);
76+
border: 1px solid var(--color_border_default);
77+
border-radius: .5rem;
78+
font-size: .75rem;
79+
white-space: nowrap;
80+
opacity: 0;
81+
pointer-events: none;
82+
transition: opacity .2s ease-in-out;
83+
box-shadow: 0 2px 4px rgba(0,0,0,.1);
84+
z-index: 1000;
85+
}
86+
4987
.button__icon {
5088
gap: 0.75rem;
5189
border-radius: 0.25rem;
@@ -72,10 +110,9 @@
72110
}
73111

74112
&:hover {
75-
background-color: var(--color_bg_layer_alternate-bold);
76-
svg {
77-
stroke: var(--color_fg_selected);
78-
}
113+
background-color: var(--color_bg_layer);
114+
border: 1px solid var(--color_border_default);
115+
transition: all .2s ease-out;
79116
}
80117

81118
&:focus-visible {

‎src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
CardToolbarButtonComponent,
55
CardToolbarButtonComponentProps,
66
} from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
7+
import { ClearIcon } from "../../icons/clear/clear-icon";
78

89
interface CardToolbarClearButtonComponentProps
910
extends Omit<CardToolbarButtonComponentProps, "variant"> {
@@ -16,8 +17,12 @@ export const CardToolbarClearButtonComponent: React.FC<
1617
const dictionary = getButtonsUiDictionary(languageCode);
1718

1819
return (
19-
<CardToolbarButtonComponent {...props} variant="standard">
20-
{dictionary.clearButton.label}
20+
<CardToolbarButtonComponent
21+
{...props}
22+
variant="standard"
23+
tooltipText={dictionary.clearButton.label}
24+
>
25+
<ClearIcon />
2126
</CardToolbarButtonComponent>
2227
);
2328
};

0 commit comments

Comments
 (0)