Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +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 && {
fontWeight: theme.typography.fontWeightBold,
}),
contain: 'paint',
}));
export const StyledLabel = styled('span')(({ theme }) => ({

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

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