Skip to content

Commit f384632

Browse files
authored
fix: Added Flashbar style support for focus ring and dismiss button variants (#3630)
1 parent 36bdac5 commit f384632

File tree

9 files changed

+342
-136
lines changed

9 files changed

+342
-136
lines changed

pages/flashbar/style-custom.page.tsx

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,19 +120,49 @@ const item = {
120120
warning: palette.orange100,
121121
},
122122
focusRing: {
123-
borderColor: palette.neutral90,
123+
borderColor: {
124+
error: palette.red100,
125+
info: palette.blue100,
126+
inProgress: palette.teal100,
127+
success: palette.green100,
128+
warning: palette.orange100,
129+
},
124130
borderRadius: '4px',
125131
borderWidth: '1px',
126132
},
127133
},
128134
dismissButton: {
129135
color: {
130-
active: palette.neutral100,
131-
default: palette.neutral80,
132-
hover: palette.neutral90,
136+
active: {
137+
error: palette.red100,
138+
info: palette.blue100,
139+
inProgress: palette.teal100,
140+
success: palette.green100,
141+
warning: palette.orange100,
142+
},
143+
default: {
144+
error: palette.red90,
145+
info: palette.blue90,
146+
inProgress: palette.teal90,
147+
success: palette.green90,
148+
warning: palette.orange90,
149+
},
150+
hover: {
151+
error: palette.red80,
152+
info: palette.blue80,
153+
inProgress: palette.teal80,
154+
success: palette.green80,
155+
warning: palette.orange80,
156+
},
133157
},
134158
focusRing: {
135-
borderColor: palette.neutral90,
159+
borderColor: {
160+
error: palette.red80,
161+
info: palette.blue80,
162+
inProgress: palette.teal80,
163+
success: palette.green80,
164+
warning: palette.orange80,
165+
},
136166
borderRadius: '4px',
137167
borderWidth: '1px',
138168
},
@@ -159,4 +189,11 @@ const notificationBar = {
159189
hover: palette.neutral10,
160190
},
161191
},
192+
expandButton: {
193+
focusRing: {
194+
borderColor: palette.neutral20,
195+
borderRadius: '4px',
196+
borderWidth: '1px',
197+
},
198+
},
162199
};

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9485,18 +9485,23 @@ If the \`action\` property is set, this property is ignored. **Deprecated**, rep
94859485
- \`item.root.borderRadius\` (string) - (Optional) Item border radius.
94869486
- \`item.root.borderWidth\` (string) - (Optional) Item border width.
94879487
- \`item.root.color\` {error, info, inProgress, success, warning} - (Optional) Color for item types.
9488-
- \`item.root.focusRing.borderColor\` (string) - (Optional) Item focus ring border color.
9488+
- \`item.root.focusRing.borderColor\` {error, info, inProgress, success, warning} - (Optional) Item focus ring border color.
94899489
- \`item.root.focusRing.borderRadius\` (string) - (Optional) Item focus ring border radius.
94909490
- \`item.root.focusRing.borderWidth\` (string) - (Optional) Item focus ring border width.
9491-
- \`item.dismissButton.color\` {active, default, hover} - (Optional) Color for dismiss button states.
9492-
- \`item.dismissButton.focusRing.borderColor\` (string) - (Optional) Dismiss button focus ring border color.
9491+
- \`item.dismissButton.color.active\` {error, info, inProgress, success, warning} - (Optional) Color for dismiss button active state.
9492+
- \`item.dismissButton.color.default\` {error, info, inProgress, success, warning} - (Optional) Color for dismiss button default state.
9493+
- \`item.dismissButton.color.hover\` {error, info, inProgress, success, warning} - (Optional) Color for dismiss button hover state.
9494+
- \`item.dismissButton.focusRing.borderColor\` {error, info, inProgress, success, warning} - (Optional) Dismiss button focus ring border color.
94939495
- \`item.dismissButton.focusRing.borderRadius\` (string) - (Optional) Dismiss button focus ring border radius.
94949496
- \`item.dismissButton.focusRing.borderWidth\` (string) - (Optional) Dismiss button focus ring border width.
94959497
- \`notificationBar.root.background\` {active, default, hover} - (Optional) Background for notification bar states.
94969498
- \`notificationBar.root.borderColor\` {active, default, hover} - (Optional) Border color for notification bar states.
94979499
- \`notificationBar.root.borderRadius\` (string) - (Optional) Notification bar border radius.
94989500
- \`notificationBar.root.borderWidth\` (string) - (Optional) Notification bar border width.
9499-
- \`notificationBar.root.color\` {active, default, hover} - (Optional) Color for notification bar states.",
9501+
- \`notificationBar.root.color\` {active, default, hover} - (Optional) Color for notification bar states.
9502+
- \`notificationBar.expandButton.focusRing.borderColor\` (string) - (Optional) Border color for the expand button.
9503+
- \`notificationBar.expandButton.focusRing.borderRadius\` (string) - (Optional) Border radius for the expand button.
9504+
- \`notificationBar.expandButton.focusRing.borderWidth\` (string) - (Optional) Border width for the expand button.",
95009505
"name": "style",
95019506
"optional": true,
95029507
"systemTags": [

src/flashbar/__integ__/collapsible.test.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -166,22 +166,23 @@ describe('Flashbar Style API', () => {
166166
const expandButton = page.getExpandButton();
167167

168168
await page.hoverElement(dismissButton);
169-
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(48,64,80,1)');
169+
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(63,125,74,1)');
170170

171171
await page.buttonDownOnElement(dismissButton);
172-
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(13,26,38,1)');
172+
await expect((await browser.$(dismissButton).getCSSProperty('color')).value).toBe('rgba(46,72,50,1)');
173173

174174
await page.click('[data-testid=collapsed]');
175175
await page.keys('Tab');
176176
await expect((await browser.$(dismissButton).getCSSProperty('box-shadow', '::before')).value).toBe(
177-
'rgb(48,64,80)0px0px0px1px'
177+
'rgb(63,125,74)0px0px0px1px'
178178
);
179179

180180
await page.click('[data-testid=collapsed]');
181181
await page.keys(['Shift', 'Tab']);
182182
await expect((await browser.$(expandButton).getCSSProperty('box-shadow', '::before')).value).toBe(
183-
'rgb(249,249,250)0px0px0px2px'
183+
'rgb(239,240,240)0px0px0px1px'
184184
);
185+
await expect((await browser.$(expandButton).getCSSProperty('border-radius', '::before')).value).toBe('4px');
185186

186187
await page.buttonDownOnElement(notificationBar);
187188
await expect((await browser.$(notificationBar).getCSSProperty('background-color')).value).toBe(

src/flashbar/__tests__/collapsible.test.tsx

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -416,19 +416,49 @@ describe('Collapsible Flashbar', () => {
416416
warning: 'brown',
417417
},
418418
focusRing: {
419-
borderColor: 'magenta',
419+
borderColor: {
420+
error: 'magenta',
421+
info: 'blue',
422+
inProgress: 'yellow',
423+
success: 'orange',
424+
warning: 'brown',
425+
},
420426
borderRadius: '10px',
421427
borderWidth: '5px',
422428
},
423429
},
424430
dismissButton: {
425431
color: {
426-
active: 'magenta',
427-
default: 'blue',
428-
hover: 'orange',
432+
active: {
433+
error: 'magenta',
434+
info: 'blue',
435+
inProgress: 'yellow',
436+
success: 'orange',
437+
warning: 'brown',
438+
},
439+
default: {
440+
error: 'magenta',
441+
info: 'blue',
442+
inProgress: 'yellow',
443+
success: 'orange',
444+
warning: 'brown',
445+
},
446+
hover: {
447+
error: 'magenta',
448+
info: 'blue',
449+
inProgress: 'yellow',
450+
success: 'orange',
451+
warning: 'brown',
452+
},
429453
},
430454
focusRing: {
431-
borderColor: 'green',
455+
borderColor: {
456+
error: 'magenta',
457+
info: 'blue',
458+
inProgress: 'yellow',
459+
success: 'orange',
460+
warning: 'brown',
461+
},
432462
borderRadius: '10px',
433463
borderWidth: '90px',
434464
},
@@ -452,6 +482,13 @@ describe('Collapsible Flashbar', () => {
452482
hover: 'green',
453483
},
454484
},
485+
expandButton: {
486+
focusRing: {
487+
borderColor: 'magenta',
488+
borderRadius: '10px',
489+
borderWidth: '90px',
490+
},
491+
},
455492
},
456493
},
457494
items: [
@@ -512,16 +549,31 @@ describe('Collapsible Flashbar', () => {
512549
customCssProps.styleColorHover
513550
)
514551
).toBe('green');
552+
expect(
553+
getComputedStyle(findNotificationBar(flashbar) as HTMLElement).getPropertyValue(
554+
customCssProps.styleFocusRingBorderColor
555+
)
556+
).toBe('magenta');
557+
expect(
558+
getComputedStyle(findNotificationBar(flashbar) as HTMLElement).getPropertyValue(
559+
customCssProps.styleFocusRingBorderRadius
560+
)
561+
).toBe('10px');
562+
expect(
563+
getComputedStyle(findNotificationBar(flashbar) as HTMLElement).getPropertyValue(
564+
customCssProps.styleFocusRingBorderWidth
565+
)
566+
).toBe('90px');
515567
expect(
516568
getComputedStyle(flashbar.findItems()[0].findDismissButton()!.getElement()).getPropertyValue(
517569
customCssProps.styleColorActive
518570
)
519-
).toBe('magenta');
571+
).toBe('yellow');
520572
expect(
521573
getComputedStyle(flashbar.find('li > div')?.getElement() as HTMLElement).getPropertyValue(
522574
customCssProps.styleFocusRingBorderColor
523575
)
524-
).toBe('magenta');
576+
).toBe('yellow');
525577
expect(
526578
getComputedStyle(flashbar.find('li > div')?.getElement() as HTMLElement).getPropertyValue(
527579
customCssProps.styleFocusRingBorderRadius
@@ -536,17 +588,17 @@ describe('Collapsible Flashbar', () => {
536588
getComputedStyle(flashbar.findItems()[0].findDismissButton()!.getElement()).getPropertyValue(
537589
customCssProps.styleColorDefault
538590
)
539-
).toBe('blue');
591+
).toBe('yellow');
540592
expect(
541593
getComputedStyle(flashbar.findItems()[0].findDismissButton()!.getElement()).getPropertyValue(
542594
customCssProps.styleColorHover
543595
)
544-
).toBe('orange');
596+
).toBe('yellow');
545597
expect(
546598
getComputedStyle(flashbar.findItems()[0].findDismissButton()!.getElement()).getPropertyValue(
547599
customCssProps.styleFocusRingBorderColor
548600
)
549-
).toBe('green');
601+
).toBe('yellow');
550602
expect(
551603
getComputedStyle(flashbar.findItems()[0].findDismissButton()!.getElement()).getPropertyValue(
552604
customCssProps.styleFocusRingBorderRadius

src/flashbar/collapsible-flashbar.tsx

Lines changed: 3 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './anal
2626
import { useFlashbar } from './common';
2727
import { Flash, focusFlashById } from './flash';
2828
import { FlashbarProps } from './interfaces';
29+
import { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';
2930
import { counterTypes, getFlashTypeCount, getItemColor, getVisibleCollapsedItems, StackableItem } from './utils';
3031

3132
import styles from './styles.css.js';
@@ -212,40 +213,6 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Flas
212213

213214
const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;
214215

215-
const getNotificationBarStyles = () => {
216-
return {
217-
borderRadius: style?.notificationBar?.root.borderRadius,
218-
borderWidth: style?.notificationBar?.root.borderWidth,
219-
...(style?.notificationBar?.root?.background?.active && {
220-
[customCssProps.styleBackgroundActive]: style.notificationBar.root.background.active,
221-
}),
222-
...(style?.notificationBar?.root?.background?.default && {
223-
[customCssProps.styleBackgroundDefault]: style.notificationBar.root.background.default,
224-
}),
225-
...(style?.notificationBar?.root?.background?.hover && {
226-
[customCssProps.styleBackgroundHover]: style.notificationBar.root.background.hover,
227-
}),
228-
...(style?.notificationBar?.root?.borderColor?.active && {
229-
[customCssProps.styleBorderColorActive]: style.notificationBar.root.borderColor.active,
230-
}),
231-
...(style?.notificationBar?.root?.borderColor?.default && {
232-
[customCssProps.styleBorderColorDefault]: style.notificationBar.root.borderColor.default,
233-
}),
234-
...(style?.notificationBar?.root?.borderColor?.hover && {
235-
[customCssProps.styleBorderColorHover]: style.notificationBar.root.borderColor.hover,
236-
}),
237-
...(style?.notificationBar?.root?.color?.active && {
238-
[customCssProps.styleColorActive]: style.notificationBar.root.color.active,
239-
}),
240-
...(style?.notificationBar?.root?.color?.default && {
241-
[customCssProps.styleColorDefault]: style.notificationBar.root.color.default,
242-
}),
243-
...(style?.notificationBar?.root?.color?.hover && {
244-
[customCssProps.styleColorHover]: style.notificationBar.root.color.hover,
245-
}),
246-
};
247-
};
248-
249216
const renderList = () => (
250217
<ul
251218
ref={listElementRef}
@@ -300,7 +267,7 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Flas
300267
}
301268
}}
302269
style={{
303-
...(index > 0 && !isFlashbarStackExpanded && style && getItemStyles(style, item.type)),
270+
...(index > 0 && !isFlashbarStackExpanded && style && getCollapsibleFlashStyles(style, item.type)),
304271
...((!isFlashbarStackExpanded || transitioning) && {
305272
[customCssProps.flashbarStackIndex]:
306273
(item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,
@@ -360,7 +327,7 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Flas
360327
)}
361328
onClick={toggleCollapseExpand}
362329
ref={notificationBarRef}
363-
style={{ ...getNotificationBarStyles() }}
330+
style={{ ...(style && getNotificationBarStyles(style)) }}
364331
{...getAnalyticsMetadataAttribute({
365332
action: !isFlashbarStackExpanded ? 'expand' : 'collapse',
366333
detail: {
@@ -397,41 +364,6 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Flas
397364
);
398365
}
399366

400-
export const getItemStyles = (style: FlashbarProps.Style, type: string = 'info') => {
401-
const background =
402-
style?.item?.root?.background &&
403-
(type === 'in-progress'
404-
? style?.item?.root?.background.inProgress
405-
: style?.item?.root?.background[type as keyof typeof style.item.root.background]);
406-
407-
const borderColor =
408-
style?.item?.root?.borderColor &&
409-
(type === 'in-progress'
410-
? style?.item?.root?.borderColor.inProgress
411-
: style?.item?.root?.borderColor[type as keyof typeof style.item.root.borderColor]);
412-
413-
const borderRadius = style?.item?.root?.borderRadius;
414-
415-
const borderWidth = style?.item?.root?.borderWidth;
416-
417-
const borderStyle = style?.item?.root?.borderWidth && 'solid';
418-
419-
const color =
420-
style?.item?.root?.color &&
421-
(type === 'in-progress'
422-
? style?.item?.root?.color.inProgress
423-
: style?.item?.root?.color[type as keyof typeof style.item.root.color]);
424-
425-
return {
426-
background,
427-
borderColor,
428-
borderRadius,
429-
borderStyle,
430-
borderWidth,
431-
color,
432-
};
433-
};
434-
435367
const NotificationTypeCount = ({
436368
iconName,
437369
label,

0 commit comments

Comments
 (0)