Patch CodeModal and TitleCardList #266
Conversation
use direction-responsive margin, apply black hover text color to all child text (fixes contrast ratio on dark mode hovering)
wackerow
requested review from
corwintines,
pettinarip,
minimalsm and
nhsz
as code owners
✅ Deploy Preview for ethereum-org-fork ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| style={{ | ||
| right: "unset", | ||
| insetInlineEnd: "var(--eth-sizes-4)", | ||
| }} |
There was a problem hiding this comment.
This is a chakra component. Why not use style props?
| style={{ | |
| right: "unset", | |
| insetInlineEnd: "var(--eth-sizes-4)", | |
| }} | |
| right="unset" | |
| insetInlineEnd="4" |
There was a problem hiding this comment.
Tried this to start but I'm realizing that the insetInlineEnd style prop does not seem to be properly recognized by our Chakra components... this has let to a handful of bugs throughout the site where we replaced "left" or "right" with these style props and are not being recognized
For example, https://staging--ethereumorg.netlify.app/ar/roadmap If you go to our current staging branch, this page is set to rtl but our use of these style props in the hero are not working, which is why the Title box is still on the left.
I have another PR open on the canonical repo to address some of these:
https://github.com/ethereum/ethereum-org-website/pull/11905/files
Not 100% sure why these specific style props don't seem to be recognized... @TylerAPfledderer Any idea on this one?
There was a problem hiding this comment.
We may be able to get away with right="unset", but the other I've found only works if I nest inside style.
And small alternative as well if we want to make it a little more Chakra-native, could use const insetInlineEnd = useToken("space", "4") and then style={{ insetInlineEnd }}
There was a problem hiding this comment.
Ah okok, no worries then. Didn't know about that problem 🤔
Description
ModalCloseButtonstyling to force direction-responsive absolute positioning usinginsetInlineEndinstead of defaultright... fixes overlapping text on RTL localesmlwithmsfor code example list positioning on desktopCodeModalusing latest code conventionsRelated Issue
Close button on code example modal (homepage) was overlapping with label for RTL langs:
Contrast ratio was un-readable when hovering code example options in dark mode, and right margin incorrect:
With fixes:
