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(checkbox): Add initial checkbox implementation #4638

Merged
merged 2 commits into from
Aug 8, 2016
Merged

feat(checkbox): Add initial checkbox implementation #4638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa834fd
feat(animation): Clean up mdl-animation, add README
traviskaufman Aug 2, 2016
b6a0fc1
feat(checkbox): Add initial checkbox implementation
traviskaufman Aug 2, 2016
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
20 changes: 12 additions & 8 deletions .stylelintrc.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ rules:
# Because we adhere to BEM we can limit the amount of necessary compound selectors. Most should
# just be 1 level selector. However, modifiers can introduce an additional compound selector.
# Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
selector-max-compound-selectors: 3
selector-max-compound-selectors: 4
# For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
# attribute modifiers based on selector-max-compound-selectors, plus an addition for
# pseudo-classes (4). Allow for pseudo-elements (1).
Expand All @@ -208,9 +208,14 @@ rules:
selector-no-qualifying-type: true
# In general, we should *never* be modifying elements within our components, since we can't
# predict the use cases in which users would add a certain type of element into a component.
# An exception to this may be in packages/material-design-lite, in which case this rule could be
# disabled for that file, with an explanation.
selector-no-type: true
# The only hard exception to this are `fieldset` elements, which can be disabled and in that case
# we want our UI components within that fieldset to be disabled as well.
# Other exceptions to this may be in packages/material-design-lite, in which case this rule could
# be disabled for that file, with an explanation.
selector-no-type:
- true
- ignoreTypes:
- fieldset
# Styles for components should never need the universal selector.
selector-no-universal: true
# Ensure any defined symbols are prefixed with "mdl-"
Expand All @@ -219,8 +224,7 @@ rules:
custom-property-pattern: ^mdl?-.+
selector-class-pattern:
- ^mdl?-.+
-
resolveNestedSelectors: true
- resolveNestedSelectors: true
selector-id-pattern: ^mdl?-.+
# Names are more semantic than numbers
font-weight-notation: named-where-possible
Expand All @@ -235,8 +239,7 @@ rules:
-
- /^TODO:/
- /^FIXME:/
-
severity: warning
- severity: warning
# Part of google's style guide
number-leading-zero: never

Expand All @@ -249,6 +252,7 @@ rules:
componentSelectors: ^\.mdl?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
ignoreSelectors:
- ^fieldset
- ^\[aria\-disabled=(?:.+)\]

# SCSS naming patterns, just like our CSS conventions above.
# (note for $-vars we use a leading underscore for "private" variables)
Expand Down
129 changes: 111 additions & 18 deletions demos/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,50 +14,143 @@
See the License for the specific language governing permissions and
limitations under the License
-->
<html>
<html class="mdl-typography">
<head>
<meta charset="utf-8">
<title>MDL Checkbox Demo</title>
<script src="assets/material-design-lite.css.js" charset="utf-8"></script>
<style media="screen">
section {
margin-top: .5rem;
padding: 0 .5rem 1rem .5rem;
}

.dark-theme {
background: #262626;
color: white;
}

.dark-theme > h2 {
margin-top: 0;
}

/* Example of manually theming a checkbox. Note that this does not take JS-provided animations
into account. */
.dark-theme .mdl-checkbox__native-control:checked:not(:disabled) ~ .mdl-checkbox__background,
.dark-theme .mdl-checkbox__native-control:indeterminate:not(:disabled) ~ .mdl-checkbox__background {
background-color: #E91E63;
border-color: #E91E63;
}
.dark-theme .mdl-checkbox__background::before {
background-color: #E91E63;
}
.dark-theme .mdl-checkbox__checkmark__path {
stroke: #262626 !important;
}
.dark-theme .mdl-checkbox__mixedmark {
background-color: #262626;
}
</style>
</head>
<body>
<main>
<h1>MDL Checkbox Hello</h1>
<h1>MDL Checkbox</h1>
<section>
<h2>Auto-initialized checkbox</h2>
<!-- TODO change from "md-" to "mdl-" -->
<div class="md-checkbox-wrapper">
<div class="md-checkbox-wrapper__layout">
<div class="md-checkbox" data-mdl-auto-init="MDLCheckbox">
<h2>Basic Example, no Javascript</h2>
<div class="mdl-checkbox-wrapper">
<div class="mdl-checkbox-wrapper__layout">
<div class="mdl-checkbox">
<input type="checkbox"
id="basic-checkbox"
class="mdl-checkbox__native-control"
aria-labelledby="basic-checkbox-label"/>
<div class="mdl-checkbox__background">
<svg version="1.1"
class="mdl-checkbox__checkmark"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
xml:space="preserve">
<path class="mdl-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdl-checkbox__mixedmark"></div>
</div>
</div>
<label for="basic-checkbox" id="basic-checkbox-label">This is my checkbox</label>
</div>
</div>
<button type="button" onclick="document.getElementById('basic-checkbox').indeterminate = true;">Make indeterminate</button>
<button type="button" onclick="this.parentElement.hasAttribute('dir') ? this.parentElement.removeAttribute('dir') : this.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
<button type="button" onclick="document.querySelector('.mdl-checkbox-wrapper').classList.toggle('mdl-checkbox-wrapper--align-end');">Toggle Align End</button>
<button type="button" onclick="document.getElementById('basic-checkbox').disabled = !document.getElementById('basic-checkbox').disabled;">Toggle Disabled</button>
</section>
<section>
<h2>With Javascript</h2>
<div class="mdl-checkbox-wrapper">
<div class="mdl-checkbox-wrapper__layout">
<div id="mdl-js-checkbox" class="mdl-checkbox">
<input type="checkbox"
id="my-checkbox"
class="mdl-checkbox__native-control"
aria-labelledby="my-checkbox-label"/>
<div class="mdl-checkbox__background">
<svg version="1.1"
class="mdl-checkbox__checkmark"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
xml:space="preserve">
<path class="mdl-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdl-checkbox__mixedmark"></div>
</div>
</div>
<label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
</div>
</div>
<button type="button" id="make-ind">Make indeterminate</button>
</section>
<section class="dark-theme">
<h2>Dark Theme</h2>
<div class="mdl-checkbox-wrapper">
<div class="mdl-checkbox-wrapper__layout">
<div id="mdl-checkbox-dark" class="mdl-checkbox mdl-checkbox--dark-theme">
<input type="checkbox"
class="md-checkbox__native-control"
id="checkbox-dark"
class="mdl-checkbox__native-control"
aria-labelledby="my-checkbox-label"/>
<div class="md-checkbox__frame"></div>
<div class="md-checkbox__background">
<div class="mdl-checkbox__background">
<svg version="1.1"
class="md-checkbox__checkmark"
class="mdl-checkbox__checkmark"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
xml:space="preserve">
<path class="md-checkbox__checkmark__path"
<path class="mdl-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M4.1,12.7 9,17.6 20.3,6.3"/>
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="md-checkbox__mixedmark"></div>
<div class="mdl-checkbox__mixedmark"></div>
</div>
</div>
<label id="my-checkbox-label">This is my checkbox</label>
<label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
</div>
</div>
<button type="button" onclick="document.getElementById('checkbox-dark').disabled = !document.getElementById('checkbox-dark').disabled;">Toggle Disabled</button>
</section>
</main>
<script src="assets/material-design-lite.js" charset="utf-8"></script>
<script id="auto-init">
<script>
(function(global) {
'use strict';
var mdl = global.mdl;
mdl.autoInit();
var checkbox = new global.mdl.Checkbox(document.getElementById('mdl-js-checkbox'));
document.getElementById('make-ind').addEventListener('click', function() {
document.getElementById('my-checkbox').indeterminate = true;
});
})(this);
</script>
</body>
Expand Down
6 changes: 6 additions & 0 deletions examples/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# NOTE: Not currently functional.

