fix(components): Keep dismiss on drawers aligned to top when titles wrap #2011
Conversation
Deploying atlantis with
|
| Latest commit: |
f877b2f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5b733494.atlantis.pages.dev |
| Branch Preview URL: | https://align-sidedrawer-header-top.atlantis.pages.dev |
fagnanm
changed the title
fagnanm
changed the title
| @@ -1,6 +1,6 @@ | |||
| .container { | |||
| --drawer-width: 280px; | |||
| --drawer--base-padding: var(--space-large); | |||
| --drawer--base-padding: var(--space-base); | |||
There was a problem hiding this comment.
Made the padding match sideDrawer so they are the same
| } | ||
|
|
||
| /* Make sure the dismiss button doesn't get squished when title is longer */ | ||
| .header > button { |
There was a problem hiding this comment.
Fixed an existing issue with the button shrinking if the title was too long
| gap: var(--space-base); | ||
| } | ||
|
|
||
| .heading { |
There was a problem hiding this comment.
Do we need overflow: hidden in heading or something similar?
If I have a long word, the dismiss icon goes beyond the page at a smaller breakpoint/when the drawer snaps to a smaller size.
SideDrawer seems to handle it a bit better
There was a problem hiding this comment.
@taylorvnoj I'll see if I can fix that, sometimes limited CSS solutions to really long words when their containers are smaller.
There was a problem hiding this comment.
@taylorvnoj played with a few things but I don't believe this will be fixable without some potential unpredictability in where words break. We could do something like word-break: break-word which will work in some cases but it doesn't have a predictable pattern on where it breaks the words, which is usually an accessibility concern for a screen reader.
I'd say we don't solve it given how many drawers have titles set by us. In cases where drawer titles are set by the user, I imagine it would be very uncommon to have words that exceed the width of the drawer.
There was a problem hiding this comment.
Okay, that's fair. I do want us at a team to think about/consider localization as well but for the reasons you mentioned I agree that we can leave this as is.
We also have many more uses of SideDrawer than Drawer in product.
|
Published Pre-release for f877b2f with versions: To install the new version(s) for Web run: |
Motivations
When there are longer titles on drawers (like in Automations where the title is user-generated) the dismiss button tries to align center with the height of the title making things look real weird.
Changes
Adjusted the structure of the headers on
drawerandsideDrawerslightly so that the titles appear center aligned but are actually aligned to the start of the container. This keeps the dismiss button and subsequent actions in the right place even if the title wraps onto more than one line.Changed
Before
Side Drawer
Drawer
After
Side Drawer
Drawer
Testing
Try adding titles that wrap onto more than one line and ones that do not. Actions in the headers should still align center with the heading.
Changes can be
tested via Pre-release
In Atlantis we use Github's built in pull request reviews.