fix: popover alignment for rtl / useLogicalProperties by dreamwasp · Pull Request #3326 · Codecademy/gamut

dreamwasp · 2026-04-15T15:37:07Z

Overview

fixes Popover alignment when dir is rtl.

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1601
Version plan added/updated (or not needed)
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

Go to Popover story
Turn on useLogicalProperties and make dir rtl
See the Popover is now properly aligned

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-04-15T15:40:06Z

View your CI Pipeline Execution ↗ for commit f8e549e

☁️ Nx Cloud last updated this comment at 2026-04-16 20:35:27 UTC

codecov · 2026-04-15T15:42:43Z

Codecov Report

❌ Patch coverage is 97.50000% with 1 line in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (cass-gmt-1601@6efbb0b). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ages/gamut/src/Tip/shared/popoverAlignmentUtils.ts	96.42%	1 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff                @@
##             cass-gmt-1601    #3326   +/-   ##
================================================
  Coverage                 ?   89.23%           
================================================
  Files                    ?      251           
  Lines                    ?     4711           
  Branches                 ?     1597           
================================================
  Hits                     ?     4204           
  Misses                   ?      499           
  Partials                 ?        8

Flag	Coverage Δ
pull-request	`89.23% <97.50%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecademydev · 2026-04-16T20:36:19Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`68.2.3-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.3-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.10-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-kit`	`0.6.593-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.29-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-styles`	`17.13.2-alpha.d44ad5.0`	npm	diff
`@codecademy/gamut-tests`	`5.3.4-alpha.d44ad5.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.d44ad5.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.d44ad5.0`	npm	diff

github-actions · 2026-04-16T20:38:35Z

🚀 Styleguide deploy preview ready!

Preview URL: https://69e148c606bc607bbac175d5--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69e148c606bc607bbac175d5

LinKCoding

I'm hovering on approving, but had some questions

The biggest one that gives me pause is how the horizontal alignment example's beaks seem to be inverted when the FlexBox has a set dir.

LinKCoding · 2026-04-17T13:36:13Z

+- **`align="center"`:** not mirrored as left/right; it stays centered on the anchor for that `position`.
+- **`beak`:** for `above` / `below`, a **corner** beak follows **`align`**. Use **`beak="center"`** for a triangle centered on that edge.
+
+To preview in Storybook, wrap the trigger (or an ancestor) with **`dir="rtl"`**, or rely on your app’s locale if it sets `dir` on `document.documentElement`. See <LinkTo id="Meta/Logical and physical CSS properties">Logical and physical CSS properties</LinkTo> for `useElementDir`, the imperative `elementDir` helper, and logical vs physical CSS in Gamut. Lower-level positioning without `Popover` is documented on <LinkTo id="Atoms/PopoverContainer">PopoverContainer</LinkTo>.


Is the wrapping of the trigger necessary?
Shouldn't the LTR/RTL button do this? i.e. change the document's dir?

oh yeah this is wrong, i'll edit

resolved in: #3330

LinKCoding · 2026-04-17T14:32:38Z

+  paddingInlineStart: containerOffsetVertical,
+  insetInlineStart: '100%',


Should this and the other alignment styles be conditionally set based on useLogicalProperties?

good point, will change!

coming back to this after spending more time on it, and it seems like there is a non-trivial amount of work needed to perform this swapping for physical properties that render correctly for RTL (and LTR)

we can't just use a hook in this, and since this function is being used to generate variants (and not a component), I think the most gamut way to implement this is to create a function that gets the value of useLogicalProperties that then returns the correct CSS for popover alignment, and then some logic for the beak alignment.

But in the process of doing this, I don't know if that's worth the effort (that might need to be refactored later anyway).

I'm going to rescind my comment before, and say that this works well and renders as intended. (After the horizontalBeakRtlInline is added back)

LinKCoding · 2026-04-17T14:50:13Z


 export const InteractiveElement: Story = {
  render: () => (
    <FlexBox center m={32}>


Adding some spacing or justify-* here would be good since all the buttons are smooshed together

LinKCoding · 2026-04-17T14:50:25Z

+        placement="floating"
+      >
+        <FillButton aria-describedby="floating-ex-lc" icon={StudyBookIcon}>
+          lert center


lert => left

resolved in: #3330

LinKCoding · 2026-04-17T15:05:02Z

+
+export const HorizontalAlignmentsRtl: Story = {
+  render: () => (
+    <FlexBox dir="rtl" justifyContent="space-around" m={24} width="95%">


It's weird b.c. this happens only when the dir is added the FlexBox. And happens regardless of physical/logical or LTR/RTL button config in the toolbar.
Maybe there's some confusion about what dir to actually use? i.e. the parent or the document's?

QQ: was this just for testing purposes? i.e. cleaned up after? or should it also on the mdx?

I think it's a good example for showcasing floating tooltips :)

yeah weird, i'll look into it

i think this was happening cos i (robot) accidentally refactored the physical properties to logical, i'm reverting that! i was just using it for testing but i'll put it int the proper mdx

I think the horizontalCenterBeakRtlInline function that was removed before works well here.

Curious why it was removed?
I added it back in #3330
and it seems to do the trick

fix: popover, need to test invertAxis

0673ae4

dreamwasp changed the title ~~fix: popover, need to test invertAxis~~ fix: popover Apr 16, 2026

tooltip

f8e549e

dreamwasp marked this pull request as ready for review April 16, 2026 21:00

dreamwasp requested a review from a team as a code owner April 16, 2026 21:00

dreamwasp changed the title ~~fix: popover~~ fix: popover alignment for rtl / useLogicalProperties Apr 16, 2026

dreamwasp requested a review from LinKCoding April 16, 2026 21:00

LinKCoding reviewed Apr 17, 2026

View reviewed changes

		paddingInlineStart: containerOffsetVertical,
		insetInlineStart: '100%',

Conversation

dreamwasp commented Apr 15, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecademydev commented Apr 16, 2026

Uh oh!

github-actions Bot commented Apr 16, 2026

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dreamwasp commented Apr 15, 2026 •

edited by atlassian Bot

Loading

nx-cloud Bot commented Apr 15, 2026 •

edited

Loading

codecov Bot commented Apr 15, 2026 •

edited

Loading