Skip to content

[MDL2]: Checkbox & ChoiceGroup #45

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

Merged
atneik merged 10 commits into from
Aug 2, 2016
Merged

[MDL2]: Checkbox & ChoiceGroup #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cfa234a
ChoiceField to Checkbox
Jul 29, 2016
05ae8f5
fixing focus, rtl, added example
Jul 30, 2016
e2c5447
Fixing tslint errors
Aug 1, 2016
d7df4d3
Fixing styles for choiceField
Aug 1, 2016
e28af06
Adding in-focus state, image choice field clean up
Aug 2, 2016
4cfea99
Merge branch 'beta/mdl2' into anihan/mdl2/checkbox-choicegroup
Aug 2, 2016
2415036
fixing focus()
Aug 2, 2016
41403a8
Tslint errors
Aug 2, 2016
e8107eb
Adding role to children of ChoiceGroup
Aug 2, 2016
03643e4
Removing unnecessary attributes, addressing comments, whitespace
Aug 2, 2016
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
284 changes: 144 additions & 140 deletions src/components/Checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,199 +5,203 @@
//
// Office UI Fabric
// --------------------------------------------------
// Choice fields (radio buttons and checkboxes) styles

// Unselected, radio button (default)
.ms-ChoiceField {
@include ms-font-m;
@include ms-u-normalize;
// Checkbox styles

$ms-checkbox-field-size: 20px;
$ms-checkbox-transition-duration: 200ms;
Copy link
Member

@Jahnp Jahnp Aug 2, 2016

Choose a reason for hiding this comment

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

Not in the scope of this PR to change now, but boy, it would be nice if these animation values could be reconciled against what's in the animation library (or rather, have the animation library updated so we don't have one-off values like throughout the components).

$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);

.ms-Checkbox {
box-sizing: border-box;
color: $ms-color-neutralPrimary;
font-family: $ms-font-family-base;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
min-height: 36px;
border: 1px solid transparent;
position: relative;
@include padding-left(8px);

.ms-Label {
font-size: $ms-font-size-m;
padding: 0 0 0 26px;
@include padding(0, 0, 0, 26px);
display: inline-block;
}
}

