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

feat(select): Add new UX styles and behavior to select #1097

Merged
merged 38 commits into from
Dec 5, 2017
Merged

feat(select): Add new UX styles and behavior to select #1097

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
5e244b7
WIP
amsheehan Jul 24, 2017
570f1fd
WIP
amsheehan Aug 2, 2017
226ad9e
feat(select): Update styles and add ripples
amsheehan Aug 7, 2017
b4b46f1
WIP
amsheehan Aug 8, 2017
3cda334
feat(select): Improve style of select
amsheehan Aug 8, 2017
274343b
feat(select): Implement suggestions in PR comments
amsheehan Aug 10, 2017
257238f
WIP
amsheehan Aug 24, 2017
c185392
Merge branch 'master' into feat/select-improvements
amsheehan Oct 16, 2017
cbb0bf5
chore(select): try and merge these
amsheehan Oct 17, 2017
f0319c9
Merge branch 'master' into feat/select-improvements
amsheehan Oct 18, 2017
1f0ae99
feat(select): Remove hover ink wash
amsheehan Oct 19, 2017
28a8c11
feat(select): Add style updates to MDC Select, update tests and docs
amsheehan Oct 31, 2017
689cf23
feat(select): Change stylelint directive, update dependencies, add ri…
amsheehan Oct 31, 2017
14bf9a6
Merge branch 'master' into feat/select-improvements
amsheehan Oct 31, 2017
845576e
WIP
amsheehan Nov 13, 2017
98ef434
Merge branch 'feat/select-improvements' of github.com:material-compon…
amsheehan Nov 20, 2017
d52cb82
feat(select): Update styles for select
amsheehan Nov 20, 2017
fb7e70b
feat(select): Fix merge conflicts
amsheehan Nov 20, 2017
2314b5f
feat(select): Fix breaking tests
amsheehan Nov 20, 2017
b9d0baf
feat(select): Implement new styles. Patch up RTL context
amsheehan Nov 21, 2017
661708b
feat(select): Add styles for ripple in dark theme
amsheehan Nov 27, 2017
b0dc987
feat(select): Fix different height bottom lines, remove hover state f…
amsheehan Nov 27, 2017
6121632
feat(select): Change language in README, remove invalid attribute fro…
amsheehan Nov 27, 2017
b611d17
WIP
amsheehan Nov 27, 2017
a08578b
feat(select): Remove unnecessary constructor method
amsheehan Nov 27, 2017
5bc86c6
feat(select): Address comments
amsheehan Nov 28, 2017
84a4108
feat(select): Improve language in README
amsheehan Nov 28, 2017
1a68a35
WIP
amsheehan Nov 28, 2017
65ff407
feat(select): Revert menu foundation
amsheehan Nov 28, 2017
7b819aa
feat(select): Resolve conflict with menu
amsheehan Nov 28, 2017
9a8abe8
WIP
amsheehan Nov 29, 2017
40d5442
feat(select): Add flex-grow to appease Microsoft browsers, update tests
amsheehan Nov 30, 2017
d9ef1df
feat(select): Fix css linter comment
amsheehan Nov 30, 2017
c932e62
WIP
amsheehan Nov 30, 2017
a5fdc64
feat(select): Fix disabled behavior
amsheehan Nov 30, 2017
9b6553d
feat(select): Revert README to former glory
amsheehan Dec 1, 2017
1063e6d
feat(select): Add styles to change bottom line to primary color when …
amsheehan Dec 5, 2017
4d1ba25
Merge branch 'master' into feat/select-improvements
amsheehan Dec 5, 2017
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
91 changes: 47 additions & 44 deletions demos/select.html
View file
Open in desktop
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">
Copy link
Contributor

Choose a reason for hiding this comment

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

Why were these (and not Vegetables) removed? More specifically, removing these and leaving a disabled option (with the intent of being a group header) as the last item seems like bad/confusing UX.

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 intention is not about making a group header. It is about a disabled option. The others were removed for the sake of brevity.

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="" default selected>Pick a food group</option>
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think default is a valid attribute for <option> (MDN attribute reference)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Whoa. Yep.

<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 Down Expand Up @@ -178,37 +176,42 @@ <h2>Select Multiple - CSS Only</h2>
<script>
(function() {
var MDCSelect = mdc.select.MDCSelect;
var root = document.getElementById('js-select');
var currentlySelected = document.getElementById('currently-selected');
var heroSelect = document.getElementById('hero-js-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 be using const/let instead of var?

Copy link
Contributor

Choose a reason for hiding this comment

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

Not in demo pages, which don't get transpiled and still need to work in all browsers we support.

Copy link
Contributor

Choose a reason for hiding this comment

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

IE 11 (mostly) supports const/let, so which browsers are we concerned about? Safari 9.x?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Even if everything fully supported es2015 syntax overnight, I don't think it would be a very good use of time to re-implement the demos just for the new syntactic sugars available to us. As delicious as they may be. :)

mdc.select.MDCSelect.attachTo(heroSelect);
})();
</script>
Copy link
Contributor

Choose a reason for hiding this comment

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

OOC, why do you have two separate script tags and IIFEs?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just to make it easier to copy and paste for people who want to do that.

<script>
(function() {
var MDCSelect = mdc.select.MDCSelect;
var root = document.getElementById('js-select-box');
var boxCurrentlySelected = document.getElementById('box-currently-selected');
var select = MDCSelect.attachTo(root);

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

Choose a reason for hiding this comment

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

I know we don't lint our demo code, but could we possibly reindent this line while we're here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

       Sure can

});

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);
})();
</script>
</body>
Expand Down
Loading