Use `LabeledButton` in AnnotationPublishControl

src/sidebar/components/Annotation/AnnotationPublishControl.js

@@ -6,7 +6,8 @@ import { isShared } from '../../helpers/permissions';
 import { withServices } from '../../service-context';
 import { applyTheme } from '../../helpers/theme';
 
-import Button from '../Button';
+import { LabeledButton } from '../../../shared/components/buttons';
+
 import Menu from '../Menu';
 import MenuItem from '../MenuItem';
 
@@ -81,14 +82,17 @@ function AnnotationPublishControl({
   return (
     <div className="AnnotationPublishControl">
       <div className="annotation-publish-button">
-        <Button
-          className="annotation-publish-button__primary"
+        <LabeledButton
+          className="PublishControlButton"
           style={buttonStyle}
           onClick={onSave}
           disabled={isDisabled}
           title={`Publish this annotation to ${publishDestination}`}
-          buttonText={`Post to ${publishDestination}`}
-        />
+          size="large"
+          variant="primary"
+        >
+          Post to {publishDestination}
+        </LabeledButton>
         {/* This wrapper div is necessary because of peculiarities with
              Safari: see https://github.com/hypothesis/client/issues/2302 */}
         <div
@@ -120,12 +124,9 @@ function AnnotationPublishControl({
         </div>
       </div>
       <div>
-        <Button
-          icon="cancel"
-          className="AnnotationPublishControl__cancel-button"
-          buttonText="Cancel"
-          onClick={onCancel}
-        />
+        <LabeledButton icon="cancel" onClick={onCancel} size="large">
+          Cancel
+        </LabeledButton>
       </div>
     </div>
   );

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

@@ -77,12 +77,15 @@ describe('AnnotationPublishControl', () => {
     assert.isFalse(wrapper.find('.AnnotationPublishControl').exists());
   });
 
+  const getPublishButton = wrapper =>
+    wrapper.find('LabeledButton[title^="Publish this annotation"]');
+
   describe('theming', () => {
     it('should apply theme styles', () => {
       const fakeStyle = { foo: 'bar' };
       fakeApplyTheme.returns(fakeStyle);
       const wrapper = createAnnotationPublishControl();
-      const btnPrimary = wrapper.find('.annotation-publish-button__primary');
+      const btnPrimary = getPublishButton(wrapper);
 
       assert.calledWith(
         fakeApplyTheme,
@@ -94,12 +97,11 @@ describe('AnnotationPublishControl', () => {
   });
 
   describe('dropdown menu button (form submit button)', () => {
-    const btnClass = '.annotation-publish-button__primary';
     context('shared annotation', () => {
       it('should label the button with the group name', () => {
         const wrapper = createAnnotationPublishControl();
 
-        const btn = wrapper.find(btnClass);
+        const btn = getPublishButton(wrapper);
         assert.equal(
           btn.prop('title'),
           `Publish this annotation to ${fakeGroup.name}`
@@ -114,7 +116,7 @@ describe('AnnotationPublishControl', () => {
         fakeStore.getDraft.returns(draft);
         const wrapper = createAnnotationPublishControl();
 
-        const btn = wrapper.find(btnClass);
+        const btn = getPublishButton(wrapper);
         assert.equal(btn.prop('title'), 'Publish this annotation to Only Me');
       });
     });
@@ -122,14 +124,14 @@ describe('AnnotationPublishControl', () => {
     it('should disable the button if `isDisabled`', () => {
       const wrapper = createAnnotationPublishControl({ isDisabled: true });
 
-      const btn = wrapper.find(btnClass);
+      const btn = getPublishButton(wrapper);
       assert.isOk(btn.prop('disabled'));
     });
 
     it('should enable the button if not `isDisabled`', () => {
       const wrapper = createAnnotationPublishControl({ isDisabled: false });
 
-      const btn = wrapper.find(btnClass);
+      const btn = getPublishButton(wrapper);
       assert.isNotOk(btn.prop('disabled'));
     });
 
@@ -137,7 +139,7 @@ describe('AnnotationPublishControl', () => {
       const fakeOnSave = sinon.stub();
       const wrapper = createAnnotationPublishControl({ onSave: fakeOnSave });
 
-      const btn = wrapper.find(btnClass);
+      const btn = getPublishButton(wrapper);
 
       assert.equal(btn.prop('onClick'), fakeOnSave);
     });
@@ -257,7 +259,9 @@ describe('AnnotationPublishControl', () => {
   describe('cancel button', () => {
     it('should remove the current draft on cancel button click', () => {
       const wrapper = createAnnotationPublishControl({});
-      const cancelBtn = wrapper.find('Button').filter({ buttonText: 'Cancel' });
+      const cancelBtn = wrapper
+        .find('LabeledButton')
+        .filter({ icon: 'cancel' });
 
       cancelBtn.props().onClick();
 
@@ -269,7 +273,9 @@ describe('AnnotationPublishControl', () => {
     it('should remove the annotation from the store if it is new/unsaved', () => {
       fakeMetadata.isNew.returns(true);
       const wrapper = createAnnotationPublishControl({});
-      const cancelBtn = wrapper.find('Button').filter({ buttonText: 'Cancel' });
+      const cancelBtn = wrapper
+        .find('LabeledButton')
+        .filter({ icon: 'cancel' });
 
       cancelBtn.props().onClick();
 

src/styles/sidebar/buttons.scss

@@ -15,3 +15,13 @@
     text-decoration: underline;
   }
 }
+
+.PublishControlButton {
+  @include buttons.LabeledButton {
+    // Border-radius turned off
+    &--primary {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

src/styles/sidebar/components/AnnotationPublishControl.scss

-@use "../../mixins/buttons";
-@use "../../mixins/forms";
 @use "../../mixins/layout";
-@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .AnnotationPublishControl {
   @include layout.row;
   @include layout.horizontal-rhythm(var.$layout-space);
-
-  &__cancel-button {
-    @include buttons.button--labeled;
-    padding: var.$layout-space--small;
-  }
 }
 
 // A split control with a primary submit button on the left
-// (.annotation-publish-button__primary) and a drop-down menu for changing
+// and a drop-down menu for changing
 // the annotation's privacy settings on the right
 // (within .annotation-publish-button__menu-wrapper)
 .annotation-publish-button {
@@ -35,17 +27,6 @@
     min-width: 100%;
   }
 
-  // The left side of the control (the publish button)
-  &__primary {
-    @include buttons.button--primary;
-    padding: var.$layout-space--small;
-
-    // Turn off right-side border radius for alignment with the right side of
-    // the control
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
   // The right side of the control (the privacy `Menu`)
 
   // This wrapper element styling is necessary to account for a peculiarity in