//== State: Disabled choicefield
.ms-ChoiceField-input:disabled {
+ .ms-ChoiceField-field {
pointer-events: none;
cursor: default;

&:before {
background-color: $ms-color-neutralTertiaryAlt;
color: $ms-color-neutralTertiaryAlt;
}
// The hidden input
Copy link
Member

@cschlechty cschlechty Aug 2, 2016

Choose a reason for hiding this comment

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

If we're just hiding the input, we likely don't even need it. Do we focus on it? Given the design, you can probably just remove it completely, and give the outer div that is focused/the border a role="checkbox" and aria-checked state.

Copy link
Contributor Author

@atneik atneik Aug 2, 2016

Choose a reason for hiding this comment

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

Yes, we do focus on it. When it's in focus a class 'is-inFocus' is added to outer div. I'm afraid by removing it completely I might break it in any of those humongous number of browsers available, as they are all trained to focus on Input by default. I might have to add something like tabIndex="0" to get focus in that case.

.ms-Checkbox-input {
position: absolute;
opacity: 0;
top: 8px
}

&:after {
border-color: $ms-color-neutralLight;
}
// The checkbox square container
.ms-Checkbox-field::before {
content: '';
display: inline-block;
border: 2px solid $ms-color-neutralTertiary;
width: $ms-checkbox-field-size;
height: $ms-checkbox-field-size;
font-weight: normal;
position: absolute;
box-sizing: border-box;
transition-property: background, border, border-color;
transition-duration: $ms-checkbox-transition-duration;
transition-timing-function: $ms-checkbox-transition-timing;
}

.ms-Label {
color: $ms-color-neutralTertiary;
}
// The check mark icon
.ms-Checkbox-field::after {
@include ms-Icon--CheckMark;
font-family: 'FabricMDL2Icons';
display: none;
position: absolute;
font-weight: 900;
background-color: transparent;
font-size: $ms-font-size-s-plus;
top: 0;
color: $ms-color-white;
line-height: $ms-checkbox-field-size;
width: $ms-checkbox-field-size;
text-align: center;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-black;
}

@media screen and (-ms-high-contrast: active) {
&:before {
background-color: $ms-color-contrastBlackDisabled;
color: $ms-color-contrastBlackDisabled;
}
@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-white;
}
}

&:after {
border-color: $ms-color-contrastBlackDisabled;
}
// The checkbox field
.ms-Checkbox-field {
display: inline-block;
cursor: pointer;
margin-top: 8px;
position: relative;
vertical-align: top;
user-select: none;

.ms-Label {
color: $ms-color-contrastBlackDisabled;
}
&:hover {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}

@media screen and (-ms-high-contrast: black-on-white) {
&:before {
background-color: $ms-color-contrastWhiteDisabled;
color: $ms-color-contrastWhiteDisabled;
}

&:after {
border-color: $ms-color-contrastWhiteDisabled;
}

.ms-Label {
color: $ms-color-contrastWhiteDisabled;
}
.ms-Label {
Copy link
Member

@Jahnp Jahnp Aug 2, 2016

Choose a reason for hiding this comment

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

nit: newline before

color: $ms-color-black;
}
}
}

// The original unstyled input element
.ms-ChoiceField-input {
position: absolute;
opacity: 0;
top: 8px;

&:focus:not(:disabled) {
+ .ms-ChoiceField-field:after {
&:focus {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}
}
}

// The choicefield radio button or checkbox
.ms-ChoiceField-field {
display: inline-block;
cursor: pointer;
margin-top: 8px;
position: relative;
&.is-disabled::before {
border-color: $ms-color-neutralTertiaryAlt;
}

// The actual styled choicefield element - radio button by default
&:after {
content: '';
display: inline-block;
border: 1px $ms-color-neutralTertiaryAlt solid;
width: 19px;
height: 19px;
cursor: pointer;
position: relative;
font-weight: normal;
left: -1px;
top: -1px;
border-radius: 50%;
position: absolute;
&.is-checked::before {
border-color: $ms-color-themeDarkAlt;
}
}

&:hover {
&:after {
&:active {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}

.ms-Label {
color: $ms-color-black;
}
}
}

// A selected radio button
.ms-ChoiceField-input:checked {
+ .ms-ChoiceField-field {
// Circle indicating a checked radio button
&:before {
background-color: $ms-color-neutralSecondary;
border-color: $ms-color-neutralSecondary;
color: $ms-color-neutralSecondary;
border-radius: 50%;
content: '\00a0';
display: inline-block;
position: absolute;
top: 4px;
bottom: 0;
left: 4px;
width: 11px;
height: 11px;
box-sizing: border-box;
//== State: A checkbox is checked
//
&.is-checked {
&::before {
border: 10px solid $ms-color-themePrimary;
background-color: $ms-color-themePrimary;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-white;
background-color: $ms-color-white;
border-color: $ms-color-contrastBlackSelected;
}

@media screen and (-ms-high-contrast: black-on-white) {
border-color: $ms-color-black;
background-color: $ms-color-black;
border-color: $ms-color-contrastWhiteSelected;
}
}

&:hover:before {
background-color: $ms-color-neutralDark;
color: $ms-color-neutralDark;
&::after {
display: block;
}
}
}

// Checkbox
.ms-ChoiceField-input[type="checkbox"] {
+ .ms-ChoiceField-field:after {
border-radius: 0;
&:hover,
&:focus {
&::before {
border-color: $ms-color-themeDarkAlt;
}
}
}
}

// A selected checkbox
.ms-ChoiceField-input[type="checkbox"]:checked {
+ .ms-ChoiceField-field {
&:before {
@include ms-Icon;
content: '\e041';
background-color: transparent;
border-radius: 0;
font-size: $ms-font-size-s-plus;
top: 3px;
left: 3px;
//== State: A disabled checkbox
//
&.is-disabled {
Copy link
Member

@Jahnp Jahnp Aug 2, 2016

Choose a reason for hiding this comment

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

Would it make sense to also target the :disabled attribute?

Copy link
Contributor Author

@atneik atneik Aug 2, 2016

Choose a reason for hiding this comment

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

Targeting :disabled attribute will make sense on .ms-Checkbox-input, but then we will require those sibling selectors to specify styles for .ms-Checkbox-field

cursor: default;

&:hover,
&:focus {
&::before {
border-color: $ms-color-neutralTertiaryAlt;
}
}

&::before {
background-color: $ms-color-neutralTertiaryAlt;
border-color: $ms-color-neutralTertiaryAlt;
color: $ms-color-neutralTertiaryAlt;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-white;
border-color: transparent;
background-color: transparent;
border-color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-black;
border-color: transparent;
background-color: transparent;
border-color: $ms-color-contrastWhiteDisabled;
}
}

.ms-Label {
color: $ms-color-neutralTertiary;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-contrastWhiteDisabled;
}
}
}
}

//== State: A checkbox in focus
//
&.is-inFocus {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}

//== Component: Choicefield group
//
// Choice field groups contain multiple radio buttons or checkboxes
.ms-ChoiceFieldGroup {
margin-bottom: 4px;
&.is-disabled::before {
border-color: $ms-color-neutralTertiaryAlt;
}

&.is-checked::before {
border-color: $ms-color-themeDarkAlt;
}
}
}

// TODO: overrides that need to be removed.
.ms-ChoiceField {
user-select: none;
}
.is-focusVisible .ms-Checkbox.is-inFocus {
border: 1px solid $ms-color-neutralPrimary;
}
Loading