Add clear button to Combobox input

* It only shows up when there is text in the input
* Clicking it clears the text in the input
* It uses CharLimitedFieldset's classes

components/raids/RaidCombobox/index.scss

@@ -72,6 +72,26 @@
     padding: $unit;
     width: 100%;
 
+    .Button {
+      background: none;
+      padding: ($unit * 0.75) $unit-half $unit-half;
+      display: none;
+
+      &:hover svg {
+        fill: var(--text-primary);
+      }
+
+      &.Visible {
+        display: block;
+      }
+
+      svg {
+        fill: var(--text-tertiary);
+        width: $unit-2x;
+        height: $unit-2x;
+      }
+    }
+
     .Controls {
       display: flex;
       gap: $unit;

components/raids/RaidCombobox/index.tsx

@@ -27,6 +27,7 @@ interface Props {
 
 import Button from '~components/common/Button'
 import ArrowIcon from '~public/icons/Arrow.svg'
+import CrossIcon from '~public/icons/Cross.svg'
 
 import './index.scss'
 import classNames from 'classnames'
@@ -130,6 +131,10 @@ const RaidCombobox = (props: Props) => {
     setOpen(!open)
   }
 
+  function clearSearch() {
+    setSearch('')
+  }
+
   const linkClass = classNames({
     wind: currentRaid && currentRaid.element == 1,
     fire: currentRaid && currentRaid.element == 2,
@@ -261,12 +266,23 @@ const RaidCombobox = (props: Props) => {
     >
       <Command className="Raid Combobox">
         <div className="Header">
-          <CommandInput
+          <div className="Bound Joined">
-            className="Input Bound"
+            <CommandInput
-            placeholder={t('search.placeholders.raid')}
+              className="Input"
-            value={search}
+              placeholder={t('search.placeholders.raid')}
-            onValueChange={setSearch}
+              value={search}
-          />
+              onValueChange={setSearch}
+            />
+            <div
+              className={classNames({
+                Button: true,
+                Visible: search.length > 0,
+              })}
+              onClick={clearSearch}
+            >
+              <CrossIcon />
+            </div>
+          </div>
           {!search ? (
             <div className="Controls">
               <SegmentedControl blended={true}>