Convert `AdderToolbar` CSS classes to current conventions

Rename all CSS classes used by the `AdderToolbar` component to follow
the `Component__element--modifier` syntax that we use for other
components. Also rename the `Adder.scss` file to match the Preact
component name.

src/annotator/components/AdderToolbar.js

@@ -19,16 +19,16 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
 
   return (
     <button
-      className="annotator-adder-button"
+      className="AdderToolbar__button"
       onClick={onClick}
       aria-label={title}
       title={title}
     >
-      {icon && <SvgIcon name={icon} className="annotator-adder-button__icon" />}
+      {icon && <SvgIcon name={icon} className="AdderToolbar__icon" />}
       {typeof badgeCount === 'number' && (
-        <span className="annotator-adder-button__badge">{badgeCount}</span>
+        <span className="AdderToolbar__badge">{badgeCount}</span>
       )}
-      <span className="annotator-adder-button__label">{label}</span>
+      <span className="AdderToolbar__label">{label}</span>
     </button>
   );
 }
@@ -91,14 +91,14 @@ export default function AdderToolbar({
   // so that we can compute its size in order to position it before display.
   return (
     <div
-      className={classnames('annotator-adder', {
-        'annotator-adder--down': arrowDirection === 'up',
-        'annotator-adder--up': arrowDirection === 'down',
+      className={classnames('AdderToolbar', {
+        'AdderToolbar--down': arrowDirection === 'up',
+        'AdderToolbar--up': arrowDirection === 'down',
         'is-active': isVisible,
       })}
       style={{ visibility: isVisible ? 'visible' : 'hidden' }}
     >
-      <div className="annotator-adder-actions">
+      <div className="AdderToolbar__actions">
         <ToolbarButton
           icon="annotate"
           onClick={e => handleCommand(e, 'annotate')}
@@ -111,9 +111,7 @@ export default function AdderToolbar({
           label="Highlight"
           shortcut={highlightShortcut}
         />
-        {annotationCount > 0 && (
-          <div className="annotator-adder-actions__separator" />
-        )}
+        {annotationCount > 0 && <div className="AdderToolbar__separator" />}
         {annotationCount > 0 && (
           <ToolbarButton
             badgeCount={annotationCount}
@@ -126,9 +124,9 @@ export default function AdderToolbar({
       <SvgIcon
         name="pointer"
         inline={true}
-        className={classnames('annotator-adder-arrow', {
-          'annotator-adder-arrow--down': arrowDirection === 'down',
-          'annotator-adder-arrow--up': arrowDirection === 'up',
+        className={classnames('AdderToolbar__arrow', {
+          'AdderToolbar__arrow--down': arrowDirection === 'down',
+          'AdderToolbar__arrow--up': arrowDirection === 'up',
         })}
       />
     </div>

src/annotator/test/adder-test.js

@@ -84,7 +84,7 @@ describe('Adder', () => {
     new Adder(adderEl, adderCallbacks);
 
     assert.called(adderEl.attachShadow);
-    assert.isTrue(shadowEl.childNodes[0].classList.contains('annotator-adder'));
+    assert.isTrue(shadowEl.childNodes[0].classList.contains('AdderToolbar'));
 
     adderEl.remove();
   });

src/styles/annotator/annotator.scss

@@ -12,7 +12,7 @@
 @use '@hypothesis/frontend-shared/styles';
 
 // Annotator-specific components.
-@use './components/Adder';
+@use './components/AdderToolbar';
 @use './components/Toolbar';
 @use './bucket-bar';
 @use './highlights';

src/styles/annotator/components/Adder.scss → src/styles/annotator/components/AdderToolbar.scss

@@ -8,7 +8,7 @@ $adder-transition-duration: 80ms;
 
 // Main class for the root element of the "adder" toolbar that appears when the
 // user makes a text selection.
-.annotator-adder {
+.AdderToolbar {
   // Reset all inherited properties to their initial values. This prevents CSS
   // property values from the host page being inherited by elements of the
   // Adder, even when using Shadow DOM.
@@ -49,7 +49,7 @@ $adder-transition-duration: 80ms;
   }
 }
 
-.annotator-adder-arrow {
+.AdderToolbar__arrow {
   @include molecules.menu-arrow;
   // Horizontal centering, part 1
   left: 50%;
@@ -74,11 +74,11 @@ $adder-transition-duration: 80ms;
   }
 }
 
-.annotator-adder-actions {
+.AdderToolbar__actions {
   @include layout.row;
 }
 
-.annotator-adder-button {
+.AdderToolbar__button {
   @include layout.column($align: center);
   @include buttons.reset-native-btn-styles;
 
@@ -88,13 +88,14 @@ $adder-transition-duration: 80ms;
   line-height: var.$annotator-adder-line-height;
   padding: var.$layout-space--small;
   transition: color $adder-transition-duration;
+}
 
-  &__label {
+.AdderToolbar__label {
   margin-top: var.$layout-space--xxsmall;
   transition: color $adder-transition-duration;
-  }
+}
 
-  &__badge {
+.AdderToolbar__badge {
   // The badge should be vertically aligned with icons in other toolbar buttons
   // and the label underneath should also align with labels in other buttons.
   background-color: var.$grey-mid;
@@ -103,10 +104,9 @@ $adder-transition-duration: 80ms;
   font-weight: bold;
   // For positioning the number appropriately withint the badge background
   padding: 2px 4px;
-  }
 }
 
-.annotator-adder-actions__separator {
+.AdderToolbar__separator {
   margin: var.$layout-space--xxsmall;
   @include utils.border--right;
   // Override border color to be a little darker
@@ -115,11 +115,11 @@ $adder-transition-duration: 80ms;
 
 // The toolbar has full contrast when not hovered. When the toolbar is hovered,
 // the buttons are dimmed except for the one which is currently hovered.
-.annotator-adder-actions:hover {
-  .annotator-adder-button:not(:hover) {
+.AdderToolbar__actions:hover {
+  .AdderToolbar__button:not(:hover) {
     color: var.$grey-semi;
 
-    .annotator-adder-button__badge {
+    .AdderToolbar__badge {
       background-color: var.$grey-semi;
     }
   }