docs(foundations): add motion, RTL, status, and Code Connect coverage docs#736
Merged
Conversation
✅ Deploy Preview for pine-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
documentation
This was referenced May 15, 2026
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
QuintonJason
force-pushed
the
docs/foundations
branch
from
2c2fb97 to
18559ac
Compare
QuintonJason
force-pushed
the
docs/foundations
branch
from
18559ac to
a767e2d
Compare
… 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.
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.
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 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 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
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
QuintonJason
force-pushed
the
docs/foundations
branch
from
a1e3b01 to
27e247b
Compare
pixelflips
approved these changes
Jun 1, 2026
Member
There was a problem hiding this comment.
I see this is a docs update, so nothing is blocking here, but I did notice a few issues with components when trying out the LTR & RTL toggle. Will note the issues below, but feel free to ticket or fix in a follow-up.
RTL:
- checkbox - checked icon is backwards.
- checkbox - indeterminite - is out of alignment.
- filters - may have to check positioning of dropdown
- input (with prepend select) - on the dropdown button, radius seems off
- input (with append select) - on the dropdown button, radius seems off
- select - icon doesn't dim on disabled state (existing but noting)
- switch - toggle control layout broken when off
- tooltip (html content) - arrow doesn't align properly on the tooltip container
Otherwise LGTM! 👍🏼
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.
10 tasks
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.
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 af9470d. Configure here.
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
Lands four cross-cutting documents that close several gaps in the Pine design-system maturity map:
libs/core/src/stories/guides/motion.docs.mdx) — principles and implementation hints for component animation; explicitly flags the absence of dedicated motion tokens so consumers know where to align until tokens ship.libs/core/src/stories/guides/rtl-and-localization.docs.mdx) — what teams should assume today plus a per-component audit checklist that PRs check off as RTL behavior gets verified.libs/core/src/stories/resources/component-status.docs.mdx) — central Stable / Beta / Deprecated table covering all 35 components, with a documented update process tied to changelog entries.libs/figma/CODE_CONNECT_COVERAGE.md) — tracks which Pine components and patterns have a matching.figma.tsfile, with a list of unmapped components.Also cross-links the new Component status and RTL pages from the Support docs page so the team can find them from the channel directory.
This PR is foundation for follow-up quick-win PRs that build on these docs (per-component status badges, RTL audit execution, motion tokens). No code or behavior changes.
Fixes #(no-issue)
Type of change
How Has This Been Tested?
Verified locally:
The four new MDX docs render in Storybook (Guides/Motion, Guides/RTL and localization, Resources/Component status).
The Code Connect coverage table cross-references real files under
libs/figma/.The Support docs cross-links resolve.
unit tests
e2e tests
accessibility tests
tested manually
other:
Test Configuration:
Checklist:
Follow-ups (separate PRs)
cc @Kajabi/dss-devs
Note
Medium Risk
Touches overlay positioning (filters), horizontal scroll semantics (tables), and visual states across many form components; regressions are possible in LTR and especially RTL, though changes are mostly CSS and shared scroll helpers with tests.
Overview
Adds RTL-aware layout and behavior across Pine core: Storybook gets a Direction toolbar (
withDirectionon the preview iframe only), plus new Guides/RTL and localization and Support cross-links.Introduces
scrollutilities (RTLscrollLeftmodels,getScrollOffsetFromStart,isScrolledFromInlineStart) with unit tests, wired intopds-tableresponsive shadows and fixed-column scroll state.pds-filterpopover flipping and fallback positioning now respect inline-end overflow under RTL; several form controls swap physicalleft/rightfor logical inset/border properties (checkbox checkmarks, combobox icon, input/select, switch thumb, table cells).Ships Pine-internal motion tokens (
_motion.scss, imported inapp.scss), documents them in Guides/Motion, and adopts them onpds-modalbackdrop transitions (withprefers-reduced-motionduration collapse). Also addslibs/figma/CODE_CONNECT_COVERAGE.mdand small polish (e.g. disabled select chevron, tooltipfit-content).Reviewed by Cursor Bugbot for commit 716f220. Bugbot is set up for automated code reviews on this repo. Configure here.