fix: popover alignment for rtl / useLogicalProperties#3326
fix: popover alignment for rtl / useLogicalProperties#3326dreamwasp wants to merge 3 commits intocass-gmt-1601from
Conversation
|
View your CI Pipeline Execution ↗ for commit 5bbd863 ☁️ Nx Cloud last updated this comment at |
|
dreamwasp
changed the title
LinKCoding
left a comment
LinKCoding
left a comment
There was a problem hiding this comment.
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.
| paddingInlineStart: containerOffsetVertical, | ||
| insetInlineStart: '100%', |
There was a problem hiding this comment.
Should this and the other alignment styles be conditionally set based on useLogicalProperties?
There was a problem hiding this comment.
good point, will change!
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
Adding some spacing or justify-* here would be good since all the buttons are smooshed together
|
|
||
| export const HorizontalAlignmentsRtl: Story = { | ||
| render: () => ( | ||
| <FlexBox dir="rtl" justifyContent="space-around" m={24} width="95%"> |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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 :)
There was a problem hiding this comment.
yeah weird, i'll look into it
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
|
📬 Published Alpha Packages:
|
|
🚀 Styleguide deploy preview ready! Preview URL: https://69e907f7b4de5c04ae64ab1d--gamut-preview.netlify.app |
3 participants
Overview
fixes Popover alignment when
dirisrtl.PR Checklist
Testing Instructions
Don't make me tap the sign.
PR Links and Envs