Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(slider): Add color theme mixins; default to secondary; remove --off #1544

Merged
merged 36 commits into from
Nov 10, 2017
Merged

feat(slider): Add color theme mixins; default to secondary; remove --off #1544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
5f13367
WIP: Add color theme mixins; default to secondary color
acdvorak Nov 3, 2017
77c524b
WIP: Improve selector readability
acdvorak Nov 3, 2017
6ea9f63
WIP: Colocate all state-dependent color styles
acdvorak Nov 4, 2017
87c46c6
WIP: Colocate disabled color styles
acdvorak Nov 4, 2017
8ad26d1
WIP: Remove unnecessary !important
acdvorak Nov 4, 2017
7d20c68
WIP: Create mixin for off/disabled thumb fill/stroke
acdvorak Nov 4, 2017
5d25bb2
WIP: Add TODOs to rename mixins
acdvorak Nov 4, 2017
e798a29
WIP: Rename mixins to match M2 spec
acdvorak Nov 4, 2017
d2f6514
WIP: Add example of custom color to demo page
acdvorak Nov 4, 2017
a6b08cc
feat(theme): Add new tone mixins and deprecate old one
acdvorak Nov 4, 2017
638a5ed
fix(slider): Don't hide focus ring on discrete sliders
acdvorak Nov 4, 2017
ca11cf0
WIP: Ensure that disabled state always overrides custom colors
acdvorak Nov 4, 2017
f76e929
WIP: M2-ify colors (except `--off`)
acdvorak Nov 4, 2017
6bb2c2f
WIP: Remove `--off` modifier class
acdvorak Nov 4, 2017
c51a0ce
WIP: Auto-generate rail/tick color; remove those public mixins & colo…
acdvorak Nov 4, 2017
05039ba
WIP: Combine/simplify mixins
acdvorak Nov 4, 2017
3f68cd2
WIP: Add accessible mixin for value pin color
acdvorak Nov 4, 2017
9a82f6a
WIP: Lower max value in demo page to make tick marks more visible
acdvorak Nov 4, 2017
30c4497
Merge branch 'master' into feat/theme/slider-mixins
acdvorak Nov 6, 2017
2acab33
WIP: Remove unused variables
acdvorak Nov 6, 2017
43ce89c
WIP: Reorder mixins
acdvorak Nov 7, 2017
0f1b301
WIP: Add mdc-slider-color-accessible mixin
acdvorak Nov 7, 2017
a4b25d8
WIP: Simplify thumb stroke cutout
acdvorak Nov 7, 2017
53582d2
WIP: Use different colors for each element in custom demo
acdvorak Nov 7, 2017
805d5a3
WIP: Fix preexisting demo bug
acdvorak Nov 9, 2017
1e95d4a
WIP: Improve styling of demo page
acdvorak Nov 9, 2017
2951603
WIP: Increase max value of demo params from 50 to 100
acdvorak Nov 9, 2017
cd985cb
Merge branch 'master' into feat/theme/slider-mixins
acdvorak Nov 9, 2017
de882ef
WIP: Replace `-impl_` with `_` in private mixin names
acdvorak Nov 9, 2017
e7188f3
WIP: Use `:not()` selectors instead of `!important`
acdvorak Nov 9, 2017
8af9b25
WIP: Explicitly import theme dependencies
acdvorak Nov 9, 2017
64e2dfd
WIP: Support theme props as color values in mixin
acdvorak Nov 9, 2017
48fac78
WIP: Use high-level color mixin instead of individual mixins
acdvorak Nov 9, 2017
987f595
WIP: Add mixins to customize rail and tick mark color
acdvorak Nov 10, 2017
cdcbf44
WIP: Add mixin param to docs
acdvorak Nov 10, 2017
dc48efe
Merge branch 'master' into feat/theme/slider-mixins
acdvorak Nov 10, 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
172 changes: 112 additions & 60 deletions demos/slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

.mdc-theme--dark {
background-color: #333;
--mdc-theme-primary: #64dd17;
}