We've recently [changed our architecture]() such that these examples are outdated and probably don't
work. We will fix them up before our beta release, as things may still change until then.

Working framework examples for v2 can be found on our [POC branch](https://github.com/google/material-design-lite/tree/experimental/v2-architecture-poc/examples).
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"css-loader": "^0.23.1",
"cz-conventional-changelog": "^1.1.6",
"del-cli": "^0.2.0",
"dom-compare": "^0.2.1",
"dom-events": "^0.1.1",
"es6-promise": "^3.2.1",
"eslint": "^2.12.0",
Expand Down Expand Up @@ -60,7 +61,7 @@
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"stylefmt": "^4.1.1",
"stylelint": "^7.0.3",
"stylelint": "^7.1.0",
"stylelint-config-standard": "^11.0.0",
"stylelint-scss": "^1.2.1",
"stylelint-selector-bem-pattern": "^1.0.0",
Expand Down
57 changes: 57 additions & 0 deletions packages/mdl-animation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# mdl-animation

mdl-animation is a sass / css library which provides variables, mixins, and classes for Material Design animation, based off of the [motion guidelines](https://material.google.com/motion/duration-easing.html#duration-easing-common-durations). Currently, it only covers easing curves.

## Installation

> Note: Installation via the npm registry will be available after alpha.

## Usage

We currently have variables for the following 3 animation curves:

| Variable name | timing function | use case |
| --- | --- | --- |
| `$mdl-animation-fast-out-slow-in-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Standard curve; any animations that are visible from start to finish (e.g. a FAB transforming into a toolbar) |
| `$mdl-animation-linear-out-slow-in-timing-function` | `cubic-bezier(0, 0, .2, 1)` | Animations that cause objects to enter the screen (e.g. a fade in) |
| `$mdl-animation-fast-out-linear-in-timing-function` | `cubic-bezier(.4, 0, ``, 1)` | Animations that cause objects to leave the screen (e.g. a fade out) |

### SCSS

Simply drop `mdl-animation` into your build and start using the variables:

```scss
.mdl-thing--animating {
animation: foo 175ms $mdl-animation-fast-out-slow-in-timing-function;
}
```

or the mixins, which simply assign their corresponding variables to the `animation-timing-function`
property:

```scss
.mdl-thing--on-screen {
@include mdl-animation-fast-out-linear-in;
}
```

Every mixin has the same name as its corresponding variable, without the `-timing-function` suffix.

### CSS Classes

> NOTE: dist/ will be available when installing via NPM.

Alternatively, you can include the built stylesheet and use the classes it exports within your HTML

```html
<link href="path/to/mdl-animation/dist/mdl-animation.css" rel="stylesheet">
<!-- ... -->
<div id="my-animating-div" class="mdl-animation-fast-out-slow-in">hi</div>
```

CSS Classes have the exact same name as their mixin counterparts.

### Overriding the default curves.

All animation variables are marked with `!default`, thus they can be overridden should the need
arise.
2 changes: 1 addition & 1 deletion packages/mdl-animation/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@
* limitations under the License.
*/

$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, .1) !default;
$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, 1) !default;
$mdl-animation-fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
$mdl-animation-fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
3 changes: 2 additions & 1 deletion packages/mdl-animation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "mdl-animation",
"description": "Animation Variables and Mixins for Material Design",
"version": "1.0.0",
"license": "MIT",
"license": "Apache-2.0",
"devDependencies": {}
}
Loading