Convert TagEditor to tailwind

Use shared `TextInput` component for presentational consistency.

src/sidebar/components/TagEditor.js

 import {
   normalizeKeyName,
   useElementShouldClose,
+  TextInput,
 } from '@hypothesis/frontend-shared';
 import { useRef, useState } from 'preact/hooks';
 
@@ -270,7 +271,7 @@ function TagEditor({
     activeItem >= 0 ? `${tagEditorId}-AutocompleteList-item-${activeItem}` : '';
 
   return (
-    <div className="TagEditor space-y-4">
+    <div className="space-y-4">
       <TagList>
         {tagList.map(tag => {
           return <TagListItem key={tag} onRemoveTag={onRemoveTag} tag={tag} />;
@@ -278,7 +279,7 @@ function TagEditor({
       </TagList>
       <div
         id={tagEditorId}
-        className="TagEditor__combobox-wrapper"
+        data-testid="combobox-container"
         ref={closeWrapperRef}
         // Disabled because aria-controls must be attached to the <input> field
         // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -287,13 +288,13 @@ function TagEditor({
         aria-owns={`${tagEditorId}-AutocompleteList`}
         aria-haspopup="listbox"
       >
-        <input
+        <TextInput
+          classes="w-full"
           onInput={handleOnInput}
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
-          ref={inputEl}
+          inputRef={inputEl}
           placeholder="Add new tags"
-          className="TagEditor__input"
           type="text"
           autoComplete="off"
           aria-autocomplete="list"

src/sidebar/components/test/TagEditor-test.js

@@ -88,10 +88,8 @@ describe('TagEditor', () => {
 
   it('adds appropriate tag values to the elements', () => {
     const wrapper = createComponent();
-    wrapper.find('li').forEach((tag, i) => {
-      assert.isTrue(tag.hasClass('TagEditor__item'));
-      assert.include(tag.text(), fakeTags[i]);
-      assert.equal(tag.prop('aria-label'), `Tag: ${fakeTags[i]}`);
+    wrapper.find('TagListItem').forEach((tag, i) => {
+      assert.equal(tag.props().tag, fakeTags[i]);
     });
   });
 
@@ -455,6 +453,7 @@ describe('TagEditor', () => {
   });
 
   describe('accessibility attributes and ids', () => {
+    const comboboxSelector = '[data-testid="combobox-container"]';
     it('creates multiple <TagEditor> components with unique AutocompleteList `id` props', () => {
       const wrapper1 = createComponent();
       const wrapper2 = createComponent();
@@ -469,7 +468,7 @@ describe('TagEditor', () => {
       wrapper.find('AutocompleteList');
 
       assert.equal(
-        wrapper.find('.TagEditor__combobox-wrapper').prop('aria-owns'),
+        wrapper.find(comboboxSelector).prop('aria-owns'),
         wrapper.find('AutocompleteList').prop('id')
       );
     });
@@ -479,13 +478,13 @@ describe('TagEditor', () => {
       wrapper.find('input').instance().value = 'non-empty'; // to open list
       typeInput(wrapper);
       assert.equal(
-        wrapper.find('.TagEditor__combobox-wrapper').prop('aria-expanded'),
+        wrapper.find(comboboxSelector).prop('aria-expanded'),
         'true'
       );
       selectOption(wrapper, 'tag4');
       wrapper.update();
       assert.equal(
-        wrapper.find('.TagEditor__combobox-wrapper').prop('aria-expanded'),
+        wrapper.find(comboboxSelector).prop('aria-expanded'),
         'false'
       );
     });

src/styles/sidebar/components/TagEditor.scss

-@use '../../mixins/forms';
-
-.TagEditor {
-  &__input {
-    @include forms.form-input;
-    width: 100%;
-  }
-}

src/styles/sidebar/components/_index.scss

@@ -26,7 +26,6 @@
 @use './SelectionTabs';
 @use './SearchInput';
 @use './StyledText';
-@use './TagEditor';
 @use './Thread';
 @use './ThreadCard';
 @use './ThreadList';