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 (