Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add skeleton as a new web component #15397

Merged
merged 5 commits into from
Oct 7, 2020
Merged

add skeleton as a new web component #15397

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
add47e0
add skeleton as a new component
chrisdholt Oct 7, 2020
fd2f2a2
Change files
chrisdholt Oct 7, 2020
c6bf872
update examples to use cards
chrisdholt Oct 7, 2020
4dd9040
export skeleton and add api docs
chrisdholt Oct 7, 2020
8554b74
Update packages/web-components/src/index.ts
chrisdholt Oct 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions ...luentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json
View file
Open in desktop
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": "chhol@microsoft.com",
"dependentChangeType": "patch",
"date": "2020-10-07T04:36:07.631Z"
}
8 changes: 8 additions & 0 deletions packages/web-components/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
}
Expand Down Expand Up @@ -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;

Expand Down
4 changes: 2 additions & 2 deletions packages/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
1 change: 1 addition & 0 deletions packages/web-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export * from './menu-item/';
export * from './progress/';
export * from './radio/';
export * from './radio-group/';
export * from './skeleton';
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
export * from './slider/';
export * from './slider-label/';
export * from './switch/';
Expand Down
79 changes: 79 additions & 0 deletions packages/web-components/src/skeleton/fixtures/base.html
View file
Open in desktop
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>
25 changes: 25 additions & 0 deletions packages/web-components/src/skeleton/index.ts
View file
Open in desktop
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;
12 changes: 12 additions & 0 deletions packages/web-components/src/skeleton/skeleton.stories.ts
View file
Open in desktop
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;
73 changes: 73 additions & 0 deletions packages/web-components/src/skeleton/skeleton.styles.ts
View file
Open in desktop
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);
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down