Skip to content

Latest commit

 

History

History
86 lines (57 loc) · 3.05 KB

Skeleton.md

File metadata and controls

86 lines (57 loc) · 3.05 KB

Skeleton FluentUI spec

The Skeleton component is primarily leveraged to reserve a place in the layout for a content that will be shown asynchronous avoiding elements moving to adapt to new dimensions.

Prior Art/Examples

API

Props

<Skeleton> Properties

Attribute Name Type Default Value Description
animation string off Define the animation for the Skeleton, possible "wave", "pulse" or "off" for no animation.

<Skeleton.Line> Properties

Attribute Name Type Default Value Description
height string 100% The height the line should fill.
width string 100% The width the line should fill.
round bool false Set whether should have rounded borders

<Skeleton.Shape> Properties

Attribute Name Type Default Value Description
height string 0px The height the line should fill.
width string 0px The width the line should fill.
round bool false Define if the shape should be a circle

Slots

Name Considerations
root container for elements

Proposed React structure

Public usage

<Skeleton />

<Skeleton>
  <Skeleton.Line />
  <Skeleton.Shape />
</Skeleton>

Skeleton would be used exclusively with children API.

Internal representation

const Skeleton = () => <div>{children}</div>;

const SkeletonLine = () => <span />;

const SkeletonShape = () => <span />;

DOM structure

<div id="mySkeleton" class="skeleton-ui" aria-busy="true" role="alert" aria-live="polite">
    <span class="skeleton-ui__shape">
    <span class="skeleton-ui__line">
</div>

Screenreader accessibility:

root:

Skeleton should be atomic and not have interactive elements inside, should be assigned a role="alert", aria-busy="true" to denotes that a widget is missing required owned element and aria-live="polite".

Composition

TBD