Skip to content

First Animation-token experiment - #3160

Draft
jonahgoldsaito wants to merge 8 commits into
mainfrom
jg-motion-tokens
Draft

First Animation-token experiment#3160
jonahgoldsaito wants to merge 8 commits into
mainfrom
jg-motion-tokens

Conversation

@jonahgoldsaito

Copy link
Copy Markdown
Member

No description provided.

jonahgoldsaito and others added 7 commits July 28, 2026 14:09
…flags

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tion, fillMode

Extracts the token-system improvements discovered while applying the tokens to
components onto the base branch, so the first PR ships a complete, self-consistent
system:

- Rename the in-place overlay archetype to `floating` and add a distinct `docked`
  archetype for edge-docked surfaces (drawers/sheets).
- Add the `cssTransition` adapter (timing-only CSS transitions, the counterpart to
  `cssPreset`'s mount/unmount keyframe) and a `fillMode` option on
  `cssPreset`/`waapiPreset` for exit animations; export `AnimationFillMode` and
  `CssTransition` types.
- Retune the floating/docked durations, easings, and offsets after seeing them in
  action (emphasized decelerate/accelerate curves; floating rises without scaling).
- Reconcile the semantic test, docstrings, one-pager, and token docs stories with
  the retuned source values (source of truth).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jul 30, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b73c2ca

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 31 packages
Name Type
@khanacademy/wonder-blocks-tokens Minor
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-badge Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-breadcrumbs Patch
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-card Patch
@khanacademy/wonder-blocks-cell Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-date-picker Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-icon Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-layout Patch
@khanacademy/wonder-blocks-link Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-progress-spinner Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-styles Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-tabs Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip Patch
@khanacademy/wonder-blocks-typography Patch
eslint-plugin-wonder-blocks-demo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Size Change: +1.24 kB (+0.94%)

Total Size: 133 kB

📦 View Changed
Filename Size Change
packages/wonder-blocks-tokens/dist/es/index.js 7.72 kB +1.24 kB (+19.11%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/eslint-plugin-wonder-blocks/dist/es/index.js 7.11 kB
packages/wonder-blocks-accordion/dist/es/index.js 3.02 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.43 kB
packages/wonder-blocks-badge/dist/es/index.js 2.03 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.93 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 798 B
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-card/dist/es/index.js 1.09 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.61 kB
packages/wonder-blocks-core/dist/es/index.js 2.6 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-date-picker/dist/es/index.js 8.06 kB
packages/wonder-blocks-dropdown/dist/es/index.js 20.4 kB
packages/wonder-blocks-form/dist/es/index.js 6.39 kB
packages/wonder-blocks-grid/dist/es/index.js 1.25 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4.06 kB
packages/wonder-blocks-icon/dist/es/index.js 1.89 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.69 kB
packages/wonder-blocks-link/dist/es/index.js 1.54 kB
packages/wonder-blocks-modal/dist/es/index.js 7.36 kB
packages/wonder-blocks-pill/dist/es/index.js 1.32 kB
packages/wonder-blocks-popover/dist/es/index.js 4.41 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.49 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.12 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.6 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.62 kB
packages/wonder-blocks-testing-core/dist/es/index.js 4.09 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.53 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.19 kB
packages/wonder-blocks-typography/dist/es/index.js 1.04 kB

compressed-size-action

@github-actions

github-actions Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (4bb802e) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR3160"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR3160

@github-actions

github-actions Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-fkflzsblsn.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 544
Tests with visual changes 0
Total stories 869
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 544

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant