chore: Add icon size and stroke width props#4514
Open
at-susie wants to merge 25 commits into
Open
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4514 +/- ##
==========================================
- Coverage 97.42% 97.41% -0.02%
==========================================
Files 939 939
Lines 29645 29708 +63
Branches 10772 10800 +28
==========================================
+ Hits 28883 28939 +56
- Misses 715 722 +7
Partials 47 47 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Add x-small and large icon size variants to complement existing sizes - Create IconSizes component showcasing all icon size options (x-small, small, normal, medium, big, large) - Update icon-scale-props page to display icon sizes in typography headings with size labels - Refactor icon size display from static list to dynamic mapped component - Add delivery method form field example to ButtonsInputsDropdowns section - Remove section separator comments for cleaner code organization - Update icon provider and icon interfaces to support new size variants - Update icon mixins and styling for new size tokens - Add x-small and large size tokens to style dictionary borders and sizes - Update token name utilities and metadata for new size variants - Update all related snapshot tests to reflect new icon size options
2f5eb33 to
1d370b1
Compare
- Add `sizes` prop to IconProvider to customize icon dimensions per size variant - Add `strokeWidths` prop to IconProvider to customize stroke widths per size variant - Support scoped overrides at any level of the component tree - Update IconProvider internal implementation to apply size and stroke-width overrides - Update Icon internal implementation to respect provider overrides - Add comprehensive API proposal documentation with usage examples and design rationale - Update icon provider dev page to demonstrate new scale props functionality - Update icon-related dev pages (custom SVG, icons list, text align) to reflect changes - Update snapshot tests to reflect new IconProvider interface and behavior
- Replace numeric IDs ('1', '2', '3', etc.) with semantic prefixed IDs ('action-1', 'action-2', 'action-3', etc.)
- Update all nested child node IDs to follow the new naming convention
- Update expandedItems state initialization to use new semantic IDs
- Improve ID clarity and maintainability in icon-scale-props demo page
fe62fc1 to
16d2910
Compare
9b49b0d to
5c73570
Compare
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
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.
Description
This PR adds:
1. New sizes and strokeWidths props on IconProvider:
Extend the existing IconProvider component with two new props — sizes and strokeWidths — that allow overriding icon dimensions and stroke widths at any level of the component tree.
In a nutshell, this proposal enables icon size and stroke-width customization by overriding the inline size and stroke-width of both the icon SVG and its wrapper element via the existing IconProvider.
Because the icon-provider already establishes a predictable scoping mechanism, icon sizes can be flexibly adjusted at different levels of the UI while maintaining consistent behavior.
This approach:
2. A new x-small icon size variant (12px) for the icon component:
While it’s not currently used by any existing components, it supports future use cases we’ve already identified, such as icons inside badge components and icons used in button groups within prompt inputs.
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.