Merge pull request #1760 from hypothesis/button-disabled

Add `disabled` prop to the Button component

src/sidebar/components/button.js

@@ -19,6 +19,7 @@ import SvgIcon from './svg-icon';
 export default function Button({
   buttonText = '',
   className = '',
+  disabled = false,
   icon = '',
   isActive = false,
   onClick = () => null,
@@ -51,6 +52,7 @@ export default function Button({
       aria-pressed={isActive}
       title={title}
       style={style}
+      disabled={disabled}
     >
       {icon && <SvgIcon name={icon} className="button__icon" />}
       {buttonText}
@@ -108,6 +110,9 @@ Button.propTypes = {
   /** callback for button clicks */
   onClick: propTypes.func,
 
+  /** disables the button when true */
+  disabled: propTypes.bool,
+
   /** optional inline styling  */
   style: propTypes.object,
 

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

@@ -91,6 +91,16 @@ describe('Button', () => {
     assert.isTrue(wrapper.find('button').hasClass('button--primary'));
   });
 
+  it('disables the button when `disabled` prop is true', () => {
+    const wrapper = createComponent({ disabled: true });
+    assert.isTrue(wrapper.find('button[disabled=true]').exists());
+  });
+
+  it('shall not disable the button by default', () => {
+    const wrapper = createComponent();
+    assert.isTrue(wrapper.find('button[disabled=false]').exists());
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({