tests: update the data binding font example - #436
Open
lancesnider wants to merge 3 commits into
Open
Conversation
If you don't first run 'npm run dev', storybook may not be using the latest version of the runtime
Use the branded file instead
There was a problem hiding this comment.
Pull request overview
This PR updates the Storybook data-binding examples to match the font/data-binding demo used in CodeSandbox/other references, while also cleaning up some Storybook console noise and clarifying local dev workflow in the contributor docs.
Changes:
- Refresh
FontPropertyTest(and related story interactions) to use the updated font binding example (e.g., Orbitron + heading/subheading font properties). - Reduce Storybook console warnings by cleaning up unused imports / unused destructures in example components.
- Update
CONTRIBUTING.mdto document runningnpm run devalongside Storybook to pick up local runtime changes.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| examples/src/components/Semantics.tsx | Minor import/format cleanup in the semantics example. |
| examples/src/components/DataBindingTests.tsx | Updates the data binding test components; notably refreshes the font binding demo and some warning-related cleanups. |
| examples/src/components/DataBindingTests.stories.tsx | Aligns Storybook stories/tests with the updated data binding components (including the new font example). |
| examples/src/components/DataBindingHooks.tsx | Removes unused destructured values / minor formatting to reduce warnings. |
| CONTRIBUTING.md | Clarifies that npm run dev should be running to reflect local runtime changes while using Storybook. |
Suppressed comments (1)
examples/src/components/DataBindingTests.tsx:798
clearFontchecks onlysetHeadingFontbut then callssetSubheadingFont(null)unconditionally. IfsetSubheadingFontis undefined at that moment, clicking “Clear Font” will throw.
Using optional calls (or guarding both setters) avoids the runtime error and keeps the example resilient during load/bind timing.
const clearFont = () => {
if (setHeadingFont) {
setHeadingFont(null);
setSubheadingFont(null);
setCurrentFont('');
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+773
to
+787
| const loadFont = async (name: string, url: string) => { | ||
| if (!setHeadingFont) return; | ||
|
|
||
| setIsLoading(true); | ||
| try { | ||
| const response = await fetch(url); | ||
| const fontBuffer = await response.arrayBuffer(); | ||
| const decodedFont = await decodeFont(new Uint8Array(fontBuffer)); | ||
|
|
||
| setHeadingFont(decodedFont); | ||
| setSubheadingFont(decodedFont); | ||
| setCurrentFont(name); | ||
|
|
||
| decodedFont.unref(); | ||
| } catch (error) { |
these fonts are not embeded so we need to add one when it loads
zplata
approved these changes
Aug 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
For consistency, I've updated the example in storybook to the one we're using in Codesandbox and elsewhere.
Unrelated but also stuffed into this PR:
npm run devto update the Rive package storybook uses