Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

Update the design of change request filters to be one contiguous button instead of separate buttons.

Browse Source 
This is in prep for adding a new set of filters, which will make each group visually separated.
This commit is contained in:
Thomas Heartman 2025-10-24 09:36:34 +02:00
parent dc745cfac8
commit 0efae21e66
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx
View File

@ -1,22 +1,48 @@
import { Box, Chip, styled } from '@mui/material'; import { Box, Chip, styled, type ChipProps } from '@mui/material';
import { useState, type FC } from 'react'; import { useState, type FC } from 'react';
const StyledChip = styled(Chip)(({ theme }) => ({ const makeStyledChip = (ariaControlTarget: string) =>
borderRadius: `${theme.shape.borderRadius}px`, styled(({ ...props }: ChipProps) => (
padding: theme.spacing(0.5), <Chip variant='outlined' aria-controls={ariaControlTarget} {...props} />
fontSize: theme.typography.body2.fontSize, ))<ChipProps>(({ theme, label }) => ({
height: 'auto', padding: theme.spacing(0.5),
'&[aria-current="true"]': { fontSize: theme.typography.body2.fontSize,
backgroundColor: theme.palette.secondary.light, height: 'auto',
fontWeight: 'bold', '&[aria-current="true"]': {
borderColor: theme.palette.primary.main, backgroundColor: theme.palette.secondary.light,
color: theme.palette.primary.main, fontWeight: 'bold',
}, borderColor: theme.palette.primary.main,
':focus-visible': { color: theme.palette.primary.main,
outline: `1px solid ${theme.palette.primary.main}`, },
borderColor: theme.palette.primary.main, ':focus-visible': {
}, outline: `1px solid ${theme.palette.primary.main}`,
})); borderColor: theme.palette.primary.main,
},
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
'&:last-of-type': {
borderTopRightRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
},
'& .MuiChip-label': {
position: 'relative',
textAlign: 'center',
'&::before': {
content: `'${label}'`,
fontWeight: 'bold',
visibility: 'hidden',
height: 0,
display: 'block',
overflow: 'hidden',
userSelect: 'none',
},
},
}));
export type ChangeRequestQuickFilter = 'Created' | 'Approval Requested'; export type ChangeRequestQuickFilter = 'Created' | 'Approval Requested';
@ -34,12 +60,11 @@ const Wrapper = styled(Box)(({ theme }) => ({
gap: theme.spacing(2), gap: theme.spacing(2),
})); }));
const StyledContainer = styled(Box)(({ theme }) => ({ const StyledContainer = styled(Box)({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: theme.spacing(1), });
}));
export const ChangeRequestFilters: FC<IChangeRequestFiltersProps> = ({ export const ChangeRequestFilters: FC<IChangeRequestFiltersProps> = ({
onSelectionChange, onSelectionChange,
@ -57,22 +82,20 @@ export const ChangeRequestFilters: FC<IChangeRequestFiltersProps> = ({
onSelectionChange(value); onSelectionChange(value);
}; };
const StyledChip = makeStyledChip(ariaControlTarget);
return ( return (
<Wrapper> <Wrapper>
<StyledContainer> <StyledContainer>
<StyledChip <StyledChip
label={'Created'} label={'Created'}
variant='outlined'
aria-current={selected === 'Created'} aria-current={selected === 'Created'}
aria-controls={ariaControlTarget}
onClick={handleSelectionChange('Created')} onClick={handleSelectionChange('Created')}
title={'Show change requests created by you'} title={'Show change requests created by you'}
/> />
<StyledChip <StyledChip
label={'Approval Requested'} label={'Approval Requested'}
variant='outlined'
aria-current={selected === 'Approval Requested'} aria-current={selected === 'Approval Requested'}
aria-controls={ariaControlTarget}
onClick={handleSelectionChange('Approval Requested')} onClick={handleSelectionChange('Approval Requested')}
title={'Show change requests requesting your approval'} title={'Show change requests requesting your approval'}
/> />