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 non box version (#2149)
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamernest
williamernest authored Feb 2, 2018
1 parent 4137369 commit d2e53e8
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 24 deletions.
89 changes: 82 additions & 7 deletions demos/select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,9 @@
</section>

<section class="example">
<h2 class="mdc-typography--title">Fully-Featured Component</h2>
<section id="box-demo-wrapper">
<div id="js-select-box" class="mdc-select" role="listbox">
<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>
Expand All @@ -120,7 +120,7 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
</div>
</div>
</section>
<p>Currently selected: <span id="box-currently-selected">(none)</span></p>
<p>Currently selected: <span id="currently-selected">(none)</span></p>
<div>
<input type="checkbox" id="rtl">
<label for="rtl">RTL</label>
Expand All @@ -134,15 +134,57 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
<label for="disabled">Disabled</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)
</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>
</section>
<p>Currently selected: <span id="box-currently-selected">(none)</span></p>
<div>
<input type="checkbox" id="box-rtl">
<label for="box-rtl">RTL</label>
</div>
<div>
<input type="checkbox" id="box-alternate-colors">
<label for="box-alternate-colors">Alternate Colors</label>
</div>
<div>
<input type="checkbox" id="box-disabled">
<label for="box-disabled">Disabled</label>
</div>
</section>
</main>

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

var root = document.getElementById('js-select-box');
var boxCurrentlySelected = document.getElementById('box-currently-selected');
var root = document.getElementById('js-select');
var boxCurrentlySelected = document.getElementById('currently-selected');
var select = new mdc.select.MDCSelect(root);

root.addEventListener('MDCSelect:change', function() {
Expand All @@ -152,7 +194,7 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
' with value "' + select.value + '"';
});

var boxDemoWrapper = document.getElementById('box-demo-wrapper');
var boxDemoWrapper = document.getElementById('demo-wrapper');
var rtlCb = document.getElementById('rtl');
var alternateColorsCb = document.getElementById('alternate-colors');
var disabledCb = document.getElementById('disabled');
Expand All @@ -171,6 +213,39 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
select.disabled = disabledCb.checked;
});
});

demoReady(function() {
var root = document.getElementById('box-js-select');
var boxCurrentlySelected = document.getElementById('box-currently-selected');
var select = new mdc.select.MDCSelect(root);

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

var boxDemoWrapper = document.getElementById('box-demo-wrapper');
var rtlCb = document.getElementById('box-rtl');
var alternateColorsCb = document.getElementById('box-alternate-colors');
var disabledCb = document.getElementById('box-disabled');

rtlCb.addEventListener('change', function() {
if (rtlCb.checked) {
boxDemoWrapper.setAttribute('dir', 'rtl');
} else {
boxDemoWrapper.removeAttribute('dir');
}
});
alternateColorsCb.addEventListener('change', function() {
root.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors');
});
disabledCb.addEventListener('change', function() {
select.disabled = disabledCb.checked;
});
});

</script>
</body>
</html>
5 changes: 4 additions & 1 deletion demos/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@

// stylelint-disable selector-class-pattern
.demo-select-custom-colors {
@include mdc-select-container-fill-color(rgba(blue, .1));
@include mdc-select-ink-color(blue);
@include mdc-select-label-color(rgba(blue, .6));
@include mdc-select-bottom-line-color(rgba(blue, .5));
Expand All @@ -30,4 +29,8 @@
@include mdc-select-focused-bottom-line-color(green);
@include mdc-select-focused-label-color(green);
}

.demo-select-custom-colors.mdc-select--box {
@include mdc-select-container-fill-color(rgba(blue, .1));
}
// stylelint-enable selector-class-pattern
1 change: 1 addition & 0 deletions packages/mdc-select/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ To disable a list item, set `aria-disabled` to `"true"`, and set `tabindex` to `
| Class | Description |
| ------------------------ | ----------------------------------------------- |
| `mdc-select` | Mandatory. |
| `mdc-select--box` | Styles the select as a box select. |
| `mdc-list-group` | A group of options. |
| `mdc-list-item` | A list item. |
| `mdc-list-divider` | A divider. |
Expand Down
74 changes: 58 additions & 16 deletions packages/mdc-select/mdc-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,14 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin

// postcss-bem-linter: define select
.mdc-select {
@include mdc-typography(subheading2);
@include mdc-typography-base;
// We use only a subset of the MDC typography values here as changing things such as line-height
// affects how the labels are transformed.
@each $prop in (letter-spacing) {
#{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
}

@include mdc-select-dd-arrow-svg-bg_;
@include mdc-select-container-fill-color(rgba(black, .04));
@include mdc-select-ink-color(text-primary-on-light);
@include mdc-select-label-color(rgba(black, .6));
@include mdc-select-bottom-line-color(rgba(black, .5));
Expand All @@ -44,17 +49,16 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
height: 56px;
height: 48px;
border: none;
border-radius: 4px 4px 0 0;
outline: none;
background-repeat: no-repeat;
background-position: right 10px center;
background-position: right 8px bottom 8px;
cursor: pointer;
overflow: visible;

@include mdc-rtl {
background-position: left 10px center;
background-position: left 8px bottom 8px;
}

&__menu {
Expand All @@ -67,28 +71,26 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
}

&__surface {
@include mdc-typography(subheading2);
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select");
@include mdc-ripple-surface;
@include mdc-ripple-radius-bounded;
@include mdc-rtl-reflexive-property(padding, 0, $mdc-select-arrow-padding);
@include mdc-states;

display: flex;
position: relative;
flex-grow: 1;
width: 100%;
height: 56px;
height: 48px;
padding-bottom: 8px;
border: none;
border-radius: 4px 4px 0 0;
outline: none;
overflow: hidden;
}

&__label {
@include mdc-rtl-reflexive-position(left, 16px);
@include mdc-rtl-reflexive-position(left, 0);

position: absolute;
bottom: 12px;
bottom: 8px;
left: 0;
transform-origin: left top;
transition: $mdc-select-menu-transition;
pointer-events: none;
Expand All @@ -99,14 +101,15 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
}

&--float-above {
transform: translateY(-40%) scale(.75, .75);
transform: translateY(-100%) scale(.75);
}
}

&__selected-text {
display: flex;
position: absolute;
bottom: 8px;
align-items: flex-end;
margin-bottom: 6px;
transition:
mdc-animation-exit-temporary(opacity, 125ms),
mdc-animation-exit-temporary(transform, 125ms);
Expand Down Expand Up @@ -152,6 +155,45 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
}
}

.mdc-select--box {
@include mdc-select-container-fill-color(rgba(black, .04));

height: 56px;
border-radius: 4px 4px 0 0;
background-position: right 10px center;

@include mdc-rtl {
background-position: left 10px center;
}

.mdc-select__surface {
@include mdc-typography(subheading2);
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding);
@include mdc-ripple-surface;
@include mdc-ripple-radius-bounded;

height: 56px;
padding-bottom: 0;
border-radius: 4px 4px 0 0;
}

.mdc-select__label {
@include mdc-rtl-reflexive-position(left, 16px);

bottom: 12px;

&--float-above {
transform: translateY(-40%) scale(.75, .75);
}
}

.mdc-select__selected-text {
position: inherit;
bottom: 0;
margin-bottom: 6px;
}
}

.mdc-select--open {
.mdc-select__surface::before {
opacity: map-get($mdc-ripple-dark-ink-opacities, "focus");
Expand Down

0 comments on commit d2e53e8

Please sign in to comment.