.custom-bg {
Expand All @@ -48,6 +47,23 @@
--mdc-slider-bg-color-behind-component: #102027;
}

.slider-example {
margin-bottom: 48px;
}

.demo-param-field-group + .demo-param-field-group {
margin-top: 16px;
}

.demo-param-field {
display: block;
}

.demo-param-input-label {
display: inline-block;
min-width: 2.5em;
}

.example-slider-wrapper {
padding: 0 16px;
}
Expand All @@ -69,7 +85,7 @@
<section class="hero">
<div id="hero-slider-wrapper">
<div id="hero-slider" class="mdc-slider" tabindex="0"
role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
role="slider" aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
Expand All @@ -84,18 +100,13 @@
</div>
</section>

<section class="example"><em>Note that in browsers that support custom properties, we alter theme's primary
color when using the dark theme toggle so that the slider appears more visible</em></section>

<section id="slider-example" class="example">
<h2>Continuous Slider</h2>
<div class="slider-example">
<p id="example-cs-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="continuous-mdc-slider" class="mdc-slider" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-cs-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
</div>
Expand All @@ -109,28 +120,25 @@ <h2>Continuous Slider</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="continuous-slider-value">0</span>
</p>
<p>
Value from <code>MDCSlider:change</code> event: <span id="continuous-slider-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="continuous-slider-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="continuous-slider-committed-value"></span>
</p>
</div>


<h2>Discrete Slider</h2>
<div class="slider-example">
<p id="example-ds-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="discrete-mdc-slider" class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-ds-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">30</span>
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
Expand All @@ -141,29 +149,26 @@ <h2>Discrete Slider</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-value">0</span>
</p>
<p>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-committed-value"></span>
</p>
</div>

<h2>Discrete Slider with markers</h2>
<h2>Discrete Slider with Tick Marks</h2>
<div class="slider-example">
<p id="example-ds-marker-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-ds-marker-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
<div class="mdc-slider__track-marker-container">
</div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">30</span>
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
Expand All @@ -174,57 +179,88 @@ <h2>Discrete Slider with markers</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value"></span>
</p>
</div>

<h2>Custom Colored Discrete Slider with Tick Marks</h2>
<div class="slider-example">
<div class="example-slider-wrapper">
<div id="custom-discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers demo-slider--custom" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
<div class="mdc-slider__track-marker-container">
</div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
</svg>
<div class="mdc-slider__focus-ring"></div>
</div>
</div>
</div>

<p>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="custom-discrete-slider-w-marker-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="custom-discrete-slider-w-marker-committed-value"></span>
</p>
</div>

