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) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<StyledEventsList>
|
<StyledEventsList>
|
||||||
@ -165,7 +165,7 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{resultComponent()}
|
<ResultComponent />
|
||||||
</EventResultWrapper>
|
</EventResultWrapper>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={total > 25}
|
condition={total > 25}
|
||||||
|
@ -24,6 +24,11 @@ const StyledChip = styled(
|
|||||||
backgroundColor: theme.palette.secondary.light,
|
backgroundColor: theme.palette.secondary.light,
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
|
|
||||||
|
':focus-visible': {
|
||||||
|
outline: `1px solid ${theme.palette.primary.main}`,
|
||||||
|
borderColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledLabel = styled('div')(({ theme }) => ({
|
const StyledLabel = styled('div')(({ theme }) => ({
|
||||||
|
Loading…
Reference in New Issue
Block a user