Skip to content

Add semantic slots, starting with text fields #1568

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
phkuo merged 18 commits into from
May 9, 2017
Merged

Add semantic slots, starting with text fields #1568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
20c28b3
text field semantic slots first draft
phkuo Apr 15, 2017
d3587ad
input field semantics draft
phkuo Apr 18, 2017
b2d641a
rename generic input category to more specific field category
phkuo Apr 20, 2017
59ebcdd
remove commented code
phkuo Apr 21, 2017
7ab1b2e
merge master
phkuo Apr 21, 2017
72313e6
add rush change file
phkuo Apr 21, 2017
2c36116
clean up a todo
phkuo Apr 21, 2017
9443626
semantic slotify the toggle control
phkuo Apr 26, 2017
1fafa3f
semantic slot-ify radio buttons, border colors are different
phkuo Apr 26, 2017
0cab3d6
merge master
phkuo Apr 27, 2017
b90c9db
fix some Textfield bugs, wip
phkuo Apr 27, 2017
83a663c
remove a todo
phkuo Apr 28, 2017
f780fe5
update disabled colors
phkuo Apr 28, 2017
3ad2c9f
fix some color choices
phkuo May 2, 2017
cb10ce6
merge master
phkuo May 2, 2017
25b7c21
merge master
phkuo May 3, 2017
a2c4e09
merge master
phkuo May 8, 2017
aa13ff7
Merge branch 'master' into phkuo/semanticInputs
micahgodbolt May 9, 2017
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
10 changes: 10 additions & 0 deletions common/changes/phkuo-semanticInputs_2017-04-21-01-53.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Lay some groundwork for converting to semantic slots, starting with input text fields.",
"type": "patch"
}
],
"email": "phkuo@microsoft.com"
}
99 changes: 42 additions & 57 deletions packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@

// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.


// --------------------------------------------------
// ChoiceField semantic slots

$radioButton-background-color: $controlBackgroundColor;
Copy link
Copy Markdown
Member

@dzearing dzearing May 2, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

is a radio button any different from a checkbox?

Copy link
Copy Markdown
Contributor Author

@phkuo phkuo May 2, 2017

Choose a reason for hiding this comment

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

Unfortunately yes. For example, in the selected state, it uses a blue background and a white checkmark, whereas radio buttons have a white background and a blue dot.


$radioButton-text-color: $controlForegroundColor;
$radioButton-text-hover-color: $controlForegroundHoverColor;

$radioButton-dot-color: $controlBackgroundSelectedColor;

$radioButton-border-color: $controlBorderUnselectedColor;
$radioButton-border-hover-color: $controlBorderUnselectedHoverColor;
$radioButton-border-selected-color: $radioButton-dot-color;
$radioButton-border-selected-hover-color: $controlBackgroundSelectedHoverColor;

$radioButton-text-disabled-color: $disabledTextColor;
$radioButton-background-unselected-disabled-color: $disabledTextColor;
$radioButton-dot-disabled-color: $radioButton-background-unselected-disabled-color;
$radioButton-border-disabled-color: $radioButton-background-unselected-disabled-color;

//
// --------------------------------------------------
// ChoiceField styles
Expand All @@ -23,7 +44,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);

.choiceField {
box-sizing: border-box;
color: $ms-color-neutralPrimary;
color: $radioButton-text-color;
font-family: $ms-font-family-base;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
Expand All @@ -46,11 +67,12 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
top: 8px
}

// The choiceField container
// The circle
.field::before {
content: '';
display: inline-block;
border: 1px solid $ms-color-neutralTertiary;
background-color: $radioButton-background-color;
border: 1px solid $radioButton-border-color;
width: $ms-choiceField-field-size;
height: $ms-choiceField-field-size;
font-weight: normal;
Expand All @@ -62,7 +84,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
border-radius: 50%;
}

// The circle
// The dot
.field::after {
content: '';
width: 0;
Expand Down Expand Up @@ -96,45 +118,22 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
vertical-align: top;
user-select: none;

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

:global(.ms-Label) {
color: $ms-color-black;
}
}

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

&.fieldIsDisabled::before {
border-color: $ms-color-neutralTertiaryAlt;
}

&.fieldIsChecked::before {
border-color: $ms-color-themeDarkAlt;
}
}
&:active {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
border-color: $radioButton-border-hover-color;
}

:global(.ms-Label) {
color: $ms-color-black;
color: $radioButton-text-hover-color;
}
}

//== State: A choiceField is checked
//
&.fieldIsChecked {
&::before {
border: 2px solid $ms-color-themePrimary;
background-color: transparent;
&::before { // the circle
border: 2px solid $radioButton-border-selected-color;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-contrastBlackSelected;
Expand All @@ -145,8 +144,8 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
}
}

&::after {
background-color: $ms-color-themePrimary;
&::after { // the dot
background-color: $radioButton-dot-color;
top: 5px;
@include left(5px);
width: 10px;
Expand All @@ -164,7 +163,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
&:hover,
&:focus {
&::before {
border-color: $ms-color-themeDarkAlt;
border-color: $radioButton-border-selected-hover-color;
}
}
}
Expand All @@ -174,17 +173,9 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
&.fieldIsDisabled {
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;
background-color: $radioButton-background-unselected-disabled-color;
border-color: $radioButton-border-disabled-color;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-contrastBlackDisabled;
Expand All @@ -196,7 +187,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
}

:global(.ms-Label) {
color: $ms-color-neutralTertiary;
color: $radioButton-text-disabled-color;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-contrastBlackDisabled;
Expand All @@ -208,19 +199,13 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
}
}

//== State: A choiceField in focus
//
&.choiceFieldIsInFocus {
&.fieldIsChecked.fieldIsDisabled {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
background-color: $radioButton-background-color;
border-color: $radioButton-border-disabled-color;
}

&.fieldIsDisabled::before {
border-color: $ms-color-neutralTertiaryAlt;
}

&.fieldIsChecked::before {
border-color: $ms-color-themeDarkAlt;
&::after {
background-color: $radioButton-dot-disabled-color;
}
}
}
Expand Down
72 changes: 46 additions & 26 deletions .../office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,52 @@ export class ChoiceGroupBasicExample extends React.Component<any, IChoiceGroupBa

public render() {
return (
<ChoiceGroup
defaultSelectedKey='B'
options={ [
{
key: 'A',
text: 'Option A'
},
{
key: 'B',
text: 'Option B',
},
{
key: 'C',
text: 'Option C',
disabled: true
},
{
key: 'D',
text: 'Option D',
disabled: true
}
] }
onChange={ this._onChange }
label='Pick one'
required={ true }
/>
<div>
<ChoiceGroup
defaultSelectedKey='B'
options={ [
{
key: 'A',
text: 'Option A'
},
{
key: 'B',
text: 'Option B',
},
{
key: 'C',
text: 'Option C',
disabled: true
},
{
key: 'D',
text: 'Option D',
disabled: true
}
] }
onChange={ this._onChange }
label='Pick one'
required={ true }
/>
<ChoiceGroup
defaultSelectedKey='A'
options={ [
{
key: 'A',
text: 'Option A',
disabled: true
},
{
key: 'B',
text: 'Option B',
disabled: true
}
] }
onChange={ this._onChange }
label='Pick one'
required={ true }
/>
</div>
);
}

Expand Down
Loading