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

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions