prototype(checkbox): create prototype checkbox based on MDC Web #15782
Conversation
|
Comments mostly addressed, still need to check accessibility on JAWS and look into the Edge test failures |
add0199
to
4b90325
7c95ddb
to
d2a0c02
Adds MDC as a peer dependency and updates various build and test config files accordingly.
Adds files for MDC-based MatCheckbox.
Adds a demo of the MDC-based MatCheckbox at http://localhost:4200/mdc-checkbox.
Adds the MDCCheckbox DOM and styles to the MDC-based MatCheckbox.
Adds the MDCCheckboxFoundation and MDCFormFieldFoundation and translates the lifecycle setup from their respective components (https://github.com/material-components/material-components-web/blob/master/packages/mdc-checkbox/component.ts and https://github.com/material-components/material-components-web/blob/master/packages/mdc-form-field/component.ts) into our MDC-based MatCheckbox.
Adds an Angular adapter for MDCCheckboxFoundation and MDCFormFieldFoundation
…r Material component Fills in the remaining APIs on the MDC-based MatCheckbox.
Copies over the demo page for the existing MatCheckbox to the demo page for the MDC-based MatCheckbox. Also adds an additional demo to both pages.
Adds ripple using RippleRenderer which results in a smaller size than MatRipple or MDCRipple. Also adds support for disabling animations.
Copies over all of the tests from the existing MatCheckbox and fixes issues that were uncovered by the tests.
Adds MDC-based MatCheckbox to the e2e app and copies over the tests for the existing MatCheckbox.
Adds a couple examples of the MDC-based MatCheckbox to the universal app.
Removes usgaes of constants from `MDCRippleFoundation`. It looks like their use was preventing the class from being tree-shaken. Results after removing the constants show that the MDC-based implementation is 3kb smaller: https://github.com/mmalerba/mdc-size-comparison/blob/ee1b73a181c4a23345251656df23574140a747c0/results/size-summary.txt
Adds documentation explaining what this component is and how to experiment with it in your app.
6a4847f
to
b1b5c6b
Fixes unit tests in Edge and approves the new API goldens for checkbox.
|
LGTM |
|
Technically not merge safe due to the one refactor affecting |
3e17ce7
into
angular:master
12 checks passed
12 checks passed
ci/angular: merge status
All checks passed!
cla/google
All necessary CLAs are signed
|
related to #16195 |
RudolfFrederiksen
added a commit
to RudolfFrederiksen/material2
that referenced
this pull request
Jun 21, 2019
…lar#15782) * 3.1. Add MDC to deps Adds MDC as a peer dependency and updates various build and test config files accordingly. * 3.2. Add the new component skeleton Adds files for MDC-based MatCheckbox. * 3.3. Add a demo for the new component Adds a demo of the MDC-based MatCheckbox at http://localhost:4200/mdc-checkbox. * 3.4. Copy in the canonical MDC DOM and add the MDC styles Adds the MDCCheckbox DOM and styles to the MDC-based MatCheckbox. * 3.5. Set up the MDC foundation Adds the MDCCheckboxFoundation and MDCFormFieldFoundation and translates the lifecycle setup from their respective components (https://github.com/material-components/material-components-web/blob/master/packages/mdc-checkbox/component.ts and https://github.com/material-components/material-components-web/blob/master/packages/mdc-form-field/component.ts) into our MDC-based MatCheckbox. * 3.6. Add a custom MDC adapter Adds an Angular adapter for MDCCheckboxFoundation and MDCFormFieldFoundation * 3.7. Fill in the missing APIs to match the API of the existing Angular Material component Fills in the remaining APIs on the MDC-based MatCheckbox. * 3.8. Copy over the existing demo page to the MDC-based demo Copies over the demo page for the existing MatCheckbox to the demo page for the MDC-based MatCheckbox. Also adds an additional demo to both pages. * 4.1. Manual inspection and testing Adds ripple using RippleRenderer which results in a smaller size than MatRipple or MDCRipple. Also adds support for disabling animations. * 4.2. Copy over unit tests and update them Copies over all of the tests from the existing MatCheckbox and fixes issues that were uncovered by the tests. * 4.3. Copy over e2e tests if any exist Adds MDC-based MatCheckbox to the e2e app and copies over the tests for the existing MatCheckbox. * 4.4. Add MDC-based component to universal-app Adds a couple examples of the MDC-based MatCheckbox to the universal app. * 5.2. Investigate and fix size regressions Removes usgaes of constants from `MDCRippleFoundation`. It looks like their use was preventing the class from being tree-shaken. Results after removing the constants show that the MDC-based implementation is 3kb smaller: https://github.com/mmalerba/mdc-size-comparison/blob/ee1b73a181c4a23345251656df23574140a747c0/results/size-summary.txt * 8. Add user documentation Adds documentation explaining what this component is and how to experiment with it in your app. * 9.2. Address CI failures and reviewer feedback Fixes unit tests in Edge and approves the new API goldens for checkbox.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.


This PR creates a prototype checkbox based on MDC Web to demonstrate how Angular Material components could be based on top of MDC ones but retain the same API we have currently.
I've split the PR into several different commits to make it easier to follow. I recommend reviewing each commit separately, as it will probably be less overwhelming