Skip to content

fix(pds-tab): add add disabled prop#626

Merged
QuintonJason merged 4 commits intomainfrom
fix/tab-add-disabled-prop
Jan 8, 2026
Merged

fix(pds-tab): add add disabled prop#626
QuintonJason merged 4 commits intomainfrom
fix/tab-add-disabled-prop

Conversation

@QuintonJason
Copy link
Contributor

Description

Adds a disabled prop to the pds-tab component, allowing individual tabs to be disabled within a tablist.

Summary of changes:

  • Added disabled prop to pds-tab component with default value of false
  • Disabled tabs cannot be clicked or receive focus
  • Added proper accessibility attributes (aria-disabled, disabled, tabindex="-1")
  • Added disabled styling for all tab variants (primary, pill, availability, filter)
  • Disabled tabs display with muted text color and cursor: not-allowed
  • Added documentation example showing disabled tab usage

Motivation:
This feature enables consumers to disable specific tabs when certain content or functionality is unavailable, improving UX by clearly indicating non-interactive options while maintaining accessibility standards.

No new dependencies required.

Fixes DSS-64

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

  • unit tests
  • e2e tests
  • accessibility tests
  • tested manually
  • other:

Tests added:

  • Unit test verifying disabled tab renders with correct attributes (aria-disabled, disabled, is-disabled class)
  • Unit test verifying click events do not fire when tab is disabled

Test Configuration:

  • Pine versions: 3.12.1
  • OS: macOS
  • Browsers: N/A (unit tests)
  • Screen readers: N/A
  • Misc: Stencil test runner

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • Design has QA'ed and approved this PR

Files changed:

  • libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx - Added disabled prop and logic
  • libs/core/src/components/pds-tabs/pds-tab/pds-tab.scss - Added disabled styles for all variants
  • libs/core/src/components/pds-tabs/pds-tab/test/pds-tab.spec.tsx - Added unit tests
  • libs/core/src/components/pds-tabs/docs/pds-tabs.mdx - Added disabled example

@netlify
Copy link

netlify bot commented Jan 8, 2026

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 4d9c2f3
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/696034ba28eb5a00085936b1
😎 Deploy Preview https://deploy-preview-626--pine-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added bug Something isn't working package: core Changes have been made to the Core package labels Jan 8, 2026
@QuintonJason QuintonJason self-assigned this Jan 8, 2026
@QuintonJason QuintonJason changed the title Fix/tab add disabled prop fix(pds-tab): add add disabled prop Jan 8, 2026
@QuintonJason QuintonJason marked this pull request as ready for review January 8, 2026 22:32
Copy link
Member

@pixelflips pixelflips left a comment

Choose a reason for hiding this comment

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

LGTM!

@QuintonJason QuintonJason merged commit 3280177 into main Jan 8, 2026
15 checks passed
@QuintonJason QuintonJason deleted the fix/tab-add-disabled-prop branch January 8, 2026 23:04
Copy link
Member

@AndrwM AndrwM left a comment

Choose a reason for hiding this comment

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

💯 ❤️ thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working package: core Changes have been made to the Core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants