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

fix: Filter names overflow wrap #25087

Conversation

michael-s-molina
Copy link
Member

SUMMARY

Fixes a problem with the overflow wrap of filter names.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2023-08-25.at.15.09.39.mov
Screen.Recording.2023-08-25.at.15.01.26.mov

TESTING INSTRUCTIONS

Check the videos for instructions.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@kgabryje
Copy link
Member

Judging by this CSS wrapping the filter name:

export const FilterName = styled.span`
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

I think the intention was to only display 1 line of filter's name and truncate the rest. Maybe we should fix the bug by ensuring that filter name respects its parent's width instead of removing truncation?

@michael-s-molina
Copy link
Member Author

michael-s-molina commented Aug 28, 2023

I think the intention was to only display 1 line of filter's name and truncate the rest. Maybe we should fix the bug by ensuring that filter name respects its parent's width instead of removing truncation?

The problem is that the FilterCard is already a tooltip and if we truncate the metric name we can't identify the metric.

@kgabryje
Copy link
Member

The problem is that the FilterCard is already a tooltip and if we truncate the metric name we can't identify the metric.

I think this was the behaviour before the regression with overflowing title:

image

(added max-width: 100% to parent component to trigger the overflow). Could you elaborate why that won't work?

@michael-s-molina
Copy link
Member Author

I thought we were avoiding tooltip on top of tooltip but it seems that's not the case given that Depend On will also show a tooltip. I'll add max-width: 100% to keep the previous behavior.

@kgabryje
Copy link
Member

I thought we were avoiding tooltip on top of tooltip but it seems that's not the case given that Depend On will also show a tooltip. I'll add max-width: 100% to keep the previous behavior.

I think we treat FilterCard more like a popover and given it has very different styling than a tooltip it's ok for us to use both here

@michael-s-molina
Copy link
Member Author

@kgabryje I roll back FilterCard to its previous behavior with the addition of overflow:hidden. max-width does not respect FilterCard's padding. Now it looks like:

Screenshot 2023-08-28 at 10 14 37

@@ -43,7 +43,7 @@ const VerticalFilterControlTitle = styled.h4`
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.grayscale.dark1};
margin: 0;
overflow-wrap: break-word;
overflow-wrap: anywhere;
Copy link
Member

Choose a reason for hiding this comment

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

Is this change still required?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, this correctly breaks the filter names in the native filters panel. The names are not truncated in that panel.

@kgabryje
Copy link
Member

@kgabryje I roll back FilterCard to its previous behavior with the addition of overflow:hidden. max-width does not respect FilterCard's padding. Now it looks like:

Screenshot 2023-08-28 at 10 14 37

Great thank you! It seems unrelated to your fix, but the behaviour of displaying the tooltip seems flaky - when I open a filter card for the first time, the truncated title shows tooltip on hover, but when I close the filter card and open it again the tooltip doesn't appear anymore. Let's keep that in mind to fix it soon

@michael-s-molina michael-s-molina merged commit b5bac6c into apache:master Aug 28, 2023
26 checks passed
@michael-s-molina michael-s-molina added the v3.0 Label added by the release manager to track PRs to be included in the 3.0 branch label Aug 29, 2023
michael-s-molina added a commit that referenced this pull request Aug 30, 2023
cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024
@mistercrunch mistercrunch added 🍒 3.0.0 🍒 3.0.1 🍒 3.0.2 🍒 3.0.3 🍒 3.0.4 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 3.1.0 labels Mar 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XS v3.0 Label added by the release manager to track PRs to be included in the 3.0 branch 🍒 3.0.0 🍒 3.0.1 🍒 3.0.2 🍒 3.0.3 🍒 3.0.4 🚢 3.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants