Replace `Button` with appropriate shared button component

src/sidebar/components/Annotation/AnnotationActionBar.js

@@ -6,7 +6,7 @@ import {
 import { isPrivate, permits } from '../../helpers/permissions';
 import { withServices } from '../../service-context';
 
-import Button from '../Button';
+import { IconButton } from '../../../shared/components/buttons';
 
 import AnnotationShareControl from './AnnotationShareControl';
 
@@ -25,7 +25,7 @@ import AnnotationShareControl from './AnnotationShareControl';
  */
 
 /**
- * A collection of `Button`s in the footer area of an annotation that take
+ * A collection of buttons in the footer area of an annotation that take
  * actions on the annotation.
  *
  * @param {AnnotationActionBarProps} props
@@ -89,11 +89,13 @@ function AnnotationActionBar({
 
   return (
     <div className="AnnotationActionBar u-layout-row">
-      {showEditAction && <Button icon="edit" title="Edit" onClick={onEdit} />}
+      {showEditAction && (
+        <IconButton icon="edit" title="Edit" onClick={onEdit} />
+      )}
       {showDeleteAction && (
-        <Button icon="trash" title="Delete" onClick={onDelete} />
+        <IconButton icon="trash" title="Delete" onClick={onDelete} />
       )}
-      <Button icon="reply" title="Reply" onClick={onReplyClick} />
+      <IconButton icon="reply" title="Reply" onClick={onReplyClick} />
       {shareLink && (
         <AnnotationShareControl
           annotation={annotation}
@@ -102,15 +104,15 @@ function AnnotationActionBar({
         />
       )}
       {showFlagAction && !annotation.flagged && (
-        <Button
+        <IconButton
           icon="flag"
           title="Report this annotation to moderators"
           onClick={onFlag}
         />
       )}
       {showFlagAction && annotation.flagged && (
-        <Button
-          isPressed={true}
+        <IconButton
+          pressed={true}
           icon="flag--active"
           title="Annotation has been reported to the moderators"
         />

src/sidebar/components/Annotation/AnnotationReplyToggle.js

-import Button from '../Button';
+import { LinkButton } from '../../../shared/components/buttons';
 
 /**
  * @typedef AnnotationReplyToggleProps
@@ -22,11 +22,9 @@ function AnnotationReplyToggle({
   const toggleText = `${toggleAction} (${replyCount})`;
 
   return (
-    <Button
-      className="Annotation__reply-toggle"
-      onClick={onToggleReplies}
-      buttonText={toggleText}
-    />
+    <LinkButton onClick={onToggleReplies} title={toggleText}>
+      {toggleText}
+    </LinkButton>
   );
 }
 

src/sidebar/components/Annotation/AnnotationShareControl.js

@@ -7,6 +7,8 @@ import { isPrivate } from '../../helpers/permissions';
 import { withServices } from '../../service-context';
 import { isIOS } from '../../../shared/user-agent';
 
+import { IconButton } from '../../../shared/components/buttons';
+
 import Button from '../Button';
 import ShareLinks from '../ShareLinks';
 
@@ -119,11 +121,11 @@ function AnnotationShareControl({
 
   return (
     <div className="AnnotationShareControl" ref={shareRef}>
-      <Button
+      <IconButton
         icon="share"
         title="Share"
         onClick={toggleSharePanel}
-        isExpanded={isOpen}
+        expanded={isOpen}
       />
       {isOpen && (
         <div className="annotation-share-panel">

src/sidebar/components/Annotation/test/AnnotationActionBar-test.js

@@ -53,7 +53,7 @@ describe('AnnotationActionBar', () => {
   };
 
   const getButton = (wrapper, iconName) => {
-    return wrapper.find('Button').filter({ icon: iconName });
+    return wrapper.find('IconButton').filter({ icon: iconName });
   };
 
   beforeEach(() => {

src/sidebar/components/Annotation/test/AnnotationReplyToggle-test.js

@@ -22,7 +22,7 @@ describe('AnnotationReplyToggle', () => {
   beforeEach(() => {
     fakeOnToggleReplies = sinon.stub();
     // Note that this component does not mock imported components
-    // because it entirely consists of a `Button`
+    // because it entirely consists of a `LinkButton`
   });
 
   it('renders expand wording if thread is collapsed', () => {
@@ -44,7 +44,7 @@ describe('AnnotationReplyToggle', () => {
 
   it('invokes the toggle callback when clicked', () => {
     const wrapper = createComponent();
-    const button = wrapper.find('Button');
+    const button = wrapper.find('LinkButton');
 
     act(() => {
       button.props().onClick();

src/sidebar/components/Annotation/test/AnnotationShareControl-test.js

@@ -22,6 +22,10 @@ describe('AnnotationShareControl', () => {
     return wrapper.find('Button').filter({ icon: iconName });
   };
 
+  const getIconButton = (wrapper, iconName) => {
+    return wrapper.find('IconButton').filter({ icon: iconName });
+  };
+
   function createComponent(props = {}) {
     return mount(
       <AnnotationShareControl
@@ -37,7 +41,7 @@ describe('AnnotationShareControl', () => {
 
   function openElement(wrapper) {
     act(() => {
-      wrapper.find('Button').props().onClick();
+      wrapper.find('IconButton').props().onClick();
     });
     wrapper.update();
   }
@@ -111,7 +115,7 @@ describe('AnnotationShareControl', () => {
 
   it('toggles the share control element when the button is clicked', () => {
     const wrapper = createComponent();
-    const button = getButton(wrapper, 'share');
+    const button = getIconButton(wrapper, 'share');
 
     act(() => {
       button.props().onClick();

src/sidebar/components/FilterStatus.js

@@ -2,7 +2,7 @@ import { useMemo } from 'preact/hooks';
 
 import { countVisible } from '../helpers/thread';
 
-import Button from './Button';
+import { LabeledButton } from '../../shared/components/buttons';
 
 import useRootThread from './hooks/use-root-thread';
 import { useStoreProxy } from '../store/use-store';
@@ -138,12 +138,14 @@ function SelectionFilterStatus({ filterState, rootThread }) {
   const buttonText = showCount ? `Show all (${totalCount})` : 'Show all';
 
   const button = (
-    <Button
-      buttonText={buttonText}
-      className="Button--primary"
+    <LabeledButton
+      title={buttonText}
+      variant="primary"
       onClick={() => store.clearSelection()}
       icon="cancel"
-    />
+    >
+      {buttonText}
+    </LabeledButton>
   );
   return (
     <FilterStatusPanel
@@ -173,12 +175,14 @@ function QueryFilterStatus({ filterState, rootThread }) {
   const resultCount = visibleCount - filterState.forcedVisibleCount;
 
   const button = (
-    <Button
+    <LabeledButton
       icon="cancel"
-      className="Button--primary"
-      buttonText="Clear search"
+      variant="primary"
+      title="Clear search"
       onClick={() => store.clearSelection()}
-    />
+    >
+      Clear search
+    </LabeledButton>
   );
 
   return (
@@ -218,10 +222,10 @@ function FocusFilterStatus({ filterState, rootThread }) {
 
   if (filterState.forcedVisibleCount > 0) {
     buttonProps.onClick = () => store.clearSelection();
-    buttonProps.buttonText = 'Reset filters';
+    buttonProps.title = 'Reset filters';
   } else {
     buttonProps.onClick = () => store.toggleFocusMode();
-    buttonProps.buttonText = filterState.focusActive
+    buttonProps.title = filterState.focusActive
       ? 'Show all'
       : `Show only ${filterState.focusDisplayName}`;
   }
@@ -229,7 +233,11 @@ function FocusFilterStatus({ filterState, rootThread }) {
     ? filterState.focusDisplayName
     : '';
 
-  const button = <Button className="Button--primary" {...buttonProps} />;
+  const button = (
+    <LabeledButton variant="primary" {...buttonProps}>
+      {buttonProps.title}
+    </LabeledButton>
+  );
 
   return (
     <FilterStatusPanel

src/sidebar/components/LoginPromptPanel.js

 import { useStoreProxy } from '../store/use-store';
 
-import Button from './Button';
+import { LabeledButton } from '../../shared/components/buttons';
 import SidebarPanel from './SidebarPanel';
 
 /**
@@ -27,17 +27,13 @@ export default function LoginPromptPanel({ onLogin, onSignUp }) {
       panelName="loginPrompt"
     >
       <p>Please log in to create annotations or highlights.</p>
-      <div className="SidebarPanel__actions">
-        <Button
-          buttonText="Sign up"
-          className="SidebarPanel__button"
-          onClick={onSignUp}
-        />
-        <Button
-          buttonText="Log in"
-          className="SidebarPanel__button--primary"
-          onClick={onLogin}
-        />
+      <div className="LoginPromptPanel__buttons">
+        <LabeledButton title="Sign up" onClick={onSignUp}>
+          Sign up
+        </LabeledButton>
+        <LabeledButton title="Log in" variant="primary" onClick={onLogin}>
+          Log in
+        </LabeledButton>
       </div>
     </SidebarPanel>
   );

src/sidebar/components/Panel.js

 import { SvgIcon } from '@hypothesis/frontend-shared';
 
-import Button from './Button';
+import { LabeledButton } from '../../shared/components/buttons';
 
 /**
  * @typedef PanelProps
@@ -29,7 +29,9 @@ export default function Panel({ children, icon, onClose, title }) {
         <h2 className="Panel__title u-stretch">{title}</h2>
         {withCloseButton && (
           <div>
-            <Button icon="cancel" buttonText="Close" onClick={onClose} />
+            <LabeledButton icon="cancel" title="Close" onClick={onClose}>
+              Close
+            </LabeledButton>
           </div>
         )}
       </div>

src/sidebar/components/VersionInfo.js

 import { copyText } from '../util/copy-to-clipboard';
 import { withServices } from '../service-context';
 
-import Button from './Button';
+import { LabeledButton } from '../../shared/components/buttons';
 
 /**
  * @typedef VersionInfoProps
@@ -41,11 +41,9 @@ function VersionInfo({ toastMessenger, versionData }) {
         <dd className="VersionInfo__value">{versionData.timestamp}</dd>
       </dl>
       <div className="u-layout-row--justify-center">
-        <Button
-          buttonText="Copy version details"
-          onClick={copyVersionData}
-          icon="copy"
-        />
+        <LabeledButton onClick={copyVersionData} icon="copy">
+          Copy version details
+        </LabeledButton>
       </div>
     </div>
   );

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

@@ -64,9 +64,9 @@ describe('FilterStatus', () => {
   }
 
   function assertButton(wrapper, expected) {
-    const buttonProps = wrapper.find('Button').props();
+    const buttonProps = wrapper.find('LabeledButton').props();
 
-    assert.equal(buttonProps.buttonText, expected.text);
+    assert.equal(buttonProps.title, expected.text);
     assert.equal(buttonProps.icon, expected.icon);
     buttonProps.onClick();
     assert.calledOnce(expected.callback);

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

@@ -42,9 +42,9 @@ describe('Panel', () => {
         onClose: sinon.stub(),
       });
 
-      const closeButton = wrapper.find('Button');
+      const closeButton = wrapper.find('LabeledButton');
       assert.isTrue(closeButton.exists());
-      assert.equal(closeButton.props().buttonText, 'Close');
+      assert.equal(closeButton.props().title, 'Close');
     });
 
     it('invokes `onClose` handler when close button is clicked', () => {
@@ -53,7 +53,7 @@ describe('Panel', () => {
         onClose,
       });
 
-      wrapper.find('Button').props().onClick();
+      wrapper.find('LabeledButton').props().onClick();
 
       assert.calledOnce(onClose);
     });

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

@@ -6,7 +6,7 @@ import { $imports } from '../VersionInfo';
 import mockImportedComponents from '../../../test-util/mock-imported-components';
 import { checkAccessibility } from '../../../test-util/accessibility';
 
-describe('VersionInfo', function () {
+describe('VersionInfo', () => {
   let fakeVersionData;
   // Services
   let fakeToastMessenger;
@@ -66,7 +66,7 @@ describe('VersionInfo', function () {
     it('copies version info to clipboard when copy button clicked', () => {
       const wrapper = createComponent();
 
-      wrapper.find('Button').props().onClick();
+      wrapper.find('LabeledButton').props().onClick();
 
       assert.calledWith(fakeCopyToClipboard.copyText, 'fakeString');
     });
@@ -74,7 +74,7 @@ describe('VersionInfo', function () {
     it('confirms info copy when successful', () => {
       const wrapper = createComponent();
 
-      wrapper.find('Button').props().onClick();
+      wrapper.find('LabeledButton').props().onClick();
 
       assert.calledWith(
         fakeToastMessenger.success,
@@ -86,7 +86,7 @@ describe('VersionInfo', function () {
       fakeCopyToClipboard.copyText.throws();
       const wrapper = createComponent();
 
-      wrapper.find('Button').props().onClick();
+      wrapper.find('LabeledButton').props().onClick();
 
       assert.calledWith(
         fakeToastMessenger.error,

src/styles/sidebar/components/LoginPromptPanel.scss

+@use "../../mixins/layout";
+@use "../../variables" as var;
+
+.LoginPromptPanel__buttons {
+  @include layout.row;
+  @include layout.horizontal-rhythm(var.$layout-space--xsmall);
+}

src/styles/sidebar/sidebar.scss

@@ -38,6 +38,7 @@
 @use './components/HypothesisApp';
 @use './components/LaunchErrorPanel';
 @use './components/LoggedOutMessage';
+@use './components/LoginPromptPanel';
 @use './components/MarkdownEditor';
 @use './components/MarkdownView';
 @use './components/Menu';