feat(ui): refine styling for MachineTags and fix inverted mode

Closes #5045

pkgs/clan-app/ui/src/components/Form/MachineTags.css

@@ -1,221 +0,0 @@
-div.form-field.machine-tags {
-  div.control {
-    @apply flex flex-col size-full gap-2;
-
-    div.selected-options {
-      @apply flex flex-wrap gap-2 size-full min-h-5;
-    }
-
-    div.input-container {
-      @apply relative left-0 top-0;
-      @apply inline-flex justify-between w-full;
-
-      input {
-        @apply w-full px-2 py-1.5 rounded-sm;
-        @apply outline outline-1 outline-def-acc-1 bg-def-1 fg-def-1;
-
-        font-size: 0.875rem;
-        font-weight: 500;
-        font-family: "Archivo", sans-serif;
-        line-height: 1;
-
-        &::placeholder {
-          @apply fg-def-4;
-        }
-
-        &:hover {
-          @apply bg-def-acc-1 outline-def-acc-2;
-        }
-
-        &:not(:read-only):focus-visible {
-          @apply bg-def-1 outline-def-acc-3;
-
-          box-shadow:
-            0 0 0 0.125rem theme(colors.bg.def.1),
-            0 0 0 0.1875rem theme(colors.border.semantic.info.1);
-        }
-
-        &[data-invalid] {
-          @apply outline-semantic-error-4;
-        }
-
-        &[data-disabled] {
-          @apply outline-def-2 fg-def-4 cursor-not-allowed;
-        }
-
-        &[data-readonly] {
-          @apply outline-none border-none bg-inherit;
-          @apply p-0 resize-none;
-        }
-      }
-
-      & > button.trigger {
-        @apply flex items-center justify-center w-8;
-        @apply absolute right-2 top-1 h-5 w-6 bg-def-2 rounded-sm;
-
-        &[data-disabled] {
-          @apply cursor-not-allowed;
-        }
-
-        & > span.icon {
-          @apply h-full w-full py-0.5 px-1;
-        }
-      }
-    }
-  }
-
-  &.horizontal {
-    @apply flex-row gap-2 justify-between;
-
-    div.control {
-      @apply w-1/2 grow;
-    }
-  }
-
-  &.s {
-    div.control > div.input-container {
-      & > input {
-        @apply px-1.5 py-1;
-        font-size: 0.75rem;
-
-        &[data-readonly] {
-          @apply p-0;
-        }
-      }
-
-      & > button.trigger {
-        @apply top-[0.1875rem] h-4 w-5;
-      }
-    }
-  }
-
-  &.inverted {
-    div.control > div.input-container {
-      & > button.trigger {
-        @apply bg-inv-2;
-      }
-
-      & > input {
-        @apply bg-inv-1 fg-inv-1 outline-inv-acc-1;
-
-        &::placeholder {
-          @apply fg-inv-4;
-        }
-
-        &:hover {
-          @apply bg-inv-acc-2 outline-inv-acc-2;
-        }
-
-        &:not(:read-only):focus-visible {
-          @apply bg-inv-acc-4;
-          box-shadow:
-            0 0 0 0.125rem theme(colors.bg.inv.1),
-            0 0 0 0.1875rem theme(colors.border.semantic.info.1);
-        }
-
-        &[data-invalid] {
-          @apply outline-semantic-error-4;
-        }
-
-        &[data-readonly] {
-          @apply outline-none border-none bg-inherit cursor-auto;
-        }
-      }
-    }
-  }
-
-  &.ghost {
-    div.control > div.input-container {
-      & > input {
-        @apply outline-none;
-
-        &:hover {
-          @apply outline-none;
-        }
-      }
-    }
-  }
-}
-
-div.machine-tags-content {
-  @apply rounded-sm bg-def-1 border border-def-2 z-10;
-
-  transform-origin: var(--kb-combobox-content-transform-origin);
-  animation: machineTagsContentHide 250ms ease-in forwards;
-
-  &[data-expanded] {
-    animation: machineTagsContentShow 250ms ease-out;
-  }
-
-  & > ul.listbox {
-    overflow-y: auto;
-    max-height: 360px;
-
-    @apply px-2 py-3;
-
-    &:focus {
-      outline: none;
-    }
-
-    li.item {
-      @apply flex items-center justify-between;
-      @apply relative px-2 py-1;
-      @apply select-none outline-none rounded-[0.25rem];
-
-      color: hsl(240 4% 16%);
-      height: 32px;
-
-      &[data-disabled] {
-        color: hsl(240 5% 65%);
-        opacity: 0.5;
-        pointer-events: none;
-      }
-
-      &[data-highlighted] {
-        @apply outline-none bg-def-4;
-      }
-    }
-
-    .item-indicator {
-      height: 20px;
-      width: 20px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-div.machine-tags-control {
-  @apply flex flex-col w-full gap-2;
-
-  & > div.selected-options {
-    @apply flex gap-2 flex-wrap w-full;
-  }
-
-  & > div.input-container {
-    @apply w-full flex gap-2;
-  }
-}
-
-@keyframes machineTagsContentShow {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes machineTagsContentHide {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-}

pkgs/clan-app/ui/src/components/Form/MachineTags.module.css

@@ -0,0 +1,207 @@
+.machineTags {
+  &.horizontal {
+    @apply flex-row gap-2 justify-between;
+  }
+}
+
+.control {
+  @apply flex flex-col size-full gap-2;
+
+  &.horizontal {
+    @apply w-1/2 grow;
+  }
+}
+
+.selectedOptions {
+  @apply flex flex-wrap gap-2 size-full min-h-5;
+}
+
+.trigger {
+  @apply w-full relative;
+}
+
+.icon {
+  @apply absolute left-1.5;
+  top: calc(50% - 0.5rem);
+
+  &.iconSmall {
+    @apply left-[0.3125rem] size-[0.75rem];
+    top: calc(50% - 0.3125rem);
+  }
+}
+
+.input {
+  @apply outline outline-1 outline-def-acc-1 bg-def-1 fg-def-1 w-full;
+  @apply px-[1.625rem] py-1.5 rounded-sm;
+
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: "Archivo", sans-serif;
+  line-height: 1;
+
+  &::placeholder {
+    @apply fg-def-4;
+  }
+
+  &:hover {
+    @apply bg-def-acc-1 outline-def-acc-2;
+  }
+
+  &:not(:read-only):focus-visible {
+    @apply bg-def-1 outline-def-acc-3;
+
+    box-shadow:
+      0 0 0 0.125rem theme(colors.bg.def.1),
+      0 0 0 0.1875rem theme(colors.border.semantic.info.1);
+  }
+
+  &[data-invalid] {
+    @apply outline-semantic-error-4;
+  }
+
+  &[data-disabled] {
+    @apply outline-def-2 fg-def-4 cursor-not-allowed;
+  }
+
+  &[data-readonly] {
+    @apply outline-none border-none bg-inherit;
+    @apply p-0 resize-none;
+  }
+
+  &.inputSmall {
+    @apply px-[1.25rem] py-1;
+    font-size: 0.8125rem;
+
+    &[data-readonly] {
+      @apply p-0;
+    }
+  }
+
+  &.inputInverted {
+    @apply bg-inv-1 fg-inv-1 outline-inv-acc-1;
+
+    &::placeholder {
+      @apply fg-inv-4;
+    }
+
+    &:hover {
+      @apply bg-inv-acc-2 outline-inv-acc-2;
+    }
+
+    &:not(:read-only):focus-visible {
+      @apply bg-inv-acc-4;
+      box-shadow:
+        0 0 0 0.125rem theme(colors.bg.inv.1),
+        0 0 0 0.1875rem theme(colors.border.semantic.info.1);
+    }
+
+    &[data-invalid] {
+      @apply outline-semantic-error-4;
+    }
+
+    &[data-readonly] {
+      @apply outline-none border-none bg-inherit cursor-auto;
+    }
+  }
+
+  &.inputGhost {
+    @apply outline-none;
+
+    &:hover {
+      @apply outline-none;
+    }
+  }
+}
+
+.comboboxContent {
+  @apply rounded-sm bg-def-1 border border-def-2 z-20;
+
+  transform-origin: var(--kb-combobox-content-transform-origin);
+  animation: machineTagsContentHide 250ms ease-in forwards;
+
+  &[data-expanded] {
+    animation: machineTagsContentShow 250ms ease-out;
+  }
+
+  .listbox {
+    overflow-y: auto;
+    max-height: 360px;
+
+    @apply px-2 py-3;
+
+    &:focus {
+      outline: none;
+    }
+
+    .listboxItem {
+      @apply flex items-center justify-between;
+      @apply relative px-2 py-1;
+      @apply select-none outline-none rounded-[0.25rem];
+
+      color: hsl(240 4% 16%);
+      height: 32px;
+
+      &[data-disabled] {
+        color: hsl(240 5% 65%);
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      &[data-highlighted] {
+        @apply outline-none bg-def-4;
+      }
+
+      &.listboxItemInverted {
+        &[data-highlighted] {
+          @apply bg-inv-4;
+        }
+      }
+    }
+
+    .itemIndicator {
+      height: 20px;
+      width: 20px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.comboboxContentInverted {
+    @apply bg-inv-1 border-inv-2;
+  }
+}
+
+.machineTagsControl {
+  @apply flex flex-col w-full gap-2;
+
+  /*& > div.selected-options {*/
+  /*    @apply flex gap-2 flex-wrap w-full;*/
+  /*}*/
+
+  & > div.input-container {
+    @apply w-full flex gap-2;
+  }
+}
+
+@keyframes machineTagsContentShow {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes machineTagsContentHide {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}

pkgs/clan-app/ui/src/components/Form/MachineTags.tsx

@@ -6,10 +6,10 @@ import cx from "classnames";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Tag } from "@/src/components/Tag/Tag";
 
-import "./MachineTags.css";
 import { Label } from "@/src/components/Form/Label";
 import { Orienter } from "@/src/components/Form/Orienter";
 import { CollectionNode } from "@kobalte/core";
+import styles from "./MachineTags.module.css";
 
 export interface MachineTag {
   value: string;
@@ -45,20 +45,31 @@ const sortedAndUniqueOptions = (options: MachineTag[]) =>
   sortedOptions(uniqueOptions(options));
 
 // customises how each option is displayed in the dropdown
-const ItemComponent = (props: { item: CollectionNode<MachineTag> }) => {
-  return (
-    <Combobox.Item item={props.item} class="item">
-      <Combobox.ItemLabel>
-        <Typography hierarchy="body" size="xs" weight="bold">
-          {props.item.textValue}
-        </Typography>
-      </Combobox.ItemLabel>
-      <Combobox.ItemIndicator class="item-indicator">
-        <Icon icon="Checkmark" />
-      </Combobox.ItemIndicator>
-    </Combobox.Item>
-  );
-};
+const ItemComponent =
+  (inverted: boolean) => (props: { item: CollectionNode<MachineTag> }) => {
+    return (
+      <Combobox.Item
+        item={props.item}
+        class={cx(styles.listboxItem, {
+          [styles.listboxItemInverted]: inverted,
+        })}
+      >
+        <Combobox.ItemLabel>
+          <Typography
+            hierarchy="body"
+            size="xs"
+            weight="bold"
+            inverted={inverted}
+          >
+            {props.item.textValue}
+          </Typography>
+        </Combobox.ItemLabel>
+        <Combobox.ItemIndicator class={styles.itemIndicator}>
+          <Icon icon="Checkmark" inverted={inverted} />
+        </Combobox.ItemIndicator>
+      </Combobox.Item>
+    );
+  };
 
 export const MachineTags = (props: MachineTagsProps) => {
   // convert default value string[] into MachineTag[]
@@ -112,10 +123,7 @@ export const MachineTags = (props: MachineTagsProps) => {
   return (
     <Combobox<MachineTag>
       multiple
-      class={cx("form-field", "machine-tags", props.size, props.orientation, {
-        inverted: props.inverted,
-        ghost: props.ghost,
-      })}
+      class={cx("form-field", styles.machineTags, props.orientation)}
       {...splitProps(props, ["defaultValue"])[1]}
       defaultValue={defaultValue}
       options={availableOptions()}
@@ -123,7 +131,7 @@ export const MachineTags = (props: MachineTagsProps) => {
       optionTextValue="value"
       optionLabel="value"
       optionDisabled="disabled"
-      itemComponent={ItemComponent}
+      itemComponent={ItemComponent(props.inverted || false)}
       placeholder="Enter a tag name"
       // triggerMode="focus"
       removeOnBackspace={false}
@@ -158,9 +166,11 @@ export const MachineTags = (props: MachineTagsProps) => {
 
         <Combobox.HiddenSelect {...props.input} multiple />
 
-        <Combobox.Control<MachineTag> class="control">
+        <Combobox.Control<MachineTag>
+          class={cx(styles.control, props.orientation)}
+        >
           {(state) => (
-            <div class="selected-options">
+            <div class={styles.selectedOptions}>
               <For each={state.selectedOptions()}>
                 {(option) => (
                   <Tag
@@ -187,18 +197,24 @@ export const MachineTags = (props: MachineTagsProps) => {
                 )}
               </For>
               <Show when={!props.readOnly}>
-                <div class="input-container">
-                  <Combobox.Input onKeyDown={onKeyDown} />
-                  <Combobox.Trigger class="trigger">
-                    <Combobox.Icon class="icon">
-                      <Icon
-                        icon="Expand"
-                        inverted={!props.inverted}
-                        size="100%"
-                      />
-                    </Combobox.Icon>
-                  </Combobox.Trigger>
-                </div>
+                <Combobox.Trigger class={styles.trigger}>
+                  <Icon
+                    icon="Tag"
+                    color="secondary"
+                    inverted={props.inverted}
+                    class={cx(styles.icon, {
+                      [styles.iconSmall]: props.size == "s",
+                    })}
+                  />
+                  <Combobox.Input
+                    onKeyDown={onKeyDown}
+                    class={cx(styles.input, {
+                      [styles.inputSmall]: props.size == "s",
+                      [styles.inputGhost]: props.ghost,
+                      [styles.inputInverted]: props.inverted,
+                    })}
+                  />
+                </Combobox.Trigger>
               </Show>
             </div>
           )}
@@ -206,8 +222,12 @@ export const MachineTags = (props: MachineTagsProps) => {
       </Orienter>
 
       <Combobox.Portal>
-        <Combobox.Content class="machine-tags-content">
-          <Combobox.Listbox class="listbox" />
+        <Combobox.Content
+          class={cx(styles.comboboxContent, {
+            [styles.comboboxContentInverted]: props.inverted,
+          })}
+        >
+          <Combobox.Listbox class={styles.listbox} />
         </Combobox.Content>
       </Combobox.Portal>
     </Combobox>

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -3,7 +3,7 @@ import { A } from "@solidjs/router";
 import { Accordion } from "@kobalte/core/accordion";
 import Icon from "../Icon/Icon";
 import { Typography } from "@/src/components/Typography/Typography";
-import { For, Show, useContext } from "solid-js";
+import { For, Show } from "solid-js";
 import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
 import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";