Skip to content
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

chore(weave): adding tooltip for overflowing text in modified dropdown #1659

Merged
merged 6 commits into from
May 21, 2024

Conversation

mbarrramsey
Copy link
Contributor

@mbarrramsey mbarrramsey commented May 17, 2024

Jira: https://wandb.atlassian.net/browse/WB-14570

Adding a tooltip for overflowing text in the modified dropdown. This adds a tooltip if the selected option or list of options is overflowing.

Before

Screen.Recording.2024-05-17.at.11.40.58.AM.mov
Screenshot 2024-05-17 at 11 40 48 AM

After

Screen.Recording.2024-05-17.at.11.41.14.AM.mov
Screen.Recording.2024-05-17.at.11.42.17.AM.mov

@mbarrramsey mbarrramsey requested a review from a team as a code owner May 17, 2024 18:26
@github-actions github-actions bot locked and limited conversation to collaborators May 17, 2024
@mbarrramsey mbarrramsey reopened this May 17, 2024
@mbarrramsey mbarrramsey marked this pull request as draft May 17, 2024 18:27
@mbarrramsey mbarrramsey changed the title adding tooltip for overflowing text in modified dropdown chore(weave): adding tooltip for overflowing text in modified dropdown May 17, 2024
line-height: 1.2;
}
.menu .item {
line-height: 1.2 !important;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need this to override the list of options line height for some reason

@mbarrramsey mbarrramsey marked this pull request as ready for review May 17, 2024 19:09
Comment on lines +427 to +429
if (searchQuery) {
return '';
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: what does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes the option hidden when the user is typing a search query to avoid both text showing up at once:
Screenshot 2024-05-21 at 12 12 49 PM

@@ -460,3 +468,46 @@ const ModifiedDropdown: FC<ModifiedDropdownProps> = React.memo(
);

export default ModifiedDropdown;

const OptionWithTooltip = ({text}: any) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: could we avoid the any type here?

Suggested change
const OptionWithTooltip = ({text}: any) => {
const OptionWithTooltip = ({text}: {text: string}) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding the string type but needed to cast as string due to the Option type having many possible types
Screenshot 2024-05-21 at 12 14 22 PM

@mbarrramsey
Copy link
Contributor Author

Responded to comments @connieelee, let me know if there are any more questions, thanks!

@connieelee
Copy link
Contributor

@mbarrramsey lgtm!

@mbarrramsey mbarrramsey merged commit 0b872fe into master May 21, 2024
23 of 24 checks passed
@mbarrramsey mbarrramsey deleted the mbarrramsey/modified_dropdown_overflow branch May 21, 2024 20:48
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants