Skip to content

Commit 8706f95

Browse files
KristinLBradleydidoo
KristinLBradley
authored and
didoo
committed
HDS-5666 test outline for focus rings vs. box-shadow
1 parent 3652163 commit 8706f95

File tree

6 files changed

+61
-177
lines changed

6 files changed

+61
-177
lines changed

‎packages/components/src/styles/components/accordion.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -159,10 +159,11 @@
159159
.hds-accordion-item__button--parent-contains-interactive {
160160
@include hds-button();
161161

162-
&:focus,
163-
&.mock-focus {
164-
@include hds-button-state-focus();
165-
}
162+
// TODO: not needed if outline is used for the focus ring
163+
// &:focus,
164+
// &.mock-focus {
165+
// @include hds-button-state-focus();
166+
// }
166167

167168
// `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
168169
@include hds-button-color-secondary();

‎packages/components/src/styles/components/button.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,11 @@
6161
}
6262
}
6363

64-
&:focus,
65-
&.mock-focus {
66-
@include hds-button-state-focus();
67-
}
64+
// TODO: not needed if outline is used for the focus ring
65+
// &:focus,
66+
// &.mock-focus {
67+
// @include hds-button-state-focus();
68+
// }
6869
}
6970

7071
.hds-button__icon {

‎packages/components/src/styles/components/dropdown.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,14 @@
5050

5151
&:focus,
5252
&.mock-focus {
53-
@include hds-button-state-focus();
53+
// @include hds-button-state-focus();
54+
5455
border-color: var(--token-color-focus-action-internal);
56+
outline: 3px solid var(--token-color-focus-action-external);
5557

56-
&::before {
57-
border-color: var(--token-color-focus-action-external);
58-
}
58+
// &::before {
59+
// border-color: var(--token-color-focus-action-external);
60+
// }
5961
}
6062

6163
&:active,
@@ -119,10 +121,11 @@
119121
.hds-dropdown-toggle-button {
120122
@include hds-button();
121123

122-
&:focus,
123-
&.mock-focus {
124-
@include hds-button-state-focus();
125-
}
124+
// TODO: not needed if outline is used for the focus ring
125+
// &:focus,
126+
// &.mock-focus {
127+
// @include hds-button-state-focus();
128+
// }
126129

127130
&:disabled,
128131
&.mock-disabled,

‎packages/components/src/styles/mixins/_button.scss‎

Lines changed: 20 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,10 @@ $hds-button-sizes: ("small", "medium", "large");
3737
cursor: not-allowed;
3838
}
3939

40-
@mixin hds-button-state-focus() {
41-
box-shadow: none;
42-
43-
// TEST: Replacement of pseudo-element-based focus ring
44-
// &::before {
45-
// // the position absolute of an element is computed from the inside of the border of the container
46-
// // so we have to take in account the border width of the pseudo-element container itself
47-
// $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
48-
// $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
49-
// position: absolute;
50-
// top: $shift;
51-
// right: $shift;
52-
// bottom: $shift;
53-
// left: $shift;
54-
// z-index: -1;
55-
// border: var(--token-button-focus-border-width) solid transparent;
56-
// border-radius: $radius;
57-
// content: "";
58-
// }
59-
}
40+
// TODO: not needed if outline is used for the focus ring
41+
// @mixin hds-button-state-focus() {
42+
// box-shadow: none;
43+
// }
6044

6145
@mixin hds-button-color-primary() {
6246
color: var(--token-button-foreground-color-primary-default);
@@ -77,27 +61,16 @@ $hds-button-sizes: ("small", "medium", "large");
7761
color: var(--token-button-foreground-color-primary-focus);
7862
background-color: var(--token-button-surface-color-primary-focus);
7963
border-color: var(--token-button-border-color-primary-focus-internal);
64+
// border-color: #fff; // TEST: add greater contrast & standardize with other variants (remove outline-offset)
8065

8166
// TEST: Replacement of pseudo-element-based focus ring
82-
// border-color: #fff; // TEST: to add greater contrast
67+
// Test: outline instead of box-shadow
68+
outline: 3px solid var(--token-color-focus-action-external);
69+
outline-offset: 2px; // non-standard (other Button variants don't use)
8370
// box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants
84-
box-shadow:
85-
0 0 0 2px #fff,
86-
0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element
87-
88-
// &::before {
89-
// // the position absolute of an element is computed from the inside of the border of the container
90-
// // so we have to take in account the border width of the pseudo-element container itself
91-
// // plus for the primary button we want to have a 2px gap between the button and the focus
92-
// $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
93-
// $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
94-
// top: $shift;
95-
// right: $shift;
96-
// bottom: $shift;
97-
// left: $shift;
98-
// border-color: var(--token-button-border-color-primary-focus-external);
99-
// border-radius: $radius;
100-
// }
71+
// box-shadow:
72+
// 0 0 0 2px #fff,
73+
// 0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element
10174
}
10275

10376
&:active,
@@ -106,10 +79,6 @@ $hds-button-sizes: ("small", "medium", "large");
10679
background-color: var(--token-button-surface-color-primary-active);
10780
border-color: var(--token-button-border-color-primary-active);
10881
box-shadow: none;
109-
110-
&::before {
111-
border-color: transparent;
112-
}
11382
}
11483
}
11584

