feat: halo focus ring #603

GarthDB · 2020-03-03T18:42:20Z

Description

Added support for the halo focus ring on:

Button
Logic Button
Checkbox
Radio
ToggleSwitch
Slider

How and where has this been tested?

Steps

Run gulp dev
Visit http://localhost:3000/docs/halo-focus.html
Tab around like a maniac

Tested in:

✅ Chrome
✅ Safari
✅ Firefox
❌ IE 11
- Checked Checkboxes have incorrect halo size (it's inside of the box)
- Checked Radios have incorrect halo size (doesn't have gap)

To-do list

If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

Make animation of ring look nicer
Create stand-in DNA vars for some components (right now, reusing the Button's vars for Slider)
Fix IE 11 bugs
Final design signoff
This pull request is ready to merge.

adobe-spectrum-bot · 2020-03-03T18:52:03Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/a630ac5-result-2020-03-03_18-51-57/html_report/index.html

adobe-spectrum-bot · 2020-03-03T19:03:36Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/59f706c-result-2020-03-03_19-03-31/html_report/index.html

adobe-spectrum-bot · 2020-03-03T19:04:43Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/305c2ff-result-2020-03-03_19-04-39/html_report/index.html

adobe-spectrum-bot · 2020-03-03T19:20:26Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/bb2948c-result-2020-03-03_19-20-22/html_report/index.html

adobe-spectrum-bot · 2020-03-03T19:26:28Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/fff8273-result-2020-03-03_19-26-24/html_report/index.html

lazd

Move the dimensional stuff to index.css as semantically named variables and calc it all, create static aliases in DNA for the static pixel values you need in skin.css, and this will be good.

Also, have you tested at Large scales?

components/button/skin.css

components/checkbox/skin.css

adobe-spectrum-bot · 2020-03-03T21:30:18Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/600136b-result-2020-03-03_21-30-13/html_report/index.html

lazd

This looks excellent. Just a question about the :focus and the extra selector.

Also, re: the conversation today, should we include Slider in this?

components/button/index.css

lazd · 2020-03-03T22:16:24Z

components/button/skin.css

-  --spectrum-button-primary-border-size-increase-key-focus: 1px;
-  --spectrum-actionbutton-quiet-border-size-key-focus: 1px;
+  --spectrum-button-primary-focus-ring-gap-key-focus: var(--spectrum-alias-focus-ring-gap);
+  --spectrum-button-primary-focus-ring-size-key-focus: calc(var(--spectrum-alias-focus-ring-gap) + var(--spectrum-alias-focus-ring-size));


lazd · 2020-03-03T22:26:41Z

From today's discussion re: Clear Button in toast, the outline should probably be in the same place as the over background button next to it.

jianliao · 2020-03-04T01:22:27Z

Hi, I found a few build errors in this PR.
Error running 'checkbox:build': CssSyntaxError in plugin "gulp-postcss"

adobe-spectrum-bot · 2020-03-04T21:01:49Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/e74e4d7-result-2020-03-04_21-01-44/html_report/index.html

* also, remove unnecessary removal of box-shadow on Action Button

adobe-spectrum-bot · 2020-03-05T20:53:53Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/8889cdf-result-2020-03-05_20-53-49/html_report/index.html

jianliao · 2020-03-05T21:18:20Z

Pull the trigger too early. Is this an issue for Dial component?

lazd · 2020-03-05T21:46:40Z

@jianliao hmm, does that same thing happen to the Dial here? http://spectrum-css-archives.s3-website.us-east-2.amazonaws.com/2.17.0/docs/dial.html

I can't even get the thing to focus...

* refactor box to be a :before elemnt * why didn't we do this before? get it? before?

lazd · 2020-03-05T22:32:44Z

Just pushed the animation changes: https://git.corp.adobe.com/pages/lawdavis/halo-focus-transparent/docs/halo-focus.html

lazd · 2020-03-05T22:37:13Z

@jianliao fixed the Dial issue, good catch!

Now will just fixup the DNA vars and then we can merge.

adobe-spectrum-bot · 2020-03-05T22:38:29Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/0324bc7-result-2020-03-05_22-38-25/html_report/index.html

adobe-spectrum-bot · 2020-03-05T22:46:07Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/34f1c25-result-2020-03-05_22-46-02/html_report/index.html

adobe-spectrum-bot · 2020-03-05T22:57:09Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/41b2094-result-2020-03-05_22-57-04/html_report/index.html

adobe-spectrum-bot · 2020-03-05T23:09:14Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/ce7698d-result-2020-03-05_23-09-09/html_report/index.html

adobe-spectrum-bot · 2020-03-05T23:18:06Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/5e6630a-result-2020-03-05_23-18-01/html_report/index.html

lazd · 2020-03-05T23:30:04Z

components/button/index.css

@@ -25,6 +25,9 @@ governing permissions and limitations under the License.
 }

 %spectrum-BaseButton {
+  /* Contain halo */
+  position: relative;


I hope this doesn't break anything for anyone.

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

adobe-spectrum-bot · 2020-03-05T23:32:12Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/aa78b1c-result-2020-03-05_23-32-08/html_report/index.html

adobe-spectrum-bot · 2020-03-05T23:48:09Z

Test result: http://opensource.adobe.com/spectrum-css-vr-results/0728f52-result-2020-03-05_23-48-04/html_report/index.html

feat: fixed button hover focus with dna vars

49a576d

fix: removed topdoc cruft

3a440da

GarthDB force-pushed the focus-ring branch from aa085dc to 3a440da Compare March 3, 2020 19:00

feat: focus-ring switch using dna vars

cd89ad9

feat: fixed radio with dna vars

7292ed0

GarthDB changed the title ~~feat: fixed button hover focus with dna vars~~ Halo focus ring with DNA vars Mar 3, 2020

GarthDB requested a review from lazd March 3, 2020 19:27

GarthDB added Component: Button labels Mar 3, 2020

GarthDB linked an issue Mar 3, 2020 that may be closed by this pull request

Halo focus implementation #573

Closed

GarthDB assigned GarthDB and unassigned GarthDB Mar 3, 2020

lazd requested changes Mar 3, 2020

View reviewed changes

fix: moved dimension vars out of skin.css file

4be9079

lazd requested changes Mar 3, 2020

View reviewed changes

lazd changed the title ~~Halo focus ring with DNA vars~~ feat: halo focus ring Mar 4, 2020

lazd added 2 commits March 4, 2020 12:56

feat: halo focus for Slider

88858c0

feat: halo focus for Logic Button

5128f29

jianliao approved these changes Mar 5, 2020

View reviewed changes

fix: make animation pretty

99a5080

* also, remove unnecessary removal of box-shadow on Action Button

lazd added 3 commits March 5, 2020 13:48

fix: make Checkbox halo focus transparent gap work

930a308

* refactor box to be a :before elemnt * why didn't we do this before? get it? before?

fix: make Radio halo focus transparent gap work

7aced5e

fix: correct Checkbox/Radio focus border color

110652b

fix: prevent Dial from showing Slider's inert focus element

4bcc2c7

fix: use the right DNA vars, fix focused unchecked Toggle handle color

527b8cb

lazd added 2 commits March 5, 2020 14:59

fix: indeterminate Checkbox focus color

dc35518

fix: a/b Toggle selected focused handle border color

504bf82

lazd added 2 commits March 5, 2020 15:20

fix: selected Checkbox focus colors

29e8954

fix: selected Radio focus border color

2ed07b3

lazd reviewed Mar 5, 2020

View reviewed changes

lazd added 2 commits March 5, 2020 15:38

fix: selected Radio box color

e1f5a2f

refactor: remove useles nesting

0f271e7

lazd approved these changes Mar 5, 2020

View reviewed changes

lazd mentioned this pull request Mar 5, 2020

feat: RTL Support #532

Merged

64 tasks

lazd merged commit d87e9a5 into master Mar 6, 2020

GarthDB deleted the focus-ring branch March 6, 2020 17:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: halo focus ring #603

feat: halo focus ring #603

GarthDB commented Mar 3, 2020 •

edited by lazd

Loading

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

lazd left a comment

adobe-spectrum-bot commented Mar 3, 2020

lazd left a comment •

edited

Loading

lazd Mar 3, 2020

lazd commented Mar 3, 2020

jianliao commented Mar 4, 2020

adobe-spectrum-bot commented Mar 4, 2020

adobe-spectrum-bot commented Mar 5, 2020

jianliao commented Mar 5, 2020 •

edited

Loading

lazd commented Mar 5, 2020

lazd commented Mar 5, 2020

lazd commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

lazd Mar 5, 2020

AShroti Oct 19, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

feat: halo focus ring #603

feat: halo focus ring #603

Conversation

GarthDB commented Mar 3, 2020 • edited by lazd Loading

Description

How and where has this been tested?

Steps

Tested in:

To-do list

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

adobe-spectrum-bot commented Mar 3, 2020

lazd left a comment

Choose a reason for hiding this comment

adobe-spectrum-bot commented Mar 3, 2020

lazd left a comment • edited Loading

Choose a reason for hiding this comment

lazd Mar 3, 2020

Choose a reason for hiding this comment

lazd commented Mar 3, 2020

jianliao commented Mar 4, 2020

adobe-spectrum-bot commented Mar 4, 2020

adobe-spectrum-bot commented Mar 5, 2020

jianliao commented Mar 5, 2020 • edited Loading

lazd commented Mar 5, 2020

lazd commented Mar 5, 2020

lazd commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

lazd Mar 5, 2020

Choose a reason for hiding this comment

AShroti Oct 19, 2020

Choose a reason for hiding this comment

adobe-spectrum-bot commented Mar 5, 2020

adobe-spectrum-bot commented Mar 5, 2020

GarthDB commented Mar 3, 2020 •

edited by lazd

Loading

lazd left a comment •

edited

Loading

jianliao commented Mar 5, 2020 •

edited

Loading