Skip to content

Commit ab56d08

Browse files
bhestonbheston
authored
Migrated interactive color styles to style modules (#70)
1 parent 043b3db commit ab56d08

File tree

172 files changed

+2211
-727
lines changed

Some content is hidden

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

172 files changed

+2211
-727
lines changed

‎change/@adaptive-web-adaptive-ui-a8bde1d7-75ff-4a7b-a73c-58c3b8777683.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Migrated interactive color styles to 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-a8642f8b-05e2-4473-9350-7c341a39adb0.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Migrated interactive color styles to style modules",
4+
"packageName": "@adaptive-web/adaptive-web-components",
5+
"email": "47367562+bheston@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎examples/customize-component/index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,29 @@
1111
background-color: var(--fill-color);
1212
font-family: sans-serif;
1313
}
14-
adaptive-card {
15-
height: 500px;
16-
width: 400px;
14+
body {
1715
display: flex;
1816
flex-direction: column;
1917
gap: 20px;
2018
padding: 20px;
2119
}
2220
</style>
21+
<script type="module" src="/src/init-ds.ts"></script>
2322
<script type="module" src="/src/index.ts"></script>
2423
</head>
2524

2625
<body>
27-
26+
<p>These components have the 'selected' state style overridden:</p>
27+
<adaptive-checkbox>Check me</adaptive-checkbox>
28+
<adaptive-switch>Switch me</adaptive-switch>
29+
<adaptive-radio-group value="Apples">
30+
<label slot="label">Fruits</label>
31+
<adaptive-radio value="Apples">Apples</adaptive-radio>
32+
<adaptive-radio value="Bananas">Bananas</adaptive-radio>
33+
<adaptive-radio value="Blueberries">Blueberries</adaptive-radio>
34+
</adaptive-radio-group>
35+
<p>This checkbox has completely custom styles:</p>
36+
<my-checkbox>Custom checkbox</my-checkbox>
2837
</body>
2938

3039
</html>

‎examples/customize-component/src/assets/check.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/customize-component/src/assets/indeterminate.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/customize-component/src/gobal.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.svg" {
2+
const content: any;
3+
export default content;
4+
}

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

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,85 @@
1-
import { AdaptiveDesignSystem } from '@adaptive-web/adaptive-web-components';
1+
import {
2+
accentFillReadableControlStyles,
3+
accentStrokeReadableInteractiveSet,
4+
accentStrokeReadableRecipe,
5+
createForegroundSet,
6+
neutralFillSubtleInteractiveSet,
7+
Styles,
8+
} from '@adaptive-web/adaptive-ui';
9+
import {
10+
AdaptiveDesignSystem,
11+
CheckboxAnatomy,
12+
CheckboxStatics,
13+
composeCheckbox,
14+
DesignSystem,
15+
} from '@adaptive-web/adaptive-web-components';
16+
import { checkboxDefinition } from "@adaptive-web/adaptive-web-components/checkbox";
17+
import { radioDefinition } from "@adaptive-web/adaptive-web-components/radio";
18+
import { radioGroupDefinition } from "@adaptive-web/adaptive-web-components/radio-group";
19+
import { switchDefinition } from "@adaptive-web/adaptive-web-components/switch";
220
import { DesignToken } from "@microsoft/fast-foundation";
21+
import checkIcon from "./assets/check.svg";
22+
import indeterminateIcon from "./assets/indeterminate.svg";
23+
24+
// --- Example part 1 ---
25+
26+
// Compose and define the components. Note that currently some style modules are adjusted in `init-ds` first.
27+
AdaptiveDesignSystem.defineComponents({
28+
checkboxDefinition,
29+
radioDefinition,
30+
radioGroupDefinition,
31+
switchDefinition,
32+
});
33+
34+
// --- Example part 2 ---
35+
36+
// Define a custom style module.
37+
const accentOutlineReadableControlStyles: Styles = Styles.fromProperties({
38+
backgroundFill: neutralFillSubtleInteractiveSet,
39+
borderFill: accentStrokeReadableInteractiveSet,
40+
foregroundFill: createForegroundSet(accentStrokeReadableRecipe, "rest", neutralFillSubtleInteractiveSet),
41+
});
42+
43+
const myDS = new DesignSystem("my");
44+
45+
const myCheckboxDefinition = composeCheckbox(
46+
myDS,
47+
{
48+
// Customizing a component definition, currently the `statics` are not exported individually.
49+
statics: {
50+
[CheckboxStatics.checked]: checkIcon,
51+
[CheckboxStatics.indeterminate]: indeterminateIcon,
52+
},
53+
// Custom modular styles.
54+
styleModules: [
55+
[
56+
{
57+
part: CheckboxAnatomy.parts.control,
58+
},
59+
accentOutlineReadableControlStyles
60+
],
61+
[
62+
{
63+
hostCondition: CheckboxAnatomy.conditions.checked,
64+
part: CheckboxAnatomy.parts.control,
65+
},
66+
accentFillReadableControlStyles
67+
],
68+
[
69+
{
70+
part: CheckboxAnatomy.parts.label,
71+
},
72+
Styles.fromProperties({
73+
fontFamily: "Times",
74+
fontSize: "20px",
75+
})
76+
],
77+
],
78+
}
79+
);
380

481
AdaptiveDesignSystem.defineComponents({
5-
82+
myCheckboxDefinition,
683
});
784

885
DesignToken.registerDefaultStyleTarget();

‎examples/customize-component/src/init-ds.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Separate module loaded first so style modules are updated before components are composed.
2+
3+
import { neutralFillDiscernibleControlStyles, selectableSelectedStyles } from "@adaptive-web/adaptive-ui";
4+
5+
selectableSelectedStyles.alias = neutralFillDiscernibleControlStyles;

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/adaptive-ui-explorer/src/components/style-example.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export class StyleExample extends FASTElement {
6666
let backgroundActive = fillColor;
6767
let backgroundFocus = fillColor;
6868

69-
const backgroundValue = (this.styles || {})[StyleProperty.backgroundFill];
69+
const backgroundValue = (this.styles?.properties || {})[StyleProperty.backgroundFill];
7070
if (backgroundValue) {
7171
if (typeof backgroundValue === "string") {
7272
// ignore for now
@@ -106,7 +106,7 @@ export class StyleExample extends FASTElement {
106106
}
107107
}
108108

109-
const colorValue = (this.styles || {})[StyleProperty.foregroundFill];
109+
const colorValue = (this.styles?.properties || {})[StyleProperty.foregroundFill];
110110
if (colorValue) {
111111
if (typeof colorValue === "string") {
112112
// ignore for now
@@ -146,7 +146,7 @@ export class StyleExample extends FASTElement {
146146
}
147147
}
148148

149-
const borderValue = (this.styles || {})[StyleProperty.borderFill];
149+
const borderValue = (this.styles?.properties || {})[StyleProperty.borderFill];
150150
if (borderValue) {
151151
if (typeof borderValue === "string") {
152152
// ignore for now

0 commit comments

Comments
 (0)