Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: halo focus ring #603

Merged
merged 34 commits into from
Mar 6, 2020
Merged

feat: halo focus ring #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
49a576d
feat: fixed button hover focus with dna vars
GarthDB Mar 3, 2020
3a440da
fix: removed topdoc cruft
GarthDB Mar 3, 2020
cd89ad9
feat: focus-ring switch using dna vars
GarthDB Mar 3, 2020
7292ed0
feat: fixed radio with dna vars
GarthDB Mar 3, 2020
4be9079
fix: moved dimension vars out of skin.css file
GarthDB Mar 3, 2020
88858c0
feat: halo focus for Slider
lazd Mar 4, 2020
5128f29
feat: halo focus for Logic Button
lazd Mar 4, 2020
07b5ede
docs: add a.com example
lazd Mar 4, 2020
9702510
docs: more focus examples
lazd Mar 5, 2020
9647aac
docs: add more examples, make it wrap
lazd Mar 5, 2020
563e4c6
docs: fix overbackground usage
lazd Mar 5, 2020
916dc54
fix: correct ClearButton focus ring
lazd Mar 5, 2020
567da1b
fix: animate Toggle halo focus
lazd Mar 5, 2020
f45d7a7
fix: border color on key focus
lazd Mar 5, 2020
485abab
fix: border color of Slider on key focus
lazd Mar 5, 2020
e69fa97
fix: correct Quiet Action Button focus width
lazd Mar 5, 2020
5c6bd9a
feat: make Buttons have transparent focus halo
lazd Mar 4, 2020
a1846e4
feat: make Toggle have transparent focus halo
lazd Mar 4, 2020
dff50e4
feat: make Checkbox have transparent focus halo
lazd Mar 4, 2020
5c91e21
feat: make Radio have transparent focus halo
lazd Mar 4, 2020
0db6c80
fix: make Slider handle background transparent, fixes #619
lazd Mar 5, 2020
9ff940a
fix: remove override of box-shadow for selected FieldButtons
lazd Mar 5, 2020
99a5080
fix: make animation pretty
lazd Mar 5, 2020
930a308
fix: make Checkbox halo focus transparent gap work
lazd Mar 5, 2020
7aced5e
fix: make Radio halo focus transparent gap work
lazd Mar 5, 2020
110652b
fix: correct Checkbox/Radio focus border color
lazd Mar 5, 2020
4bcc2c7
fix: prevent Dial from showing Slider's inert focus element
lazd Mar 5, 2020
527b8cb
fix: use the right DNA vars, fix focused unchecked Toggle handle color
lazd Mar 5, 2020
dc35518
fix: indeterminate Checkbox focus color
lazd Mar 5, 2020
504bf82
fix: a/b Toggle selected focused handle border color
lazd Mar 5, 2020
29e8954
fix: selected Checkbox focus colors
lazd Mar 5, 2020
2ed07b3
fix: selected Radio focus border color
lazd Mar 5, 2020
e1f5a2f
fix: selected Radio box color
lazd Mar 5, 2020
0f271e7
refactor: remove useles nesting
lazd Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions components/button/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ governing permissions and limitations under the License.
}

%spectrum-BaseButton {
/* Contain halo */
position: relative;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope this doesn't break anything for anyone.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lazd yes, unfortunately, it causes major regression CUI-7431


display: inline-flex;
box-sizing: border-box;

Expand Down Expand Up @@ -89,10 +92,35 @@ governing permissions and limitations under the License.
max-height: 100%;
flex-shrink: 0;
}

}

%spectrum-ButtonWithFocusRing {
&:after {
border-radius: calc(var(--spectrum-button-primary-border-radius) + var(--spectrum-alias-focus-ring-gap));
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);

transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
margin var(--spectrum-global-animation-duration-100) ease-out;
}

&:focus-ring {
&:after {
margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);
}
}
}

.spectrum-Button {
@inherit: %spectrum-BaseButton;
@inherit: %spectrum-ButtonWithFocusRing;

border-width: var(--spectrum-button-primary-border-size);
border-style: solid;
Expand Down Expand Up @@ -125,6 +153,15 @@ governing permissions and limitations under the License.
}
}

.spectrum-ClearButton--overBackground {
&:focus-ring {
&:after {
/* Adjust margin because ClearButton does not have a border */
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
}
}
}

