Skip to content

Commit

Permalink
Adds a more visible focus indicator to the filter chips (#9251)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
thomasheartman authored Feb 7, 2025
1 parent 43e418e commit f9bd9d2
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
4 changes: 2 additions & 2 deletions frontend/src/component/events/EventLog/EventLog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {
/>
);

const resultComponent = () => {
const ResultComponent = () => {
if (loading) {
return (
<StyledEventsList>
Expand Down Expand Up @@ -165,7 +165,7 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {
/>
}
/>
{resultComponent()}
<ResultComponent />
</EventResultWrapper>
<ConditionallyRender
condition={total > 25}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => ({
Expand Down

0 comments on commit f9bd9d2

Please sign in to comment.