diff --git a/change/@microsoft-fast-foundation-7ce173bf-8b3d-421d-b51c-5d8decc92f9c.json b/change/@microsoft-fast-foundation-7ce173bf-8b3d-421d-b51c-5d8decc92f9c.json new file mode 100644 index 00000000000..d861d23434a --- /dev/null +++ b/change/@microsoft-fast-foundation-7ce173bf-8b3d-421d-b51c-5d8decc92f9c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "force non-volatile binding and update docs to explain that DesignToken does not support volatile bindings", + "packageName": "@microsoft/fast-foundation", + "email": "nicholasrice@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.ts b/packages/web-components/fast-foundation/src/design-token/design-token.ts index 61f5765002d..5f2c1eb1fae 100644 --- a/packages/web-components/fast-foundation/src/design-token/design-token.ts +++ b/packages/web-components/fast-foundation/src/design-token/design-token.ts @@ -361,7 +361,7 @@ class DesignTokenBindingObserver { public readonly token: DesignTokenImpl, public readonly node: DesignTokenNode ) { - this.observer = Observable.binding(source, this); + this.observer = Observable.binding(source, this, false); // This is a little bit hacky because it's using internal APIs of BindingObserverImpl. // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this diff --git a/sites/website/src/docs/design-systems/design-tokens.md b/sites/website/src/docs/design-systems/design-tokens.md index 9d79d527acd..60080d70e4a 100644 --- a/sites/website/src/docs/design-systems/design-tokens.md +++ b/sites/website/src/docs/design-systems/design-tokens.md @@ -205,7 +205,8 @@ specialColor.setValueFor(target, () => themeManager.theme === "blue" ? "#0000FF" themeManager.theme = "red"; // Forces the derived tokens to re-evaluate and CSS custom properties to update if applicable ``` - +> Note: *volatile* token values that conditionally access DesignTokens or other observable properties are currently not supported by DesignToken. If you need to use conditionals, +ensure all DesignTokens or observable properties are accessed outside of conditional blocks. See (Observables and State)[/docs/fast-element/observables-and-state#observable-features] for more information. ## Aliasing Design Tokens In some design systems, Design Tokens may have complex hierarchies with tokens referencing other tokens. This can be accomplished by setting a Design Token to another Design Token.