Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

chore(select): Remove default variant #3476

Merged
merged 19 commits into from
Sep 5, 2018
Merged

chore(select): Remove default variant #3476

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d615253
chore(select): Init commit of removing non-box
williamernest Aug 29, 2018
01cacc1
chore(select): Update
williamernest Aug 29, 2018
31bfd09
Merge branch 'master' into chore/select/remove-default-variant
williamernest Aug 30, 2018
0e46865
chore(select): Update
williamernest Aug 30, 2018
fc5c80c
chore(select): Remove box references
williamernest Aug 30, 2018
45e4af7
chore(select): Update tests and component
williamernest Aug 30, 2018
0520b9a
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
fa8f06c
fix(select): Update goldens
williamernest Sep 5, 2018
7e01f0e
fix(select): Update goldens
williamernest Sep 5, 2018
bbd721b
fix(select): Update for comments
williamernest Sep 5, 2018
2cbfa4f
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
30f9a13
fix(select): Fix pointer-events
williamernest Sep 5, 2018
0600e0c
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
538c84d
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
3bc2183
fix(select): Update goldens
williamernest Sep 5, 2018
8f9ca3c
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
9f69005
fix(select): update goldens
williamernest Sep 5, 2018
b78805f
Merge branch 'master' into chore/select/remove-default-variant
williamernest Sep 5, 2018
225a0c9
fix(select): Update goldens..... again
williamernest Sep 5, 2018
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
89 changes: 0 additions & 89 deletions demos/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,54 +138,6 @@ <h2 class="mdc-typography--headline6">Fully-Featured JS Component</h2>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--headline6">Select box</h2>
<section id="box-demo-wrapper">
<div id="box-js-select" class="mdc-select mdc-select--box">
<select class="mdc-select__native-control" id="select-box">
<option value="" disabled selected></option>
<option value="fruit-roll-ups">
Fruit Roll Ups
</option>
<option value="cotton-candy">
Candy (cotton)&#x200E;
</option>
<option value="vegetables" disabled>
Vegetables
</option>
<option value="noodles">
Noodles
</option>
</select>
<label class="mdc-floating-label" for="select-box">Food Group</label>
<div class="mdc-line-ripple"></div>
</div>
</section>
<p>Currently selected: <span id="box-currently-selected">(none)</span></p>
<div>
<input type="checkbox" id="box-rtl">
<label for="box-rtl">RTL</label>
</div>
<div>
<input type="checkbox" id="box-alternate-colors">
<label for="box-alternate-colors">Alternate Colors</label>
</div>
<div>
<input type="checkbox" id="box-disabled">
<label for="box-disabled">Disabled</label>
</div>
<div class="button-container">
<button class="mdc-button mdc-button--raised" id="box-set-selected-index-zero-button">
Set Selected Index (0)
</button>
</div>
<div class="button-container">
<button class="mdc-button mdc-button--raised" id="box-set-value-fruit-roll-up-button">
Set Value to Fruit Roll Ups
</button>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--headline6">Outlined Select</h2>
<section>
Expand Down Expand Up @@ -335,47 +287,6 @@ <h2 class="mdc-typography--headline6">MDC Select with optgroups</h2>
});
});

demoReady(function() {
var root = document.getElementById('box-js-select');
var currentlySelected = document.getElementById('box-currently-selected');
var select = new mdc.select.MDCSelect(root);
var demoWrapper = document.getElementById('box-demo-wrapper');
var rtlCb = document.getElementById('box-rtl');
var alternateColorsCb = document.getElementById('box-alternate-colors');
var disabledCb = document.getElementById('box-disabled');
var setSelectedButton = document.getElementById('box-set-selected-index-zero-button');
var setValueFruitRollUpsButton = document.getElementById('box-set-value-fruit-roll-up-button');
function updateSelectedTextContent() {
var value = select.value;
var index = select.selectedIndex;
currentlySelected.textContent = value ? value + ' at index ' + index : '(none)';
}
root.addEventListener('change', function() {
updateSelectedTextContent();
});
rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
demoWrapper.setAttribute('dir', 'rtl');
} else {
demoWrapper.removeAttribute('dir');
}
});
alternateColorsCb.addEventListener('change', function() {
root.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors');
});
disabledCb.addEventListener('change', function() {
select.disabled = disabledCb.checked;
});
setSelectedButton.addEventListener('click', function() {
select.selectedIndex = 0;
updateSelectedTextContent();
});
setValueFruitRollUpsButton.addEventListener('click', function() {
select.value = 'fruit-roll-ups';
updateSelectedTextContent();
});
});

