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

feat(material/tabs): Throw error in MDC tabs if [tabPanel] input is not provided #24517

Merged
merged 3 commits into from
Mar 10, 2022
Merged

feat(material/tabs): Throw error in MDC tabs if [tabPanel] input is not provided #24517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fdfa7b
feat(material/tabs): Throw error in MDC tabs if [tabPanel] is not pro…
zelliott Mar 4, 2022
4e4593a
feat(material/tabs): Exclude some tests from MDC
zelliott Mar 4, 2022
7898cb0
feat(material/tabs): Add tab panel to kitchen sinks
zelliott Mar 4, 2022
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
10 changes: 10 additions & 0 deletions scripts/check-mdc-tests-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,5 +185,15 @@ export const config = {
'should set the old snack bar animation state to complete and the new snack bar ' +
'animation state to visible on entry of new snack bar',
],
'mdc-tabs': [
// These tests are excluded because they are verifying behavior that is not supported in MDC.
'should have no explicit roles',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the feature or missing tests be ported over? The MDC tabs should have feature parity with the existing ones.

Copy link
Collaborator Author

@zelliott zelliott Mar 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR changes MDC tabs to not have feature parity with the existing tabs. In the existing tabs, the [tabPanel] input is optional. If it isn't provided, then the tabs fall back to default link/navigation behavior to avoid breaking existing instances in g3 that are impossible for me to migrate to use the [tabPanel]. In the new MDC tabs, we throw an error if the [tabPanel] input isn't provided. Thus, as users migrate from existing to MDC, if they're not already using the [tabPanel] input, they'll need to do so.

Given the [tabPanel] input is enforced in MDC tabs, we don't need to verify/test any of the link/navigation fallback behavior. That's why I explicitly didn't port over these tests.

'should not setup aria-controls',
'should not manage aria-selected',
'should not activate a link when space is pressed',
'should manage aria-current',
'should support the native tabindex attribute',
'should support binding to the tabIndex',
],
} as {[key: string]: string[]},
};
11 changes: 2 additions & 9 deletions src/dev-app/mdc-tabs/mdc-tabs-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,13 @@ <h2>Ink bar fit to content</h2>
</mat-tab-group>

<h2>Ink bar fit to content</h2>
<nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent">
<nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent" [tabPanel]="tabPanelInkBar">
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
[active]="activeLink == link">{{link}}</a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>
<mat-tab-nav-panel #tabPanelInkBar></mat-tab-nav-panel>

<h2>Lazy tabs</h2>
<mat-tab-group>
Expand All @@ -121,14 +122,6 @@ <h2>Lazy tabs</h2>
</mat-tab-group>

<h2>Tab nav bar</h2>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
[active]="activeLink == link">{{link}}</a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>

<h2>Tab nav bar with panel</h2>
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
Expand Down
1 change: 1 addition & 0 deletions src/material-experimental/mdc-tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ The experimental tabs API closely matches the
as all of the symbols found under `@angular/material/tabs`, except for the following
differences:

* `MatTabNav` will throw an error in dev mode if a `[tabPanel]` is not provided.
* `MatTabLink` is defined as a `Component` in the experimental package,
whereas in the current one it's a `Directive`.

Expand Down
Loading