feat(storybook): add LTR/RTL preview toggle and audit pointer#739
Merged
Conversation
github-actions
Bot
added
the
package: core
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fa917bc. Configure here.
QuintonJason
force-pushed
the
feat/storybook-rtl-decorator
branch
from
fa917bc to
a855b78
Compare
QuintonJason
force-pushed
the
docs/foundations
branch
from
2c2fb97 to
18559ac
Compare
QuintonJason
force-pushed
the
feat/storybook-rtl-decorator
branch
from
81dda36 to
988eeaa
Compare
QuintonJason
force-pushed
the
docs/foundations
branch
from
18559ac to
a767e2d
Compare
14 tasks
QuintonJason
force-pushed
the
feat/storybook-rtl-decorator
branch
from
988eeaa to
2c67f6f
Compare
Add a Direction global type with an LTR/RTL toolbar control. The withDirection decorator applies dir on documentElement and body for the active story (and the parent docs frame), matching the consumer contract for RTL surfaces. Update the RTL and localization guide with a How to audit section pointing teams at the toggle. The audit checklist stays intentionally unchecked; rows should be marked off in the PR that proves behavior.
QuintonJason
force-pushed
the
feat/storybook-rtl-decorator
branch
from
2c67f6f to
ca3e48b
Compare
pixelflips
approved these changes
May 27, 2026
pixelflips
left a comment
pixelflips
left a comment
Member
There was a problem hiding this comment.
Great addition. Working well in dev qa. 👍🏼
QuintonJason
added a commit
that referenced
this pull request
Jun 1, 2026
* feat(storybook): add LTR/RTL preview toggle and audit pointer Add a Direction global type with an LTR/RTL toolbar control. The withDirection decorator applies dir on documentElement and body for the active story (and the parent docs frame), matching the consumer contract for RTL surfaces. Update the RTL and localization guide with a How to audit section pointing teams at the toggle. The audit checklist stays intentionally unchecked; rows should be marked off in the PR that proves behavior. * fix(storybook): use direction icon for RTL toolbar * fix(storybook): scope RTL dir to preview iframe only * fix(storybook): use valid transfer icon for direction toolbar * docs(storybook): update RTL guide cross-reference in preview
QuintonJason
added a commit
that referenced
this pull request
Jun 2, 2026
… docs (#736) * docs(foundations): add motion, RTL, status, and Code Connect coverage docs Land four cross-cutting documents that close several gaps in the Pine design-system maturity map: - Guides/Motion — principles and implementation hints for component animation; flags the absence of dedicated motion tokens. - Guides/RTL and localization — assumptions teams should make today plus an audit checklist with every Pine component. - Resources/Component status — central Stable/Beta/Deprecated table covering all 35 Pine components. - libs/figma/CODE_CONNECT_COVERAGE.md — tracks which Pine components have a matching Code Connect mapping. Also cross-link the new Component status and RTL pages from the Support docs page. * fix: use logical CSS for RTL layout gaps and simplify RTL guide Replace physical left/right with inset-inline properties in combobox, input, table sticky cells, tooltip arrows, and scroll shadows. Make table scroll-shadow visibility respect RTL scroll positions. Remove the per-component audit checklist from the RTL guide. * docs: defer Storybook RTL toolbar copy to PR 739 * fix(pds-table): address RTL scroll and tooltip arrow feedback Add shared scroll utils with cross-browser RTL scrollLeft detection. Use them for table shadows and fixed-column has-scrolled state. Revert tooltip arrow positioning to physical left/right to match Floating UI placement classes. * fix(pds-table): correct RTL scroll offset and shadow gradients Fix swapped default/reverse RTL scrollLeft normalization, add scrollable content to the browser probe, use valid gradient directions with RTL overrides, and expand scroll utility tests. * feat(storybook): add LTR/RTL preview toggle and audit pointer (#739) * feat(storybook): add LTR/RTL preview toggle and audit pointer Add a Direction global type with an LTR/RTL toolbar control. The withDirection decorator applies dir on documentElement and body for the active story (and the parent docs frame), matching the consumer contract for RTL surfaces. Update the RTL and localization guide with a How to audit section pointing teams at the toggle. The audit checklist stays intentionally unchecked; rows should be marked off in the PR that proves behavior. * fix(storybook): use direction icon for RTL toolbar * fix(storybook): scope RTL dir to preview iframe only * fix(storybook): use valid transfer icon for direction toolbar * docs(storybook): update RTL guide cross-reference in preview * feat(motion): add Pine-internal motion token scaffold (#740) * feat(motion): add Pine-internal motion token scaffold Add libs/core/src/global/styles/_motion.scss exposing duration and easing CSS custom properties (--pine-motion-duration-{fast,base,slow} and --pine-motion-easing-{out,in,in-out}). Wired into app.scss so the tokens land in the global stylesheet alongside fonts. Durations collapse to 0ms under prefers-reduced-motion so consumer components inherit the override without per-component media queries. Update the Guides/Motion doc to remove the no-tokens disclaimer, document the new tokens with usage tables, and call out the upstream follow-up to consolidate into @kajabi-ui/styles. * feat(motion): strengthen contract comment, migrate pds-modal backdrop Address review feedback on the motion-tokens PR: - Strengthen the namespace contract comment in _motion.scss to make clear Pine is claiming the upstream-canonical names and that the file is to be removed when @kajabi-ui/styles publishes motion. - Migrate pds-modal __backdrop transition from raw 0.2s ease to var(--pine-motion-duration-base) var(--pine-motion-easing-out) so the new tokens have at least one production consumer. - Document the reduced-motion limitation (override applies to duration only; JS-driven animations need their own matchMedia check). * style(pds-modal): use ease-in on backdrop exit, ease-out on enter * fix(pds-table): flip fixed-column shadow offset in RTL * fix: address RTL review feedback for form controls and tooltip Correct checkbox checkmark mirroring, switch knob positioning, filter popover anchor placement, input addon select radii, select disabled icon dimming, and tooltip html-content arrow alignment under dir=rtl. * fix: resolve select radius and filter RTL direction bot feedback Drop the border-radius shorthand that reset per-corner overrides on pds-select, and detect RTL via computed direction on the filter host instead of documentElement.dir only. * fix(pds-filter): use trigger right edge for RTL overflow check Popover anchors at inline-start (trigger right in RTL), so inline-end overflow must measure from triggerRect.right not left.
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
2 participants
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.
Description
Adds a Direction toolbar (LTR / RTL) to Storybook so contributors can spot-check components against the audit checklist introduced in docs/foundations.
What's new
libs/core/.storybook/preview.js— newwithDirectiondecorator +directionglobalType (toolbar icon, dynamic title, defaultltr). Appliesdirto<html>and<body>in both the story iframe and the docs frame, mirroring the consumer-app contract.libs/core/src/stories/guides/rtl-and-localization.docs.mdx— new How to audit section that points teams at the toolbar and clarifies the verification expectations (visual + keyboard + screen reader where applicable).What this PR does not do
The audit checklist stays intentionally unchecked. Rows should be marked off in the PR that proves behavior for each component, so the doc remains a record of what's actually been verified.
Dependency note
Based on
docs/foundations(#736) because the guide it extends is introduced there. Merge that first, then rebase this onmain.Closes a Level-4 "Localization" surfacing gap on the maturity scorecard.
Fixes #(no-issue)
Type of change
How Has This Been Tested?
Confirmed Storybook config syntax matches the existing
withThemepattern.Verified the new toolbar surfaces alongside the Theme toggle.
Reviewed the
dirpropagation pattern against the existing theme-decorator double-set (documentElement + body + parent docs frame).unit tests
e2e tests
accessibility tests
tested manually
other:
Test Configuration:
Checklist:
Follow-ups
rtl-and-localization.docs.mdx.rtlStorybook tag or per-story override so visual regression baselines include RTL renders.cc @Kajabi/dss-devs
Note
Low Risk
Storybook preview and documentation only; no runtime component or auth/data changes.
Overview
Adds a Direction Storybook toolbar (LTR / RTL) so contributors can preview components under
dir="rtl"without touching product apps.A new
withDirectiondecorator setsdiron the preview iframe’s<html>and<body>(defaultltr), following the same reactive pattern aswithThemebut without updatingwindow.parent, so Storybook’s own UI stays LTR.The RTL and localization guide replaces the “pending PR #739” note with Verifying in Storybook: how to use the toggle, what to spot-check (mirroring, overlays, a11y), and when to add Stencil/Storybook RTL coverage.
Reviewed by Cursor Bugbot for commit ca3e48b. Bugbot is set up for automated code reviews on this repo. Configure here.