Skip to content

[Feature] Code Tab components should have a distinct style when disabled #163

@jbriones1

Description

@jbriones1

Motivation behind the feature and what it will do

There is no use case for it yet, but we should be able to disable Code Tab components while still having them appear in the list.

Which part of the application will this feature be for?

Component library

Minimal Viable Product

  • When the Tab's isDisabled flag is true then the tab should have a different style indicating it's disabled and it should not be interactable
  • If it becomes disabled when it is focused we should go backwards (wrapping to the end of the list if we go below tabIndex 0) in the tab list until we find a tab that's not disabled and select it.

Code changes

There is already a Signal and some attributes that determine if the tab is disabled (aria-disabled), so all we need to do is implement logic to edit the CSS and interactivity of the tab.

Additional context

https://material.angular.dev/components/tabs/examples#tab-group-ink-bar (look at the Fourth tab for inspiration)

Metadata

Metadata

Assignees

No one assigned

    Labels

    code componentRelated to the CSSSCode Component libraryenhancementNew feature or requestgood first issueGood for newcomersgraphic designFor someone that's interested in graphic design

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions