mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 02:37:22 +02:00
Merge pull request #5723 from penpot/juanfran-review-replace-combobox
🐛 Fix combobox bg color and dropdown only with options (#9753)
This commit is contained in:
commit
c5d5fa7561
2 changed files with 14 additions and 12 deletions
|
@ -9,6 +9,7 @@
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.main.style :as stl])
|
[app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data :as d]
|
||||||
[app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]]
|
[app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]]
|
||||||
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i]
|
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i]
|
||||||
[app.util.array :as array]
|
[app.util.array :as array]
|
||||||
|
@ -242,17 +243,18 @@
|
||||||
:on-change on-input-change
|
:on-change on-input-change
|
||||||
:on-key-down on-key-down}]]
|
:on-key-down on-key-down}]]
|
||||||
|
|
||||||
[:> :button {:type "button"
|
(when (d/not-empty? options)
|
||||||
:tab-index "-1"
|
[:> :button {:type "button"
|
||||||
:aria-expanded open
|
:tab-index "-1"
|
||||||
:aria-controls listbox-id
|
:aria-expanded open
|
||||||
:class (stl/css :button-toggle-list)
|
:aria-controls listbox-id
|
||||||
:on-click on-click}
|
:class (stl/css :button-toggle-list)
|
||||||
[:> icon* {:icon-id i/arrow
|
:on-click on-click}
|
||||||
:class (stl/css :arrow)
|
[:> icon* {:icon-id i/arrow
|
||||||
:size "s"
|
:class (stl/css :arrow)
|
||||||
:aria-hidden true
|
:size "s"
|
||||||
:data-testid "combobox-open-button"}]]]
|
:aria-hidden true
|
||||||
|
:data-testid "combobox-open-button"}]])]
|
||||||
|
|
||||||
(when (and open (seq dropdown-options))
|
(when (and open (seq dropdown-options))
|
||||||
[:> options-dropdown* {:on-click on-option-click
|
[:> options-dropdown* {:on-click on-option-click
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
|
|
||||||
.focused {
|
.focused {
|
||||||
--combobox-outline-color: var(--color-accent-primary);
|
--combobox-outline-color: var(--color-accent-primary);
|
||||||
--combobox-bg-color: var(--color-background-secondary);
|
--combobox-bg-color: var(--color-background-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue