Skip to content

Commit a95b491

Browse files
InnaAtanasovaInnaAtanasova
committed
fix(styles: update resize handle per wcag compliance [ci visual]
1 parent 93d6000 commit a95b491

12 files changed

+119
-98
lines changed

‎packages/styles/src/_dialog-placeholders.scss

-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ $fd-dialog-loader-margin-y: 1.5rem;
3838
display: flex;
3939
flex-direction: column;
4040
outline: none;
41-
overflow: hidden;
4241
position: absolute;
4342
min-width: $fd-dialog-content-min-width;
4443
min-height: $fd-dialog-content-min-height;

‎packages/styles/src/dialog.scss

+18-10
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,16 @@ $menu: #{$fd-namespace}-menu;
8080
}
8181
}
8282

83+
&__header.#{$bar} {
84+
border-top-left-radius: var(--sapElement_BorderCornerRadius);
85+
border-top-right-radius: var(--sapElement_BorderCornerRadius);
86+
}
87+
88+
&__footer.#{$bar} {
89+
border-bottom-left-radius: var(--sapElement_BorderCornerRadius);
90+
border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
91+
}
92+
8393
&__header,
8494
&__subheader,
8595
&__footer {
@@ -134,20 +144,17 @@ $menu: #{$fd-namespace}-menu;
134144

135145
&__resize-handle {
136146
@include fd-reset();
137-
@include fd-square(1rem);
147+
@include fd-square(1.5rem);
148+
@include fd-set-position-right(-0.5rem);
138149

139150
@include fd-flex() {
140-
align-items: flex-end;
141-
justify-content: flex-end;
151+
align-items: flex-start;
152+
justify-content: flex-start;
142153
}
143154

144-
@include fd-set-position-right(0);
145-
146-
bottom: 0;
155+
bottom: -0.5rem;
147156
font-size: 1rem;
148157
overflow: hidden;
149-
margin-block: 0.125rem;
150-
margin-inline: 0.125rem;
151158
cursor: se-resize;
152159
line-height: 1rem;
153160
position: absolute;
@@ -156,11 +163,12 @@ $menu: #{$fd-namespace}-menu;
156163
@include fd-rtl() {
157164
cursor: sw-resize;
158165
transform: scaleX(-1);
159-
justify-content: flex-start;
166+
justify-content: flex-end;
160167
}
161168

162169
@include fd-icon("resize-corner", "after") {
163-
height: 1rem;
170+
@include fd-square(1rem);
171+
164172
color: var(--sapButton_Lite_TextColor);
165173
}
166174
}

‎packages/styles/src/popover.scss

+41-25
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,14 @@ body.fd-overlay-active::before {
8080
--fdPopover_Body_Box_Shadow_No_Arrow: var(--sapContent_Shadow1);
8181
--fdIcon_Button_Height: 2.25rem;
8282
--fdIcon_Button_Width: 2.25rem;
83+
--fdPopover_Resize_Handle_Offset: -0.5rem;
8384
--fdPopover_Resize_Handle_Position_Top: auto;
84-
--fdPopover_Resize_Handle_Position_Right: 0;
85-
--fdPopover_Resize_Handle_Position_Bottom: 0;
85+
--fdPopover_Resize_Handle_Position_Right: var(--fdPopover_Resize_Handle_Offset);
86+
--fdPopover_Resize_Handle_Position_Bottom: var(--fdPopover_Resize_Handle_Offset);
8687
--fdPopover_Resize_Handle_Position_Left: auto;
8788
--fdPopover_Resize_Handle_Rotate_Angle: 0;
8889
--fdPopover_Resize_Handle_Cursor: se-resize;
89-
--fdPopover_Resize_Handle_Justify: flex-end;
90+
--fdPopover_Resize_Handle_Justify: center;
9091
--fdPopover_Resize_Handle_Transform_Scale: 1;
9192

9293
$fd-popover-z-index: map.get($fd-z-index-levels, 'top') !default;
@@ -169,7 +170,7 @@ body.fd-overlay-active::before {
169170
border-top-left-radius: $fd-popover-border-radius;
170171
}
171172

172-
> *:last-child,
173+
> *:last-child:not(.#{$block}__resize-handle),
173174
&-footer > *:last-child {
174175
border-bottom-right-radius: $fd-popover-border-radius;
175176
border-bottom-left-radius: $fd-popover-border-radius;
@@ -410,63 +411,66 @@ body.fd-overlay-active::before {
410411
&.#{$blockBody}--resizable {
411412
@include fd-rtl() {
412413
--fdPopover_Resize_Handle_Position_Right: auto;
413-
--fdPopover_Resize_Handle_Position_Left: 0;
414+
--fdPopover_Resize_Handle_Position_Left: var(--fdPopover_Resize_Handle_Offset);
414415
--fdPopover_Resize_Handle_Cursor: sw-resize;
415416
--fdPopover_Resize_Handle_Transform_Scale: -1;
416-
--fdPopover_Resize_Handle_Justify: flex-start;
417417
}
418418

419419
&.#{$blockBody}--right {
420-
--fdPopover_Resize_Handle_Position_Left: 0;
420+
--fdPopover_Resize_Handle_Position_Left: var(--fdPopover_Resize_Handle_Offset);
421421
--fdPopover_Resize_Handle_Position_Right: auto;
422422
--fdPopover_Resize_Handle_Cursor: sw-resize;
423423
--fdPopover_Resize_Handle_Transform_Scale: -1;
424+
--fdPopover_Resize_Handle_Container_Justify: flex-end;
424425

425426
@include fd-rtl() {
426-
--fdPopover_Resize_Handle_Position_Right: 0;
427+
--fdPopover_Resize_Handle_Position_Right: var(--fdPopover_Resize_Handle_Offset);
427428
--fdPopover_Resize_Handle_Position_Left: auto;
428429
--fdPopover_Resize_Handle_Cursor: se-resize;
429430
--fdPopover_Resize_Handle_Transform_Scale: 1;
430431
}
431432
}
432433

433434
&.#{$blockBody}--above {
434-
--fdPopover_Resize_Handle_Position_Top: 0;
435+
--fdPopover_Resize_Handle_Position_Top: var(--fdPopover_Resize_Handle_Offset);
435436
--fdPopover_Resize_Handle_Position_Bottom: auto;
436-
--fdPopover_Resize_Handle_Position_Right: 0;
437+
--fdPopover_Resize_Handle_Position_Right: -0.5rem;
437438
--fdPopover_Resize_Handle_Position_Left: auto;
438439
--fdPopover_Resize_Handle_Cursor: ne-resize;
439440
--fdPopover_Resize_Handle_Rotate_Angle: -90deg;
440441
--fdPopover_Resize_Handle_Transform_Scale: 1;
441442

442443
@include fd-rtl() {
443444
--fdPopover_Resize_Handle_Position_Right: auto;
444-
--fdPopover_Resize_Handle_Position_Left: 0;
445+
--fdPopover_Resize_Handle_Position_Left: var(--fdPopover_Resize_Handle_Offset);
445446
--fdPopover_Resize_Handle_Cursor: nw-resize;
446447
--fdPopover_Resize_Handle_Transform_Scale: 1;
447448
--fdPopover_Resize_Handle_Rotate_Angle: 180deg;
449+
--fdPopover_Resize_Handle_Container_Justify: flex-end;
448450
}
449451

450452
&.#{$blockBody}--right {
451453
--fdPopover_Resize_Handle_Position_Right: auto;
452-
--fdPopover_Resize_Handle_Position_Left: 0;
454+
--fdPopover_Resize_Handle_Position_Left: var(--fdPopover_Resize_Handle_Offset);
453455
--fdPopover_Resize_Handle_Rotate_Angle: 180deg;
454456
--fdPopover_Resize_Handle_Cursor: nw-resize;
455457
--fdPopover_Resize_Handle_Transform_Scale: 1;
458+
--fdPopover_Resize_Handle_Container_Justify: flex-start;
456459

457460
@include fd-rtl() {
458-
--fdPopover_Resize_Handle_Position_Right: 0;
461+
--fdPopover_Resize_Handle_Position_Right: var(--fdPopover_Resize_Handle_Offset);
459462
--fdPopover_Resize_Handle_Position_Left: auto;
460463
--fdPopover_Resize_Handle_Rotate_Angle: -90deg;
461464
--fdPopover_Resize_Handle_Cursor: ne-resize;
465+
--fdPopover_Resize_Handle_Container_Justify: flex-end;
462466
}
463467
}
464468
}
465469

466470
&.#{$blockBody}--after {
467471
--fdPopover_Resize_Handle_Position_Top: auto;
468-
--fdPopover_Resize_Handle_Position_Bottom: 0;
469-
--fdPopover_Resize_Handle_Position_Right: 0;
472+
--fdPopover_Resize_Handle_Position_Bottom: var(--fdPopover_Resize_Handle_Offset);
473+
--fdPopover_Resize_Handle_Position_Right: var(--fdPopover_Resize_Handle_Offset);
470474
--fdPopover_Resize_Handle_Position_Left: auto;
471475
--fdPopover_Resize_Handle_Cursor: se-resize;
472476

@@ -475,28 +479,37 @@ body.fd-overlay-active::before {
475479
}
476480

477481
&.#{$blockBody}--bottom {
478-
--fdPopover_Resize_Handle_Position_Top: 0;
482+
--fdPopover_Resize_Handle_Position_Top: var(--fdPopover_Resize_Handle_Offset);
479483
--fdPopover_Resize_Handle_Position_Bottom: auto;
480-
--fdPopover_Resize_Handle_Position_Right: 0;
484+
--fdPopover_Resize_Handle_Position_Right: var(--fdPopover_Resize_Handle_Offset);
481485
--fdPopover_Resize_Handle_Position_Left: auto;
482486
--fdPopover_Resize_Handle_Cursor: ne-resize;
483487
--fdPopover_Resize_Handle_Rotate_Angle: -90deg;
484488
--fdPopover_Resize_Handle_Transform_Scale: 1;
489+
490+
@include fd-rtl() {
491+
--fdPopover_Resize_Handle_Container_Justify: flex-end;;
492+
}
485493
}
486494
}
487495