demoReady(function() {

var root = document.getElementById('outline-js-select');
Expand Down
18 changes: 1 addition & 17 deletions packages/mdc-select/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,21 +83,6 @@ See [Importing the JS component](../../docs/importing-js.md) for more informatio

## Variants

### Select Box
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we also remove the default style deprecation notice?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think we should leave the deprecation notice in so people see it if they come looking for why their default variant changes.


The Select Box variant uses the same markup as the standard variant, with the addition of the `mdc-select--box`
modifier class on the root element.

```html
<div class="mdc-select mdc-select--box">
<select class="mdc-select__native-control">
...
</select>
<label class="mdc-floating-label">Pick a Food Group</label>
<div class="mdc-line-ripple"></div>
</div>
```

### Outlined Select

The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the
Expand Down Expand Up @@ -198,7 +183,6 @@ Since MDC Select uses native `<select>` and `<option>` elements, simply add the
| Class | Description |
| --- | --- |
| `mdc-select` | Mandatory. |
| `mdc-select--box` | Optional. Styles the select as a box select. |
| `mdc-select--disabled` | Optional. Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `<select>` element. |
| `mdc-select--outlined` | Optional. Styles the select as outlined select. |
| `mdc-select__native-control` | Mandatory. The native `<select>` element. |
Expand All @@ -215,7 +199,7 @@ Mixin | Description
`mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
`mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
`mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
`mdc-select-corner-radius($radius)` | Customizes the corner radius of the box variant of the select.
`mdc-select-corner-radius($radius)` | Customizes the corner radius of the select.
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we say "of the filled select variant" or something? Since there's a separate mixin for outlined...

`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
`mdc-select-outline-color($color)` | Customizes the color of the notched outline.
`mdc-select-outline-corner-radius($radius)` | Sets the border radius of of the outlined select variant.
Expand Down
9 changes: 9 additions & 0 deletions packages/mdc-select/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,3 +176,12 @@
@include mdc-notched-outline-color($color);
}
}

@mixin mdc-select-floating-label_ {
.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, 16px);

bottom: 12px;
line-height: 1.75rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this related to any of our typography variables or mixins? Or just a component-specific value?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is required to get the notched outline to float to the correct position. This will be refactored in a follow up PR so that the notched outline requires no changes in the default version of text field and the select.

}
}
1 change: 1 addition & 0 deletions packages/mdc-select/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,6 @@ $mdc-select-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24);
$mdc-select-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .16);
$mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87);

$mdc-select-label-position-y: 40%;
$mdc-select-outlined-label-position-y: 130%;
$mdc-select-outlined-dense-label-position-y: 110%;
1 change: 0 additions & 1 deletion packages/mdc-select/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@

/** @enum {string} */
const cssClasses = {
BOX: 'mdc-select--box',
DISABLED: 'mdc-select--disabled',
ROOT: 'mdc-select',
OUTLINED: 'mdc-select--outlined',
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ class MDCSelect extends MDCComponent {
this.outline_ = outlineFactory(outlineElement);
}

if (this.root_.classList.contains(cssClasses.BOX)) {
if (!this.root_.classList.contains(cssClasses.OUTLINED)) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This seems like a change of behavior. Did outlined previously not have ripples?

Copy link
Contributor

Choose a reason for hiding this comment

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

Never mind... I missed the !.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The outlined variant does not have ripples. This code used to single out the box variant to add ripples, but since there is no longer a default variant this needs to exclude the outlined variant.

this.ripple = this.initRipple_();
}
}
Expand Down
98 changes: 33 additions & 65 deletions packages/mdc-select/mdc-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,13 @@

