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

Commit

Permalink
chore(select): Remove multi-select from mdc-select. (#1917)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Removes mdc-multi-select from the mdc-select package. Use lists to create components that allow multiple items to be selected.
  • Loading branch information
@williamernest
williamernest authored Jan 12, 2018
1 parent da34cc9 commit 145217c
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 145 deletions.
38 changes: 19 additions & 19 deletions demos/select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,25 +151,25 @@ <h2 class="mdc-typography--title">CSS Only</h2>
</div>
</section>

<section class="example">
<h2>Select Multiple - CSS Only</h2>
<select multiple size="8" class="mdc-multi-select mdc-list">

<optgroup class="mdc-list-group" label="Fats, Oils, &amp; Sweets">
<option class="mdc-list-item">Olive Oil</option>
<option class="mdc-list-item">Brown Sugar</option>
<option class="mdc-list-item">Ice Cream</option>
</optgroup>
<option class="mdc-list-divider" role="presentation" disabled />

<optgroup class="mdc-list-group" label="Dairy">
<option class="mdc-list-item">Milk</option>
<option class="mdc-list-item">Cheese</option>
<option class="mdc-list-item">More Cheese</option>
</optgroup>

</select>
</section>
<!--<section class="example">-->
<!--<h2>Select Multiple - CSS Only</h2>-->
<!--<select multiple size="8" class="mdc-multi-select mdc-list">-->

<!--<optgroup class="mdc-list-group" label="Fats, Oils, &amp; Sweets">-->
<!--<option class="mdc-list-item">Olive Oil</option>-->
<!--<option class="mdc-list-item">Brown Sugar</option>-->
<!--<option class="mdc-list-item">Ice Cream</option>-->
<!--</optgroup>-->
<!--<option class="mdc-list-divider" role="presentation" disabled />-->

<!--<optgroup class="mdc-list-group" label="Dairy">-->
<!--<option class="mdc-list-item">Milk</option>-->
<!--<option class="mdc-list-item">Cheese</option>-->
<!--<option class="mdc-list-item">More Cheese</option>-->
<!--</optgroup>-->

<!--</select>-->
<!--</section>-->

</main>
<script src="/assets/material-components-web.js"></script>
Expand Down
34 changes: 1 addition & 33 deletions packages/mdc-select/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ path: /catalog/input-controls/select-menus/
</a>
</div>-->

MDC Select provides Material Design single-option and multi-option select menus. It functions analogously to the
MDC Select provides Material Design single-option select menus. It functions analogously to the
browser's native `<select>` element, and includes a gracefully degraded version that can be used
in conjunction with the browser's native element. Both are fully accessible, and fully RTL-aware.

Expand Down Expand Up @@ -226,38 +226,6 @@ E.g.:
</div>
```

### Multi Select

MDC-Web implements multi-select on top of the `<select multiple>` element.

```html
<select multiple size="6" class="mdc-multi-select mdc-list" >
<optgroup class="mdc-list-group" label="Starches">
<option class="mdc-list-item">
Potato
</option>
<option class="mdc-list-item">
Cereal
</option>
</optgroup>
<option class="mdc-list-divider" role="presentation" disabled />
<option>
misc...
</option>
</select>
```

Select elements take a `size` attribute to determine the height of the select box.

If you'd like to maintain the width or height outside of the attribute, you'll need to set it in your styles:

```css
.my-select-container .mdc-select {
width: 300px;
height: 550px;
}
```

#### Classes

| Class | Description |
Expand Down
93 changes: 0 additions & 93 deletions packages/mdc-select/mdc-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,99 +297,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
}
}

// postcss-bem-linter: define multi-select
.mdc-multi-select {
@include mdc-theme-prop(border-color, text-hint-on-light);

width: 250px;
padding: 0;
border-width: 1px;
border-style: solid;
outline: none;
appearance: none;

@include mdc-theme-dark {
@include mdc-theme-prop(border-color, text-hint-on-dark);
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-list-group {
@include mdc-theme-prop(color, text-hint-on-light);

margin: 16px 0 0;
padding: 0 0 0 16px;
font-weight: normal;

@include mdc-theme-dark {
@include mdc-theme-prop(color, text-hint-on-dark);
}

&:last-child {
margin-bottom: 16px;
}

.mdc-list-divider {
margin-left: -16px;
}
// stylelint-enable plugin/selector-bem-pattern
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-list-item {
@include mdc-theme-prop(color, text-primary-on-light);

margin: 0 0 0 -16px;
padding: 0 16px;

@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
}

&:first-child {
margin-top: 12px;
}

&:last-child {
margin-bottom: 8px;
}

// Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
// OS-determined selection color, which states styles are not going to play well with.
// Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
// that we use for ripple/states to position and size themselves relative to the entire body instead.
// Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
&::before,
&::after {
content: none;
}
}
// stylelint-enable plugin/selector-bem-pattern

// stylelint-disable plugin/selector-bem-pattern
.mdc-list-item:checked {
@include mdc-theme-prop(background-color, background);

@include mdc-theme-dark {
@include mdc-theme-prop(background-color, text-primary-on-dark);
}
}

.mdc-list-divider {
margin-bottom: 8px;
padding-top: 8px;
font-size: 0;
}
// stylelint-enable plugin/selector-bem-pattern
}

.mdc-multi-select:focus .mdc-list-item:checked {
@include mdc-theme-prop(background-color, primary);

@include mdc-theme-dark {
@include mdc-theme-prop(background-color, text-primary-on-dark);
}
}

// height for option elements cannot be controlled
// with CSS. Use the font-size rule instead.

Expand Down

0 comments on commit 145217c

Please sign in to comment.