-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
cleanup data reference tooltips #47747
Conversation
@@ -30,9 +31,7 @@ const ListItem = ({ | |||
</div> | |||
<div className={S.itemBody}> | |||
<div className={S.itemTitle}> | |||
<ListItemName tooltip={name} tooltipMaxWidth="100%"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tooltipMaxWidth
here was the biggest sin. I think with our old tooltip, this was based on the width of the container, and our new tooltips get appended to the body so the container is the screen width.
<ListItemName tooltip={name} tooltipMaxWidth="100%"> | ||
<h3>{name}</h3> | ||
</ListItemName> | ||
<Ellipsified tooltip={name}>{name}</Ellipsified> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I killed this styled component because it just made it all harder to reason about
@@ -30,9 +31,7 @@ const ListItem = ({ | |||
</div> | |||
<div className={S.itemBody}> | |||
<div className={S.itemTitle}> | |||
<ListItemName tooltip={name} tooltipMaxWidth="100%"> | |||
<h3>{name}</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nesting a component inside ellipsified prevented anything from actually getting an ellipsis
* cleanup data reference tooltips * update test # Conflicts: # frontend/src/metabase/components/ListItem/ListItem.styled.tsx
* cleanup data reference tooltips * update test
discussion
Description
Before
Some short things get enormous tooltips
Some long things don't get tooltips or ellipses at all
After
Tooltips are a normal size, and long names get ellipsified properly
There are still some cases where tooltips show up unnecessarily, but I didn't want to waste any more time on that.