chore(GamutProvider): useLogicalProperties hook#3306
chore(GamutProvider): useLogicalProperties hook#3306
Conversation
|
View your CI Pipeline Execution ↗ for commit e0b009f ☁️ Nx Cloud last updated this comment at |
|
Move DOM direction resolution (including JSDOM fallback) into @codecademy/gamut-styles utilities and export alongside useLogicalProperties. Made-with: Cursor
|
📬 Published Alpha Packages:
|
|
🚀 Styleguide deploy preview ready! Preview URL: https://69d52f0c905e9f1c148d60dc--gamut-preview.netlify.app |
| @@ -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(' ')}` | |||
There was a problem hiding this comment.
i was getting an error when trying to commit files with spaces, this fixes that.
LinKCoding
left a comment
LinKCoding
left a comment
There was a problem hiding this comment.
Left thoughts, not blocking
This is much cleaner now :) thanks!
| import type { RefObject } from 'react'; | ||
| import { useEffect, useLayoutEffect, useReducer } from 'react'; | ||
|
|
||
| /** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */ |
There was a problem hiding this comment.
nit: could go over the comments on this file with the robot to refactor them in JSDoc styled comments
| import { useTheme } from '@emotion/react'; | ||
|
|
||
| /** | ||
| * Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.) |
There was a problem hiding this comment.
nit: "emit" feels a little off to me, maybe "map to"? or "resolve to"?
| * Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.) | ||
| * vs physical (`marginLeft`, etc.). | ||
| * | ||
| * `GamutProvider` always merges an explicit boolean (default `false`). |
There was a problem hiding this comment.
Just noting that this should change later when the default is also changed
| // Log logical properties to the console TEST CODE | ||
| const logicalProperties = useLogicalProperties(); | ||
| console.log('dir', isRtl, 'logicalProperties', logicalProperties); |
There was a problem hiding this comment.
These can be cleaned up now
| }); | ||
| return () => observer.disconnect(); | ||
| }, [targetRef]); | ||
| const isRtl = useElementDir(targetRef) === 'rtl'; |
There was a problem hiding this comment.
Thanks for doing this!
fwiw, I made an addition to the popover ticket that involved this clean up: https://skillsoftdev.atlassian.net/browse/GMT-1598?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
And was doing some clean-up here: #3317
but I like your type clean-up more :) will close mine
There was a problem hiding this comment.
that is to say, I'd say assign yourself and mark as done if no one gets back to you re: inverting
| ## `GamutProvider` and `useLogicalProperties` | ||
|
|
||
| Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. This allows you to choose which mode your application uses. By default, `useLogicalProperties` is set to `true`, meaning Gamut will use logical CSS properties. If you want to use physical CSS properties, you have to set `useLogicalProperties` to `false`. | ||
| Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. By default it is `false`, so Gamut emits **physical** CSS (`margin-left`, `width`, and so on). Pass `useLogicalProperties={true}` to emit **logical** CSS (`margin-inline-start`, `inline-size`, and so on). |
There was a problem hiding this comment.
same nit: "emit" to "resolve to" or something like that
|
|
||
| The hook returns `theme.useLogicalProperties` from `@emotion/react`’s `useTheme()`. `GamutProvider` merges the prop into the theme object, so this value stays aligned with system props. | ||
|
|
||
| Use it when you need conditional styles or layout logic that must mirror Gamut’s physical vs logical output. If you mount `ThemeProvider` without merging `useLogicalProperties` into the theme, the hook may return `undefined`; prefer `GamutProvider` or set the field on your theme explicitly. |
|
|
||
| In custom components, read the same flag Emotion-styled Gamut components use via `useLogicalProperties()` from `@codecademy/gamut-styles`: | ||
|
|
||
| <Code>{`import { useLogicalProperties } from '@codecademy/gamut-styles';`}</Code> |
There was a problem hiding this comment.
| <Code>{`import { useLogicalProperties } from '@codecademy/gamut-styles';`}</Code> | |
| ``` | |
| import { useLogicalProperties } from '@codecademy/gamut-styles'; | |
| ``` |
There was a problem hiding this comment.
Since this code is a separate block, I think using ``` makes sense here
|
|
||
| `useElementDir` resolves the effective text direction (`'rtl'` or `'ltr'`) for a DOM subtree. Import it from `@codecademy/gamut-styles`: | ||
|
|
||
| <Code>{`import { useElementDir } from '@codecademy/gamut-styles';`}</Code> |
There was a problem hiding this comment.
| <Code>{`import { useElementDir } from '@codecademy/gamut-styles';`}</Code> | |
| ``` | |
| import { useElementDir } from '@codecademy/gamut-styles'; | |
| ``` |
There was a problem hiding this comment.
Same comment about block code
|
|
||
| For non-React code, the same rules apply via the imperative `elementDir(el)` export. | ||
|
|
||
| `PopoverContainer` uses `useElementDir(targetRef) === 'rtl'` for RTL-aware positioning and visuals. |
There was a problem hiding this comment.
This info seems like it should be included in PopoverContainer instead and have a link to this page on logical props.
3 participants
Overview
adds
useLogicalPropertieshook togamut-styles+ reorganizes utility folders ingamut-stylesPR Checklist
Testing Instructions
PR Links and Envs