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

refactor(select): replace menu with native html select #2462

Merged
merged 29 commits into from
Apr 2, 2018
Merged

refactor(select): replace menu with native html select #2462

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
b0435e2
WIP: select is workig without menu
Mar 19, 2018
fd7b19f
WIP: checking tap target IE
Mar 19, 2018
a9ca540
Merge branch 'master' into refactor/select/use-native-select
Mar 20, 2018
2bd3f84
Merge branch 'master' into refactor/select/use-native-select
Mar 23, 2018
15e8d78
WIP: fixed select box styles and animations
Mar 23, 2018
5264eef
WIP: select readmes
Mar 23, 2018
06ace26
fix(select): updated tests
Mar 26, 2018
440a652
WIP: test update
Mar 26, 2018
ed4a6e8
Mrge branch 'master' into refactor/select/use-native-select
Mar 26, 2018
47ac811
WIP: removed unintentional changes
Mar 26, 2018
1188e32
Merge branch 'master' into refactor/select/use-native-select
Mar 27, 2018
8eafe05
WIP: removed aria selected and aria disabled
Mar 27, 2018
ed42b9f
Merge branch 'refactor/select/use-native-select' of github.com:materi…
Mar 27, 2018
9f9c738
Merge branch 'master' into refactor/select/use-native-select
Mar 27, 2018
6309356
fix: test warnings
Mar 27, 2018
214fbba
fix: IE 11 fix
Mar 27, 2018
401a2a2
fix: removed __option selector
Mar 27, 2018
388f261
fix: fixed select in IE since selectedIndex isn't supported
Mar 27, 2018
196e0f1
Merge branch 'master' into refactor/select/use-native-select
Mar 27, 2018
c5f2614
fix: removed getters from foundation and converted `set` methods to m…
Mar 27, 2018
6cce4ad
Merge branch 'refactor/select/use-native-select' of github.com:materi…
Mar 27, 2018
9d0fbf4
fix: comment update
Mar 28, 2018
5fab6ac
WIP: decreased complexity of select adapter, fixed up readme
Mar 29, 2018
0ffd8da
WIP: fixed tests and readme
Mar 30, 2018
7c0ef6e
Merge branch 'master' into refactor/select/use-native-select
Mar 30, 2018
c4c9ac0
WIP: tests passing!
Mar 30, 2018
b13a01d
Mterge branch 'refactor/select/use-native-select' of github.com:mater…
Mar 30, 2018
137cb5d
WIP Final review revisions
Apr 2, 2018
c816555
WIP Conditionally skip tests dependent on ripple JS (fixes IE11)
Apr 2, 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
243 changes: 137 additions & 106 deletions demos/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,62 +60,60 @@
<main>
<div class="mdc-toolbar-fixed-adjust"></div>
<section class="hero">
<div id="hero-js-select" class="mdc-select" role="listbox">
<div class="mdc-select__surface" tabindex="0">
<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-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
<li class="mdc-list-item" role="option" tabindex="0">
Bread, Cereal, Rice, and Pasta
</li>
<li class="mdc-list-item" role="option" aria-disabled="true" tabindex="0">
Vegetables
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Fruit
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Milk, Yogurt, and Cheese
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
</li>
<li class="mdc-list-item" role="option" tabindex="0">
Fats, Oils, and Sweets
</li>
</ul>
</div>
<div id="hero-js-select" class="mdc-select">
<select class="mdc-select__surface">
<option class="mdc-select__option" value="grains">
Bread, Cereal, Rice, and Pasta
</option>
<option class="mdc-select__option" value="vegetables" aria-disabled="true">
Vegetables
</option>
<option class="mdc-select__option" value="fruit">
Fruit
</option>
<option class="mdc-select__option" value="dairy">
Milk, Yogurt, and Cheese
</option>
<option class="mdc-select__option" value="meat">
Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
</option>
<option class="mdc-select__option" value="fats">
Fats, Oils, and Sweets
</option>
</select>
<div class="mdc-select__label">Pick a Food Group</div>
<div class="mdc-select__bottom-line"></div>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
<section id="demo-wrapper">
<div id="js-select" class="mdc-select" role="listbox">
<div class="mdc-select__surface" tabindex="0">
<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-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
<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="cotton-candy" tabindex="0">
Candy (cotton)&#x200E;
</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="noodles" tabindex="0">
Noodles
</li>
</ul>
</div>
<div id="js-select" class="mdc-select">
<select class="mdc-select__surface">
<option value="" class="mdc-select__option" disabled selected>
</option>
<option value="grains" class="mdc-select__option">
Bread, Cereal, Rice, and Pasta
</option>
<option value="vegetables" class="mdc-select__option" disabled aria-disabled="true">
Vegetables
</option>
<option value="fruit" class="mdc-select__option">
Fruit
</option>
<option value="dairy" class="mdc-select__option">
Milk, Yogurt, and Cheese
</option>
<option value="meat" class="mdc-select__option">
Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
</option>
<option value="fats" class="mdc-select__option">
Fats, Oils, and Sweets
</option>
</select>
<div class="mdc-select__label">Food Group</div>
<div class="mdc-select__bottom-line"></div>
</div>
</section>
<p>Currently selected: <span id="currently-selected">(none)</span></p>
Expand All @@ -135,33 +133,32 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
<input type="checkbox" id="set-selected-checkbox">
<label for="set-selected-checkbox">Set Selected Index (0)</label>
</div>
<div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we replace these two checkboxes (selected index and value) with buttons here and for the box example below? They really don't make sense as checkboxes... it'd also allow us to remove the code that's trying to sync the selected index checkbox.

