Skip to content

bug(TABS): tabs with fitInkBarToContent does not follow Material 3 design specs #30375

Description

@shhdharmen

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

As per Material 3 guidelines, primary tabs should have active indicator's height of 3px and shape of 3px 3px 0 0. In Angular Material, primary tabs' behaviour can be achieved using [fitInkBarToContent]=true input.

But, they have height of 2px, and shape of 0, which is right only for secondary tabs.

We can override it by using tabs-overrides mixin like below:

@use '@angular/material' as mat;

[fitInkBarToContent],
[ng-reflect-fit-ink-bar-to-content='true'] {
  > .mat-mdc-tab-header {
    @include mat.tabs-overrides(
      (
        active-indicator-shape: 3px 3px 0 0,
        active-indicator-height: 3px,
      )
    );
  }
}

But, it should be the default behaviour as per Material 3 specs.

Reproduction

Not needed.

Expected Behavior

Tabs with [fitInkBarToContent]=true should have active indicator's height of 3px and shape of 3px 3px 0 0.

Actual Behavior

Tabs with [fitInkBarToContent]=true have active indicator's height of 2px, and shape of 0.

Environment

  • Angular: 19
  • CDK/Material: 19
  • Browser(s): Edge
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Activity

  1. added
    P2The issue is important to a large percentage of users, with a workaround
    and removed
    needs triageThis issue needs to be triaged by the team
    on Feb 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2The issue is important to a large percentage of users, with a workaroundarea: material/tabs

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions