Replace .InputButton custom pattern with TextInputWithButton

The general pattern for an input next to an icon-only button has been
added to the pattern library in the frontend-shared package and is
implemented by the TextInputWithButton component. We don't need custom
treatment in this project anymore.

dev-server/ui-playground/components/ButtonPatterns.js

@@ -126,33 +126,6 @@ export default function ButtonPatterns() {
           </Library.Demo>
         </Library.Example>
       </Library.Pattern>
-
-      <Library.Pattern title="InputButton">
-        <p>
-          Customizes <code>IconButton</code> styling to make the button part of
-          a composite pattern with an input field to the left.
-        </p>
-
-        <Library.Example title="Basic usage">
-          <Library.Demo withSource>
-            <IconButton
-              className="InputButton"
-              title="Copy version details"
-              icon="copy"
-            />
-          </Library.Demo>
-        </Library.Example>
-        <Library.Example title="Small size">
-          <Library.Demo withSource>
-            <IconButton
-              className="InputButton"
-              title="Copy version details"
-              icon="copy"
-              size="small"
-            />
-          </Library.Demo>
-        </Library.Example>
-      </Library.Pattern>
     </Library.Page>
   );
 }

src/sidebar/components/Annotation/AnnotationShareControl.js

 import {
   IconButton,
   SvgIcon,
+  TextInput,
+  TextInputWithButton,
   useElementShouldClose,
 } from '@hypothesis/frontend-shared';
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -136,22 +138,22 @@ function AnnotationShareControl({
             </div>
           </div>
           <div className="annotation-share-panel__content">
-            <div className="u-layout-row">
-              <input
-                aria-label="Use this URL to share this annotation"
-                className="annotation-share-panel__form-input"
-                type="text"
-                value={shareUri}
-                readOnly
-                ref={inputRef}
-              />
-              <IconButton
-                className="InputButton"
-                icon="copy"
-                title="Copy share link to clipboard"
-                onClick={copyShareLink}
-                size="small"
-              />
+            <div className="u-layout-row annotation-share-panel__inputs">
+              <TextInputWithButton>
+                <TextInput
+                  aria-label="Use this URL to share this annotation"
+                  type="text"
+                  value={shareUri}
+                  readOnly
+                  inputRef={inputRef}
+                />
+                <IconButton
+                  icon="copy"
+                  title="Copy share link to clipboard"
+                  onClick={copyShareLink}
+                  variant="dark"
+                />
+              </TextInputWithButton>
             </div>
             {inContextAvailable ? (
               <div className="annotation-share-panel__details">

src/sidebar/components/ShareAnnotationsPanel.js

-import { IconButton, Spinner, SvgIcon } from '@hypothesis/frontend-shared';
+import {
+  IconButton,
+  Spinner,
+  SvgIcon,
+  TextInput,
+  TextInputWithButton,
+} from '@hypothesis/frontend-shared';
 
 import { useStoreProxy } from '../store/use-store';
 import { pageSharingLink } from '../helpers/annotation-sharing';
@@ -69,19 +75,20 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                 )}
               </div>
               <div className="u-layout-row">
-                <input
-                  aria-label="Use this URL to share these annotations"
-                  className="ShareAnnotationsPanel__form-input"
-                  type="text"
-                  value={shareURI}
-                  readOnly
-                />
-                <IconButton
-                  className="InputButton"
-                  icon="copy"
-                  onClick={copyShareLink}
-                  title="Copy share link"
-                />
+                <TextInputWithButton>
+                  <TextInput
+                    aria-label="Use this URL to share these annotations"
+                    type="text"
+                    value={shareURI}
+                    readOnly
+                  />
+                  <IconButton
+                    icon="copy"
+                    onClick={copyShareLink}
+                    title="Copy share link"
+                    variant="dark"
+                  />
+                </TextInputWithButton>
               </div>
               <p>
                 {notNull(focusedGroup).type === 'private' ? (

src/styles/sidebar/buttons.scss

 @use 'sass:map';
 
-// Button styling for the sidebar extending common button-component styles
-@use '@hypothesis/frontend-shared/styles/components/buttons';
-
 @use '../variables' as var;
 
 // Similar to `.LinkButton`, with inline layout (so button can be used
@@ -34,31 +31,3 @@
     min-height: auto;
   }
 }
-
-// This is for styling an icon-only button that sits to the right of a
-// text input field. It is really part of a composite pattern that includes
-// both the input and the buttons. At some point this pattern should be
-// consolidated.
-$input-button-colors: map.merge(
-  buttons.colors-for('IconButton'),
-  (
-    'background': var.$grey-1,
-    'hover-background': var.$grey-2,
-  )
-);
-
-.InputButton {
-  $-options: (
-    'colormap': $input-button-colors,
-    'withVariants': false,
-  );
-  @include buttons.IconButton($-options) {
-    border: 1px solid var.$grey-3;
-    border-radius: 0; // Turn off border-radius to align with <input> edges
-    border-left: 0; // Avoid double border with the <input>
-    padding: var.$layout-space--xsmall var.$layout-space--small;
-    &--small {
-      padding: var.$layout-space--xxsmall var.$layout-space--xsmall;
-    }
-  }
-}

src/styles/sidebar/components/AnnotationShareControl.scss

@@ -34,8 +34,9 @@
     border-bottom: none;
   }
 
-  &__form-input {
-    @include forms.form-input--with-button($compact: true);
+  &__inputs {
+    @include utils.font--small;
+    width: 100%;
   }
 
   &__details {

src/styles/sidebar/components/ShareAnnotationsPanel.scss

@@ -11,16 +11,4 @@
     color: var.$color-text;
     font-weight: 500;
   }
-
-  &__form-input {
-    @include forms.form-input--with-button;
-  }
-
-  // FIXME: Centralize styling of different sizes of Spinner in a reusable
-  // class or mixin.
-  // Spinner uses `em`-sizing; make the font-size of the containing element
-  // larger to make spinner larger
-  &__spinner {
-    font-size: (var.$layout-space * 2);
-  }
 }