✨ Create ghost variant for select DS component (#7392)

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

@@ -52,11 +52,12 @@
    [:disabled {:optional true} :boolean]
    [:default-selected {:optional true} :string]
    [:empty-to-end {:optional true} [:maybe :boolean]]
-   [:on-change {:optional true} fn?]])
+   [:on-change {:optional true} fn?]
+   [:variant {:optional true} [:maybe [:enum "default" "ghost"]]]])
 
 (mf/defc select*
   {::mf/schema schema:select}
-  [{:keys [options class disabled default-selected empty-to-end on-change] :rest props}]
+  [{:keys [options class disabled default-selected empty-to-end on-change variant] :rest props}]
   (let [;; NOTE: we use mfu/bean here for transparently handle
         ;; options provide as clojure data structures or javascript
         ;; plain objects and lists.
@@ -64,6 +65,8 @@
                        (mfu/bean options)
                        options)
 
+        variant      (d/nilv variant "default")
+
         empty-to-end (d/nilv empty-to-end false)
         is-open*     (mf/use-state false)
         is-open      (deref is-open*)
@@ -162,7 +165,7 @@
                      (reset! focused-id* nil)))))))
 
         props
-        (mf/spread-props props {:class [class (stl/css :select)]
+        (mf/spread-props props {:class [class (stl/css :select) (stl/css-case :variant-ghost (= variant "ghost"))]
                                 :role "combobox"
                                 :aria-controls listbox-id
                                 :aria-haspopup "listbox"

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

@@ -18,6 +18,7 @@
 
   &:hover {
     --select-background-color: var(--color-background-quaternary);
+    --select-icon-color: var(--color-foreground-primary);
   }
 
   @include use-typography("body-small");
@@ -43,8 +44,8 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--sp-xs);
-  height: $sz-32;
-  width: 100%;
+  block-size: $sz-32;
+  inline-size: 100%;
   padding: var(--sp-s);
   border: none;
   border-radius: $br-8;
@@ -55,6 +56,19 @@
   appearance: none;
 }
 
+.variant-ghost {
+  --select-background-color: transparent;
+  inline-size: fit-content;
+
+  & .arrow {
+    margin-inline-start: var(--sp-xs);
+  }
+
+  &:is(:focus-visible, :disabled) {
+    --select-background-color: transparent;
+  }
+}
+
 .arrow {
   color: var(--select-icon-color);
 }

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

@@ -9,6 +9,11 @@ import Components from "@target/components";
 
 const { Select } = Components;
 
+const variants = [
+  "default",
+  "ghost",
+];
+
 const options = [
   { id: "option-code", label: "Code" },
   { id: "option-design", label: "Design" },
@@ -29,12 +34,17 @@ export default {
   argTypes: {
     disabled: { control: "boolean" },
     emptyToEnd: { control: "boolean" },
+    variant: {
+      control: { type: "select" },
+      options: variants,
+    },
   },
   args: {
     disabled: false,
     options: options,
     emptyToEnd: false,
     defaultSelected: "option-code",
+    variant: variants[0],
   },
   parameters: {
     controls: {
@@ -51,6 +61,12 @@ export default {
 
 export const Default = {};
 
+export const Ghost = {
+  args: {
+    variant: "ghost",
+  },
+};
+
 export const WithIcons = {
   args: {
     options: optionsWithIcons,

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -167,6 +167,7 @@
              [:div {:class (stl/css :inspect-tab-switcher-controls-color-space)}
               [:> select* {:options color-spaces
                            :default-selected "hex"
+                           :variant "ghost"
                            :on-change handle-change-color-space}]]
              [:div {:class (stl/css :inspect-tab-switcher-controls-tab)}
               [:> select* {:options tabs

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "ds/typography.scss" as *;
+@use "ds/_sizes.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .settings-bar-right {
@@ -130,7 +131,7 @@
 }
 
 .inspect-tab-switcher-controls-color-space {
-  flex: 1;
+  flex: 1 0 $sz-24;
 }
 
 .inspect-tab-switcher-controls-tab {