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

Commit

Permalink
feat(select): Add new UX styles and behavior to select
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Adds several adapter methods to facilitate the new UX styles. Changes DOM requirements. Refer to https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/README.md for new implementation requirements.
  • Loading branch information
@amsheehan
amsheehan authored Dec 5, 2017
1 parent f7f1eb0 commit 99878c1
Show file tree
Hide file tree
Showing 9 changed files with 516 additions and 172 deletions.
99 changes: 51 additions & 48 deletions demos/select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
}

.example {
max-width: 400px;
margin: 24px;
padding: 24px;
}
Expand All @@ -65,12 +66,13 @@
<div class="mdc-toolbar-fixed-adjust"></div>
<section class="hero">
<div id="hero-js-select" class="mdc-select" role="listbox" tabindex="0">
<span class="mdc-select__selected-text">Pick a food group</span>
<div class="mdc-select__surface">
<div class="mdc-select__label">Pick a Food Group</div>
<div class="mdc-select__selected-text"></div>
<div class="mdc-select__bottom-line"></div>
</div>
<div class="mdc-simple-menu mdc-select__menu">
<ul class="mdc-list mdc-simple-menu__items">
<li class="mdc-list-item" role="option" aria-disabled="true">
Pick a food group
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Bread, Cereal, Rice, and Pasta
</li>
Expand All @@ -80,7 +82,7 @@
<li class="mdc-list-item" role="option" tabindex="0">
Fruit
</li>
<li class="mdc-list-item" role="option" tabindex="0">
<li class="mdc-list-item" role="option" tabindex="0">
Milk, Yogurt, and Cheese
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Expand All @@ -96,37 +98,29 @@

<section class="example">
<h2 class="mdc-typography--title">Fully-Featured Component</h2>
<section id="demo-wrapper">
<div id="js-select" class="mdc-select" role="listbox" tabindex="0">
<span class="mdc-select__selected-text">Pick a food group</span>
<section id="box-demo-wrapper">
<div id="js-select-box" class="mdc-select" role="listbox" tabindex="0">
<div class="mdc-select__surface">
<div class="mdc-select__label">Food Group</div>
<div class="mdc-select__selected-text"></div>
<div class="mdc-select__bottom-line"></div>
</div>
<div class="mdc-simple-menu mdc-select__menu">
<ul class="mdc-list mdc-simple-menu__items">
<li class="mdc-list-item" role="option" id="grains" aria-disabled="true">
Pick a food group
<li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
Fruit Roll Ups
</li>
<li class="mdc-list-item" role="option" id="grains" tabindex="0">
Bread, Cereal, Rice, and Pasta
<li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
Candy (cotton)
</li>
<li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
Vegetables
</li>
<li class="mdc-list-item" role="option" id="fruit" tabindex="0">
Fruit
</li>
<li class="mdc-list-item" role="option" id="dairy" tabindex="0">
Milk, Yogurt, and Cheese
</li>
<li class="mdc-list-item" role="option" id="meat" tabindex="0">
Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
</li>
<li class="mdc-list-item" role="option" id="fats" tabindex="0">
Fats, Oils, and Sweets
</li>
</ul>
</div>
</div>
</section>
<p>Currently selected: <span id="currently-selected">(none)</span></p>
<p>Currently selected: <span id="box-currently-selected">(none)</span></p>
<div>
<input type="checkbox" id="dark-theme">
<label for="dark-theme">Dark Theme</label>
Expand All @@ -140,17 +134,21 @@ <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>
<select class="mdc-select">
<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">
<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>

<section class="example">
Expand All @@ -176,40 +174,45 @@ <h2>Select Multiple - CSS Only</h2>
</main>
<script src="/assets/material-components-web.js"></script>
<script>
(function() {
setTimeout(function() {
var MDCSelect = mdc.select.MDCSelect;
var root = document.getElementById('js-select');
var currentlySelected = document.getElementById('currently-selected');
var select = MDCSelect.attachTo(root);
var heroSelect = document.getElementById('hero-js-select');
var heroSelectComponent = new mdc.select.MDCSelect(heroSelect);
}, 300);
</script>
<script>
setTimeout(function() {
var MDCSelect = mdc.select.MDCSelect;
var root = document.getElementById('js-select-box');
var boxCurrentlySelected = document.getElementById('box-currently-selected');
var select = new MDCSelect(root);

root.addEventListener('MDCSelect:change', function() {
var item = select.selectedOptions[0];
var index = select.selectedIndex;
currentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';
boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';
});

var demoWrapper = document.getElementById('demo-wrapper');
var boxDemoWrapper = document.getElementById('box-demo-wrapper');
var darkThemeCb = document.getElementById('dark-theme');
var rtlCb = document.getElementById('rtl');
var disabledCb = document.getElementById('disabled');

darkThemeCb.addEventListener('change', function() {
demoWrapper.classList[darkThemeCb.checked ? 'add' : 'remove']('mdc-theme--dark');
boxDemoWrapper.classList[darkThemeCb.checked ? 'add' : 'remove']('mdc-theme--dark');
});
rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
demoWrapper.setAttribute('dir', 'rtl');
boxDemoWrapper.setAttribute('dir', 'rtl');
} else {
demoWrapper.removeAttribute('dir');
boxDemoWrapper.removeAttribute('dir');
}
});
disabledCb.addEventListener('change', function() {
select.disabled = disabledCb.checked;
});

var heroSelect = document.getElementById('hero-js-select');
mdc.select.MDCSelect.attachTo(heroSelect);
})();
}, 300);
</script>
</body>
</html>
Loading

0 comments on commit 99878c1

Please sign in to comment.