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

fix(select): Remove css version #2116

Merged
merged 7 commits into from
Jan 31, 2018
Merged

fix(select): Remove css version #2116

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e435a1
chore(select): Remove css version
williamernest Jan 26, 2018
e2398ab
fix(select): Remove css only select
williamernest Jan 30, 2018
1f06764
fix(select): Merge with master
williamernest Jan 30, 2018
959398d
feat(select): Remove JS referencing removed checkboxes from demo
williamernest Jan 30, 2018
ee24e02
feat(select): Remove left over css
williamernest Jan 30, 2018
096f414
Merge branch 'master' into chore/select/remove-css-only-version
williamernest Jan 30, 2018
fa7199d
Merge branch 'master' into chore/select/remove-css-only-version
williamernest Jan 30, 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
38 changes: 0 additions & 38 deletions demos/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,32 +134,6 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
<label for="disabled">Disabled</label>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--title">CSS Only</h2>
<section class="box-demo-wrapper">
<div id="demo-css-only-select" class="mdc-select">
<select class="mdc-select__surface">
<option value="" selected>Pick a food group</option>
<option value="grains">Bread, Cereal, Rice, and Pasta</option>
<option value="vegetables" disabled>Vegetables</option>
<option value="fruit">Fruit</option>
<option value="dairy">Milk, Yogurt, and Cheese</option>
<option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
<option value="fats">Fats, Oils, and Sweets</option>
</select>
<div class="mdc-select__bottom-line"></div>
</div>
</section>
<div>
<input type="checkbox" id="css-alternate-colors">
Copy link
Contributor

Choose a reason for hiding this comment

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

You should also remove the JS that references these checkboxes that are no longer present.

<label for="css-alternate-colors">Alternate Colors</label>
</div>
<div>
<input type="checkbox" id="css-disabled">
<label for="css-disabled">Disabled</label>
</div>
</section>
</main>

<script src="/assets/material-components-web.js" async></script>
Expand All @@ -183,11 +157,6 @@ <h2 class="mdc-typography--title">CSS Only</h2>
var alternateColorsCb = document.getElementById('alternate-colors');
var disabledCb = document.getElementById('disabled');

// CSS
var selectCss = document.getElementById('demo-css-only-select');
var cssAlternateColors = document.getElementById('css-alternate-colors');
var cssDisabled = document.getElementById('css-disabled');

rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
boxDemoWrapper.setAttribute('dir', 'rtl');
Expand All @@ -201,13 +170,6 @@ <h2 class="mdc-typography--title">CSS Only</h2>
disabledCb.addEventListener('change', function() {
select.disabled = disabledCb.checked;
});

cssAlternateColors.addEventListener('change', function() {
selectCss.classList[cssAlternateColors.checked ? 'add' : 'remove']('demo-select-custom-colors');
});
cssDisabled.addEventListener('change', function() {
cssDisabled.checked ? selectCss.setAttribute('disabled', 'disabled') : selectCss.removeAttribute('disabled');
});
});
</script>
</body>
Expand Down
123 changes: 2 additions & 121 deletions packages/mdc-select/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,37 +200,11 @@ To disable a list item, set `aria-disabled` to `"true"`, and set `tabindex` to `
</div>
```

### Using the Pure CSS Select
Copy link
Contributor

Choose a reason for hiding this comment

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

We should presumably also remove the tips/tricks section in this readme since it no longer applies (there is no longer a css-only MDC Select)


The `mdc-select` CSS classes also work with the browser's native `<select>` element, allowing for a
seamless, un-invasive experience in browsers where a native select may be more appropriate, such as
on a mobile device. It does not require any javascript, nor any CSS for `mdc-menu` or `mdc-list`.
E.g.:

1. Wrap the `<select>` with a block element that has an `mdc-select` class
2. Add the `mdc-select__surface` class to the `<select>`
3. Append `<div class="mdc-select__bottom-line"></div>` immediately after the `<select>`

```html
<div class="mdc-select">
<select class="mdc-select__surface">
<option value="" default selected>Pick a food group</option>
<option value="grains">Bread, Cereal, Rice, and Pasta</option>
<option value="vegetables" disabled>Vegetables</option>
<option value="fruit">Fruit</option>
<option value="dairy">Milk, Yogurt, and Cheese</option>
<option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
<option value="fats">Fats, Oils, and Sweets</option>
</select>
<div class="mdc-select__bottom-line"></div>
</div>
```

#### CSS Classes

| Class | Description |
| ------------------------ | ----------------------------------------------- |
| `mdc-select` | A pure css `select` element |
| `mdc-select` | Mandatory. |
| `mdc-list-group` | A group of options. |
| `mdc-list-item` | A list item. |
| `mdc-list-divider` | A divider. |
Expand All @@ -244,7 +218,7 @@ these mixins within CSS selectors like `.foo-select` to apply styling.

