Skip to content

Commit 0515fff

Browse files
chrisdholtchrisdholt
committed
feat: add fast-components-msft as a new package (#3096)
* initial work to create fast-components-msft * add styles packages for patterns * add msft anchor * add msft button * add msft badge - outstanding issues * add msft card * add msft checkbox * add msft dialog * add msft divider * add msft flipper * add msft progress - do we want to narrow support to align with guidance? * add msft radio * add MSFT radio group * add msft slider and slider-label * add msft switch * add msft tabs - need to ensure alignment of tab panel with tabs * add msft text area * add msft text field * export all components from root * fix eslint errors * update imports from fast-components * add .js extension to anything distributed * update readme to include install instructions * update prefix to align with fast * update package.json description * update tsconfig * add dependency for fast-components-styles-msft * update design system provider to use MSFT design system * remove js extensions for the time being * update imports for fast-foundation * update behavior imports to correct internal path * update pathing for forcedColors behavior * fix order of imports * update system-colors path * update imports for shared utils added to foundation * fix design system signature and update to new textarea api with default slot for label * remove unused behavior and fix color on text field * update design system values and remove unused vars * fix text field focus bug
1 parent 6bc4695 commit 0515fff

File tree

129 files changed

+5002
-111
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+5002
-111
lines changed

‎packages/web-components/fast-components-msft/.eslintignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# don't ever lint node_modules
2+
node_modules
3+
# don't lint build output (make sure it's set to your correct build folder name)
4+
dist
5+
# don't lint coverage output
6+
coverage
7+
# don't lint storybook
8+
.storybook

‎packages/web-components/fast-components-msft/.eslintrc.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
3+
rules: {
4+
"no-extra-boolean-cast": "off",
5+
"@typescript-eslint/no-use-before-define": "off",
6+
"@typescript-eslint/typedef": "off",
7+
"@typescript-eslint/explicit-function-return-type": "off",
8+
"@typescript-eslint/no-non-null-assertion": "off",
9+
},
10+
};

‎packages/web-components/fast-components-msft/.npmignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Tests
2+
__test__/
3+
*.test.*
4+
5+
# specifications
6+
*.spec.*
7+
8+
# images
9+
images/
10+
11+
# Source files
12+
src/
13+
14+
# config files
15+
.eslintignore
16+
.eslintrc.js
17+
.prettierignore
18+
.storybook
19+
tsconfig.json
20+
tsconfig.build.json

‎packages/web-components/fast-components-msft/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎packages/web-components/fast-components-msft/.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
coverage/*
2+
dist/*

‎packages/web-components/fast-components-msft/.storybook/main.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const CircularDependencyPlugin = require("circular-dependency-plugin");
2+
3+
module.exports = {
4+
stories: ["../src/**/*.stories.ts"],
5+
webpackFinal: async config => {
6+
config.module.rules.push({
7+
test: /\.(ts)$/,
8+
use: [
9+
{
10+
loader: require.resolve("ts-loader"),
11+
},
12+
],
13+
});
14+
config.resolve.extensions.push(".ts");
15+
config.plugins.push(
16+
new CircularDependencyPlugin({
17+
exclude: /node_modules/,
18+
failOnError: process.env.NODE_ENV === "production",
19+
})
20+
);
21+
22+
return config;
23+
},
24+
};

