From 406bb8c5b456ae4983c7e0cf7e2991d1f804b114 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 23:14:52 -0700 Subject: [PATCH] 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 <7559015+janechu@users.noreply.github.com> Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com> --- ...s-chhol-add-skeleton-as-new-component.json | 8 ++ packages/web-components/docs/api-report.md | 8 ++ packages/web-components/package.json | 4 +- packages/web-components/src/index.ts | 1 + .../src/skeleton/fixtures/base.html | 79 +++++++++++++++++++ packages/web-components/src/skeleton/index.ts | 25 ++++++ .../src/skeleton/skeleton.stories.ts | 12 +++ .../src/skeleton/skeleton.styles.ts | 73 +++++++++++++++++ yarn.lock | 18 ++--- 9 files changed, 217 insertions(+), 11 deletions(-) create mode 100644 change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json create mode 100644 packages/web-components/src/skeleton/fixtures/base.html create mode 100644 packages/web-components/src/skeleton/index.ts create mode 100644 packages/web-components/src/skeleton/skeleton.stories.ts create mode 100644 packages/web-components/src/skeleton/skeleton.styles.ts diff --git a/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json b/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json new file mode 100644 index 0000000000000..a6dafbbb0d1a9 --- /dev/null +++ b/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "add skeleton as a new component", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-07T04:36:07.631Z" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 8e3a7ce9eae2e..7c59ad3b46189 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -25,6 +25,7 @@ import { Menu } from '@microsoft/fast-foundation'; import { MenuItem } from '@microsoft/fast-foundation'; import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; +import { Skeleton } from '@microsoft/fast-foundation'; import { Slider } from '@microsoft/fast-foundation'; import { SliderLabel } from '@microsoft/fast-foundation'; import { Switch } from '@microsoft/fast-foundation'; @@ -388,6 +389,10 @@ export class FluentRadio extends Radio { export class FluentRadioGroup extends RadioGroup { } +// @public +export class FluentSkeleton extends Skeleton { +} + // @public export class FluentSlider extends Slider { } @@ -609,6 +614,9 @@ export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles; // @public export const RadioStyles: import("@microsoft/fast-element").ElementStyles; +// @public +export const SkeletonStyles: import("@microsoft/fast-element").ElementStyles; + // @public export const SliderLabelStyles: import("@microsoft/fast-element").ElementStyles; diff --git a/packages/web-components/package.json b/packages/web-components/package.json index d540cae4a1773..4f37867a1d3ce 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -94,8 +94,8 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-components-styles-msft": "^4.29.0", - "@microsoft/fast-element": "^0.17.0", - "@microsoft/fast-foundation": "^1.7.0", + "@microsoft/fast-element": "^0.19.0", + "@microsoft/fast-foundation": "^1.8.0", "tslib": "^1.13.0" } } diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index ce492104d37b2..a2d2af6acb221 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -13,6 +13,7 @@ export * from './menu-item/'; export * from './progress/'; export * from './radio/'; export * from './radio-group/'; +export * from './skeleton/'; export * from './slider/'; export * from './slider-label/'; export * from './switch/'; diff --git a/packages/web-components/src/skeleton/fixtures/base.html b/packages/web-components/src/skeleton/fixtures/base.html new file mode 100644 index 0000000000000..da46fb2193afa --- /dev/null +++ b/packages/web-components/src/skeleton/fixtures/base.html @@ -0,0 +1,79 @@ + + + +

Skeleton

+ +

Used as element blocks

+ + + + + + + + +

Used as element blocks with shimmer effect element

+ + + + + + + + +

Using SVG via Pattern attribute

+ + + + +

Using inline SVG

+ + + + + + + + + + + + + + + + + diff --git a/packages/web-components/src/skeleton/index.ts b/packages/web-components/src/skeleton/index.ts new file mode 100644 index 0000000000000..6327acbc03909 --- /dev/null +++ b/packages/web-components/src/skeleton/index.ts @@ -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: \ + */ +@customElement({ + name: 'fluent-skeleton', + template, + styles, +}) +export class FluentSkeleton extends Skeleton {} + +/** + * Styles for Skeleton + * @public + */ +export const SkeletonStyles = styles; diff --git a/packages/web-components/src/skeleton/skeleton.stories.ts b/packages/web-components/src/skeleton/skeleton.stories.ts new file mode 100644 index 0000000000000..7b483b49b0c6a --- /dev/null +++ b/packages/web-components/src/skeleton/skeleton.stories.ts @@ -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; diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts new file mode 100644 index 0000000000000..b65d31c265723 --- /dev/null +++ b/packages/web-components/src/skeleton/skeleton.styles.ts @@ -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); diff --git a/yarn.lock b/yarn.lock index a2cce67835e8d..487f3e77086a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2395,17 +2395,17 @@ "@microsoft/fast-jss-utilities" "^4.8.0" "@microsoft/fast-web-utilities" "^4.6.0" -"@microsoft/fast-element@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.17.0.tgz#2d52b6c83375fbf2c6d05bc45211dad3960dff1a" - integrity sha512-bPkPPYcZ+hojPQ3m1WPdI5Z3d+fJbpddCdSspZy6T6NV9JoIDRg+gaJcBWWQmeBDsCsG+dVNK1RezXuWLP5qpA== +"@microsoft/fast-element@^0.19.0": + version "0.19.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.19.0.tgz#f5abbe9facba7488f1df68ce4400caa10358c1b0" + integrity sha512-YGVYvENaQBURZXSuHAoO0d3tbOz9HtmUHYJsA75Dszrq6UVaV/EAIDeFe8isqTkTIz/4HyzldFfsjVrvmWYljA== -"@microsoft/fast-foundation@^1.7.0": - version "1.7.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.7.1.tgz#17fede34bf76bd0195b5c5b76a73ce765d69edd1" - integrity sha512-8eTpcBRz6aLiVP6/FMUEiFw/t3DxA6xnT/8UkFI8NJQtBlZdIatt5+2PSwj5IsS4sqkniCeIv+wWa5jX6FHrSQ== +"@microsoft/fast-foundation@^1.8.0": + version "1.8.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.8.0.tgz#8bf1f0ec461557add1f7c89bc04cbcfa11e47a1c" + integrity sha512-Q3gthzOXUjNyMo60JgXk2N7mPz0wSK/6Q0eljgIA1YVsZjsJVnhm22ipWkPpSNqXpoa1y7gGn4ky98BeXzYcVw== dependencies: - "@microsoft/fast-element" "^0.17.0" + "@microsoft/fast-element" "^0.19.0" "@microsoft/fast-web-utilities" "^4.6.0" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^4.0.0"