pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(dashboard): Fix hover labels for horizontal overflow native filter dividers (#22210) 

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Cody Leff 2022-11-28 04:35:13 -07:00 committed by GitHub
parent 4b96474d6c
commit 93158ea649
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
View File

@ -59,6 +59,7 @@ test('horizontal mode, title', () => {
orientation={FilterBarOrientation.HORIZONTAL} orientation={FilterBarOrientation.HORIZONTAL}
title={SAMPLE_TITLE} title={SAMPLE_TITLE}
description="" description=""
overflow
/>, />,
); );
@ -88,9 +89,7 @@ test('horizontal mode, title and description', async () => {
const descriptionIcon = screen.getByTestId('divider-description-icon'); const descriptionIcon = screen.getByTestId('divider-description-icon');
expect(descriptionIcon).toBeVisible(); expect(descriptionIcon).toBeVisible();
userEvent.hover(descriptionIcon); userEvent.hover(descriptionIcon);
const tooltip = await screen.findByRole('tooltip', { const tooltip = await screen.findByRole('tooltip');
name: SAMPLE_DESCRIPTION,
});
expect(tooltip).toBeInTheDocument(); expect(tooltip).toBeInTheDocument();
expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION); expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);

6
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
View File

@ -35,7 +35,7 @@ const VerticalDivider = ({ title, description }: FilterDividerProps) => (
const HorizontalDivider = ({ title, description }: FilterDividerProps) => { const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
const theme = useTheme(); const theme = useTheme();
const [titleRef, titleIsTruncated] = const [titleRef, titleIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(title); useCSSTextTruncation<HTMLHeadingElement>();
const tooltipOverlay = ( const tooltipOverlay = (
<> <>
@ -95,10 +95,10 @@ const HorizontalOverflowDivider = ({
}: FilterDividerProps) => { }: FilterDividerProps) => {
const theme = useTheme(); const theme = useTheme();
const [titleRef, titleIsTruncated] = const [titleRef, titleIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(title); useCSSTextTruncation<HTMLHeadingElement>();
const [descriptionRef, descriptionIsTruncated] = const [descriptionRef, descriptionIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(description); useCSSTextTruncation<HTMLHeadingElement>();
return ( return (
<div <div

25
superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
View File

@ -36,16 +36,27 @@ export const truncationCSS = css`
* to be displayed, this hook returns a ref to attach to the text * to be displayed, this hook returns a ref to attach to the text
* element and a boolean for whether that element is currently truncated. * element and a boolean for whether that element is currently truncated.
*/ */
const useCSSTextTruncation = <T extends HTMLElement>( const useCSSTextTruncation = <T extends HTMLElement>(): [
text: string, React.RefObject<T>,
): [React.RefObject<T>, boolean] => { boolean,
const ref = useRef<T>(null); ] => {
const [isTruncated, setIsTruncated] = useState(true); const [isTruncated, setIsTruncated] = useState(true);
const ref = useRef<T>(null);
const { offsetWidth, scrollWidth } = ref.current ?? {};
const prevWidths = useRef({ offsetWidth, scrollWidth });
const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
prevWidths.current;
useEffect(() => { useEffect(() => {
if (ref.current) { if (
setIsTruncated(ref.current.offsetWidth < ref.current.scrollWidth); offsetWidth &&
scrollWidth &&
(offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
) {
prevWidths.current = { offsetWidth, scrollWidth };
setIsTruncated(offsetWidth < scrollWidth);
} }
}, [text]); }, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
return [ref, isTruncated]; return [ref, isTruncated];
}; };