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 5b1c675

☁️ Nx Cloud last updated this comment at 2026-04-24 15:09:49 UTC

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

Codecov Report

❌ Patch coverage is 98.07692% 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.
⚠️ Report is 1 commits behind head on cass-gmt-1601.
✅ 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.26%           
================================================
  Files                    ?      251           
  Lines                    ?     4722           
  Branches                 ?     1593           
================================================
  Hits                     ?     4215           
  Misses                   ?      499           
  Partials                 ?        8

Flag	Coverage Δ
pull-request	`89.26% <98.07%> (?)`

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.

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-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

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

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

* update story and mdx * restore RTL beaks * add horizontal alignments story * ToolTip text update * applied Amy's feedback

* addressing corner beaks for popover alignment and tests

codecademydev · 2026-04-24T15:11:05Z

📬 Published Alpha Packages:

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

github-actions · 2026-04-24T15:12:53Z

🚀 Styleguide deploy preview ready!

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

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

LinKCoding added 2 commits April 22, 2026 13:34

fix: Address followups for ToolTip bugs RTL (#3330)

5bbd863

* update story and mdx * restore RTL beaks * add horizontal alignments story * ToolTip text update * applied Amy's feedback

fix(Popover): addressing left/right beak (#3332)

5b1c675

* addressing corner beaks for popover alignment and tests

		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!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

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!

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!

codecademydev commented Apr 24, 2026

Uh oh!

github-actions Bot commented Apr 24, 2026

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