mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-10 06:24:35 +09:00
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.  ## 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:
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
|
||||
|
||||
Reference in new issue
Block a user