Add support for inline styles to shared buttons

To apply theming from settings, we need to be able to set inline styles
on buttons.

src/shared/components/buttons.js

@@ -15,6 +15,7 @@ import { SvgIcon } from '@hypothesis/frontend-shared';
  * @prop {boolean} [pressed] - Is this button currently "active?" (set
  *   `aria-pressed`)
  * @prop {() => any} [onClick]
+ * @prop {Object} [style] - Optional inline styles
  * @prop {string} [title] - Button title; used for `aria-label` attribute
  * @prop {'primary'} [variant] - For styling: element variant
  */
@@ -41,6 +42,7 @@ function ButtonBase({
   expanded,
   pressed,
   onClick = () => {},
+  style = {},
   title,
   variant,
 }) {
@@ -68,6 +70,7 @@ function ButtonBase({
       })}
       onClick={onClick}
       {...otherAttributes}
+      style={style}
     >
       {children}
     </button>

src/shared/components/test/buttons-test.js

@@ -62,6 +62,15 @@ function addCommonTests({ componentName, createComponentFn, withIcon = true }) {
       assert.isFalse(wrapper.find('button').hasClass(componentName));
     });
 
+    it('adds inline styles when provided', () => {
+      const wrapper = createComponentFn({ style: { backgroundColor: 'pink' } });
+
+      assert.equal(
+        wrapper.getDOMNode().getAttribute('style'),
+        'background-color: pink;'
+      );
+    });
+
     [
       {
         propName: 'expanded',