Skip to content

Commit 8af9e1f

Browse files
webviewer-uiwebviewer-ui
committed
[Misc] Modular Flyout WCAG Styling (#9189)
(master → master)
1 parent 3dbf9b4 commit 8af9e1f

File tree

21 files changed

+421
-96
lines changed

21 files changed

+421
-96
lines changed

‎assets/icons/icon-save.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/components/Dropdown/Dropdown.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,17 @@
9191
border-radius: 0px;
9292
padding-right: 32px;
9393

94+
&.active, &:hover {
95+
color: var(--dropdown-item-active-text);
96+
.Icon, .Icon svg * {
97+
color: var(--dropdown-item-active-icon);
98+
}
99+
}
94100
&.active {
95-
background-color: var(--popup-button-active);
101+
background-color: var(--dropdown-item-active);
96102
}
97-
98103
&:hover {
99-
background-color: var(--popup-button-hover);
104+
background-color: var(--dropdown-item-hover);
100105
}
101106

102107
&:first-child {

‎src/components/FontSizeDropdown/FontSizeDropdown.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,17 @@
9191
font-size: var(--font-size-default);
9292
line-height: 28px;
9393

94+
&.active, &:hover {
95+
color: var(--dropdown-item-active-text);
96+
.Icon, .Icon svg * {
97+
color: var(--dropdown-item-active-icon);
98+
}
99+
}
94100
&.active {
95-
background-color: var(--popup-button-active);
101+
background-color: var(--dropdown-item-active);
96102
}
97-
98103
&:hover {
99-
background-color: var(--popup-button-hover);
104+
background-color: var(--dropdown-item-hover);
100105
}
101106

102107
&:first-child {

‎src/components/ModularComponents/FlexDropdown/FlexDropdown.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import '../../../constants/styles';
2+
3+
.FlexDropdown {
4+
border-color: var(--lighter-border);
5+
&__wrapper {
6+
position: relative;
7+
}
8+
9+
.Icon {
10+
@include mobile {
11+
font-size : var(--font-size-default);
12+
}
13+
}
14+
15+
.Dropdown__items {
16+
z-index: $headers-z-index;
17+
}
18+
19+
.Dropdown__item-object {
20+
display: flex;
21+
align-items: center;
22+
gap: 4px;
23+
24+
@include mobile {
25+
font-size : var(--font-size-default);
26+
}
27+
}
28+
29+
&.column {
30+
height: auto;
31+
padding: 0;
32+
.picked-option {
33+
flex-direction: column;
34+
gap: 4px;
35+
padding: 4px;
36+
}
37+
.Dropdown__items {
38+
z-index: $headers-z-index;
39+
width: 100%;
40+
padding: 0;
41+
gap: 12px;
42+
}
43+
.Dropdown__item {
44+
min-height: 28px;
45+
height: 100%;
46+
padding: 4px;
47+
}
48+
.Dropdown__item-object {
49+
display: flex;
50+
flex-direction: column;
51+
max-width: 100%;
52+
flex: 1;
53+
}
54+
}
55+
56+
.Dropdown__item-text {
57+
white-space: nowrap;
58+
overflow: hidden;
59+
text-overflow: ellipsis;
60+
max-width: 100%;
61+
}
62+
}

‎src/components/ModularComponents/Flyout/Flyout.scss‎

Lines changed: 62 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../../constants/styles';
22
@import '../../../constants/overlay';
3-
3+
@import '../../../constants/lightWCAG';
44

55
.Flyout {
66
z-index: 90;
@@ -51,11 +51,6 @@
5151
display: none;
5252
}
5353

54-
&:active,
55-
&.active {
56-
background-color: var(--blue-2);
57-
}
58-
5954
.Icon,
6055
.menu-icon {
6156
width: 24px;
@@ -64,17 +59,13 @@
6459
}
6560

6661
.icon-open-submenu {
62+
cursor: pointer;
6763
justify-self: flex-end;
6864
width: 16px;
6965
height: 16px;
7066
margin-right: 8px;
7167
padding-top: 2px;
7268
display: flex;
73-
74-
&:active,
75-
&.active {
76-
background-color: var(--blue-2);
77-
}
7869
}
7970

8071
.menu-icon.Icon svg path {
@@ -100,33 +91,44 @@
10091
margin-right: 0;
10192
}
10293

103-
&:hover:not([disabled]) {
104-
background-color: var(--blue-1);
105-
cursor: pointer;
94+
.flyout-item-label {
95+
justify-self: flex-start;
96+
font-size: var(--font-size-default);
10697
}
10798

108-
&:active,
109-
&.active {
110-
background-color: var(--blue-2);
99+
&[disabled], .disabled {
100+
color: var(--gray-5);
101+
}
102+
}
111103

112-
.Icon svg path {
113-
color: var(--blue-6);
114-
}
104+
&:active:not([disabled]):not(.disabled),
105+
&.active:not([disabled]):not(.disabled),
106+
&:hover:not([disabled]):not(.disabled) {
107+
color: var(--gray-0);
115108

116-
.flyout-item-label {
117-
color: var(--blue-6);
118-
}
109+
.Icon, .Icon svg * {
110+
color: var(--gray-0);
119111
}
120112

121-
&[disabled] {
122-
opacity: 0.5;
113+
.hotkey-wrapper {
114+
color: var(--gray-0);
115+
}
116+
117+
.ZoomText {
118+
.label, .value {
119+
color: var(--gray-0);
120+
}
123121
}
124122
}
125123

126-
.flyout-item-label {
127-
justify-self: flex-start;
128-
font-size: var(--font-size-default);
129-
color: var(--gray-8);
124+
&:active:not([disabled]):not(.disabled),
125+
&.active:not([disabled]):not(.disabled) {
126+
background-color: var(--blue-5);
127+
}
128+
129+
&:hover:not([disabled]):not(.disabled) {
130+
background-color: var(--blue-6);
131+
cursor: pointer;
130132
}
131133

132134
.ZoomItem {
@@ -146,6 +148,19 @@
146148
margin-left: 8px;
147149
margin-right: 2px;
148150
}
151+
152+
&[disabled], &.disabled {
153+
color: var(--gray-5);
154+
155+
.Icon, .Icon svg * {
156+
color: var(--gray-5);
157+
}
158+
159+
.hotkey-wrapper {
160+
color: var(--gray-5);
161+
pointer-events: none;
162+
}
163+
}
149164
}
150165

151166
.flyout-label {
@@ -166,16 +181,28 @@
166181
height: 16px;
167182
}
168183

184+
&:active,
185+
&.active,
169186
&:hover {
170-
background-color: var(--blue-2);
171-
}
187+
color: var(--gray-0);
188+
189+
.Icon, .Icon svg * {
190+
color: var(--gray-0);
191+
}
172192

173-
&:active {
174-
color: var(--blue-6);
193+
.hotkey-wrapper {
194+
color: var(--gray-0);
195+
}
175196

176-
.Icon svg path {
177-
fill: var(--blue-6);
197+
.ZoomText {
198+
.label, .value {
199+
color: var(--gray-0);
200+
}
178201
}
179202
}
203+
204+
&:hover {
205+
background-color: var(--blue-6);
206+
}
180207
}
181208
}

‎src/components/ModularComponents/Flyout/Flyout.stories.js‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ const initialState = {
4343
openElements: {},
4444
customPanels: [],
4545
genericPanels: [],
46+
canUndo: {
47+
1: false,
48+
2: false,
49+
},
50+
canRedo: {
51+
1: false,
52+
2: false,
53+
},
4654
flyoutMap: {
4755
'flyoutMenu': {
4856
'dataElement': 'flyoutMenu',
@@ -277,6 +285,14 @@ const initialState = {
277285
},
278286
],
279287
},
288+
{
289+
label: 'Disabled Item',
290+
onClick: () => {
291+
console.warn('Item 9 should not click');
292+
},
293+
icon: 'icon-close',
294+
disabled: 'true',
295+
}
280296
],
281297
},
282298
'noIcons': {
@@ -308,6 +324,10 @@ const initialState = {
308324
},
309325
{
310326
'label': 'Item 5',
327+
},
328+
{
329+
'label': 'Item 6',
330+
'disabled': 'true',
311331
}
312332
],
313333
},
@@ -421,41 +441,12 @@ const store3 = configureStore({
421441
}
422442
});
423443

424-
425444
export const MainMenuFlyout = () => (
426445
<Provider store={store3}>
427446
<Flyout/>
428447
</Provider>
429448
);
430449

431-
const tmp = Object.assign({}, uiWithFlyout.modularComponents);
432-
tmp.flyoutToggle = {
433-
...tmp.flyoutToggle,
434-
toggleElement: 'viewControlsFlyout'
435-
};
436-
export const ViewControlsFlyout = createTemplate({
437-
headers: uiWithFlyout.modularHeaders,
438-
components: tmp,
439-
flyoutMap: {
440-
'viewControlsFlyout': {
441-
'dataElement': 'viewControlsFlyout',
442-
'items': []
443-
}
444-
}
445-
});
446-
447-
ViewControlsFlyout.play = async (context) => {
448-
const canvas = within(context.canvasElement);
449-
// Click the toggle button to open the flyout
450-
const flyoutToggle = await canvas.findByRole('button', { 'aria-label': 'View Control Toggle' });
451-
await userEvent.click(flyoutToggle);
452-
// Check if the flyout is open
453-
const flyoutItem = await canvas.findByText('Rotate Clockwise');
454-
expect(flyoutItem).toBeInTheDocument();
455-
// Click flyoutItem
456-
await userEvent.click(flyoutItem);
457-
expect(flyoutItem).toBeInTheDocument();
458-
};
459450
const store4 = configureStore({
460451
reducer: () => {
461452
return {
@@ -497,5 +488,13 @@ FlyoutOpeningTest.play = async ({ canvasElement }) => {
497488
await userEvent.click(backBtn);
498489
// Check if the submenu is gone
499490
expect(submenuItem2).not.toBeInTheDocument();
500-
};
501491

492+
// Check disabled buttons
493+
const disabledButton = await canvas.findByText('Disabled Flyout Item');
494+
expect(disabledButton).toBeInTheDocument();
495+
// Try to click the disabled button
496+
await userEvent.click(disabledButton);
497+
// Check if the disabled submenu item is not present
498+
const disabledSubmenuItem = await canvas.queryByText('Disabled Submenu Item');
499+
expect(disabledSubmenuItem).not.toBeInTheDocument();
500+
};

0 commit comments

Comments
 (0)