UX: Compact option for multi-selects (#22239)

Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs

@@ -123,6 +123,28 @@
   <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
 </StyleguideExample>
 
+<StyleguideExample @title="<MiniTagChooser>">
+  <div class="inline-form">
+    <MiniTagChooser
+      @value={{@dummy.selectedTags}}
+      @options={{hash filterable=true}}
+    />
+  </div>
+</StyleguideExample>
+
+<StyleguideExample @title="<MiniTagChooser> with useHeaderFilter=true">
+  <div class="inline-form">
+    <MiniTagChooser
+      @value={{@dummy.selectedTags}}
+      @options={{hash
+        filterable=true
+        filterPlaceholder="topic_edit.tag_filter_placeholder"
+        useHeaderFilter=true
+      }}
+    />
+  </div>
+</StyleguideExample>
+
 <StyleguideExample @title="admin <GroupChooser>">
   <GroupChooser
     @selected={{@dummy.selectedGroups}}

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js

@@ -282,6 +282,8 @@ export function createData(store) {
     colors: "f49|c89|564897",
 
     charCounterContent: "",
+
+    selectedTags: ["apple", "orange", "potato"],
   };
 
   return _data;