feat(Popover): update spacing and use elevation tokens#3133
Open
ravikumar-rajagopalan wants to merge 10 commits intosparkfrom
Open
feat(Popover): update spacing and use elevation tokens#3133ravikumar-rajagopalan wants to merge 10 commits intosparkfrom
ravikumar-rajagopalan wants to merge 10 commits intosparkfrom
Conversation
Updated PopoverContent component to align with latest Figma design specifications: - Increased wrapper padding from spacing.4 (12px) to spacing.5 (16px) - Increased main gap from spacing.4 to spacing.5 (16px) - Added new content wrapper with spacing.2 (4px) gap between header and body - Fixed import order linter issue This provides better visual hierarchy and spacing consistency across the component. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Contributor
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 913e7f1:
|
Merged latest changes from spark branch. Resolved snapshot conflicts by accepting spark version - snapshots will be regenerated with new Popover styling changes. Co-authored-by: Cursor <cursoragent@cursor.com>
- Changed background and border colors in Popover components to align with new design specifications. - Updated box shadow implementation using a new utility function from popoverTokens for improved visual consistency. - Adjusted PopoverCloseButton and PopoverHeader to use medium size for better alignment with design. - Introduced popoverTokens.ts to manage shadow layers and enhance maintainability. This refactor enhances the visual hierarchy and adheres to the latest design guidelines.
- Renamed shadow layer utility function for clarity and improved maintainability. - Updated box shadow implementation in getPopoverBoxShadow to utilize the new utility function. - Adjusted comments in popoverTokens for better understanding of shadow layer configurations. This refactor improves code readability and aligns with the latest design specifications.
- Adjusted background and border colors in Popover components for better visual consistency. - Increased padding and gap values to enhance layout and alignment with design specifications. - Updated button and text elements to improve accessibility and interaction feedback. - Enhanced box shadow effects for a more refined appearance. These changes ensure the Popover component adheres to the latest design guidelines and improves user experience.
Reverts unintended formatting change to .cursor/commands/update-blade-component.md Co-authored-by: Cursor <cursoragent@cursor.com>
…pdate-popover Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap # packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
- Introduced `makePopupBoxShadow` utility for improved box-shadow handling in Popover components. - Updated `getPopoverBoxShadow` to utilize the new utility, enhancing shadow layer management. - Adjusted Popover styles, including padding, gap, and background color for better alignment with design specifications. - Regenerated snapshots to reflect the updated styles and structure. These changes enhance the visual consistency and maintainability of the Popover component.
ravikumar-rajagopalan
changed the title
ravikumar-rajagopalan
requested review from
anuraghazra,
chaitanyadeorukhkar,
kamleshchandnani,
saurabhdaware,
swapnil-kr1 and
tewarig
as code owners
Restored snapshot files to match the base spark branch Co-authored-by: Cursor <cursoragent@cursor.com>
…styling - Removed the strokeColor prop from both Popover and TourPopover components to streamline styling. - This change aligns with the recent updates to the visual design specifications, enhancing the overall appearance of the components.
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
1 participant
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.
Summary
Changes
Spacing Updates
spacing.4(12px) tospacing.5(16px)spacing.4tospacing.5(16px) between sectionsspacing.2(4px) gap between header and body contentElevation Token Usage
popoverTokens.tsto useelevation.midRaisedtokenhsla(200, 10%, 18%, 0.06)New Utility
makePopupBoxShadowutility in~utilsmakeSpace,makeSize, etc.ShadowLayertype and conversion functionDesign Tokens Used
spacing.5(16px) - wrapper paddingspacing.5(16px) - between content and footerspacing.2(4px) - between header and bodyelevation.midRaised- drop shadow for elevationTesting
Files Changed
Modified
popoverTokens.ts- Refactored to use elevation tokensPopoverContent.tsx- Updated spacing valuesPopover.web.tsx- Updated spacing valuesPopoverCloseButton.tsx- Updated positioninggetPopoverContentWrapperStyles.ts- Uses updated shadow functionutils/index.ts- Exports new utilityAdded
utils/makePopupBoxShadow/- New common utility for popup shadowsRelated
Figma: https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=115756-259388
Made with Cursor