From f9bd9d2d036469494de62af3bd03de4580c1f2a8 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 7 Feb 2025 10:22:08 +0100
Subject: [PATCH] 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)
---
 frontend/src/component/events/EventLog/EventLog.tsx          | 4 ++--
 .../filter/FilterItem/FilterItemChip/FilterItemChip.tsx      | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx
index 45b774b10a..684d7e2004 100644
--- a/frontend/src/component/events/EventLog/EventLog.tsx
+++ b/frontend/src/component/events/EventLog/EventLog.tsx
@@ -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}
diff --git a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
index 3929a18ff0..9039e6020e 100644
--- a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
+++ b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
@@ -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 }) => ({