Skip to content

Commit e296ca0

Browse files
bhestonbheston
authored
Adaptive UI: Cleaned up type definition for Style Rules (formerly Style Modules) (#178)
1 parent f35c710 commit e296ca0

File tree

62 files changed

+978
-978
lines changed

Some content is hidden

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

62 files changed

+978
-978
lines changed

‎change/@adaptive-web-adaptive-ui-02928a5b-1a67-41dc-bae7-720ad5e0156e.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Adaptive UI : Cleaned up type definition for Style Rules (formerly Style Modules)",
4+
"packageName": "@adaptive-web/adaptive-ui",
5+
"email": "47367562+bheston@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@adaptive-web-adaptive-web-components-2f8d5909-eef1-4f94-82f8-d87f8d652ba2.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Adaptive UI : Cleaned up type definition for Style Rules (formerly Style Modules)",
4+
"packageName": "@adaptive-web/adaptive-web-components",
5+
"email": "47367562+bheston@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎examples/customize-component/src/index.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,33 +55,33 @@ const myCheckboxDefinition = composeCheckbox(
5555
},
5656
// Custom modular styles.
5757
styleModules: [
58-
[
59-
{
58+
{
59+
target: {
6060
part: CheckboxAnatomy.parts.control,
6161
},
62-
accentOutlineReadableControlStyles
63-
],
64-
[
65-
{
62+
styles: accentOutlineReadableControlStyles,
63+
},
64+
{
65+
target: {
6666
hostCondition: CheckboxAnatomy.conditions.checked,
6767
part: CheckboxAnatomy.parts.control,
6868
},
69-
accentFillReadableControlStyles
70-
],
71-
[
72-
{
69+
styles: accentFillReadableControlStyles,
70+
},
71+
{
72+
target: {
7373
part: CheckboxAnatomy.parts.label,
7474
},
75-
Styles.fromProperties({
75+
properties: {
7676
fontFamily: "Times",
7777
fontSize: "20px",
78-
})
79-
],
78+
},
79+
},
8080
],
8181
}
8282
);
8383

84-
AdaptiveDesignSystem.defineComponents({
84+
myDS.defineComponents({
8585
myCheckboxDefinition,
8686
});
8787

‎packages/adaptive-ui-figma-designer/src/ui/ui-controller.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export class UIController {
247247
return;
248248
}
249249
}
250-
styles.effectiveProperties.forEach((value, target) => {
250+
styles.effectiveAdaptiveProperties.forEach((value, target) => {
251251
if (remove) {
252252
allApplied.set(target, {
253253
value: STYLE_REMOVE,

‎packages/adaptive-ui/docs/api-report.md‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
```ts
66

77
import { Color as Color_2 } from 'culori/fn';
8+
import { ComposableStyles } from '@microsoft/fast-element';
89
import { CSSDesignToken } from '@microsoft/fast-foundation';
910
import { CSSDirective } from '@microsoft/fast-element';
1011
import { DesignToken } from '@microsoft/fast-foundation';
@@ -276,6 +277,7 @@ export function directionByIsDark(color: RelativeLuminance): PaletteDirectionVal
276277
export class ElementStylesRenderer {
277278
constructor(styles: Styles);
278279
render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles;
280+
static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>): ElementStyles;
279281
}
280282

281283
// @public
@@ -446,10 +448,13 @@ export function resolvePaletteDirection(direction: PaletteDirection): PaletteDir
446448
export type StateSelector = "hover" | "active" | FocusSelector | "disabled";
447449

448450
// @public
449-
export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;
451+
export type StyleDeclaration = {
452+
styles?: Styles | Iterable<Styles>;
453+
properties?: StyleProperties;
454+
};
450455

451-
// @public (undocumented)
452-
export type StyleModules = Iterable<readonly [StyleModuleTarget, Styles]>;
456+
// @public
457+
export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;
453458

454459
// @public
455460
export interface StyleModuleTarget {
@@ -463,10 +468,10 @@ export interface StyleModuleTarget {
463468
}
464469

465470
// @public
466-
export type StyleProperties = Partial<Record<StyleProperty, StyleValue>>;
471+
export type StyleProperties = Partial<Record<StylePropertyCss, StyleValue>>;
467472

468473
// @public
469-
export type StylePropertiesMap = Map<StyleProperty, StyleValue>;
474+
export type StylePropertiesMap = Map<StylePropertyCss, StyleValue>;
470475

471476
// @public
472477
export const StyleProperty: {
@@ -515,29 +520,42 @@ export const StyleProperty: {
515520
// @public
516521
export type StyleProperty = ValuesOf<typeof StyleProperty>;
517522

518-
// @public (undocumented)
523+
// @public
519524
export const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
520525

521-
// @public (undocumented)
526+
// @public
522527
export const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
523528

524-
// @public (undocumented)
529+
// @public
525530
export const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
526531

527-
// @public (undocumented)
532+
// @public
528533
export const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
529534

530-
// @public (undocumented)
535+
// @public
536+
export type StylePropertyCss = StyleProperty | (string & Record<never, never>);
537+
538+
// @public
531539
export const stylePropertyPaddingAll: ("paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop")[];
532540

541+
// @public
542+
export type StyleRule = {
543+
target?: StyleModuleTarget;
544+
} & StyleDeclaration;
545+
546+
// @public
547+
export type StyleRules = Iterable<StyleRule>;
548+
533549
// @public
534550
export class Styles {
535551
// (undocumented)
536552
appendComposed(styles: Styles): void;
537553
clearComposed(): void;
538554
static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles;
539555
get composed(): Styles[] | undefined;
556+
get effectiveAdaptiveProperties(): Map<StyleProperty, StyleValue>;
540557
get effectiveProperties(): StylePropertiesMap;
558+
static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles;
541559
static fromProperties(properties: StyleProperties, name?: string): Styles;
542560
readonly name: string | undefined;
543561
get properties(): StylePropertiesMap | undefined;
@@ -547,7 +565,7 @@ export class Styles {
547565
}
548566

549567
// @public
550-
export type StyleValue = CSSDesignToken<any> | InteractiveSet<any | null> | CSSDirective | string;
568+
export type StyleValue = CSSDesignToken<any> | InteractiveSet<any | null> | CSSDirective | string | number;
551569

552570
// @public
553571
export class Swatch extends Color {

‎packages/adaptive-ui/src/modules/element-styles-renderer.ts‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { css, HostBehavior } from "@microsoft/fast-element";
1+
import { ComposableStyles, css, HostBehavior } from "@microsoft/fast-element";
22
import { type CSSDirective, ElementStyles } from "@microsoft/fast-element";
33
import { CSSDesignToken } from "@microsoft/fast-foundation";
4-
import { Interactivity, type InteractivityDefinition, type StyleModuleTarget, type StyleProperty } from "../modules/types.js";
4+
import { Interactivity, type InteractivityDefinition, type StyleModuleTarget, StyleProperty } from "../modules/types.js";
55
import type { InteractiveSet } from "../types.js";
66
import { makeSelector } from "./selector.js";
7-
import type { StateSelector, StyleModuleEvaluateParameters } from "./types.js";
7+
import type { ComponentAnatomy, StateSelector, StyleModuleEvaluateParameters, StylePropertyCss, StyleRules } from "./types.js";
88
import { stylePropertyToCssProperty } from "./css.js";
99
import { Styles } from "./styles.js";
1010

1111
/**
1212
* The properties and values of a css declaration.
1313
*/
14-
type DeclarationMap = Map<string, string | CSSDirective>;
14+
type DeclarationMap = Map<string, string | number | CSSDirective>;
1515

1616
/**
1717
* The selector and set of declarations for a css rule.
@@ -50,25 +50,27 @@ export class ElementStylesRenderer {
5050
// Perhaps these static functions turn into a registration mechanism.
5151

5252
private static declaration(
53-
property: StyleProperty,
54-
value: string | CSSDirective,
53+
property: StylePropertyCss,
54+
value: string | number | CSSDirective,
5555
state?: StateSelector,
5656
): DeclarationMap {
57-
const cssProperty = stylePropertyToCssProperty(property);
57+
const cssProperty = property in StyleProperty ?
58+
stylePropertyToCssProperty(property as keyof typeof StyleProperty) :
59+
property;
5860
const map = new Map([[cssProperty, value]]);
5961

6062
// TODO: This belongs in a plugin as described above.
6163
if (state === undefined) {
62-
if (property === "foregroundFill") {
64+
if (property === StyleProperty.foregroundFill) {
6365
map.set("fill", "currentcolor");
6466
}
6567
}
6668
return map;
6769
}
6870

6971
private static propertySingle(
70-
property: StyleProperty,
71-
value: string | CSSDirective,
72+
property: StylePropertyCss,
73+
value: string | number | CSSDirective,
7274
): StyleModuleEvaluate {
7375
return (params: StyleModuleEvaluateParameters): RuleMap => {
7476
return new Map([
@@ -78,7 +80,7 @@ export class ElementStylesRenderer {
7880
}
7981

8082
private static propertyInteractive(
81-
property: StyleProperty,
83+
property: StylePropertyCss,
8284
values: InteractiveSet<any>,
8385
): StyleModuleEvaluate {
8486
return (params: StyleModuleEvaluateParameters): RuleMap => {
@@ -108,7 +110,7 @@ export class ElementStylesRenderer {
108110

109111
private createStyleModules(styles: Styles): StyleModuleEvaluate[] {
110112
const modules: StyleModuleEvaluate[] = new Array(...styles.effectiveProperties.entries()).map(([property, value]) => {
111-
if (typeof value === "string" || value instanceof CSSDesignToken) {
113+
if (typeof value === "string" || typeof value === "number" || value instanceof CSSDesignToken) {
112114
return ElementStylesRenderer.propertySingle(property, value);
113115
} else if (value && typeof (value as any).createCSS === "function") {
114116
return ElementStylesRenderer.propertySingle(property, value as CSSDirective);
@@ -121,7 +123,8 @@ export class ElementStylesRenderer {
121123

122124
private appendRule(selector: string, declarations: DeclarationMap) {
123125
const cssProperties = new Array(...declarations.entries()).map(([property, value]) => {
124-
return css.partial`${property}: ${value};`;
126+
const valueToUse = typeof value === "number" ? value.toString() : value;
127+
return css.partial`${property}: ${valueToUse};`;
125128
});
126129
if (this._rules.has(selector)) {
127130
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -170,4 +173,22 @@ export class ElementStylesRenderer {
170173
const styles = new ElementStyles(strings);
171174
return behaviors.length > 0 ? styles.withBehaviors(...behaviors) : styles;
172175
}
176+
177+
/**
178+
* Convert style rule definitions to `ElementStyles`.
179+
*
180+
* @param baseStyles - Any base styles to append style rules to.
181+
* @param styleRules - Adaptive UI style rules.
182+
* @param anatomy - Optional component anatomy for features including interactivity and focus definition.
183+
* @returns The rendered `ElementStyles`.
184+
*/
185+
public static renderStyleRules(baseStyles: ComposableStyles[] = [], styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>) {
186+
for (const rule of styleRules) {
187+
const styles = Styles.fromDeclaration(rule);
188+
const renderedStyles = new ElementStylesRenderer(styles).render(rule.target || {}, anatomy?.interactivity);
189+
baseStyles.push(renderedStyles);
190+
}
191+
192+
return new ElementStyles(baseStyles);
193+
}
173194
}

0 commit comments

Comments
 (0)