chore(GamutProvider, Popover, PopoverContainer): RTL fixes (#3306)

* chore(GamutProvider): useLogicalProperties hook

* feat(gamut-styles): add directionIsRtl utility

Move DOM direction resolution (including JSDOM fallback) into
@codecademy/gamut-styles utilities and export alongside useLogicalProperties.

* fix(InfoTip): update rtl styles (#3319)

* bug(InfoTip): update rtl styles

Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

* fix(InfoTip): update rtl styles (#3319)

* bug(InfoTip): update rtl styles

Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

* Update packages/styleguide/src/lib/Meta/Logical and physical CSS properties.mdx

Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>


* fix(Pagination): Previous and Next Buttons to respect RTL (#3316)

* chore: Update SelectDropdown Multi select to use logical properties (#3331)

* fix: popover alignment for rtl / useLogicalProperties (#3326)

* fix: popover, need to test invertAxis

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

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


Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

* fix(PopoverContainer): working in RTL  (#3333)

* using physical properties for PopoverContainer positioning, mirroring is manual
* fix tests

---------

Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

Author: dreamwasp

.lintstagedrc.mjs

@@ -1,5 +1,8 @@
 import micromatch from 'micromatch';
 
+/** Shell-safe argument for paths that may contain spaces (lint-staged runs commands via a shell). */
+const shellArg = (file) => JSON.stringify(file);
+
 export default {
   // Use custom function to avoid overlaps that could cause race conditions
   [`*`]: (allChanges) => {
@@ -22,14 +25,16 @@ export default {
 
     if (eslintFiles.length) {
       commands.push(
-        `node_modules/@codecademy/eslint-config/bin/eslint-fix.js ${eslintFiles.join(
-          ' '
-        )}`
+        `node_modules/@codecademy/eslint-config/bin/eslint-fix.js ${eslintFiles
+          .map(shellArg)
+          .join(' ')}`
       );
     }
 
     // Run nx format, which will run prettier
-    commands.push(`nx format:write --files ${allChanges}`);
+    commands.push(
+      `nx format:write --files ${allChanges.map(shellArg).join(' ')}`
+    );
 
     return commands;
   },

.nx/version-plans/version-plan-1775234017199.md

@@ -0,0 +1,6 @@
+---
+gamut-styles: minor
+gamut: minor
+---
+
+Updates the Pagination component to have its Previous/Next buttons' icon reflect the correct dir

.nx/version-plans/version-plan-1776109780823.md

@@ -0,0 +1,6 @@
+---
+gamut-styles: minor
+gamut: minor
+---
+
+feat: add useLogicalProperties + useElementDir hooks. fix: RTL left-center + right-center ToolTip and Pagination issues.

package.json

@@ -85,7 +85,7 @@
     "react-test-renderer": "18.3.1",
     "start-server-and-test": "^2.1.5",
     "storybook": "^10.3.1",
-    "storybook-addon-deep-controls": "^0.9.5",
+    "storybook-addon-deep-controls": "^0.10.0",
     "style-loader": "^4.0.0",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",

packages/gamut-styles/src/AssetProvider.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { webFonts } from './remoteAssets/fonts';
 import { coreTheme } from './themes';
-import { FontConfig, getFonts } from './utils/fontUtils';
+import { FontConfig, getFonts } from './utilities/fontUtils';
 
 /*
  * Only preload woff2 fonts, since woff1 are only included as fallbacks.

packages/gamut-styles/src/__tests__/AssetProvider.test.tsx

@@ -8,7 +8,7 @@ import { setupRtl } from './testUtils';
 
 const renderView = setupRtl(AssetProvider, {});
 
-jest.mock('../utils/fontUtils', () => ({
+jest.mock('../utilities/fontUtils', () => ({
   getFonts: jest.fn(),
 }));
 
@@ -43,7 +43,7 @@ jest.mock('../remoteAssets/fonts', () => ({
   },
 }));
 
-const mockGetFonts = require('../utils/fontUtils').getFonts;
+const mockGetFonts = require('../utilities/fontUtils').getFonts;
 
 describe('AssetProvider', () => {
   beforeEach(() => {

packages/gamut-styles/src/__tests__/fontLoading.test.tsx

@@ -6,7 +6,7 @@ import { coreTheme, percipioTheme } from '../themes';
 // Type assertion to satisfy Theme interface in GamutProvider from theme.d.ts - this lib is typed to the CoreTheme interface
 const typedPercipioTheme = percipioTheme as any;
 
-jest.mock('../utils/fontUtils', () => ({
+jest.mock('../utilities/fontUtils', () => ({
   getFonts: jest.fn(),
 }));
 
@@ -29,7 +29,7 @@ jest.mock('../remoteAssets/fonts', () => ({
   },
 }));
 
-const mockGetFonts = require('../utils/fontUtils').getFonts;
+const mockGetFonts = require('../utilities/fontUtils').getFonts;
 
 const mockDocumentFonts = {
   load: jest.fn(),

packages/gamut-styles/src/globals/Typography.tsx

@@ -2,7 +2,7 @@ import { css, Global } from '@emotion/react';
 import * as React from 'react';
 
 import { coreTheme } from '../themes';
-import { FontConfig, getFonts } from '../utils/fontUtils';
+import { FontConfig, getFonts } from '../utilities/fontUtils';
 
 /**
  * Typography component that applies global typography styles to the application.

packages/gamut-styles/src/remoteAssets/fonts.ts

@@ -1,4 +1,4 @@
-import { FontConfig } from '../utils/fontUtils';
+import { FontConfig } from '../utilities/fontUtils';
 
 export const FONT_ASSET_PATH = `https://www.codecademy.com/gamut`;
 

packages/gamut-styles/src/utilities/__tests__/elementDir.test.ts

@@ -0,0 +1,25 @@
+import { elementDir } from '../elementDir';
+
+describe('elementDir', () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute('dir');
+  });
+
+  it('returns rtl when the element has dir="rtl"', () => {
+    const el = document.createElement('div');
+    el.setAttribute('dir', 'rtl');
+    expect(elementDir(el)).toBe('rtl');
+  });
+
+  it('returns ltr when the element has dir="ltr"', () => {
+    const el = document.createElement('div');
+    el.setAttribute('dir', 'ltr');
+    expect(elementDir(el)).toBe('ltr');
+  });
+
+  it('falls back to documentElement dir when computed style is empty (JSDOM)', () => {
+    const el = document.createElement('div');
+    document.documentElement.setAttribute('dir', 'rtl');
+    expect(elementDir(el)).toBe('rtl');
+  });
+});