a.spectrum-Button,
a.spectrum-ActionButton {
/* Remove appearance for clickable types in iOS and Safari. */
Expand Down Expand Up @@ -209,6 +246,7 @@ a.spectrum-ActionButton {

.spectrum-LogicButton {
@inherit: %spectrum-BaseButton;
@inherit: %spectrum-ButtonWithFocusRing;

height: var(--spectrum-logicbutton-and-height);
padding: var(--spectrum-logicbutton-and-padding-x);
Expand All @@ -219,6 +257,11 @@ a.spectrum-ActionButton {
font-size: var(--spectrum-logicbutton-and-text-size);
font-weight: var(--spectrum-logicbutton-and-text-font-weight);
line-height: 0;

&:after {
/* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
border-radius: calc(var(--spectrum-logicbutton-and-border-radius) + var(--spectrum-alias-focus-ring-gap));
}
}

.spectrum-FieldButton {
Expand Down Expand Up @@ -267,6 +310,12 @@ a.spectrum-ActionButton {

border-width: var(--spectrum-fieldbutton-quiet-border-size);
border-radius: var(--spectrum-fieldbutton-quiet-border-radius);
&:disabled,
&.is-disabled {
&:focus-ring {
box-shadow: none;
}
}
}

.spectrum-ClearButton {
Expand Down
78 changes: 27 additions & 51 deletions components/button/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@ governing permissions and limitations under the License.
*/

:root {
--spectrum-button-primary-border-size-increase-key-focus: 1px;
/* Overridden because of the way we draw focus rings */
--spectrum-actionbutton-quiet-border-size-key-focus: 1px;
}

.spectrum-LogicButton,
.spectrum-Button {
&:focus-ring {
box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-button-primary-border-color-key-focus);
}

&:active {
/* Override focus -- clicking with spacebar should not show outline */
box-shadow: none;
&:focus-ring,
&.is-focused {
&:after {
box-shadow: 0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus) var(--spectrum-button-primary-focus-ring-color-key-focus);
}
}
}

Expand Down Expand Up @@ -193,17 +192,19 @@ governing permissions and limitations under the License.
}

&:focus-ring {
background-color: var(--spectrum-button-over-background-background-color-key-focus);
border-color: var(--spectrum-button-over-background-border-color-key-focus);
background-color: var(--spectrum-button-over-background-background-color-hover);
border-color: var(--spectrum-button-over-background-border-color-hover);
color: inherit;
box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-button-over-background-border-color-key-focus);

&:after {
box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size) var(--spectrum-button-over-background-border-color-key-focus);
}
}

&:active {
background-color: var(--spectrum-button-over-background-background-color-down);
border-color: var(--spectrum-button-over-background-border-color-down);
color: inherit;
box-shadow: none;
}

&:disabled,
Expand All @@ -227,17 +228,20 @@ governing permissions and limitations under the License.
}

&:focus-ring {
background-color: var(--spectrum-button-quiet-over-background-background-color-key-focus);
border-color: var(--spectrum-button-quiet-over-background-border-color-key-focus);
color: inherit;
box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-button-quiet-over-background-border-color-key-focus);
background-color: var(--spectrum-button-quiet-over-background-background-color-hover);
border-color: var(--spectrum-button-quiet-over-background-border-color-hover);
color: var(--spectrum-button-quiet-over-background-text-color-hover);
box-shadow: none;
GarthDB marked this conversation as resolved.
Show resolved Hide resolved

&:after {
box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size) var(--spectrum-button-over-background-border-color-key-focus);
}
}

&:active {
background-color: var(--spectrum-button-quiet-over-background-background-color-down);
border-color: var(--spectrum-button-quiet-over-background-border-color-down);
color: var(--spectrum-button-quiet-over-background-text-color-down);
box-shadow: none;
}

