feat: redesigned tab elements#21178
Draft
npapp-dev002 wants to merge 15 commits intodevelopfrom
Draft
Conversation
- Reorder product reviews header to place write review button before rating - Completely refactor tab-paragraph-container styles with CSS custom properties - Add enhanced styling for both TAB (desktop) and ACCORDION (mobile) modes - Simplify base cx-tab styles to provide functional defaults - Add comprehensive theming support via CSS custom properties - Improve responsive behavior and accessibility styling
…to feat/CXSPA-9062
spartacus
|
||||||||||||||||||||||||||||
| Project |
spartacus
|
| Branch Review |
feat/CXSPA-9062
|
| Run status |
|
| Run duration | 04m 23s |
| Commit |
|
| Committer | Norbert Papp |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
5
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
101
|
| View all changes introduced in this branch ↗︎ | |
uroslates
requested changes
Feb 23, 2026
Contributor
There was a problem hiding this comment.
Looks way better than before! Great job!
- The only concern I have is weather we should consult/check this design with some UI/UX specialist? And verify other places places where this should be applied (similariy) - we can create separate followup Ticket for second part.
Also this is a breaking change and should be behind feature toggle.
- I spotted some issues with current implementation - please see attached screen-shoots below:
2.1. hovering over tab is has issues like sharp angles (enlarge to see them). Should be rounded as active state.
2.2. Using arrows to highlight tab buttons shows blue border but its cut off on both mobile and desktop
2.3. On desktop selected tab's content has gray border but on mobile its blue (seems more natural with blue color but not sure what is expedted by UI). All in all those 2 should be consistent.
…instead of grey for improved accessibility
…y and accessibility and add feature toggle to handle the placing of overallRating header
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR modernizes the
cx-tab-paragraph-containercomponent styles while maintaining backward compatibility with the existing implementation.To the best of my knowledge, there is no Figma or any design guidelines to follow. So I used common patterns and Sonnet to modernize the tab section.
closes: CXSPA-9062
Desktop:
Mobile:
Changes
Product Reviews Component
Tab Paragraph Container (
_tab-paragraph-container.scss)%pdpTabs,%pdpFlat) and modern (cx-tab) implementations%cx-tab-paragraph-container-modernwith CSS custom properties, enhanced animations, and high contrast support$useAccordionOnlyvariableTab Component (
_tab.scss)focus-visible)Product Attributes (
_product-attributes.scss)Product Reviews Styles (
_product-reviews.scss)Notes
$useTabsOnPDPvariable