Update annotator toolbar CSS class names to match conventions

Rename CSS class names for `Toolbar` component to match the component itself.
This component name is really overly generic but at least this brings
the CSS and Preact components into line.

One of the toolbar's classes was applied to a container element created
by `ToolbarController`. This class has been moved to an element created
by the `Toolbar` component for consistency. This means there is an
apparently redundant (no styling, one child) container div when looking
at the DOM structure for the toolbar + bucket bar. This will go away if
the whole sidebar container is made into a single Preact component in
future.

src/annotator/components/Toolbar.js

@@ -14,7 +14,7 @@ import propTypes from 'prop-types';
 function ToolbarButton({
   buttonRef,
   expanded,
-  className = 'annotator-toolbar-button',
+  className = 'Toolbar__button',
   label,
   icon,
   onClick,
@@ -98,10 +98,10 @@ export default function Toolbar({
   useMinimalControls = false,
 }) {
   return (
-    <>
+    <div className="Toolbar">
       {useMinimalControls && isSidebarOpen && (
         <ToolbarButton
-          className="annotator-toolbar__sidebar-close"
+          className="Toolbar__sidebar-close"
           label="Close annotation sidebar"
           icon="cancel"
           onClick={closeSidebar}
@@ -109,7 +109,7 @@ export default function Toolbar({
       )}
       {!useMinimalControls && (
         <ToolbarButton
-          className="annotator-toolbar__sidebar-toggle"
+          className="Toolbar__sidebar-toggle"
           buttonRef={toggleSidebarRef}
           label="Annotation sidebar"
           icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
@@ -118,7 +118,7 @@ export default function Toolbar({
         />
       )}
       {!useMinimalControls && (
-        <div className="annotator-toolbar-buttonbar">
+        <div className="Toolbar__buttonbar">
           <ToolbarButton
             label="Show highlights"
             icon={showHighlights ? 'show' : 'hide'}
@@ -134,7 +134,7 @@ export default function Toolbar({
           />
         </div>
       )}
-    </>
+    </div>
   );
 }
 

src/annotator/toolbar.js

@@ -24,7 +24,6 @@ export class ToolbarController {
     const { createAnnotation, setSidebarOpen, setHighlightsVisible } = options;
 
     this._container = container;
-    this._container.className = 'annotator-toolbar';
 
     this._useMinimalControls = false;
 

src/styles/annotator/components/Toolbar.scss

@@ -15,7 +15,7 @@
   // which provides controls for toggling the sidebar,
   // toggling highlights etc.
 
-  .annotator-toolbar {
+  .Toolbar {
     position: absolute;
     left: -(var.$annotator-toolbar-width);
     width: var.$annotator-toolbar-width;
@@ -29,7 +29,7 @@
     z-index: 2;
   }
 
-  .annotator-toolbar-buttonbar {
+  .Toolbar__buttonbar {
     @include layout.vertical-rhythm(5px);
     margin-top: var.$layout-space--small;
   }
@@ -51,7 +51,7 @@
   }
 
   // Toolbar button with icon
-  .annotator-toolbar-button {
+  .Toolbar__button {
     @include annotator-button;
     @include utils.shadow;
     @include utils.border;
@@ -59,7 +59,7 @@
   }
 
   // Control to collapse/expand the sidebar
-  .annotator-toolbar__sidebar-toggle {
+  .Toolbar__sidebar-toggle {
     @include annotator-button;
     @include utils.border--left;
     @include utils.border--bottom;
@@ -74,7 +74,7 @@
   }
 
   /** Visible with clean theme */
-  .annotator-toolbar__sidebar-close {
+  .Toolbar__sidebar-close {
     @include buttons.reset-native-btn-styles;
     @include buttons.button-hover;
     @include utils.border;