-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
Component
Skeleton
Package version
9.72.2
React version
18.3.1
Environment
System:
OS: Windows 11 10.0.26200
CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Memory: 35.18 GB / 63.95 GB
Browsers:
Chrome: 143.0.7499.170
Edge: Chromium (143.0.3650.96)
Internet Explorer: 11.0.26100.1882
npmPackages:
@fluentui/azure-themes: ^8.6.18 => 8.6.146
@fluentui/jest-serializer-merge-styles: ^8.0.26 => 8.0.47
@fluentui/react-components: ^9.72.2 => 9.72.9
@fluentui/react-icons: ^2.0.218 => 2.0.316
@fluentui/react-portal-compat: ^9.0.167 => 9.2.27
@types/react: 18.3.1 => 18.3.1
@types/react-dom: 18.3.1 => 18.3.1
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1Current Behavior
for SkeletonItem, the size attribute does not match all the possible line-heights in the typography.
line-heights: 14px, 16px, 20px, 22px, 28px, 32px, 36px, 40px, 52px, 92px
size values: 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128
This means there isn't always a SkeletonItem size that can match the layout it is replacing (there is a "Best Practice" note about this related to the width, but not the height)
Expected Behavior
To have a supported size for SkeletonItem that matches all line-heights used in the typography. The size values missing from SkeletonItem that match the typography line-heights are: 14, 22, 52, 92
I know there is a way to override, but it feels like prescribed heights used within the design system should be universally supported.
Reproduction
https://storybooks.fluentui.dev/react/?path=/docs/components-skeleton--docs
Steps to reproduce
- Go to https://storybooks.fluentui.dev/react/?path=/docs/components-skeleton--docs
- Find the list of attributes (make sure to select "SkeletonItem")
- Review
sizevalues
Are you reporting an Accessibility issue?
no
Suggested severity
Medium - Has workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.