1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00

Adds a more visible focus indicator to the filter chips (#9251)

When the filter chip is focused, adds a 1px solid outline in the theme's
primary color. This makes it easier to tell when the chip has focused.

Additionally, adds a slight refactor in how we call the event log result
component. I'm pretty sure I've seen react docs say that you should
always use the component calling instead of a regular function call, so
this does that.

Before (the first chip has focus; can you tell?):

![image](https://github.com/user-attachments/assets/8fb4382c-9a38-4d77-acc2-35ae9fed1180)

After:

![image](https://github.com/user-attachments/assets/7f6969c3-059f-4c0f-bbfc-9a295adf4070)


Optionally, we could do something similar to on hover (first one has
focus again), but it's kinda subtle and .. I don't think it's a theme
color we have defined:

![image](https://github.com/user-attachments/assets/3fc10d34-858f-4007-9a80-06c4df2fc756)
This commit is contained in:
Thomas Heartman 2025-02-07 10:22:08 +01:00 committed by GitHub
parent 43e418e40a
commit f9bd9d2d03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 2 deletions

View File

@ -99,7 +99,7 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {
/>
);
const resultComponent = () => {
const ResultComponent = () => {
if (loading) {
return (
<StyledEventsList>
@ -165,7 +165,7 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {
/>
}
/>
{resultComponent()}
<ResultComponent />
</EventResultWrapper>
<ConditionallyRender
condition={total > 25}

View File

@ -24,6 +24,11 @@ const StyledChip = styled(
backgroundColor: theme.palette.secondary.light,
}
: {}),
':focus-visible': {
outline: `1px solid ${theme.palette.primary.main}`,
borderColor: theme.palette.primary.main,
},
}));
const StyledLabel = styled('div')(({ theme }) => ({