From add47e0457e49194c7addd12b656dbb3c9280c2e Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 21:34:28 -0700 Subject: [PATCH 1/5] add skeleton as a new component --- packages/web-components/package.json | 4 +- .../src/skeleton/fixtures/base.html | 73 +++++++++++++++++++ packages/web-components/src/skeleton/index.ts | 25 +++++++ .../src/skeleton/skeleton.stories.ts | 12 +++ .../src/skeleton/skeleton.styles.ts | 73 +++++++++++++++++++ yarn.lock | 18 ++--- 6 files changed, 194 insertions(+), 11 deletions(-) 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/packages/web-components/package.json b/packages/web-components/package.json index d540cae4a1773d..4f37867a1d3ce2 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/skeleton/fixtures/base.html b/packages/web-components/src/skeleton/fixtures/base.html new file mode 100644 index 00000000000000..ed28026faa0075 --- /dev/null +++ b/packages/web-components/src/skeleton/fixtures/base.html @@ -0,0 +1,73 @@ + + + +

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 00000000000000..6327acbc039091 --- /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 00000000000000..7b483b49b0c6a0 --- /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 00000000000000..b65d31c265723e --- /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 a2cce67835e8de..487f3e77086a5e 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" From fd2f2a2e8e00ae8825eddbae2cf39b0f2e92eeb9 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 21:36:07 -0700 Subject: [PATCH 2/5] Change files --- ...1-36-07-users-chhol-add-skeleton-as-new-component.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json 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 00000000000000..a6dafbbb0d1a98 --- /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" +} From c6bf872bd9c26970491266f4e399a34877bace74 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 21:43:43 -0700 Subject: [PATCH 3/5] update examples to use cards --- .../src/skeleton/fixtures/base.html | 64 ++++++++++--------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/packages/web-components/src/skeleton/fixtures/base.html b/packages/web-components/src/skeleton/fixtures/base.html index ed28026faa0075..da46fb2193afa2 100644 --- a/packages/web-components/src/skeleton/fixtures/base.html +++ b/packages/web-components/src/skeleton/fixtures/base.html @@ -1,17 +1,19 @@ - +

Skeleton

Used as element blocks

-
+ @@ -26,10 +28,10 @@

Used as element blocks

" shape="rect" > -
+

Used as element blocks with shimmer effect element

-
+ @@ -45,29 +47,33 @@

Used as element blocks with shimmer effect element

shape="rect" shimmer > -
+

Using SVG via Pattern attribute

- + + +

Using inline SVG

- - - - - - - - - - - - - - + + + + + + + + + + + + + + + + From 4dd904069e08d6c729fcfdb17791d1b48864951f Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 21:50:12 -0700 Subject: [PATCH 4/5] export skeleton and add api docs --- packages/web-components/docs/api-report.md | 8 ++++++++ packages/web-components/src/index.ts | 1 + 2 files changed, 9 insertions(+) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 8e3a7ce9eae2ea..7c59ad3b461899 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/src/index.ts b/packages/web-components/src/index.ts index ce492104d37b2d..e1011a1362d6ff 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/'; From 8554b74c56d1bcae73bee8dcab80558259954373 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Oct 2020 22:08:42 -0700 Subject: [PATCH 5/5] Update packages/web-components/src/index.ts Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com> --- packages/web-components/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index e1011a1362d6ff..a2d2af6acb221a 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -13,7 +13,7 @@ export * from './menu-item/'; export * from './progress/'; export * from './radio/'; export * from './radio-group/'; -export * from './skeleton'; +export * from './skeleton/'; export * from './slider/'; export * from './slider-label/'; export * from './switch/';