Skip to content

feat(pie-tabs): DSW-3303 pie tabs implement basic styling and default properties #2516

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

Jump to bottom
Open
thejfreitas wants to merge 20 commits into
base: main
Choose a base branch
from
Open

feat(pie-tabs): DSW-3303 pie tabs implement basic styling and default properties #2516

thejfreitas wants to merge 20 commits into from

Conversation

@thejfreitas
Copy link
Member

@thejfreitas thejfreitas commented Aug 5, 2025 •
edited
Loading

Adding basic styling and default properties to the pie-tabs component.

This component requires a sub component called pie-tab-panel to be passed as a slot in order to render the navigation items and the content as slot in the sub component.

pie-tabs has the following properties in this initial implementation.
variant: 'global', 'contained'
orientation: 'horizontal', 'vertical'

Screenshots

Screenshot 2025-07-09 at 4 55 34 PM
Screenshot 2025-07-09 at 4 55 14 PM
Screenshot 2025-07-09 at 4 55 03 PM
Screenshot 2025-07-09 at 4 54 56 PM

Author Checklist (complete before requesting a review, do not delete any)

  • I have performed a self-review of my code.
  • I have added thorough tests where applicable (unit / component / visual).
  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have reviewed visual test updates properly before approving.
  • If changes will affect consumers of the package, I have created a changeset entry.
  • If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.
  • I have filled out the DS Review Tracker checklist (Moving PR to "Ready to Review")

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

Testing

How do I test my changes?

Task Link
Aperture PR 🔗
NextJS 14 deployment 🔗
Nuxt 3 deployment 🔗
Vanilla deployment 🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have verified that all acceptance criteria for this ticket have been completed.
  • I have reviewed the Aperture changes (if added)
  • If there are visual test updates, I have reviewed them.

Reviewer 2

  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have verified that all acceptance criteria for this ticket have been completed.
  • I have reviewed the Aperture changes (if added)
  • If there are visual test updates, I have reviewed them.

@thejfreitas thejfreitas self-assigned this Aug 5, 2025
@thejfreitas thejfreitas requested review from a team as code owners August 5, 2025 22:29
@thejfreitas
Copy link
Member Author

thejfreitas commented Aug 5, 2025

/test-aperture

@pie-design-system-bot
Copy link
Contributor

pie-design-system-bot commented Aug 5, 2025

Starting a new snapshot build. You can view the logs here.

@thejfreitas thejfreitas changed the title Dsw 3303 pie tabs implement basic funcitonality and styling feat(pie-tabs): DSW-3169 pie tabs create basic markup Aug 5, 2025
@pie-design-system-bot
Copy link
Contributor

pie-design-system-bot commented Aug 5, 2025 •
edited
Loading




Fails
🚫 You have unchecked checklist items outside the "Not-applicable Checklist items" section.

Please ensure all unchecked checkboxes are moved to the appropriate section.
🚫 You have unchecked checklist items in Reviewer 1's section.

Please ensure all items are addressed before approval.
🚫 You have unchecked checklist items in Reviewer 2's section.

Please ensure all items are addressed before approval.

Generated by 🚫 dangerJS against 2a2f087

@pie-design-system-bot
Copy link
Contributor

pie-design-system-bot commented Aug 5, 2025

@thejfreitas Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-tabs@0.0.0-snapshot-release-20250805223046 --mode=update-lockfile
yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20250805223046 --mode=update-lockfile

Then finally:

yarn install

@thejfreitas thejfreitas changed the title feat(pie-tabs): DSW-3169 pie tabs create basic markup feat(pie-tabs): DSW-3303 pie tabs implement basic styling and default properties Aug 5, 2025
@github-actions github-actions bot temporarily deployed to storybook-pr-2516 August 5, 2025 22:33 Inactive
@github-actions github-actions bot temporarily deployed to storybook-testing-pr-2516 August 5, 2025 22:33 Inactive
@changeset-bot
Copy link

changeset-bot bot commented Aug 11, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 2a2f087

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@justeattakeaway/pie-tabs Minor
@justeattakeaway/pie-storybook Minor
@justeattakeaway/pie-webc Patch
@justeattakeaway/pie-docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@ashleynolan ashleynolan force-pushed the dsw-3169-pie-tabs-create-markup branch from 8ab9822 to 99cb61f Compare August 13, 2025 08:22
Base automatically changed from dsw-3169-pie-tabs-create-markup to main August 13, 2025 12:27
@github-actions github-actions bot temporarily deployed to storybook-pr-2516 August 14, 2025 15:22 Inactive
@github-actions github-actions bot temporarily deployed to storybook-testing-pr-2516 August 14, 2025 15:22 Inactive
@github-actions github-actions bot temporarily deployed to storybook-pr-2516 September 4, 2025 15:57 Inactive
@github-actions github-actions bot temporarily deployed to storybook-testing-pr-2516 September 4, 2025 15:57 Inactive
@github-actions github-actions bot temporarily deployed to storybook-testing-pr-2516 September 19, 2025 14:42 Inactive
@github-actions github-actions bot temporarily deployed to storybook-pr-2516 November 21, 2025 14:55 Inactive
@github-actions github-actions bot temporarily deployed to storybook-testing-pr-2516 November 21, 2025 14:55 Inactive
@thejfreitas
Copy link
Member Author

thejfreitas commented Nov 21, 2025

/test-aperture

@pie-design-system-bot
Copy link
Contributor

pie-design-system-bot commented Nov 21, 2025

Starting a new snapshot build. You can view the logs here.

@pie-design-system-bot
Copy link
Contributor

pie-design-system-bot commented Nov 21, 2025

@thejfreitas Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-tabs@0.0.0-snapshot-release-20251121150154 --mode=update-lockfile
yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20251121150154 --mode=update-lockfile

Then finally:

yarn install

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

Reviewers

No reviews

Assignees

@thejfreitas thejfreitas

Labels

apps components pie-storybook pie-tabs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@thejfreitas @pie-design-system-bot