<input type="checkbox" id="set-value-meat-checkbox">
<label for="set-value-meat-checkbox">Set Value to Meat</label>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--title">Select box</h2>
<section id="box-demo-wrapper">
<div id="box-js-select" class="mdc-select mdc-select--box" role="listbox">
<div class="mdc-select__surface" tabindex="0">
<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-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
<li class="mdc-list-item" role="option" id="fruit-roll-ups2" tabindex="0">
Fruit Roll Ups
</li>
<li class="mdc-list-item" role="option" id="cotton-candy2" tabindex="0">
Candy (cotton)&#x200E;
</li>
<li class="mdc-list-item" role="option" id="vegetables2" aria-disabled="true" tabindex="0">
Vegetables
</li>
<li class="mdc-list-item" role="option" id="noodles2" tabindex="0">
Noodles
</li>
</ul>
</div>
<div id="box-js-select" class="mdc-select mdc-select--box">
<select class="mdc-select__surface">
<option class="mdc-select__option" value="" disabled selected></option>
<option class="mdc-select__option" value="fruit-roll-ups1">
Fruit Roll Ups
</option>
<option class="mdc-select__option" value="cotton-candy1">
Candy (cotton)&#x200E;
</option>
<option class="mdc-select__option" value="vegetables1" aria-disabled="true">
Vegetables
</option>
<option class="mdc-select__option" value="noodles1">
Noodles
</option>
</select>
<div class="mdc-select__label">Food Group</div>
<div class="mdc-select__bottom-line"></div>
</div>
</section>
<p>Currently selected: <span id="box-currently-selected">(none)</span></p>
Expand All @@ -181,43 +178,59 @@ <h2 class="mdc-typography--title">Select box</h2>
<input type="checkbox" id="box-set-selected-checkbox">
<label for="box-set-selected-checkbox">Set Selected Index (0)</label>
</div>
<div>
<input type="checkbox" id="box-set-value-fruit-roll-ups-checkbox">
<label for="box-set-value-fruit-roll-ups-checkbox">Set Value to Fruit Roll Ups</label>
</div>
</section>

