From 9ef2e1663ac62e04fac0c546ad1c5fa41c545e75 Mon Sep 17 00:00:00 2001
From: Jaya Krishna Namburu <namburu1995@gmail.com>
Date: Wed, 20 Nov 2024 15:39:30 +0530
Subject: [PATCH] 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)
---
 .../style-panel/sections/flex-child/flex-child.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
index 5b432bafb0..f49838564c 100644
--- a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
@@ -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