-
Notifications
You must be signed in to change notification settings - Fork 4
Conversation
Codecov Report
@@ Coverage Diff @@
## master #54 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 13 16 +3
Lines 539 622 +83
Branches 86 91 +5
=====================================
+ Hits 539 622 +83
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Caught one small style thing
this.ngUnsubscribe.complete(); | ||
} | ||
|
||
public writeValue(value: boolean) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing a return type here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also a few others missing in this file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
@Blackbaud-SteveBrush @Blackbaud-JackMcElhinney I apologize if this has been discussed or should be clear but I noticed that when you click on the toggle that the entire rectangle "button" around the toggle highlights in the focused state instead of it being indicated on the toggle itself. Just wanted to verify that this is correct. |
background-color: $sky-background-color-neutral-light; | ||
padding: 1px; | ||
border-radius: $indicator-size + 2; | ||
width: $indicator-size * 2 + 2; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The widths seem to be effected by a shrinking parent (or window). For example, if you load the visual test and resize the window small enough, it will squeeze the toggle switch's background. Disabled switches seem to be impacted more. Is there any way to make it more resilient to width changes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch. Fixed.
border-radius: 100%; | ||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75); | ||
background-color: $sky-color-white; | ||
transition: left 150ms; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This transition is also happening when the control first loads (Firefox). Should we prevent that from happening?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep! Done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great, @Blackbaud-JackMcElhinney . Great work! Just a couple questions for you above. Also, why are we deleting all the old baselines?
Maybe this is a question for @Blackbaud-ToddRoberts, but I noticed there's not way to visually tell the difference between disabled & selected, vs disabled & unselected, unless you inherently know that a switch pushed to the right is "selected". Does that cause any concern? |
@Blackbaud-AdamFunderburk I know we talked about disabled state styling at some point but can't remember the outcome. Would the guideline be that if your toggle can have a disabled state you should always include a label? |
@Blackbaud-TrevorBurch I confirmed with @Blackbaud-ToddRoberts and the focus styling is appropriate, at least for the time being. |
@Blackbaud-AlexKingman I had to remove the screenshots because the background color was changed from gray to white. |
Issue: https://github.com/blackbaud/skyux-forms/issues/23
Original contribution: #46