Mixin | Description
--- | ---
`mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select. On the css version, this also customizes the color of the label.
`mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select.
`mdc-select-container-fill-color($color)` | Customizes the background color of the select.
`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. This mixin is only used for the JS version of the select.
`mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional.
Expand Down Expand Up @@ -393,96 +367,3 @@ Enables/disables the select.
## Theming

The select's bottom border is set to the current theme's primary color when focused.

## Tips / Tricks

### Switching between selects for better cross-device UX

Selects are a tricky beast on the web. Many times, a custom select component will work well on large
devices with mouse/keyboard capability, but fail miserably on smaller-scale devices without
fine-grained pointer capability, such as a phone. Because `mdc-select` works on native selects, you
can easily switch between a custom select on larger devices and a native element on smaller ones.

First, wrap both a custom select and a native select within a wrapper element, let's call it the
`select-manager`.

```html
<div class="select-manager">
<!-- Custom MDC Select, shown on desktop -->
<div class="mdc-select" role="listbox">
<div class="mdc-select__surface" tabindex="0">
<div class="mdc-select__label">Pick One</div>
<div class="mdc-select__selected-text"></div>
<div class="mdc-select__bottom-line"></div>
</div>
<div class="mdc-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
<li id="a" class="mdc-list-item" role="option" tabindex="0">A</li>
<li id="b" class="mdc-list-item" role="option" tabindex="0">B</li>
<li id="c" class="mdc-list-item" role="option" tabindex="0">C</li>
</ul>
</div>
</div>
<!-- Native element, shown on mobile devices -->
<div class="mdc-select">
<select class="mdc-select__surface">
<option value="" selected disabled>Pick one</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<div class="mdc-select__bottom-line"></div>
<div>
</div>
```

Then, write some CSS that implements a media query checking for a small screen as well as
[course pointer interaction](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer). This
will ensure that the custom select will still be present on smaller devices that do have
mouse/keyboard capability, such as a hybrid tablet or a small browser window on a desktop.

```css
.select-manager > select.mdc-select {
display: none;
}

@media (max-width: 600px) and (pointer: coarse) {
.select-manager > .mdc-select[role="listbox"] {
display: none;
}

.select-manager > select.mdc-select {
display: block;
}
}
```

Finally, we need to be able to react to events and keep each component in sync. We can do this in
a few lines of JS, and check where the event came from by looking at its `type`. If it came from the
custom component, the type will be `MDCSelect:change`, otherwise it will simply be `change`.

```js
const selectManager = document.querySelector('.select-manager');
const selects = {
custom: MDCSelect.attachTo(selectManager.querySelector('.mdc-select[role="listbox"]')),
native: MDCSelect.attachTo(selectManager.querySelector('select.mdc-select__surface'))
};
const changeHandler = ({type}) => {
let changedSelect, selectToUpdate, value;
if (type === 'MDCSelect:change') {
changedSelect = selects.custom;
selectToUpdate = selects.native;
value = changedSelect.selectedOptions[0].id;
} else {
changedSelect = selects.native;
selectToUpdate = selects.custom;
value = changedSelect.selectedOptions[0].value;
}
selectToUpdate.selectedIndex = changedSelect.selectedIndex;
console.info('Selected value', value);
};
selects.custom.listen('MDCSelect:change', changeHandler);
selects.native.addEventListener('change', changeHandler);
```

We are looking into building this functionality into `MDCSelect` in the future.
4 changes: 1 addition & 3 deletions packages/mdc-select/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@
// Private

@mixin mdc-select-focused-bottom-line_ {
// JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure
.mdc-select__surface:focus .mdc-select__bottom-line,
.mdc-select__surface:focus ~ .mdc-select__bottom-line {
.mdc-select__surface:focus .mdc-select__bottom-line {
@content;
}
}
Expand Down
9 changes: 1 addition & 8 deletions packages/mdc-select/mdc-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
@include mdc-ripple-radius-bounded;
@include mdc-states;

&::-ms-expand {
display: none;
}

display: flex;
position: relative;
flex-grow: 1;
Expand All @@ -85,8 +81,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
border: none;
border-radius: 4px 4px 0 0;
outline: none;
// Resets for <select> element
appearance: none;
overflow: hidden;
}

Expand Down Expand Up @@ -179,8 +173,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
}
}

.mdc-select--disabled,
Copy link
Contributor

Choose a reason for hiding this comment

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

Just leaving a note here that the @each after this will be removed in #2098 anyway, so it probably doesn't merit touching in this PR.

.mdc-select[disabled] {
.mdc-select--disabled {
@include mdc-select-label-color_(text-disabled-on-light);
@include mdc-select-dd-arrow-svg-bg_(000000, .38);

Expand Down