<div>
<label>
Min: <input name="min" type="number" min="0" max="100" value="0">
<div class="demo-param-field-group">
<label class="demo-param-field">
<span class="demo-param-input-label">Min:</span>
<input name="min" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Max: <input name="max" type="number" min="0" max="100" value="100">
<label class="demo-param-field">
<div class="demo-param-input-label">Max:</div>
<input name="max" type="number" min="0" max="100" value="50">
</label>
</div>
<div>
<label>
Step: <input name="step" type="number" min="0" max="100" value="0">
<label class="demo-param-field">
<span class="demo-param-input-label">Step:</span>
<input name="step" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Dark Theme: <input type="checkbox" name="dark-theme">
<div class="demo-param-field-group">
<label class="demo-param-field">
<input type="checkbox" name="disabled">
Disabled
</label>
</div>
<div>
<label>
Disabled: <input type="checkbox" name="disabled">
<label class="demo-param-field">
<input type="checkbox" name="dark-theme">
Dark Theme
</label>
</div>
<div>
<label>
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
<label class="demo-param-field">
<input type="checkbox" name="use-custom-color">
Use Custom BG Color
</label>
</div>
<div>
<label>
RTL: <input type="checkbox" name="rtl">
<label class="demo-param-field">
<input type="checkbox" name="rtl">
RTL
</label>
</div>
</section>
</main>
<script src="/assets/material-components-web.js"></script>
<script>
(function() {
setTimeout(function() {
mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
initDemo(document.getElementById('slider-example'));
}, 80);
// Wait for Webpack to load CSS. Otherwise, size/position calculations will be incorrect.
Copy link
Contributor

Choose a reason for hiding this comment

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

Oh jeez THANK YOU 😌 this glitch was annoying.

var interval = setInterval(function() {
const element = document.getElementById('hero-slider');
if (getComputedStyle(element).position === 'relative') {
clearInterval(interval);
mdc.slider.MDCSlider.attachTo(element);
initDemo(document.getElementById('slider-example'));
}
}, 100);

function initDemo(demoRoot) {
var min = demoRoot.querySelector('[name="min"]');
Expand Down Expand Up @@ -268,22 +304,36 @@ <h2>Discrete Slider with markers</h2>
discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
});

var customDiscreteWMarkerValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-value');
var customDiscreteWMarkerCommittedValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-committed-value');
var customDiscreteWMarkerSliderEl = demoRoot.querySelector('#custom-discrete-mdc-slider-w-marker');
var customDiscreteWMarkerSlider = new mdc.slider.MDCSlider(customDiscreteWMarkerSliderEl);
customDiscreteWMarkerSlider.listen('MDCSlider:input', function() {
customDiscreteWMarkerValue.textContent = customDiscreteWMarkerSlider.value;
});
customDiscreteWMarkerSlider.listen('MDCSlider:change', function() {
customDiscreteWMarkerCommittedValue.textContent = customDiscreteWMarkerSlider.value;
});

min.addEventListener('input', function() {
continuousSlider.min = parseFloat(min.value);
discreteSlider.min = parseFloat(min.value);
discreteWMarkerSlider.min = parseFloat(min.value);
customDiscreteWMarkerSlider.min = parseFloat(min.value);
});

max.addEventListener('input', function() {
continuousSlider.max = parseFloat(max.value);
discreteSlider.max = parseFloat(max.value);
discreteWMarkerSlider.max = parseFloat(max.value);
customDiscreteWMarkerSlider.max = parseFloat(max.value);
});

step.addEventListener('input', function() {
continuousSlider.step = parseFloat(step.value);
discreteSlider.step = parseFloat(step.value);
discreteWMarkerSlider.step = parseFloat(step.value);
customDiscreteWMarkerSlider.step = parseFloat(step.value);
});

darkTheme.addEventListener('change', function() {
Expand All @@ -296,6 +346,7 @@ <h2>Discrete Slider with markers</h2>
continuousSlider.disabled = disabled.checked;
discreteSlider.disabled = disabled.checked;
discreteWMarkerSlider.disabled = disabled.checked;
customDiscreteWMarkerSlider.disabled = disabled.checked;
});

useCustomColor.addEventListener('change', function() {
Expand All @@ -315,6 +366,7 @@ <h2>Discrete Slider with markers</h2>
continuousSlider.layout();
discreteSlider.layout();
discreteWMarkerSlider.layout();
customDiscreteWMarkerSlider.layout();
});
}
})();
Expand Down
14 changes: 14 additions & 0 deletions demos/slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,17 @@
@import "./common";
@import "../packages/mdc-slider/mdc-slider";
@import "../packages/mdc-typography/mdc-typography";
@import "../packages/mdc-theme/color-palette";

.demo-slider--custom {
@include mdc-slider-highlight-color($material-color-red-700);
@include mdc-slider-rail-color($material-color-yellow-600, 1);
@include mdc-slider-rail-tick-mark-color(white);
@include mdc-slider-thumb-color($material-color-orange-500);
@include mdc-slider-focus-halo-color($material-color-yellow-900);
@include mdc-slider-value-pin-fill-color-accessible($material-color-pink-500);

@include mdc-theme-dark {
@include mdc-slider-rail-tick-mark-color(black);
Copy link
Contributor

Choose a reason for hiding this comment

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

This is neat 🕶

}
}
Loading