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:
parent
43e418e40a
commit
f9bd9d2d03
@ -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}
|
||||
|
@ -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 }) => ({
|
||||
|
Loading…
Reference in New Issue
Block a user