Merge pull request #5541 from penpot/fix/juanfran-fix-combobox-design-review

🐛 design review t#9539

frontend/src/app/main/ui/ds/controls/combobox.cljs

@@ -60,18 +60,22 @@
    [:class {:optional true} :string]
    [:disabled {:optional true} :boolean]
    [:default-selected {:optional true} :string]
-   [:on-change {:optional true} fn?]])
+   [:on-change {:optional true} fn?]
+   [:has-error {:optional true} :boolean]])
 
 (mf/defc combobox*
   {::mf/props :obj
    ::mf/schema schema:combobox}
-  [{:keys [options class disabled default-selected on-change] :rest props}]
+  [{:keys [options class disabled has-error default-selected on-change] :rest props}]
   (let [open* (mf/use-state false)
         open  (deref open*)
 
         selected* (mf/use-state  default-selected)
         selected  (deref selected*)
 
+        filter-value* (mf/use-state "")
+        filter-value  (deref filter-value*)
+
         focused* (mf/use-state nil)
         focused  (deref focused*)
 
@@ -80,12 +84,12 @@
 
         dropdown-options
         (mf/use-memo
-         (mf/deps options selected)
+         (mf/deps options filter-value)
          (fn []
            (->> options
                 (array/filter (fn [option]
                                 (let [lower-option (.toLowerCase (obj/get option "id"))
-                                      lower-filter (.toLowerCase selected)]
+                                      lower-filter (.toLowerCase filter-value)]
                                   (.includes lower-option lower-filter)))))))
 
         on-click
@@ -95,6 +99,7 @@
            (dom/stop-propagation event)
            (when-not disabled
              (reset! has-focus* true)
+             (when-not (deref open*) (reset! filter-value* ""))
              (if (= "INPUT" (.-tagName (.-target event)))
                (reset! open* true)
                (swap! open* not)))))
@@ -188,6 +193,7 @@
          (fn [event]
            (let [value (.-value (.-currentTarget event))]
              (reset! selected* value)
+             (reset! filter-value* value)
              (reset! focused* nil)
              (when (fn? on-change)
                (on-change value)))))
@@ -206,7 +212,9 @@
     [:div {:ref combobox-ref
            :class (stl/css-case
                    :combobox-wrapper true
-                   :focused has-focus)}
+                   :focused has-focus
+                   :has-error has-error
+                   :disabled disabled)}
 
      [:div {:class class
             :on-click on-click

frontend/src/app/main/ui/ds/controls/combobox.scss

@@ -14,6 +14,7 @@
   --combobox-bg-color: var(--color-background-tertiary);
   --combobox-outline-color: none;
   --combobox-border-color: none;
+  --combobox-error-outline-color: var(--color-accent-error);
 
   @include use-typography("body-small");
   position: relative;
@@ -22,7 +23,7 @@
   gap: var(--sp-xxs);
   width: 100%;
 
-  &:hover {
+  &:hover:not(.disabled) {
     --combobox-bg-color: var(--color-background-quaternary);
   }
 }
@@ -41,16 +42,11 @@
   background: var(--combobox-bg-color);
   color: var(--combobox-fg-color);
   appearance: none;
-
-  &:disabled {
-    --combobox-bg-color: var(--color-background-primary);
-    --combobox-border-color: var(--color-background-quaternary);
-    --combobox-fg-color: var(--color-foreground-secondary);
-  }
 }
 
 .focused {
   --combobox-outline-color: var(--color-accent-primary);
+  --combobox-bg-color: var(--color-background-secondary);
 }
 
 .arrow {
@@ -85,3 +81,13 @@
   all: unset;
   display: flex;
 }
+
+.disabled {
+  --combobox-bg-color: var(--color-background-primary);
+  --combobox-border-color: var(--color-background-quaternary);
+  --combobox-fg-color: var(--color-foreground-secondary);
+}
+
+.has-error {
+  --combobox-outline-color: var(--combobox-error-outline-color);
+}

frontend/src/app/main/ui/ds/controls/combobox.stories.jsx

@@ -18,9 +18,11 @@ export default {
   component: Combobox,
   argTypes: {
     disabled: { control: "boolean" },
+    hasError: { control: "boolean" },
   },
   args: {
     disabled: false,
+    hasError: false,
     options: [
       { id: "January", label: "January" },
       { id: "February", label: "February" },
@@ -36,7 +38,6 @@ export default {
       { id: "December", label: "December" },
     ],
     defaultSelected: "February",
-    onChange: (value) => (lastValue = value),
   },
   parameters: {
     controls: {
@@ -88,6 +89,10 @@ export const WithIcons = {
 
 export const TestInteractions = {
   ...WithIcons,
+  args: {
+    ...WithIcons.args,
+    onChange: (value) => (lastValue = value),
+  },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);