Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

Fix: Horizontal hyperscroll on project flag list (#10436)

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-07-30 11:53:25 +02:00 committed by GitHub
parent 32996460df
commit a2d179e1f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
View File

@ -54,6 +54,7 @@ export const StyledButton = styled('button', {
...(isSorted && { ...(isSorted && {
fontWeight: theme.typography.fontWeightBold, fontWeight: theme.typography.fontWeightBold,
}), }),
contain: 'paint',
})); }));
export const StyledLabel = styled('span')(({ theme }) => ({ export const StyledLabel = styled('span')(({ theme }) => ({

79
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
View File

@ -9,7 +9,6 @@ import {
useState, useState,
} from 'react'; } from 'react';
import { Tooltip } from '@mui/material'; import { Tooltip } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext'; import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
import { import {
StyledButton, StyledButton,
@ -52,7 +51,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
styles, styles,
}) => { }) => {
const { setAnnouncement } = useContext(AnnouncerContext); const { setAnnouncement } = useContext(AnnouncerContext);
const [title, setTitle] = useState(''); const [tooltipTitle, setTooltipTitle] = useState('');
const ref = useRef<HTMLSpanElement>(null); const ref = useRef<HTMLSpanElement>(null);
const ariaSort = isSorted const ariaSort = isSorted
@ -93,17 +92,17 @@ export const CellSortable: FC<ICellSortableProps> = ({
}, [align]); }, [align]);
useEffect(() => { useEffect(() => {
const newTitle = const newTooltipTitle =
ariaTitle && ariaTitle &&
ref.current && ref.current &&
ref?.current?.offsetWidth < ref?.current?.scrollWidth ref?.current?.offsetWidth < ref?.current?.scrollWidth
? `${children}` ? `${children}`
: ''; : '';
if (newTitle !== title) { if (newTooltipTitle !== tooltipTitle) {
setTitle(newTitle); setTooltipTitle(newTooltipTitle);
} }
}, [setTitle, ariaTitle]); }, [setTooltipTitle, ariaTitle]);
return ( return (
<StyledTableCell <StyledTableCell
@ -114,42 +113,40 @@ export const CellSortable: FC<ICellSortableProps> = ({
isFlexGrow={isFlexGrow} isFlexGrow={isFlexGrow}
isSortable={isSortable} isSortable={isSortable}
> >
<ConditionallyRender {isSortable ? (
condition={isSortable} <Tooltip title={tooltipTitle} arrow>
show={ <StyledButton
<Tooltip title={title} arrow> isSorted={isSorted}
<StyledButton type='button'
isSorted={isSorted} onClick={onSortClick}
type='button' >
onClick={onSortClick} <StyledHiddenMeasurementLayer
style={alignStyle}
aria-hidden
> >
<StyledHiddenMeasurementLayer <StyledLabel tabIndex={-1} data-text={children}>
style={alignStyle} {children}
aria-hidden </StyledLabel>
> <SortArrow
<StyledLabel tabIndex={-1} data-text={children}> isSorted={isSorted}
{children} isDesc={isDescending}
</StyledLabel> />
<SortArrow </StyledHiddenMeasurementLayer>
isSorted={isSorted} <StyledVisibleAbsoluteLayer style={alignStyle}>
isDesc={isDescending} <span ref={ref} tabIndex={-1}>
/> <span>{children}</span>
</StyledHiddenMeasurementLayer> </span>
<StyledVisibleAbsoluteLayer style={alignStyle}> <SortArrow
<span ref={ref} tabIndex={-1}> isSorted={isSorted}
<span>{children}</span> isDesc={isDescending}
</span> className='sort-arrow'
<SortArrow />
isSorted={isSorted} </StyledVisibleAbsoluteLayer>
isDesc={isDescending} </StyledButton>
className='sort-arrow' </Tooltip>
/> ) : (
</StyledVisibleAbsoluteLayer> <div style={alignStyle}>{children}</div>
</StyledButton> )}
</Tooltip>
}
elseShow={<div style={alignStyle}>{children}</div>}
/>
</StyledTableCell> </StyledTableCell>
); );
}; };

2
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -148,7 +148,7 @@ exports[`renders an empty list correctly 1`] = `
<button <button
aria-label="" aria-label=""
aria-labelledby={null} aria-labelledby={null}
className=" css-sskrcd" className=" css-3uw884"
data-mui-internal-clone-element={true} data-mui-internal-clone-element={true}
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}