‎packages/web-components/fast-components-msft/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# FAST Components MSFT
2+
3+
A set of React components which implements the Microsoft styling.
4+
5+
## Installation
6+
7+
`npm i --save @microsoft/fast-components-msft`
8+
9+
### Known issue with Storybook site hot-reloading during development
10+
11+
Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
12+
`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
13+
14+
This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.

‎packages/web-components/fast-components-msft/package.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@microsoft/fast-components-msft",
3+
"description": "A library of Web Components with Microsoft styles",
4+
"sideEffects": false,
5+
"version": "0.0.0",
6+
"author": {
7+
"name": "Microsoft",
8+
"url": "https://discord.gg/FcSNfg4"
9+
},
10+
"license": "MIT",
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/Microsoft/fast-dna.git"
14+
},
15+
"bugs": {
16+
"url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
17+
},
18+
"main": "./dist/index.js",
19+
"types": "./dist/index.d.ts",
20+
"scripts": {
21+
"build": "tsc -p ./tsconfig.build.json",
22+
"clean:dist": "node ../../../build/clean.js dist",
23+
"prepare": "yarn clean:dist && yarn build",
24+
"prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
25+
"prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
26+
"eslint": "eslint . --ext .ts",
27+
"eslint:fix": "eslint . --ext .ts --fix",
28+
"start": "start-storybook -p 6006",
29+
"test": "yarn build-storybook && yarn eslint",
30+
"build-storybook": "build-storybook"
31+
},
32+
"devDependencies": {
33+
"@babel/core": "^7.8.4",
34+
"@microsoft/eslint-config-fast-dna": "^1.1.1",
35+
"@storybook/cli": "^5.3.13",
36+
"@storybook/html": "^5.3.13",
37+
"circular-dependency-plugin": "^5.2.0",
38+
"prettier": "2.0.2",
39+
"ts-loader": "^6.2.1",
40+
"typescript": "^3.7.5"
41+
},
42+
"dependencies": {
43+
"@microsoft/fast-components": "^0.10.1",
44+
"@microsoft/fast-components-styles-msft": "4.28.9",
45+
"@microsoft/fast-element": "^0.8.1"
46+
}
47+
}
48+

‎packages/web-components/fast-components-msft/src/anchor/anchor.stories.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { FASTDesignSystemProvider } from "../design-system-provider";
2+
import AnchorTemplate from "./fixtures/anchor.html";
3+
import { FASTAnchor } from "./";
4+
5+
// Prevent tree-shaking
6+
FASTAnchor;
7+
FASTDesignSystemProvider;
8+
9+
export default {
10+
title: "Anchor",
11+
};
12+
13+
export const Anchor = () => AnchorTemplate;

‎packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { css } from "@microsoft/fast-element";
2+
import {
3+
AccentButtonStyles,
4+
accentFillActiveBehavior,
5+
accentFillHoverBehavior,
6+
accentFillRestBehavior,
7+
accentForegroundActiveBehavior,
8+
accentForegroundCutRestBehavior,
9+
accentForegroundHoverBehavior,
10+
accentForegroundRestBehavior,
11+
BaseButtonStyles,
12+
HypertextStyles,
13+
LightweightButtonStyles,
14+
neutralFillActiveBehavior,
15+
neutralFillFocusBehavior,
16+
neutralFillHoverBehavior,
17+
neutralFillRestBehavior,
18+
neutralFillStealthActiveBehavior,
19+
neutralFillStealthHoverBehavior,
20+
neutralFillStealthRestBehavior,
21+
neutralFocusBehavior,
22+
neutralFocusInnerAccentBehavior,
23+
neutralForegroundRestBehavior,
24+
neutralOutlineActiveBehavior,
25+
neutralOutlineHoverBehavior,
26+
neutralOutlineRestBehavior,
27+
OutlineButtonStyles,
28+
StealthButtonStyles,
29+
} from "../styles/";
30+
31+
export const AnchorStyles = css`
32+
${BaseButtonStyles}
33+
${AccentButtonStyles}
34+
${HypertextStyles}
35+
${LightweightButtonStyles}
36+
${OutlineButtonStyles}
37+
${StealthButtonStyles}
38+
`.withBehaviors(
39+
accentFillActiveBehavior,
40+
accentFillHoverBehavior,
41+
accentFillRestBehavior,
42+
accentForegroundActiveBehavior,
43+
accentForegroundCutRestBehavior,
44+
accentForegroundHoverBehavior,
45+
accentForegroundRestBehavior,
46+
neutralFillActiveBehavior,
47+
neutralFillFocusBehavior,
48+
neutralFillHoverBehavior,
49+
neutralFillRestBehavior,
50+
neutralFillStealthActiveBehavior,
51+
neutralFillStealthHoverBehavior,
52+
neutralFillStealthRestBehavior,
53+
neutralFocusBehavior,
54+
neutralFocusInnerAccentBehavior,
55+
neutralForegroundRestBehavior,
56+
neutralOutlineActiveBehavior,
57+
neutralOutlineHoverBehavior,
58+
neutralOutlineRestBehavior
59+
);

‎packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<fast-design-system-provider use-defaults>
2+
<h1>Anchor</h1>
3+
4+
<h4>Default</h4>
5+
<fast-anchor href="#">Anchor</fast-anchor>
6+
7+
<h5>With target</h5>
8+
<fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>
9+
10+
<h4>Neutral</h4>
11+
<fast-anchor href="#" appearance="neutral">Button</fast-anchor>
12+
13+
<h4>Accent</h4>
14+
<fast-anchor href="#" appearance="accent">Anchor</fast-anchor>
15+
16+
<h4>Hypertext</h4>
17+
<fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
18+
<br/>
19+
<fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
20+
21+
<h4>Lightweight</h4>
22+
<fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
23+
24+
<h4>Outline</h4>
25+
<fast-anchor href="#" appearance="outline">Anchor</fast-anchor>
26+
27+
<h4>Stealth</h4>
28+
<fast-anchor href="#" appearance="stealth">Anchor</fast-anchor>
29+
30+
<h4>With start</h4>
31+
<fast-anchor href="#">
32+
Anchor
33+
<svg
34+
slot="start"
35+
width="16"
36+
height="16"
37+
viewBox="0 0 16 16"
38+
xmlns="http://www.w3.org/2000/svg"
39+
>
40+
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
41+
</svg>
42+
</fast-anchor>
43+
44+
<h4>With end</h4>
45+
<fast-anchor href="#">
46+
Anchor
47+
<svg
48+
slot="end"
49+
width="16"
50+
height="16"
51+
viewBox="0 0 16 16"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
55+
</svg>
56+
</fast-anchor>
57+
58+
<h4>Icon in default slot</h4>
59+
<fast-anchor href="#">
60+
<svg
61+
width="16"
62+
height="16"
63+
viewBox="0 0 16 16"
64+
xmlns="http://www.w3.org/2000/svg"
65+
>
66+
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
67+
</svg>
68+
</fast-anchor>
69+
</fast-design-system-provider>

‎packages/web-components/fast-components-msft/src/anchor/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { customElement } from "@microsoft/fast-element";
2+
import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation";
3+
import { AnchorStyles as styles } from "./anchor.styles";
4+
5+
// Anchor
6+
@customElement({
7+
name: "fast-anchor",
8+
template,
9+
styles,
10+
shadowOptions: {
11+
delegatesFocus: true,
12+
},
13+
})
14+
export class FASTAnchor extends Anchor {}

‎packages/web-components/fast-components-msft/src/badge/badge.stories.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { FASTDesignSystemProvider } from "../design-system-provider";
2+
import BadgeTemplate from "./fixtures/badge.html";
3+
import { FASTBadge } from "./";
4+
5+
// Prevent tree-shaking
6+
FASTBadge;
7+
FASTDesignSystemProvider;
8+
9+
export default {
10+
title: "Badge",
11+
};
12+
13+
export const Badge = () => BadgeTemplate;

‎packages/web-components/fast-components-msft/src/badge/badge.styles.ts

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { css } from "@microsoft/fast-element";
2+
import { display } from "@microsoft/fast-foundation";
3+
import {
4+
accentFillRestBehavior,
5+
accentForegroundCutRestBehavior,
6+
accentForegroundRestBehavior,
7+
neutralFillInputRestBehavior,
8+
neutralFillToggleRestBehavior,
9+
neutralForegroundRestBehavior,
10+
} from "../styles";
11+
12+
export const BadgeStyles = css`
13+
${display("inline-block")} :host {
14+
box-sizing: border-box;
15+
font-family: var(--body-font);
16+
${/* Font size, weight, and line height are temporary -
17+
replace when adaptive typography is figured out */ ""} font-size: 12px;
18+
font-weight: 400;
19+
line-height: 18px;
20+
}
21+
22+
.badge {
23+
border-radius: calc(var(--corner-radius) * 1px);
24+
padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
25+
}
26+
27+
:host(.lightweight) {
28+
--badge-fill-lightweight: transparent;
29+
--badge-color-value: var(--neutral-foreground-rest);
30+
font-weight: 600;
31+
}
32+
33+
:host(.accent) {
34+
--badge-fill-accent: var(--accent-fill-rest);
35+
--badge-color-value: var(--accent-foreground-cut-rest);
36+
}
37+
38+
:host(.neutral) {
39+
--badge-fill-neutral: var(--neutral-fill-toggle-rest);
40+
--badge-color-value: var(--neutral-fill-input-rest);
41+
}
42+
`.withBehaviors(
43+
accentFillRestBehavior,
44+
accentForegroundCutRestBehavior,
45+
accentForegroundRestBehavior,
46+
neutralForegroundRestBehavior,
47+
neutralFillInputRestBehavior,
48+
neutralFillToggleRestBehavior
49+
);

‎packages/web-components/fast-components-msft/src/badge/fixtures/badge.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<fast-design-system-provider use-defaults>
2+
<h1>Badge</h1>
3+
<h4>Default</h4>
4+
<fast-badge>
5+
Badge
6+
</fast-badge>
7+
<h4>Lightweight</h4>
8+
<fast-badge fill="lightweight">
9+
Badge
10+
</fast-badge>
11+
<h4>Accent</h4>
12+
<fast-badge fill="accent">
13+
Badge
14+
</fast-badge>
15+
<h4>Neutral</h4>
16+
<fast-badge fill="neutral">
17+
Badge
18+
</fast-badge>
19+
</fast-design-system-provider>

0 commit comments

Comments
 (0)