// postcss-bem-linter: define select
.mdc-select {
@include mdc-select-container-fill-color(transparent);
@include mdc-select-container-fill-color($mdc-select-box-fill-color);
@include mdc-ripple-surface;
@include mdc-ripple-radius-bounded;
// Select intentionally omits press ripple, so each state needs to be specified individually.
@include mdc-states-base-color($mdc-select-ink-color);
@include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
@include mdc-states-focus-opacity(mdc-states-opacity($mdc-select-ink-color, focus));
@include mdc-select-dd-arrow-svg-bg_;
@include mdc-select-ink-color($mdc-select-ink-color);
@include mdc-select-label-color($mdc-select-label-color);
Expand All @@ -46,20 +52,30 @@

// Hover state colors
@include mdc-select-hover-bottom-line-color($mdc-select-bottom-line-hover-color);
@include mdc-floating-label-float-position($mdc-select-label-position-y);
@include mdc-select-floating-label_;

display: inline-flex;
position: relative;
box-sizing: border-box;
height: 52px;
height: 56px;
border-radius: 4px 4px 0 0;
background-repeat: no-repeat;
background-position: right 8px bottom 12px;
background-position: right 10px center;
overflow: hidden;
will-change: opacity, transform, color;

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-floating-label {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this be moved to the floating-label_ mixin you created? (Though that mixin is only seemingly invoked in one place)

pointer-events: none;
}

@include mdc-rtl {
background-position: left 8px bottom 12px;
background-position: left 10px center;
}

&__native-control {
@include mdc-rtl-reflexive-property(padding, 0, $mdc-select-arrow-padding);
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding);
@include mdc-typography(subtitle1);

&::-ms-expand {
Expand All @@ -72,23 +88,19 @@
}

width: 100%;
height: 56px;
padding-top: 20px;
padding-bottom: 4px;
border: none;
border-bottom: 1px solid;
border-radius: 0;
border-radius: 4px 4px 0 0;
outline: none;
background-color: transparent;
white-space: nowrap;
cursor: pointer;
appearance: none;
}

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-floating-label {
pointer-events: none;
}

@include mdc-select-focused-line-ripple_ {
&::after {
transform: scale(1, 2);
Expand All @@ -97,60 +109,19 @@
}
}

.mdc-select--box {
@include mdc-select-container-fill-color($mdc-select-box-fill-color);
@include mdc-ripple-surface;
@include mdc-ripple-radius-bounded;
// Select Box intentionally omits press ripple, so each state needs to be specified individually
@include mdc-states-base-color($mdc-select-ink-color);
@include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
@include mdc-states-focus-opacity(mdc-states-opacity($mdc-select-ink-color, focus));

height: 56px;
border-radius: 4px 4px 0 0;
background-position: right 10px center;
overflow: hidden;

@include mdc-rtl {
background-position: left 10px center;
}

.mdc-select__native-control {
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding);

height: 56px;
border-radius: 4px 4px 0 0;
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, 16px);

bottom: 12px;
line-height: 1.75rem;

&--float-above {
transform: translateY(-40%) scale(.75, .75);
}
}
// stylelint-enable plugin/selector-bem-pattern
}

.mdc-select--outlined {
@include mdc-select-container-fill-color(transparent);
@include mdc-select-outline-color($mdc-select-outlined-idle-border);
@include mdc-select-hover-outline-color($mdc-select-outlined-hover-border);
@include mdc-select-focused-outline-color(primary);
@include mdc-floating-label-float-position($mdc-select-outlined-label-position-y);
@include mdc-floating-label-shake-animation(text-field-outlined);
@include mdc-select-outline-corner-radius($mdc-select-border-radius);
@include mdc-states-base-color(transparent);
@include mdc-select-container-fill-color(transparent);

height: 56px;
border: none;
background-position: right 10px center;

@include mdc-rtl {
background-position: left 10px center;
}
overflow: visible;

.mdc-select__native-control {
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding);
Expand All @@ -165,35 +136,32 @@

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, 16px);

position: absolute;
bottom: 20px;
line-height: 1.15rem;
}
}

.mdc-select--disabled {
@include mdc-select-dd-arrow-svg-bg_($mdc-select-disabled-arrow-color);
@include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color);

.mdc-floating-label {
@include mdc-floating-label-ink-color($mdc-select-disabled-label-color);
}

// stylelint-disable plugin/selector-bem-pattern
// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-line-ripple {
display: none;
}

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-select__native-control {
border-bottom-style: dotted;
}
// stylelint-enable plugin/selector-bem-pattern

&.mdc-select--box {
@include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color);
}

&.mdc-select--outlined {
@include mdc-select-container-fill-color_(transparent);

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-select__native-control {
border-bottom-style: none;
Expand Down
Loading