<section class="example">
<h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
<section>
<div id="js-pre-selected" class="mdc-select" role="listbox">
<div class="mdc-select__surface" tabindex="0">
<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-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
<li class="mdc-list-item" role="option" id="fruit-roll-ups3" tabindex="0" aria-selected="true">
Fruit Roll Ups
</li>
<li class="mdc-list-item" role="option" id="cotton-candy3" tabindex="0">
Candy (cotton)
</li>
<li class="mdc-list-item" role="option" id="vegetables3" aria-disabled="true" tabindex="0">
Vegetables
</li>
<li class="mdc-list-item" role="option" id="noodles3" tabindex="0">
Noodles
</li>
</ul>
</div>
<div id="js-pre-selected" class="mdc-select">
<select class="mdc-select__surface">
<option class="mdc-select__option" value="fruit-roll-ups2" selected aria-selected="true">
Fruit Roll Ups
</option>
<option class="mdc-select__option" value="cotton-candy2">
Candy (cotton)
</option>
<option class="mdc-select__option" value="vegetables2" disabled aria-disabled="true">
Vegetables
</option>
<option class="mdc-select__option" value="noodles2">
Noodles
</option>
</select>
<div class="mdc-select__label mdc-select__label--float-above">Food Group</div>
<div class="mdc-select__bottom-line"></div>
</div>
</section>
</section>
<section class="example">
<h2 class="mdc-typography--title">OptGroup JS Component</h2>
Copy link
Contributor

Choose a reason for hiding this comment

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

Re-word to "MDC Select with optgroups"

<div id="optgroup-js-select" class="mdc-select">
<select class="mdc-select__surface">
<optgroup label="Meats">
<option class="mdc-select__option" value="hot-dog">Steak</option>
<option class="mdc-select__option" value="hamburger">Hamburger</option>
</optgroup>
<optgroup label="Vegetables">
<option class="mdc-select__option" value="beets">Beets</option>
<option class="mdc-select__option" value="carrot">Carrot</option>
</optgroup>
</select>
<div class="mdc-select__label">Choose Food</div>
<div class="mdc-select__bottom-line"></div>
</div>
</section>
</main>

<script src="/assets/material-components-web.js" async></script>
<script>
demoReady(function() {
mdc.select.MDCSelect.attachTo(document.getElementById('hero-js-select'));
mdc.select.MDCSelect.attachTo(document.getElementById('js-pre-selected'));
mdc.select.MDCSelect.attachTo(document.getElementById('optgroup-js-select'));

var root = document.getElementById('js-select');
var boxCurrentlySelected = document.getElementById('currently-selected');
Expand All @@ -227,14 +240,19 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
var alternateColorsCb = document.getElementById('alternate-colors');
var disabledCb = document.getElementById('disabled');
var setSelectedCb = document.getElementById('set-selected-checkbox');

root.addEventListener('MDCSelect:change', function() {
var setValueMeatCb = document.getElementById('set-value-meat-checkbox');
function updateSelectedTextContent() {
var item = select.selectedOptions[0];
var index = select.selectedIndex;
boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';
if (item) {
boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';

setSelectedCb.checked = index === 0;
setSelectedCb.checked = index === 0;
}
}
root.addEventListener('change', function() {
updateSelectedTextContent();
});
rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
Expand All @@ -252,6 +270,10 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
setSelectedCb.addEventListener('change', function() {
select.selectedIndex = this.checked ? 0 : -1;
});
setValueMeatCb.addEventListener('change', function() {
select.value = this.checked ? 'meat' : '';
updateSelectedTextContent();
});
});

demoReady(function() {
Expand All @@ -263,14 +285,19 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
var alternateColorsCb = document.getElementById('box-alternate-colors');
var disabledCb = document.getElementById('box-disabled');
var setSelectedCb = document.getElementById('box-set-selected-checkbox');

root.addEventListener('MDCSelect:change', function() {
var setValueFruitRollUpsCb = document.getElementById('box-set-value-fruit-roll-ups-checkbox');
function updateSelectedTextContent() {
var item = select.selectedOptions[0];
var index = select.selectedIndex;
boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';
if (item) {
boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
' with value "' + select.value + '"';

setSelectedCb.checked = index === 0;
setSelectedCb.checked = index === 0;
}
}
root.addEventListener('change', function() {
updateSelectedTextContent();
});
rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
Expand All @@ -288,6 +315,10 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
setSelectedCb.addEventListener('change', function() {
select.selectedIndex = this.checked ? 0 : -1;
});
setValueFruitRollUpsCb.addEventListener('change', function() {
select.value = this.checked ? 'fruit-roll-ups1' : '';
updateSelectedTextContent();
});
});
</script>
</body>
Expand Down
6 changes: 4 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading