fix: show advanced options as highlighted for flex-sizing when used (#4438)

fixes #4408 

## Description

Fixes highlighting the advanced options icon, when advanced section is
used for flex-sizing.

## Steps for reproduction
- Add a element and set display to flex.
- Now add some child elements to the flex display
- Used advanced options from `flex-sizing` and set some custom values.
- Now, the `...` indicator for the advanced option should be
highlighted.


![fix-advanced-options](https://github.com/user-attachments/assets/342cc652-1534-43cf-aab9-af87d18f2114)

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - test it on preview

## Before requesting a review

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
This commit is contained in:
Jaya Krishna Namburu authored and GitHub committed 2024-11-20 11:09:30 +01:00
1 parent bef4324f3e
commit 9ef2e1663a
1 file changed
+10
@@ -230,6 +230,7 @@ const FlexChildSectionSizing = () => {
properties={["flexGrow", "flexShrink", "flexBasis"]}
>
<ToggleGroupButton
aria-checked={item.value === selectedValue}
value={item.value}
onMouseEnter={() =>
// reset only when highlighted is not active
@@ -368,6 +369,15 @@ const FlexChildSectionOrder = () => {
properties={["flexGrow", "flexShrink", "flexBasis"]}
>
<ToggleGroupButton
aria-checked={
item.value === selectedValue ||
// flex-order takes integer value, so the value can be anything from +- 0-9
// And we already have toggle buttons for -1, 0, 1
// https://developer.mozilla.org/en-US/docs/Web/CSS/order#formal_syntax
(item.value === "" &&
(Number.parseFloat(selectedValue) > 1 ||
Number.parseFloat(selectedValue) < -1))
}
value={item.value}
onMouseEnter={() =>
// reset only when highlighted is not active