@@ -134,11 +103,9 @@ $hds-button-sizes: ("small", "medium", "large");
134103
border-color: var(--token-button-border-color-secondary-focus-internal);
135104

136105
// TEST: Replacement of pseudo-element-based focus ring
137-
box-shadow: 0 0 0 3px var(--token-button-border-color-secondary-focus-external);
138-
139-
// &::before {
140-
// border-color: var(--token-button-border-color-secondary-focus-external);
141-
// }
106+
// Test: outline instead of box-shadow
107+
outline: 3px solid var(--token-button-border-color-secondary-focus-external);
108+
// box-shadow: 0 0 0 3px var(--token-button-border-color-secondary-focus-external);
142109
}
143110

144111
&:active,
@@ -147,10 +114,6 @@ $hds-button-sizes: ("small", "medium", "large");
147114
background-color: var(--token-button-surface-color-secondary-active);
148115
border-color: var(--token-button-border-color-secondary-active);
149116
box-shadow: none;
150-
151-
&::before {
152-
border-color: transparent;
153-
}
154117
}
155118
}
156119

@@ -174,11 +137,9 @@ $hds-button-sizes: ("small", "medium", "large");
174137
border-color: var(--token-button-border-color-tertiary-focus-internal);
175138

176139
// TEST: Replacement of pseudo-element-based focus ring
177-
box-shadow: 0 0 0 3px var(--token-button-border-color-tertiary-focus-external);
178-
179-
// &::before {
180-
// border-color: var(--token-button-border-color-tertiary-focus-external);
181-
// }
140+
// Test: outline instead of box-shadow
141+
outline: 3px solid var(--token-button-border-color-tertiary-focus-external);
142+
// box-shadow: 0 0 0 3px var(--token-button-border-color-tertiary-focus-external);
182143
}
183144

184145
&:active,
@@ -187,10 +148,6 @@ $hds-button-sizes: ("small", "medium", "large");
187148
background-color: var(--token-button-surface-color-tertiary-active);
188149
border-color: var(--token-button-border-color-tertiary-active);
189150
box-shadow: none;
190-
191-
&::before {
192-
border-color: transparent;
193-
}
194151
}
195152

196153
//
@@ -209,10 +166,6 @@ $hds-button-sizes: ("small", "medium", "large");
209166
&.mock-disabled:hover {
210167
background-color: transparent;
211168
border-color: transparent;
212-
213-
&::before {
214-
border-color: transparent;
215-
}
216169
}
217170
}
218171

@@ -237,11 +190,9 @@ $hds-button-sizes: ("small", "medium", "large");
237190
border-color: var(--token-button-border-color-critical-focus-internal);
238191

239192
// TEST: Replacement of pseudo-element-based focus ring
240-
box-shadow: 0 0 0 3px var(--token-button-border-color-critical-focus-external);
241-
242-
// &::before {
243-
// border-color: var(--token-button-border-color-critical-focus-external);
244-
// }
193+
// Test: outline instead of box-shadow
194+
outline: 3px solid var(--token-button-border-color-critical-focus-external);
195+
// box-shadow: 0 0 0 3px var(--token-button-border-color-critical-focus-external);
245196
}
246197

247198
&:active,
@@ -250,10 +201,6 @@ $hds-button-sizes: ("small", "medium", "large");
250201
background-color: var(--token-button-surface-color-critical-active);
251202
border-color: var(--token-button-border-color-critical-active);
252203
box-shadow: none;
253-
254-
&::before {
255-
border-color: transparent;
256-
}
257204
}
258205
}
259206

0 commit comments

Comments
 (0)