488496
&.#{$blockBody}--before {
489497
--fdPopover_Resize_Handle_Position_Top: auto;
490-
--fdPopover_Resize_Handle_Position_Bottom: 0;
498+
--fdPopover_Resize_Handle_Position_Bottom: var(--fdPopover_Resize_Handle_Offset);
491499
--fdPopover_Resize_Handle_Position_Right: auto;
492-
--fdPopover_Resize_Handle_Position_Left: 0;
500+
--fdPopover_Resize_Handle_Position_Left: var(--fdPopover_Resize_Handle_Offset);
493501
--fdPopover_Resize_Handle_Cursor: sw-resize;
494502
--fdPopover_Resize_Handle_Rotate_Angle: 0;
495503
--fdPopover_Resize_Handle_Transform_Scale: -1;
504+
--fdPopover_Resize_Handle_Container_Justify: flex-end;
505+
506+
@include fd-rtl() {
507+
--fdPopover_Resize_Handle_Container_Justify: flex-start;;
508+
}
496509

497510
&.#{$blockBody}--middle,
498511
&.#{$blockBody}--bottom {
499-
--fdPopover_Resize_Handle_Position_Top: 0;
512+
--fdPopover_Resize_Handle_Position_Top: var(--fdPopover_Resize_Handle_Offset);
500513
--fdPopover_Resize_Handle_Position_Bottom: auto;
501514
--fdPopover_Resize_Handle_Rotate_Angle: 90deg;
502515
--fdPopover_Resize_Handle_Cursor: nw-resize;
@@ -507,25 +520,28 @@ body.fd-overlay-active::before {
507520

508521
&__resize-handle {
509522
@include fd-reset();
523+
@include fd-square(1.5rem);
510524

511525
@include fd-flex() {
512-
justify-content: flex-end;
526+
align-items: flex-start;
527+
justify-content: var(--fdPopover_Resize_Handle_Container_Justify, flex-start);
513528
}
514529

515530
font-size: 1rem;
516531
overflow: hidden;
517532
line-height: 1rem;
518533
position: absolute;
519-
padding-block: 0.125rem;
520-
padding-inline: 0.125rem;
534+
535+
521536
color: var(--sapButton_Lite_TextColor);
522537
cursor: var(--fdPopover_Resize_Handle_Cursor);
538+
523539
inset: var(--fdPopover_Resize_Handle_Position_Top) var(--fdPopover_Resize_Handle_Position_Right) var(--fdPopover_Resize_Handle_Position_Bottom) var(--fdPopover_Resize_Handle_Position_Left);
540+
524541
transform: rotate(var(--fdPopover_Resize_Handle_Rotate_Angle));
525542

526543
@include fd-icon('resize-corner', 'after') {
527-
@include fd-set-width(1rem);
528-
@include fd-set-height(1rem);
544+
@include fd-square(1rem);
529545

530546
@include fd-flex() {
531547
justify-content: var(--fdPopover_Resize_Handle_Justify);

‎packages/styles/src/resizable-card-layout.scss

+12-17
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,37 @@ $block: #{$fd-namespace}-resizable-card-layout;
4747

4848
&__icon-wrapper {
4949
@include fd-reset();
50+
@include fd-square(1.5rem);
51+
@include fd-set-position-right(-0.35rem);
5052

51-
width: 1rem;
52-
height: 1rem;
53+
@include fd-flex() {
54+
align-items: flex-start;
55+
justify-content: flex-start;
56+
}
57+
58+
bottom: -0.35rem;
5359
position: absolute;
54-
bottom: 0;
55-
right: 0;
5660
z-index: $fd-resize-handle-index;
57-
padding-block: 0 $fd-resize-icon-padding;
58-
padding-inline: 0 $fd-resize-icon-padding;
59-
60-
@include fd-rtl() {
61-
right: auto;
62-
left: 0;
63-
}
6461
}
6562

6663
&__icon {
6764
@include fd-reset();
65+
@include fd-square(1rem);
6866
@include fd-icon("resize-corner");
6967

68+
@include fd-flex-center();
69+
7070
font-family: SAP-icons;
7171
font-size: 1rem;
7272
line-height: 1rem;
7373
cursor: nwse-resize;
7474
position: absolute;
75-
bottom: 0;
76-
right: $fd-resize-icon-padding;
77-
color: var(--sapButton_IconColor);
75+
color: var(--sapButton_Lite_TextColor);
7876
z-index: $fd-resize-handle-index;
7977

8078
@include fd-rtl() {
8179
transform: rotate(90deg);
82-
position: relative;
8380
cursor: nesw-resize;
84-
padding-block: 0 $fd-resize-icon-padding;
85-
padding-inline: $fd-resize-icon-padding 0.5rem;
8681
}
8782

8883
&--vertical {

‎packages/styles/stories/Components/dialog/default-dialog.example.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
aria-modal="true"
77
aria-labelledby="dialog-title-1"
88
aria-describedby="dialog-description-1">
9-
<span class="fd-dialog__resize-handle"></span>
9+
<span class="fd-dialog__resize-handle" role="presentation" aria-hidden="true"></span>
1010
<header class="fd-dialog__header fd-bar">
1111
<div class="fd-bar__left">
1212
<div class="fd-bar__element">

‎packages/styles/stories/Components/popover/popover.stories.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Variants.parameters = {
4545
description: {
4646
story: `There are several variants of the popover body that can be displayed depending on the use case.
4747
48-
Variant | Modifier class | Description
48+
| Variant | Modifier class | Description
4949
:------ | :------------- | :---------------
5050
Header | \`fd-popover__body-header\` | To display a header.
5151
Footer | \`fd-popover__body-footer\` | To display a footer with actions.
@@ -55,6 +55,7 @@ You can also have subheader by using **Bar** component with subheader.
5555
}
5656
}
5757
};
58+
5859
export const ControlExamples = () => controlExamplesExampleHtml;
5960
ControlExamples.storyName = 'Control variants';
6061
ControlExamples.parameters = {

0 commit comments

Comments
 (0)