Skip to content

Commit

Permalink
feat(checkbox): Add initial checkbox implementation
Browse files Browse the repository at this point in the history 
This commit converts the checkbox POC code over to the new architecture, adds unit tests, and ports
the demos over to working implementations. It also adds a README, and
modifies .stylelintrc.yaml to increase the number of compound selectors
we can use.

Note that ink ripple functionality will be covered in a separate issue.

Finishes #4471

[Delivers #126819487]
  • Loading branch information
@traviskaufman
traviskaufman committed Aug 8, 2016
1 parent 321d158 commit 626e56e
Show file tree
Hide file tree
Showing 13 changed files with 1,415 additions and 243 deletions.
20 changes: 12 additions & 8 deletions .stylelintrc.yaml
View file
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
131 changes: 113 additions & 18 deletions demos/checkbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,50 +14,145 @@
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>
<input type="checkbox" id="disable-element-basic" onchange="document.getElementById('basic-checkbox').disabled = this.checked;">
<label for="disable-element-basic">Disable</label>
</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>
<input type="checkbox" id="disable-element" onchange="document.getElementById('checkbox-dark').disabled = this.checked;">
<label for="disable-element">Disable</label>
</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
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
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
Loading

0 comments on commit 626e56e

Please sign in to comment.