[MWPW-191561] - Enable gradient border color options in Studio editor#789
Open
antonio-rmrz wants to merge 9 commits intomainfrom
Open
[MWPW-191561] - Enable gradient border color options in Studio editor#789antonio-rmrz wants to merge 9 commits intomainfrom
antonio-rmrz wants to merge 9 commits intomainfrom
Conversation
Add gradient-purple-blue and gradient-firefly-spectrum to the Fries card variant's borderColor specialValues and CSS, using the ::before pseudo-element technique so the gradient is visible only at card edges.
- Extract gradient values into module constants as single source of truth (specialValues entries and CSS custom properties now share one definition each via unsafeCSS interpolation). - Drop fixed waitForTimeout(2000) in gradient border test; the following step already uses auto-retrying toHaveAttribute assertions.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #789 +/- ##
==========================================
+ Coverage 87.45% 87.49% +0.03%
==========================================
Files 214 214
Lines 63827 63871 +44
==========================================
+ Hits 55821 55882 +61
+ Misses 8006 7989 -17
... and 4 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
antonio-rmrz
changed the title
The picker merged specialValues into colorArray unconditionally, then prepended them again when !showAllSpectrum, so fries gradient options rendered as two sp-menu-item elements with the same value. Playwright's strict-mode locator then matched both and the nala gradient-border tests failed. Gate the colorArray merge on showAllSpectrum so the two insertion paths are mutually exclusive.
antonio-rmrz
requested review from
3ch023,
Axelcureno,
Blainegunn,
Roycethan and
joaquinrivero
Roycethan
requested changes
Apr 24, 2026
Collaborator
Roycethan
left a comment
Roycethan
left a comment
There was a problem hiding this comment.
@antonio-rmrz Badge is misplaced after applying the gradient color. plz check the vedio:
https://mwpw-191561--mas--adobecom.aem.page/studio.html#fragmentId=20f93e46-5796-4a5f-9315-30e20d86af45&page=fragment-editor&path=sandbox&tags=mas%3Avariant%2Ffries
https://github.com/user-attachments/assets/6431b36c-d480-4544-a064-5fd3d583cac2
…hored The previous ::before approach required `position: relative; z-index: 1` on `.content` to layer above the inner fill pseudo. Because the badge slot sits inside `.content`, that turned `.content` into the containing block for the absolutely-positioned `[slot="badge"]`, pushing it 24px into the padding area instead of anchoring to the host's padding box. Switch to the layered-background pattern used by ah-promoted-plans: paint the inner fill clipped to padding-box and the gradient clipped to border-box, with a 1px transparent border acting as the gradient slot. No pseudo-element, no z-index manipulation, no containing-block side effects — the badge stays where the variant CSS puts it.
# Conflicts: # web-components/dist/mas.js
Match the ah-promoted-plans pattern: keep the gradient strings as JS constants for the AEM fragment mapping, but reference the literal values directly in CSS rules instead of defining --gradient-* vars via unsafeCSS interpolation. No behavior change; removes a review red flag.
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.
Closes https://jira.corp.adobe.com/browse/MWPW-191561
Summary
gradient-purple-blueandgradient-firefly-spectrumto the Fries variant'sborderColor.specialValuesinFRIES_AEM_FRAGMENT_MAPPING::beforepseudo-element technique so gradient appears only at card edges without affecting interior background or content areaTest URLs:
Pinata PR