Skip to content

Commit d52df3d

Browse files
EisenbergEffectchrisdholtnicholasricebhestonEisenbergEffect
committed
feat(design-system): better integrate with DI and enforce constraints (#4634)
* vNext: update components to extend FoundationElement (#4570) * support foundation element on accordion and accordion item * update anchor to use foundation element * update AnchoredRegion to extend FoundationElement * update Badge to extend FoundationElement * update breadcrumb and breadcrumb item to extend FoundationElement * update Button to extend FoundationElement * update checkbox to extend from FoundationElement * update Dialog to extend FoundationElement * update disclosure to extend FoundationElement * update divider to extend FoundationElement * update Flipper to extend FoundationElement * update horizontal scroll to extend FoundationElement * update Listbox and ListboxOption to extend FoundationElement * update combobox to extend FoundationElement * update select to extend combobox and update tests * fix listbox option styles and export * update tests (wip) * update Menu and MenuItem to extend FoundationElement * update number field to extend FoundationElement * update base name values * fix: prevent the mixin helper from copying over constructor properties * feat: fixture ergonomic improvements for foundation elements * test: fix Anchor and associated unit tests based on new system * remove incorrect tagFor usage * update radio and radiogroup * update skeleton * update slider and slider label * update switch * update tabs et all to use FoundationElement * update text area and text field to use foundation el * Update tooltip to use FoundationElement * update tests and tree item and view * remove website from lerna packages in favor of npm registry to prevent breaking changes for the time being * update progress and progress ring to use Foundation element * fixing the tests * feat: enable fixtures to handle N foundation elements and custom system * fixing tests! * Change files * fix errors in fast-website * update typings for explorer * update naming convention to lowercase fast * update imports for sites * Change files * update template names to lowercase * update style casing and apply updates to component registries * update tsdoc links for templates Co-authored-by: Rob Eisenberg <[email protected]> * (vNext) update casing for style exports (#4618) * update casing for style exports to illustrate they are functions * Change files * add api report * feat: refactor color recipes (#4623) * refactor color recipes away from DesignSystem data structure * rename dir * cleanup * factor binary-search out to it's own file * updating code docs * Change files * fixing binary-search * Update packages/web-components/fast-components/src/color-vNext/palette.ts Co-authored-by: Brian Heston <[email protected]> * addressing feedback * adding readme * pretty pretty closes #3833 Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Brian Heston <[email protected]> * fix: update storybook to use custom element definitions and fix rollup (#4629) * update storybook to use custom element defintions * Change files Co-authored-by: nicholasrice <[email protected]> * feat(design-system): better integrate with DI and enforce constraints * test(DesignSystem): add basic tests for new API behavior * fix(fast-components): update rollup index to use the new DS API * Change files Co-authored-by: Chris Holt <[email protected]> Co-authored-by: Nicholas Rice <[email protected]> Co-authored-by: Brian Heston <[email protected]> Co-authored-by: nicholasrice <[email protected]> Co-authored-by: EisenbergEffect <[email protected]>
1 parent 50be885 commit d52df3d

File tree

10 files changed

+219
-103
lines changed

10 files changed

+219
-103
lines changed

‎change/@microsoft-fast-components-0e27942e-3b81-4a7a-bd6c-031a14017a89.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "fix(fast-components): update rollup index to use the new DS API",
4+
"packageName": "@microsoft/fast-components",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@microsoft-fast-foundation-6fc300e8-5aea-4f33-bde6-b229bbb15761.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "feat(design-system): better integrate with DI and enforce constraints",
4+
"packageName": "@microsoft/fast-foundation",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/web-components/fast-components/src/index-rollup.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ export * from "./index";
88
/**
99
* TODO rename this to FASTDesignSystem when {@link @FASTDesignSystem} interface is removed.
1010
*/
11-
export const fastDesignSystem = new DesignSystem();
12-
13-
Object.values(fastComponents).forEach(definition => {
14-
fastDesignSystem.register(definition());
15-
});
16-
17-
fastDesignSystem.applyTo(document.body);
11+
export const fastDesignSystem = DesignSystem.getOrCreate().register(
12+
...Object.values(fastComponents).map(definition => definition())
13+
);

‎packages/web-components/fast-components/src/slider-label/slider-label.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const verticalSliderStyles = css`
5252
export const sliderLabelStyles = (context, definition) =>
5353
css`
5454
${display("block")} :host {
55-
// font-family: ${bodyFont};
55+
font-family: ${bodyFont};
5656
color: ${neutralForegroundRestBehavior.var};
5757
fill: currentcolor;
5858
}

‎packages/web-components/fast-foundation/docs/api-report.md

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -759,17 +759,22 @@ export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
759759
export type DerivedDesignTokenValue<T> = T extends Function ? never : (target: HTMLElement) => T;
760760

761761
// @alpha (undocumented)
762-
export class DesignSystem {
762+
export interface DesignSystem {
763763
// (undocumented)
764-
applyTo(element: HTMLElement): Container;
764+
register(...params: any[]): DesignSystem;
765765
// (undocumented)
766-
register(...params: any[]): this;
766+
withElementDisambiguation(callback: ElementDisambiguationCallback): DesignSystem;
767767
// (undocumented)
768-
withElementDisambiguation(callback: ElementDisambiguationCallback): this;
769-
// (undocumented)
770-
withPrefix(prefix: string): this;
768+
withPrefix(prefix: string): DesignSystem;
771769
}
772770

771+
// @alpha (undocumented)
772+
export const DesignSystem: Readonly<{
773+
tagFor(type: Constructable): string;
774+
responsibleFor(element: HTMLElement): DesignSystem;
775+
getOrCreate(element?: HTMLElement): DesignSystem;
776+
}>;
777+
773778
// @public
774779
export interface DesignSystemConsumer {
775780
// (undocumented)

‎packages/web-components/fast-foundation/src/design-system/design-system.spec.ts

Lines changed: 84 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,118 @@
11
import type { Constructable } from "@microsoft/fast-element";
22
import { expect } from "chai";
3-
import type { Container } from "../di";
3+
import { Container, DI } from "../di";
44
import { uniqueElementName } from "../test-utilities/fixture";
55
import { DesignSystem, DesignSystemRegistrationContext } from "./design-system";
66

77
describe("DesignSystem", () => {
8+
it("Should return the same instance for the same element", () => {
9+
const host = document.createElement("div");
10+
const ds1 = DesignSystem.getOrCreate(host);
11+
const ds2 = DesignSystem.getOrCreate(host);
12+
13+
expect(ds1).to.equal(ds2);
14+
});
15+
16+
it("Should find the responsible design system for an element in the hierarchy", () => {
17+
const host = document.createElement("div");
18+
const child = document.createElement("div");
19+
host.appendChild(child);
20+
21+
const ds1 = DesignSystem.getOrCreate(host);
22+
const ds2 = DesignSystem.responsibleFor(child);
23+
24+
expect(ds1).to.equal(ds2);
25+
});
26+
827
it("Should initialize with a default prefix of 'fast'", () => {
928
const host = document.createElement("div");
10-
const container = new DesignSystem().applyTo(host);
29+
let prefix = '';
1130

12-
expect(container.get(DesignSystemRegistrationContext).elementPrefix).to.equal(
13-
"fast"
14-
);
31+
DesignSystem.getOrCreate(host)
32+
.register({
33+
register(container: Container) {
34+
prefix = container.get(DesignSystemRegistrationContext).elementPrefix;
35+
}
36+
});
37+
38+
expect(prefix).to.equal("fast");
1539
});
1640

1741
it("Should initialize with a provided prefix", () => {
1842
const host = document.createElement("div");
19-
const container = new DesignSystem().withPrefix("custom").applyTo(host);
43+
let prefix = '';
2044

21-
expect(container.get(DesignSystemRegistrationContext).elementPrefix).to.equal(
22-
"custom"
23-
);
45+
DesignSystem.getOrCreate(host)
46+
.withPrefix("custom")
47+
.register({
48+
register(container: Container) {
49+
prefix = container.get(DesignSystemRegistrationContext).elementPrefix;
50+
}
51+
});
52+
53+
expect(prefix).to.equal("custom");
2454
});
2555

26-
it("Should apply registries to the container", () => {
56+
it("Should apply registries to the container associated with the host", () => {
2757
let capturedContainer: Container | null = null;
2858
const host = document.createElement("div");
29-
const container = new DesignSystem()
59+
60+
DesignSystem.getOrCreate(host)
3061
.register({
3162
register(container: Container) {
3263
capturedContainer = container;
3364
},
34-
})
35-
.applyTo(host);
65+
});
3666

37-
expect(capturedContainer).to.equal(container);
67+
const container = DI.getOrCreateDOMContainer(host);
68+
expect(container).equals(capturedContainer);
3869
});
3970

4071
it("Should provide a way for registries to define elements", () => {
4172
let capturedDefine: any;
4273
const host = document.createElement("div");
43-
new DesignSystem()
74+
DesignSystem.getOrCreate(host)
4475
.register({
4576
register(container: Container) {
4677
capturedDefine = container.get(DesignSystemRegistrationContext)
4778
.tryDefineElement;
4879
},
49-
})
50-
.applyTo(host);
80+
});
5181

5282
expect(capturedDefine).to.not.be.null;
5383
});
5484

5585
it("Should provide a way for registries to get the default prefix", () => {
5686
let capturePrefix: string | null = null;
5787
const host = document.createElement("div");
58-
new DesignSystem()
88+
DesignSystem.getOrCreate(host)
5989
.withPrefix("custom")
6090
.register({
6191
register(container: Container) {
6292
capturePrefix = container.get(DesignSystemRegistrationContext)
6393
.elementPrefix;
6494
},
65-
})
66-
.applyTo(host);
95+
});
6796

6897
expect(capturePrefix).to.equal("custom");
6998
});
7099

71-
it("Should register elements when applied", () => {
100+
it("Should register elements", () => {
72101
const elementName = uniqueElementName();
73102
const customElement = class extends HTMLElement {};
74103
const host = document.createElement("div");
75-
const system = new DesignSystem().register({
76-
register(container: Container) {
77-
const context = container.get(DesignSystemRegistrationContext);
78-
context.tryDefineElement(elementName, customElement, x =>
79-
x.defineElement()
80-
);
81-
},
82-
});
83104

84105
expect(customElements.get(elementName)).to.be.undefined;
85106

86-
system.applyTo(host);
107+
DesignSystem.getOrCreate(host)
108+
.register({
109+
register(container: Container) {
110+
const context = container.get(DesignSystemRegistrationContext);
111+
context.tryDefineElement(elementName, customElement, x =>
112+
x.defineElement()
113+
);
114+
},
115+
});
87116

88117
expect(customElements.get(elementName)).to.equal(customElement);
89118
});
@@ -93,7 +122,7 @@ describe("DesignSystem", () => {
93122
const elementName2 = uniqueElementName();
94123
const host = document.createElement("div");
95124
let capturedType: Constructable | null = null;
96-
const system = new DesignSystem()
125+
DesignSystem.getOrCreate(host)
97126
.withElementDisambiguation((name, type, existingType) => {
98127
capturedType = existingType;
99128
return elementName2;
@@ -119,8 +148,7 @@ describe("DesignSystem", () => {
119148
);
120149
},
121150
}
122-
)
123-
.applyTo(host);
151+
);
124152

125153
expect(capturedType).to.not.be.null;
126154
expect(customElements.get(elementName)).to.not.be.undefined;
@@ -131,28 +159,31 @@ describe("DesignSystem", () => {
131159
const elementName = uniqueElementName();
132160
const customElement = class extends HTMLElement {};
133161
const host = document.createElement("div");
134-
const system = new DesignSystem().register(
135-
{
136-
register(container: Container) {
137-
const context = container.get(DesignSystemRegistrationContext);
138-
context.tryDefineElement(elementName, customElement, x =>
139-
x.defineElement()
140-
);
141-
},
142-
},
143-
{
144-
register(container: Container) {
145-
const context = container.get(DesignSystemRegistrationContext);
146-
context.tryDefineElement(
147-
elementName,
148-
class extends HTMLElement {},
149-
x => x.defineElement()
150-
);
162+
const system = DesignSystem.getOrCreate(host);
163+
164+
expect(() => {
165+
system.register(
166+
{
167+
register(container: Container) {
168+
const context = container.get(DesignSystemRegistrationContext);
169+
context.tryDefineElement(elementName, customElement, x =>
170+
x.defineElement()
171+
);
172+
},
151173
},
152-
}
153-
);
174+
{
175+
register(container: Container) {
176+
const context = container.get(DesignSystemRegistrationContext);
177+
context.tryDefineElement(
178+
elementName,
179+
class extends HTMLElement {},
180+
x => x.defineElement()
181+
);
182+
},
183+
}
184+
);
185+
}).not.to.throw();
154186

155-
expect(() => system.applyTo(host)).not.to.throw();
156187
expect(customElements.get(elementName)).to.equal(customElement);
157188
});
158189
});

0 commit comments

Comments
 (0)