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

feat(switch): Merge updated switch into master #3214

Merged
merged 25 commits into from
Jul 27, 2018
Merged

feat(switch): Merge updated switch into master #3214

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
133698c
WIP: Clear out old switch styles and docs.
rlfriedman May 24, 2018
e3e400d
chore: run travis on feat/switch-update (#2876)
lynnmercier Jun 4, 2018
bedd674
feat(switch): Update switch to use JS and have ripple (#2915)
rlfriedman Jul 11, 2018
e071d07
fix(switch): Fix switch styling in IE and Firefox (#3071)
rlfriedman Jul 17, 2018
235b132
fix(switch): Allow pointer events to get to the native control on IE …
rlfriedman Jul 18, 2018
c508c29
Merge master into feat/switch-update (#3138)
rlfriedman Jul 18, 2018
c6e37a5
fix(switch): Fix showing switch ripple focus state in Edge (#3143)
rlfriedman Jul 19, 2018
293bdba
fix(switch): Update switch checked styling on foundation init (#3147)
rlfriedman Jul 19, 2018
5b0f71c
fix(switch): Update switch styling to match the design spec (#3153)
rlfriedman Jul 23, 2018
4584f00
chore(switch): Add screenshot tests for switch (#3167)
rlfriedman Jul 23, 2018
47c4147
Merge branch 'master' into feat/switch-update
Jul 25, 2018
35dd8b0
WIP: Fix some issues with merging
rlfriedman Jul 25, 2018
7b473b5
WIP: Fix more merging issues
rlfriedman Jul 25, 2018
eabcc62
WIP: Fix screenshot json merging
rlfriedman Jul 25, 2018
72ec918
WIP: Add back line to allow travis to run on switch-update
rlfriedman Jul 25, 2018
209b557
Merge branch 'master' into fix/switch/WATERMASTER
rlfriedman Jul 25, 2018
6d61cb9
chore(switch): Merge master into feat/switch-update (#3215)
rlfriedman Jul 25, 2018
288a183
Revert "chore(switch): Merge master into feat/switch-update (#3215)" …
rlfriedman Jul 25, 2018
82b8490
Merge pull request #3225 from material-components/fix/switch/WATERMASTER
rlfriedman Jul 26, 2018
a3332e4
Merge branch 'master' into chore/water-master
rlfriedman Jul 26, 2018
2413731
Merge pull request #3235 from material-components/chore/water-master
rlfriedman Jul 26, 2018
ae3c90a
fix(switch): Switch README updates (#3241)
rlfriedman Jul 26, 2018
9becfc8
WIP: Fix main path
rlfriedman Jul 27, 2018
de825d9
WIP Revert "WIP: Fix main path"
Jul 27, 2018
b5570a5
Merge branch 'master' into feat/switch-update
kfranqueiro Jul 27, 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
59 changes: 37 additions & 22 deletions demos/switch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<head>
<meta charset="utf-8">
<title>Switch - Material Components Catalog</title>
<script src="/ready.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<link rel="stylesheet" href="/assets/switch.css">
Expand Down Expand Up @@ -63,9 +64,11 @@
<div class="demo-wrapper">
<section class="hero">
<div class="mdc-switch">
<input type="checkbox" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" class="mdc-switch__native-control" role="switch">
</div>
</div>
</div>
</section>
Expand All @@ -74,21 +77,25 @@
<h2>Enabled</h2>
<div class="demo-switch-wrapper">
<div class="mdc-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
</div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">off/on</label>
</div>
<div class="demo-switch-wrapper">
<div class="mdc-switch demo-switch--custom">
<input type="checkbox"
id="basic-switch-custom"
class="mdc-switch__native-control"
role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch demo-switch--custom mdc-switch--checked">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox"
id="basic-switch-custom"
class="mdc-switch__native-control"
role="switch" checked>
</div>
</div>
</div>
<label for="basic-switch-custom" class="mdc-switch-label">custom color</label>
Expand All @@ -97,14 +104,16 @@ <h2>Enabled</h2>
<section class="example">
<h2>Disabled</h2>
<div class="demo-switch-wrapper">
<div class="mdc-switch">
<input type="checkbox"
id="basic-switch--disabled"
class="mdc-switch__native-control"
role="switch"
disabled>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch mdc-switch--disabled">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox"
id="basic-switch--disabled"
class="mdc-switch__native-control"
role="switch"
disabled>
</div>
</div>
</div>
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
Expand Down Expand Up @@ -134,10 +143,16 @@ <h2>Disabled</h2>

<script src="/assets/material-components-web.js" async></script>
<script>
const demoWrapper = document.querySelector('.demo-wrapper');
var demoWrapper = document.querySelector('.demo-wrapper');
document.getElementById('toggle-rtl').addEventListener('change', function() {
this.checked ? demoWrapper.setAttribute('dir', 'rtl') : demoWrapper.removeAttribute('dir');
});
demoReady(function() {
var switches = document.querySelectorAll('.mdc-switch');
for (var i = 0, switchEl; switchEl = switches[i]; i++) {
var switchInstance = new mdc.switchControl.MDCSwitch(switchEl);
}
});
</script>
</body>
</html>
4 changes: 1 addition & 3 deletions demos/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@
.demo-switch--custom {
$color: $material-color-red-500;

@include mdc-switch-track-color($color);
@include mdc-switch-knob-color($color);
@include mdc-switch-focus-indicator-color($color);
@include mdc-switch-toggled-on-color($color);
}

.rtl-toggle {
Expand Down
28 changes: 20 additions & 8 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -677,19 +677,23 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
</h3>

<fieldset class="demo-switch-wrapper">
<div class="mdc-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch mdc-switch--checked">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" checked>
</div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">off/on</label>
</fieldset>
<fieldset class="demo-switch-wrapper" disabled>
<div class="mdc-switch">
<input type="checkbox" id="disabled-switch" class="mdc-switch__native-control" role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch mdc-switch--checked mdc-switch--disabled">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="disabled-switch" class="mdc-switch__native-control" role="switch" checked>
</div>
</div>
</div>
<label for="disabled-switch" class="mdc-switch-label">disabled</label>
Expand Down Expand Up @@ -933,6 +937,14 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
mdc.slider.MDCSlider.attachTo(slider);
});

/*
* Switch
*/

[].forEach.call(document.querySelectorAll('.mdc-switch'), function(switchEl) {
mdc.switchComponent.MDCSwitch.attachTo(switchEl);
});

/*
* Tab Bar
*/
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@
"mdc-ripple",
"mdc-selection-control",
"mdc-slider",
"mdc-switch",
"mdc-tab",
"mdc-textfield",
"mdc-top-app-bar"
Expand Down
2 changes: 2 additions & 0 deletions packages/material-components-web/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import { checkbox } from 'material-components-web';
const checkbox = new checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
```

> NOTE: Since switch is a reserved word in JS, switch is instead named `switchControl`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Add a newline before this line

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will do.


> NOTE: Built CSS files as well as UMD JS bundles will be available as part of the package
> post-alpha.

Expand Down
3 changes: 3 additions & 0 deletions packages/material-components-web/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import * as select from '@material/select/index';
import * as selectionControl from '@material/selection-control/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as switchControl from '@material/switch/index';
import * as tabs from '@material/tabs/index';
import * as textField from '@material/textfield/index';
import * as toolbar from '@material/toolbar/index';
Expand Down Expand Up @@ -66,6 +67,7 @@ autoInit.register('MDCTextField', textField.MDCTextField);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);
autoInit.register('MDCSwitch', switchControl.MDCSwitch);
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);

Expand All @@ -92,6 +94,7 @@ export {
select,
selectionControl,
slider,
switchControl,
snackbar,
tabs,
textField,
Expand Down
103 changes: 86 additions & 17 deletions packages/mdc-switch/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ path: /catalog/input-controls/switches/
</a>
</div>-->

Switches toggle the state of a single settings option on or off, and are mobile preferred.
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

## Design & API Documentation

Expand All @@ -40,24 +40,47 @@ npm install @material/switch

```html
<div class="mdc-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

The basic usage section seems to be missing the Styles (for imports) and JavaScript Instantiation sections

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch, will add!

</div>
</div>
<label for="basic-switch">off/on</label>
```

### Styles

```scss
@import "@material/switch/mdc-switch";
```

### JavaScript Instantiation

The Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.

```js
import {MDCSwitch} from '@material/switch';

const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
```

> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

## Variant

### Disabled Switch

Users can add the `disabled` attribute directly to the `<input>` element or a parent `<fieldset>` element to disable a switch.
Users can add the class 'mdc-switch--disabled' to the 'mdc-switch' element to disable the switch.

```html
<div class="mdc-switch">
<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
<div class="mdc-switch mdc-switch--disabled">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
</div>
</div>
</div>
<label for="another-basic-switch">off/on</label>
Expand All @@ -70,17 +93,63 @@ Users can add the `disabled` attribute directly to the `<input>` element or a pa
CSS Class | Description
--- | ---
`mdc-switch` | Mandatory, for the parent element.
`mdc-switch__native-control` | Mandatory, for the input checkbox.
`mdc-switch__background` | Mandatory, for the background element.
`mdc-switch__knob` | Mandatory, for the knob element.
`mdc-switch__track` | Mandatory, for the track element.
`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.
`mdc-switch__thumb` | Mandatory, for the thumb element.
`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.

### Sass Mixins

The following mixins apply only to _enabled_ switches in the _on_ (checked) state.
It is not currently possible to customize the color of a _disabled_ or _off_ (unchecked) switch.
MDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.
Use the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a
_disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.

Mixin | Description
--- | ---
`mdc-switch-track-color($color)` | Sets the track color.
`mdc-switch-knob-color($color)` | Sets the knob color.
`mdc-switch-focus-indicator-color($color)` | Sets the focus indicator color.
`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.
`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.
`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.
`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.
`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.
`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.
`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.
`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.

## `MDCSwitch` Properties and Methods

Property | Value Type | Description
--- | --- | ---
`checked` | Boolean | Setter/getter for the switch's checked state
`disabled` | Boolean | Setter/getter for the switch's disabled state

## Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).

### `MDCSwitchAdapter`

| Method Signature | Description |
| --- | --- |
| `addClass(className: string) => void` | Adds a class to the root element. |
| `removeClass(className: string) => void` | Removes a class from the root element. |
| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |
| `isNativeControlChecked() => boolean` | Returns the checked state of the native control. |
| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |
| `isNativeControlDisabled() => boolean` | Returns the disabled state of the native control. |

### `MDCSwitchFoundation`

| Method Signature | Description |
| --- | --- |
| `isChecked() => boolean` | Returns whether the native control is checked. |
| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |
| `isDisabled() => boolean` | Returns whether the native control is disabled. |
| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |
| `handleChange() => void` | Handles a change event from the native control. |

### `MDCSwitchFoundation` Event Handlers
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this be documented under the component rather than the foundation?

Copy link
Contributor

Choose a reason for hiding this comment

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

I just re-read this and realized why it's here; I had misread it earlier. This is basically an example of the sort of thing Pat was saying we should add, so this can stay here.

If wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [MDCSwitch](index.js) component `initialSyncWithDOM` method.

| Event | Element Selector | Foundation Handler |
| --- | --- | --- |
| `change` | `.mdc-switch__native-control` | `handleChange()` |
2 changes: 1 addition & 1 deletion packages/mdc-switch/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//
// Copyright 2016 Google Inc. All Rights Reserved.
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
Expand Down
Loading