diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx index cc23ba2efb..f4eaf5e39d 100644 --- a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx +++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx @@ -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'; -const StyledChip = styled(Chip)(({ theme }) => ({ - borderRadius: `${theme.shape.borderRadius}px`, - padding: theme.spacing(0.5), - fontSize: theme.typography.body2.fontSize, - height: 'auto', - '&[aria-current="true"]': { - backgroundColor: theme.palette.secondary.light, - fontWeight: 'bold', - borderColor: theme.palette.primary.main, - color: theme.palette.primary.main, - }, - ':focus-visible': { - outline: `1px solid ${theme.palette.primary.main}`, - borderColor: theme.palette.primary.main, - }, -})); +const makeStyledChip = (ariaControlTarget: string) => + styled(({ ...props }: ChipProps) => ( + + ))(({ theme, label }) => ({ + padding: theme.spacing(0.5), + fontSize: theme.typography.body2.fontSize, + height: 'auto', + '&[aria-current="true"]': { + backgroundColor: theme.palette.secondary.light, + fontWeight: 'bold', + borderColor: theme.palette.primary.main, + color: 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'; @@ -34,12 +60,11 @@ const Wrapper = styled(Box)(({ theme }) => ({ gap: theme.spacing(2), })); -const StyledContainer = styled(Box)(({ theme }) => ({ +const StyledContainer = styled(Box)({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', - gap: theme.spacing(1), -})); +}); export const ChangeRequestFilters: FC = ({ onSelectionChange, @@ -57,22 +82,20 @@ export const ChangeRequestFilters: FC = ({ onSelectionChange(value); }; + const StyledChip = makeStyledChip(ariaControlTarget); + return (