[MM 62088] Browse channels modal: Clear 'x' button is misaligned and related ux improvements (#29729)

webapp/channels/src/components/browse_channels/browse_channels.scss

@@ -9,24 +9,24 @@
 
         .input-clear {
             top: 16px;
-            right: 46px;
+            right: 14px;
         }
 
         #searchIcon {
             position: absolute;
             z-index: 2;
             top: 16px;
-            left: 46px;
+            left: 42px;
             color: rgba(var(--center-channel-color-rgb), 0.64);
             pointer-events: none;
         }
 
         #searchChannelsTextbox {
             height: 48px;
-            padding-left: 40px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
             box-shadow: none;
             font-size: 16px;
+            padding-inline: 40px;
 
             &::placeholder {
                 color: var(--center-channel-color);
@@ -250,6 +250,7 @@
         margin-top: 8px;
         color: var(--center-channel-color);
         line-height: 28px;
+        word-wrap: break-word;
     }
 
     .secondary-message {

webapp/channels/src/components/browse_channels/browse_channels.tsx

@@ -371,9 +371,9 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
 
         return (
             <GenericModal
-                onExited={this.handleExit}
                 id='browseChannelsModal'
                 aria-labelledby='browseChannelsModalLabel'
+                onExited={this.handleExit}
                 compassDesign={true}
                 modalHeaderText={title}
                 headerButton={createNewChannelButton('btn-secondary btn-sm')}

webapp/channels/src/components/custom_status/custom_status.scss

@@ -1,7 +1,7 @@
 .modal .StatusModal.GenericModal .StatusModal__clear-container.input-clear {
     position: absolute;
     top: 16px;
-    right: 20px;
+    right: 18px;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     opacity: 1;
 }

webapp/channels/src/components/quick_input/quick_input.tsx

@@ -92,7 +92,6 @@ export class QuickInput extends React.PureComponent<Props> {
         delayInputUpdate: false,
         value: '',
         clearable: false,
-        tooltipPosition: 'bottom',
     };
 
     componentDidMount() {
@@ -133,7 +132,7 @@ export class QuickInput extends React.PureComponent<Props> {
         this.input = input;
     };
 
-    private onClear = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent) => {
+    private onClear = (e: React.MouseEvent<HTMLButtonElement> | React.TouchEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -187,29 +186,28 @@ export class QuickInput extends React.PureComponent<Props> {
         );
 
         const showClearButton = this.props.onClear && (clearableWithoutValue || (clearable && value));
-        return (<div className='input-wrapper'>
+
-            {inputElement}
+        return (
-            {showClearButton &&
+            <div className='input-wrapper'>
-            <div
+                {inputElement}
-                data-testid='input-clear'
+                {showClearButton && (
-                className={classNames(clearClassName, 'input-clear visible')}
+                    <WithTooltip title={clearableTooltipText}>
-                onMouseDown={this.onClear}
+                        <button
-                onTouchEnd={this.onClear}
+                            data-testid='input-clear'
-                role='button'
+                            className={classNames(clearClassName, 'input-clear visible')}
-            >
+                            onClick={this.onClear}
-                <WithTooltip
+                        >
-                    title={clearableTooltipText}
+                            <span
-                >
+                                className='input-clear-x'
-                    <span
+                                aria-hidden='true'
-                        className='input-clear-x'
+                            >
-                        aria-hidden='true'
+                                <i className='icon icon-close-circle'/>
-                    >
+                            </span>
-                        <i className='icon icon-close-circle'/>
+                        </button>
-                    </span>
+                    </WithTooltip>
-                </WithTooltip>
+                )}
             </div>
-            }
+        );
-        </div>);
     }
 }
 

webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap

@@ -43,10 +43,9 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
             type="search"
             value="test"
           />
-          <div
+          <button
             class="input-clear visible"
             data-testid="input-clear"
-            role="button"
           >
             <span
               aria-hidden="true"
@@ -56,7 +55,7 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
                 class="icon icon-close-circle"
               />
             </span>
-          </div>
+          </button>
         </div>
       </div>
     </form>
@@ -115,10 +114,9 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
             type="search"
             value="test"
           />
-          <div
+          <button
             class="input-clear visible"
             data-testid="input-clear"
-            role="button"
           >
             <span
               aria-hidden="true"
@@ -128,7 +126,7 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
                 class="icon icon-close-circle"
               />
             </span>
-          </div>
+          </button>
         </div>
       </div>
     </form>

webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap

@@ -194,7 +194,6 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                   onChange={[Function]}
                   onClear={[Function]}
                   placeholder="Search members"
-                  tooltipPosition="bottom"
                   type="text"
                   value=""
                 >

webapp/channels/src/sass/components/_search.scss

@@ -63,9 +63,10 @@
     height: 100%;
     align-items: center;
     justify-content: center;
+    border: none;
     margin: 0;
+    background: none;
     color: rgba(var(--center-channel-color-rgb), 0.64);
-    cursor: pointer;
     font-size: 16px;
     visibility: hidden;