1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
unleash.unleash/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments
Thomas Heartman fc0383620b
fix: focus styles for env headers (#9635)
Adds focus styles to the env accordion header only when the focus is on
the header itself (not on the env toggle inside the header). The focus
style is consistent with what we do for other accordions (dashboard,
milestones).

Middle one is focused:

![image](https://github.com/user-attachments/assets/df87bd99-8fe2-4093-afd8-4cbce9f2c943)


Focus is on the toggle inside the top one (yeh, we should have better
focus styles for toggles; but that's not for now):

![image](https://github.com/user-attachments/assets/2a046d4c-8585-4021-a58e-32ef81b1f701)

Open and focused: 

![image](https://github.com/user-attachments/assets/fdbb5bda-4be5-4354-b213-5e2c7a59eb59)

Getting the consistent background for the header when it's open is a
little tricky because the accordion container and summary are split into
different files. ~~This first iteration used a class name for the
specific header (because envs can have multiple accordion headers inside
them, e.g. release plans) and setting a CSS variable in the summary, so
that the background matches.~~ I found out that I only need to set it in
the parent anyway 😄

Without it, you get this (notice that there is a little white outside
the lower corners):

![image](https://github.com/user-attachments/assets/4d71d73c-7f45-46b5-811d-c6e36f9be5ce)
2025-03-28 15:59:25 +01:00
..
FeatureOverviewEnvironment fix: focus styles for env headers (#9635) 2025-03-28 15:59:25 +01:00
FeatureOverviewEnvironments.tsx chore: drag-n-drop tooltip for strategies (#9623) 2025-03-27 11:16:37 +01:00