close
The Wayback Machine - https://web.archive.org/web/20210219064103/https://github.com/angular/components/pull/15782
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.

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

prototype(checkbox): create prototype checkbox based on MDC Web #15782

Merged
merged 15 commits into from Apr 16, 2019

Conversation

@mmalerba
Copy link
Contributor

@mmalerba mmalerba commented Apr 10, 2019

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

Copy link
Contributor Author

@mmalerba mmalerba left a comment

Comments mostly addressed, still need to check accessibility on JAWS and look into the Edge test failures

@mmalerba mmalerba force-pushed the mmalerba:mdc-template branch from e21f349 to add0199 Apr 11, 2019
@mmalerba mmalerba force-pushed the mmalerba:mdc-template branch 3 times, most recently from add0199 to 4b90325 Apr 12, 2019
@mmalerba mmalerba force-pushed the mmalerba:mdc-template branch 2 times, most recently from 7c95ddb to d2a0c02 Apr 12, 2019
mmalerba added 8 commits Mar 8, 2019
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.
mmalerba added 6 commits Mar 22, 2019
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.
@mmalerba mmalerba force-pushed the mmalerba:mdc-template branch 2 times, most recently from 6a4847f to b1b5c6b Apr 15, 2019
Fixes unit tests in Edge and approves the new API goldens for checkbox.
@mmalerba mmalerba force-pushed the mmalerba:mdc-template branch from b1b5c6b to aafdf0f Apr 15, 2019
Copy link
Member

@jelbourn jelbourn left a comment

LGTM

@jelbourn
Copy link
Member

@jelbourn jelbourn commented Apr 15, 2019

Technically not merge safe due to the one refactor affecting mat-checkbox

@jelbourn jelbourn merged commit 3e17ce7 into angular:master Apr 16, 2019
12 checks passed
12 checks passed
ci/angular: merge status All checks passed!
ci/circleci: api_golden_checks Your tests passed on CircleCI!
Details
ci/circleci: bazel_build_test Your tests passed on CircleCI!
Details
ci/circleci: build_devapp_aot Your tests passed on CircleCI!
Details
ci/circleci: build_release_packages Your tests passed on CircleCI!
Details
ci/circleci: e2e_tests Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: prerender_build Your tests passed on CircleCI!
Details
ci/circleci: tests_browserstack Your tests passed on CircleCI!
Details
ci/circleci: tests_local_browsers Your tests passed on CircleCI!
Details
ci/circleci: tests_saucelabs Your tests passed on CircleCI!
Details
cla/google All necessary CLAs are signed
@mmalerba
Copy link
Contributor Author

@mmalerba mmalerba commented Jun 10, 2019

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.
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 10, 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

8 participants