Skip to content

[Bug]: SkeletonItem size does not match line-height #35633

@mgilarmo

Description

@mgilarmo

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.1

Current 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

  1. Go to https://storybooks.fluentui.dev/react/?path=/docs/components-skeleton--docs
  2. Find the list of attributes (make sure to select "SkeletonItem")
  3. Review size values

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions