chore: Explore icon scale - InlineSize#4486
Draft
at-susie wants to merge 36 commits into
Draft
Conversation
Introduce an alternative approach to icon size customization that uses CSS transform: scale() instead of remapping to different named size variants. The IconProvider gains a new iconScale prop (number, default 1) that applies a scale transform to all descendant Icon components. Key differences from the size-remap approach: - Icons retain their original size class and layout box - No per-component layout/position adjustments needed - Supports arbitrary numeric scale factors (e.g. 0.75 for 12px from 16px) - Nested providers can override or inherit the parent scale
- Replace single iconScale prop with iconSizeNormal and iconSizeInherit props for granular control - Update IconProvider context to store pixel sizes instead of scale factors - Modify icon internal component to apply pixel-based sizing via CSS custom properties - Add token-names utility to generate size token identifiers - Introduce visual-refresh sizes token configuration for icon variants - Update demo page to showcase per-variant sizing with nested provider inheritance - Simplify icon mixin to use CSS variables for size application - Update themed stroke width demo label for clarity (12px instead of 16px)
- Add copyright and SPDX license header to generated snapshot - Import appendSelector utility from test-utils-core - Add comprehensive component wrapper imports and exports - Include all Cloudscape Design System component wrappers in snapshot - Update generated test utilities module structure
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4486 +/- ##
==========================================
- Coverage 97.41% 97.20% -0.22%
==========================================
Files 933 933
Lines 29595 29689 +94
Branches 10757 10798 +41
==========================================
+ Hits 28831 28860 +29
- Misses 716 821 +105
+ Partials 48 8 -40 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Move icon-scale-provider demo page from pages/icon to pages/theming - Update app layout configuration to recognize theming/icon-scale-provider as app layout page - Update IconProvider context and interfaces to support per-variant pixel size props - Replace CSS transform: scale() approach with direct pixel size properties (iconSizeNormal, iconSizeInherit, etc.) - Update icon internal component and mixins to apply per-variant sizes instead of transform scaling - Reorganize demo to better reflect theming capabilities rather than icon-specific functionality
at-susie
changed the title
- Replace individual iconSizeSmall, iconSizeNormal, iconSizeMedium, iconSizeBig, iconSizeLarge, and iconSizeInherit props with a single sizes object - Create IconProviderProps.Sizes interface with small, normal, medium, big, large, and inherit optional properties - Update InternalIconProvider to destructure sizes prop and simplify size override map construction - Reduce dependency array in useMemo from 7 items to 2 (contextSizeOverrides, sizes) - Update demo page to use new sizes object structure - Improves API ergonomics by grouping related size configuration into a single cohesive object
…nd fix icon sizing - Add expanded SideNavigation example with sections to the theming test page - Set min-inline-size on icon containers in expandable-section to prevent shrinking - Fix icon mapped-height calculation to use supportedLineHeight instead of size
- Move icon-scale-provider page from theming to icon-provider directory - Replace Badge component with StatusIndicator in table category cells - Add TreeView component examples with connector lines and action patterns - Remove unused imports (useLayoutEffect, Badge, Toggle, applyTheme, Theme) - Update page routing reference to reflect new directory structure - Clean up commented-out Typography section code - Enhance icon-provider demo with tree view showcase and status indicators
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.
Description
Related links, issue #, if available: n/a
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.