3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-08 17:35:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Prevent themes dropdown overflow hidden in set sidebar (#5850)

Browse source
This commit is contained in:
Juanfran 2025-02-17 09:51:10 +01:00 • committed by GitHub
parent aa180e9f3f
commit f6fc2f8808
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/playwright/ui/specs/tokens.spec.js
View file

@ -252,7 +252,10 @@ test.describe("Tokens: Tokens Tab", () => {
const themeSelect = tokenThemesSetsSidebar.getByRole("combobox"); const themeSelect = tokenThemesSetsSidebar.getByRole("combobox");
await themeSelect.click(); await themeSelect.click();
await themeSelect.getByRole("option", { name: "Changed" }).click(); await page
.getByTestId("theme-select-dropdown")
.getByRole("option", { name: "Changed" })
.click();
const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", { const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", {
name: "light", name: "light",

27
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
View file

@ -89,10 +89,12 @@
;; State ;; State
state* (mf/use-state state* (mf/use-state
{:id (uuid/next) #(do {:id (uuid/next)
:is-open? false}) :is-open? false
:rect nil}))
state (deref state*) state (deref state*)
is-open? (:is-open? state) is-open? (:is-open? state)
rect (:rect state)
;; Dropdown ;; Dropdown
on-close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false)) on-close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false))
@ -100,9 +102,13 @@
on-open-dropdown on-open-dropdown
(mf/use-fn (mf/use-fn
(mf/deps can-edit?) (mf/deps can-edit?)
(fn [] (fn [event]
(when can-edit? (when can-edit?
(swap! state* assoc :is-open? true))))] (when-let [node (dom/get-current-target event)]
(let [rect (dom/get-bounding-rect node)]
(swap! state* assoc
:is-open? true
:rect rect))))))]
;; TODO: This element should be accessible by keyboard ;; TODO: This element should be accessible by keyboard
[:div {:on-click on-open-dropdown [:div {:on-click on-open-dropdown
@ -116,8 +122,19 @@
[:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)} [:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)}
current-label] current-label]
[:> icon* {:icon-id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}] [:> icon* {:icon-id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}]
(when is-open?
(mf/portal
(mf/html
[:div {:class (stl/css :dropdown-portal)
:data-testid "theme-select-dropdown"
:style {:top (:top rect)
:left (:left rect)
:width (:width rect)}}
[:& dropdown {:show is-open? [:& dropdown {:show is-open?
:on-close on-close-dropdown} :on-close on-close-dropdown}
[:& theme-options {:active-theme-paths active-theme-paths [:& theme-options {:active-theme-paths active-theme-paths
:themes themes :themes themes
:on-close on-close-dropdown}]]])) :on-close on-close-dropdown}]]])
(.-body js/document)))]))

4
frontend/src/app/main/ui/workspace/tokens/theme_select.scss
View file

@ -122,3 +122,7 @@
.current-label { .current-label {
@include textEllipsis; @include textEllipsis;
} }
.dropdown-portal {
position: absolute;
}