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(text-field): Add disabled state color mixins #5208

Merged
merged 8 commits into from
Nov 8, 2019
Merged

feat(text-field): Add disabled state color mixins #5208

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
828c087
feat(text-field): Add disabled state color mixins
allan-chen Oct 25, 2019
9d20876
Merge branch 'develop' into feat/textfield-disabled-mixins
allan-chen Nov 1, 2019
bf59a5b
update screenshots
allan-chen Nov 1, 2019
649a250
condense tests, minor mixin change
allan-chen Nov 6, 2019
a6b63cf
update ids/labels
allan-chen Nov 6, 2019
e3ea234
add sassdoc & minor improvements
allan-chen Nov 7, 2019
af9b650
Merge branch 'master' into feat/textfield-disabled-mixins
allan-chen Nov 8, 2019
997bd8b
Merge branch 'master' into feat/textfield-disabled-mixins
allan-chen Nov 8, 2019
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
46 changes: 26 additions & 20 deletions packages/mdc-textfield/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,49 +291,55 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i

Mixin | Description
--- | ---
`mdc-text-field-ink-color($color)` | Customizes the color of the text entered into the text field.
`mdc-text-field-label-color($color)` | Customizes the text color of the label.
`mdc-text-field-ink-color($color)` | Customizes the color of the text entered into an enabled text field.
`mdc-text-field-disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.
`mdc-text-field-label-color($color)` | Customizes the text color of the label in an enabled text field.
`mdc-text-field-disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.
`mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.

#### Mixins for Filled Text Field
#### Mixins for Filled Text Field and Textarea

Mixin | Description
--- | ---
`mdc-text-field-fill-color($color)` | Customizes the background color of the text field or textarea when enabled.
`mdc-text-field-disabled-fill-color($color)` | Customizes the background color of the text field or textarea when disabled.

#### Mixins for Filled Text Field Only

Mixin | Description
--- | ---
`mdc-text-field-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-text-field-fill-color($color)` | Customizes the background color of the text field.
`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outlined and textarea variants.
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outlined and textarea variants.
`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color.
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color.
`mdc-text-field-disabled-bottom-line-color($color)` | Customizes the disabled text field bottom line color.
`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
`mdc-text-field-density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-height($height)` | Sets height of default text field variant.

#### Mixins for Outlined Text Field
#### Mixins for Outlined Text Field and Textarea

Mixin | Description
--- | ---
`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field or textarea is focused.
`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field or textarea is hovered.
`mdc-text-field-disabled-outline-color($color)` | Customizes the outline border color when the text field or textarea is disabled.
`mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field or textarea.

#### Mixins for Outlined Text Field Only

Mixin | Description
--- | ---
`mdc-text-field-focused-outline-color($color)` | Customizes the outline border color when the text field is focused.
`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
`mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field.
`mdc-text-field-outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-text-field-outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).
`mdc-text-field-outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.

#### Mixins for Textarea
#### Mixins for Textarea Only

Mixin | Description
--- | ---
`mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to text area variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.


#### Mixins for Text Field Fullwidth

