-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
prototype(checkbox): create prototype checkbox based on MDC Web (#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.
- Loading branch information
Showing
69 changed files
with
3,947 additions
and
113 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import {browser, by, element, Key} from 'protractor'; | ||
|
||
describe('MDC checkbox', () => { | ||
describe('check behavior', () => { | ||
beforeEach(async () => await browser.get('/mdc-checkbox')); | ||
|
||
it('should be checked when clicked, and unchecked when clicked again', async () => { | ||
const checkboxEl = element(by.id('test-checkbox')); | ||
const inputEl = element(by.css('input[id=test-checkbox-input]')); | ||
|
||
await checkboxEl.click(); | ||
|
||
expect(await inputEl.getAttribute('checked')) | ||
.toBeTruthy('Expect checkbox "checked" property to be true'); | ||
|
||
await checkboxEl.click(); | ||
|
||
expect(await inputEl.getAttribute('checked')) | ||
.toBeFalsy('Expect checkbox "checked" property to be false'); | ||
}); | ||
|
||
it('should toggle the checkbox when pressing space', async () => { | ||
const inputEl = element(by.css('input[id=test-checkbox-input]')); | ||
|
||
expect(await inputEl.getAttribute('checked')) | ||
.toBeFalsy('Expect checkbox "checked" property to be false'); | ||
await inputEl.sendKeys(Key.SPACE); | ||
|
||
expect(await inputEl.getAttribute('checked')) | ||
.toBeTruthy('Expect checkbox "checked" property to be true'); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.