&:disabled,
Expand Down Expand Up @@ -326,7 +330,6 @@ governing permissions and limitations under the License.
&:hover {
background-color: var(--spectrum-actionbutton-background-color-hover);
border-color: var(--spectrum-actionbutton-border-color-hover);
box-shadow: none;
color: var(--spectrum-actionbutton-text-color-hover);

.spectrum-Icon {
Expand Down Expand Up @@ -356,7 +359,6 @@ governing permissions and limitations under the License.
&:active {
background-color: var(--spectrum-actionbutton-background-color-down);
border-color: var(--spectrum-actionbutton-border-color-down);
box-shadow: none;
color: var(--spectrum-actionbutton-text-color-down);

.spectrum-ActionButton-hold {
Expand Down Expand Up @@ -440,7 +442,6 @@ governing permissions and limitations under the License.
background-color: var(--spectrum-actionbutton-quiet-background-color-hover);
border-color: var(--spectrum-actionbutton-quiet-border-color-hover);
color: var(--spectrum-actionbutton-quiet-text-color-hover);
box-shadow: none;
}

&:focus-ring {
Expand All @@ -454,7 +455,6 @@ governing permissions and limitations under the License.
background-color: var(--spectrum-actionbutton-quiet-background-color-down);
border-color: var(--spectrum-actionbutton-quiet-border-color-down);
color: var(--spectrum-actionbutton-quiet-text-color-down);
box-shadow: none;
}

&:disabled,
Expand Down Expand Up @@ -538,12 +538,6 @@ governing permissions and limitations under the License.
color: var(--spectrum-logicbutton-and-text-color);
}

&:focus-ring {
background-color: var(--spectrum-logicbutton-and-background-color-key-focus);
border-color: var(--spectrum-logicbutton-and-border-color-key-focus);
color: var(--spectrum-logicbutton-and-text-color);
}

&:disabled,
&.is-disabled {
background-color: var(--spectrum-logicbutton-and-background-color-disabled);
Expand All @@ -563,12 +557,6 @@ governing permissions and limitations under the License.
color: var(--spectrum-logicbutton-or-text-color);
}

&:focus-ring {
background-color: var(--spectrum-logicbutton-or-background-color-key-focus);
border-color: var(--spectrum-logicbutton-or-border-color-key-focus);
color: var(--spectrum-logicbutton-or-text-color);
}

&:disabled,
&.is-disabled {
background-color: var(--spectrum-button-secondary-background-color-disabled);
Expand All @@ -588,6 +576,12 @@ governing permissions and limitations under the License.
border-color: var(--spectrum-fieldbutton-border-color-hover);
}

&:active,
&.is-selected {
background-color: var(--spectrum-fieldbutton-background-color-down);
border-color: var(--spectrum-fieldbutton-border-color-down);
}

&:focus-ring,
&.is-focused {
background-color: var(--spectrum-fieldbutton-background-color-key-focus);
Expand All @@ -600,17 +594,6 @@ governing permissions and limitations under the License.
}
}

&:active,
&.is-selected {
background-color: var(--spectrum-fieldbutton-background-color-down);
border-color: var(--spectrum-fieldbutton-border-color-down);

&:focus-ring,
&.is-focused {
box-shadow: none;
}
}

&.is-invalid {
border-color: var(--spectrum-fieldbutton-border-color-error);

Expand All @@ -635,9 +618,6 @@ governing permissions and limitations under the License.
background-color: var(--spectrum-fieldbutton-background-color-disabled);
color: var(--spectrum-fieldbutton-text-color-disabled);

&:focus-ring {
box-shadow: none;
}
& .spectrum-Icon {
color: var(--spectrum-fieldbutton-icon-color-disabled);
}
Expand Down Expand Up @@ -687,10 +667,6 @@ governing permissions and limitations under the License.
&.is-disabled {
background-color: var(--spectrum-fieldbutton-quiet-background-color-disabled);
color: var(--spectrum-fieldbutton-text-color-disabled);

&:focus-ring {
box-shadow: none;
}
}
}

Expand Down
52 changes: 45 additions & 7 deletions components/checkbox/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,31 @@ governing permissions and limitations under the License.
}

&:checked + .spectrum-Checkbox-box {
border-width: calc(var(--spectrum-checkbox-box-size) / 2);
&:before {
border-width: calc(var(--spectrum-checkbox-box-size) / 2);
}

.spectrum-Checkbox-checkmark {
transform: scale(1);
opacity: 1;
}
}

&:focus-ring {
+ .spectrum-Checkbox-box {
&:after {
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
}
}
}
}

.spectrum-Checkbox.is-indeterminate {
.spectrum-Checkbox-box,
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box {
border-width: calc(var(--spectrum-checkbox-box-size) / 2);
&:before {
border-width: calc(var(--spectrum-checkbox-box-size) / 2);
}

.spectrum-Checkbox-checkmark {
display: none;
Expand All @@ -104,7 +116,6 @@ governing permissions and limitations under the License.
font-size: var(--spectrum-checkbox-text-size);
font-weight: var(--spectrum-checkbox-text-font-weight);
line-height: var(--spectrum-checkbox-label-line-height);
transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
}

.spectrum-Checkbox-box {
Expand All @@ -119,11 +130,38 @@ governing permissions and limitations under the License.
flex-grow: 0;
flex-shrink: 0;

border-radius: var(--spectrum-checkbox-box-border-radius);
border-width: var(--spectrum-checkbox-box-border-size);
border-style: solid;
/* :before is used to draw the box fill */
&:before {
display: block;
z-index: 0;
content: '';
box-sizing: border-box;
position: absolute;

transition: border var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
width: var(--spectrum-checkbox-box-size);
height: var(--spectrum-checkbox-box-size);

border-radius: var(--spectrum-checkbox-box-border-radius);
border-width: var(--spectrum-checkbox-box-border-size);
border-style: solid;

transition: border var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
}

&:after {
border-radius: calc(var(--spectrum-checkbox-box-border-radius) + var(--spectrum-alias-focus-ring-gap));
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: var(--spectrum-alias-focus-ring-gap);

transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
margin var(--spectrum-global-animation-duration-100) ease-out;
}
}

.spectrum-Checkbox-checkmark,
Expand Down
Loading