Mixin | Description
--- | ---
`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text field variant bottom line color.

## `MDCTextField` Properties and Methods

Expand Down
158 changes: 120 additions & 38 deletions packages/mdc-textfield/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,78 +201,150 @@
@include mdc-notched-outline-shape-radius($radius, $rtl-reflexive);
}

///
/// Customizes the color of the text entered into an enabled text field.
/// @param {Color} $color - The desired input text color.
///
@mixin mdc-text-field-ink-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-ink-color_($color);
}
}

@mixin mdc-text-field-fill-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-fill-color_($color);
///
/// Customizes the color of the entered text in a disabled text field.
/// @param {Color} $color - The desired input text color.
///
@mixin mdc-text-field-disabled-ink-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-text-field-ink-color_($color);
}
}

@mixin mdc-text-field-textarea-stroke-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-textarea-stroke-color_($color);
///
/// Customizes the background color of the text field or textarea when enabled.
/// @param {Color} $color - The desired background color.
///
@mixin mdc-text-field-fill-color($color) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-fill-color_($color);
}
}

@mixin mdc-text-field-textarea-fill-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-textarea-fill-color_($color);
///
/// Customizes the background color of the text field or textarea when disabled.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-disabled-fill-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-text-field-fill-color_($color);
}
}

@mixin mdc-text-field-fullwidth-bottom-line-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-fullwidth-bottom-line-color_($color);
///
/// Customizes the text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-bottom-line-color($color) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-bottom-line-color_($color);
}
}

@mixin mdc-text-field-bottom-line-color($color) {
&:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
///
/// Customizes the disabled text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-disabled-bottom-line-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-text-field-bottom-line-color_($color);
}
}

///
/// Customizes the hover text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-hover-bottom-line-color($color) {
&:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-hover-bottom-line-color_($color);
}
}

///
/// Customizes the color of the default line ripple of the text field.
/// @param {Color} $color - The desired line ripple color.
///
@mixin mdc-text-field-line-ripple-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-line-ripple-color_($color);
}
}

///
/// Customizes the text color of the label in an enabled text field.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-label-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-label-ink-color_($color);
}
}

///
/// Customizes the text color of the label in a disabled text field.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-disabled-label-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-text-field-label-ink-color_($color);
}
}

///
/// Customizes the border color of the outlined text field or textarea.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-notched-outline-color($color);
}
}

///
/// Customizes the outline border color when the text field or textarea is hovered.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-hover-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-hover-outline-color_($color);
}
}

///
/// Customizes the outline border color when the text field or textarea is focused.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-focused-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-focused-outline-color_($color);
}
}

///
/// Customizes the outline border color when the text field or textarea is disabled.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-disabled-outline-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-notched-outline-color($color);
}
}

///
/// Customizes the caret color of the text field or textarea.
/// @param {Color} $color - The desired caret color.
///
@mixin mdc-text-field-caret-color($color) {
.mdc-text-field__input {
@include mdc-theme-prop(caret-color, $color);
Expand All @@ -290,7 +362,6 @@
@include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
@include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
@include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
@include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-fullwidth-bottom-line-color);
@include mdc-text-field-fill-color_($mdc-text-field-disabled-background);

border-bottom: none;
Expand Down Expand Up @@ -647,6 +718,9 @@

// Full Width
@mixin mdc-text-field-fullwidth_ {
@include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
@include mdc-text-field-disabled-bottom-line-color($mdc-text-field-bottom-line-idle);

width: 100%;

&:not(.mdc-text-field--textarea) {
Expand All @@ -666,14 +740,14 @@
}

@mixin mdc-text-field-fullwidth-invalid_ {
@include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-error);
@include mdc-text-field-bottom-line-color($mdc-text-field-error);
}

// Textarea
@mixin mdc-text-field-textarea-disabled_ {
@include mdc-text-field-outlined-disabled_;
/* @alternate */
@include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
@include mdc-text-field-fill-color_($mdc-textarea-disabled-background);
}

@mixin mdc-text-field-textarea-invalid_ {
Expand Down Expand Up @@ -746,20 +820,6 @@
@include mdc-theme-prop(background-color, $color);
}

@mixin mdc-text-field-textarea-stroke-color_($color) {
@include mdc-notched-outline-color($color);
}

@mixin mdc-text-field-textarea-fill-color_($color) {
@include mdc-theme-prop(background-color, $color);
}

@mixin mdc-text-field-fullwidth-bottom-line-color_($color) {
&:not(.mdc-text-field--textarea) {
@include mdc-theme-prop(border-bottom-color, $color);
}
}

@mixin mdc-text-field-bottom-line-color_($color) {
.mdc-text-field__input {
@include mdc-theme-prop(border-bottom-color, $color);
Expand All @@ -783,3 +843,25 @@
@include mdc-floating-label-ink-color($color);
}
}

// State qualifiers

///
/// Helps style the text-field only when it's enabled.
/// @access private
///
@mixin mdc-text-field-if-enabled_ {
&:not(.mdc-text-field--disabled) {
@content;
}
}

///
/// Helps style the text-field only when it's disabled.
/// @access private
///
@mixin mdc-text-field-if-disabled_ {
&.mdc-text-field--disabled {
@content;
}
}
3 changes: 2 additions & 1 deletion packages/mdc-textfield/character-counter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ CSS Class | Description

Mixin | Description
--- | ---
`mdc-text-field-character-counter-color($color)` | Customizes the color of the character counter associated with text field.
`mdc-text-field-character-counter-color($color)` | Customizes the color of the character counter associated with an enabled text field.
`mdc-text-field-character-disabled-counter-color($color)` | Customizes the color of the character counter associated with a disabled text field.
`mdc-text-field-character-counter-position($xOffset, $yOffset)` | Positions the character counter element inside text field. Used only for textarea variant.

## `MDCTextFieldCharacterCounter` Properties and Methods
Expand Down
14 changes: 14 additions & 0 deletions packages/mdc-textfield/character-counter/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,26 @@

// Public mixins

///
/// Customizes the color of the character counter associated with an enabled text field.
/// @param {Color} $color - The desired character counter color.
///
@mixin mdc-text-field-character-counter-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-character-counter-color_($color);
}
}

///
/// Customizes the color of the character counter associated with a disabled text field.
/// @param {Color} $color - The desired character counter color.
///
@mixin mdc-text-field-disabled-character-counter-color($color) {
&.mdc-text-field--disabled {
@include mdc-text-field-character-counter-color_($color);
}
}

@mixin mdc-text-field-character-counter-position($xOffset, $yOffset) {
.mdc-text-field-character-counter {
@include mdc-rtl-reflexive-position(right, $xOffset);
Expand Down
3 changes: 2 additions & 1 deletion packages/mdc-textfield/helper-text/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ CSS Class | Description

Mixin | Description
--- | ---
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following an enabled text-field.
`mdc-text-field-disabled-helper-text-color($color)` | Customizes the color of the helper text following a disabled text-field.
`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.

## `MDCTextFieldHelperText` Properties and Methods
Expand Down
Loading