-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add skeleton as a new web component (#15397)
* add skeleton as a new component * Change files * update examples to use cards * export skeleton and add api docs * Update packages/web-components/src/index.ts Co-authored-by: Jane Chu <[email protected]> Co-authored-by: Jane Chu <[email protected]>
- Loading branch information
1 parent
dbe4a43
commit 406bb8c
Showing
9 changed files
with
217 additions
and
11 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
...luentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "add skeleton as a new component", | ||
| "packageName": "@fluentui/web-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch", | ||
| "date": "2020-10-07T04:36:07.631Z" | ||
| } |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <fluent-design-system-provider background-color="#f7f7f7" use-defaults> | ||
| <style> | ||
| fluent-card { | ||
| --card-width: 500px; | ||
| --card-height: auto; | ||
| } | ||
|
|
||
| .card-padding { | ||
| padding: 20px; | ||
| } | ||
| </style> | ||
|
|
||
| <h1>Skeleton</h1> | ||
|
|
||
| <h4>Used as element blocks</h4> | ||
| <fluent-card class="card-padding"> | ||
| <fluent-skeleton style="border-radius: 4px; width: 50px; height: 50px;" shape="circle"></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></fluent-skeleton> | ||
| <fluent-skeleton | ||
| style=" | ||
| border-radius: 4px; | ||
| width: 75px; | ||
| height: 30px; | ||
| margin-top: 20px; | ||
| margin-bottom: 10px; | ||
| " | ||
| shape="rect" | ||
| ></fluent-skeleton> | ||
| </fluent-card> | ||
|
|
||
| <h4>Used as element blocks with shimmer effect element</h4> | ||
| <fluent-card class="card-padding"> | ||
| <fluent-skeleton style="border-radius: 4px; width: 50px; height: 50px;" shape="circle" shimmer></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect" shimmer></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect" shimmer></fluent-skeleton> | ||
| <fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect" shimmer></fluent-skeleton> | ||
| <fluent-skeleton | ||
| style=" | ||
| border-radius: 4px; | ||
| width: 75px; | ||
| height: 30px; | ||
| margin-top: 20px; | ||
| margin-bottom: 10px; | ||
| " | ||
| shape="rect" | ||
| shimmer | ||
| ></fluent-skeleton> | ||
| </fluent-card> | ||
|
|
||
| <h4>Using SVG via Pattern attribute</h4> | ||
| <fluent-card> | ||
| <fluent-skeleton | ||
| style="border-radius: 4px; width: 500px; height: 250px;" | ||
| shape="rect" | ||
| pattern="https://static.fast.design/assets/skeleton-test-pattern.svg" | ||
| shimmer | ||
| ></fluent-skeleton> | ||
| </fluent-card> | ||
|
|
||
| <h4>Using inline SVG</h4> | ||
| <fluent-card> | ||
| <fluent-skeleton style="border-radius: 4px; width: 500px; height: 250px;" shape="rect" shimmer> | ||
| <svg style="position: absolute; left: 0; top: 0;" id="pattern" width="100%" height="100%"> | ||
| <defs> | ||
| <mask id="mask" x="0" y="0" width="100%" height="100%"> | ||
| <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" /> | ||
| <rect x="0" y="0" width="100%" height="45%" rx="4" /> | ||
| <rect x="25" y="55%" width="90%" height="15px" rx="4" /> | ||
| <rect x="25" y="65%" width="70%" height="15px" rx="4" /> | ||
| <rect x="25" y="80%" width="90px" height="30px" rx="4" /> | ||
| </mask> | ||
| </defs> | ||
| <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="#ffffff" /> | ||
| </svg> | ||
| </fluent-skeleton> | ||
| </fluent-card> | ||
| </fluent-design-system-provider> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { customElement } from '@microsoft/fast-element'; | ||
| import { Skeleton, SkeletonTemplate as template } from '@microsoft/fast-foundation'; | ||
| import { SkeletonStyles as styles } from './skeleton.styles'; | ||
|
|
||
| /** | ||
| * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton}, | ||
| * {@link @microsoft/fast-foundation#SkeletonTemplate} | ||
| * | ||
| * | ||
| * @public | ||
| * @remarks | ||
| * HTML Element: \<fluent-skeleton\> | ||
| */ | ||
| @customElement({ | ||
| name: 'fluent-skeleton', | ||
| template, | ||
| styles, | ||
| }) | ||
| export class FluentSkeleton extends Skeleton {} | ||
|
|
||
| /** | ||
| * Styles for Skeleton | ||
| * @public | ||
| */ | ||
| export const SkeletonStyles = styles; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { FluentDesignSystemProvider } from '../design-system-provider'; | ||
| import SkeletonTemplate from './fixtures/base.html'; | ||
| import { FluentSkeleton } from './'; | ||
|
|
||
| FluentSkeleton; | ||
| FluentDesignSystemProvider; | ||
|
|
||
| export default { | ||
| title: 'Skeleton', | ||
| }; | ||
|
|
||
| export const Skeleton = (): string => SkeletonTemplate; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { css } from '@microsoft/fast-element'; | ||
| import { display } from '@microsoft/fast-foundation'; | ||
| import { neutralFillRestBehavior } from '../styles'; | ||
|
|
||
| export const SkeletonStyles = css` | ||
| ${display('block')} :host { | ||
| --skeleton-fill-default: #e1dfdd; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| position: relative; | ||
| background-color: var(--skeleton-fill, var(--skeleton-fill-default)); | ||
| --skeleton-animation-gradient-default: linear-gradient( | ||
| 270deg, | ||
| var(--skeleton-fill, var(--skeleton-fill-default)) 0%, | ||
| #f3f2f1 51.13%, | ||
| var(--skeleton-fill, var(--skeleton-fill-default)) 100% | ||
| ); | ||
| --skeleton-animation-timing-default: ease-in-out; | ||
| } | ||
| :host(.rect) { | ||
| border-radius: calc(var(--corner-radius) * 1px); | ||
| } | ||
| :host(.circle) { | ||
| border-radius: 100%; | ||
| overflow: hidden; | ||
| } | ||
| object { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: auto; | ||
| z-index: 2; | ||
| } | ||
| object img { | ||
| width: 100%; | ||
| height: auto; | ||
| } | ||
| ${display('block')} span.shimmer { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default)); | ||
| background-size: 0px 0px / 90% 100%; | ||
| background-repeat: no-repeat; | ||
| background-color: var(--skeleton-animation-fill, ${neutralFillRestBehavior.var}); | ||
| animation: shimmer 2s infinite; | ||
| animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default)); | ||
| animation-direction: normal; | ||
| z-index: 1; | ||
| } | ||
| ::slotted(svg) { | ||
| z-index: 2; | ||
| } | ||
| ::slotted(.pattern) { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| @keyframes shimmer { | ||
| 0% { | ||
| transform: translateX(-100%); | ||
| } | ||
| 100% { | ||
| transform: translateX(100%); | ||
| } | ||
| } | ||
| `.withBehaviors(neutralFillRestBehavior); |
This file contains 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