Convert SelectionTabs to Tailwind

src/sidebar/components/SelectionTabs.js

-import { Frame, Icon, LabeledButton } from '@hypothesis/frontend-shared';
+import {
+  Frame,
+  Icon,
+  LabeledButton,
+  LinkButton,
+} from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import { applyTheme } from '../helpers/theme';
@@ -44,10 +49,13 @@ function Tab({
   const title = count > 0 ? `${label} (${count} available)` : label;
 
   return (
-    <LabeledButton
-      classes={classnames('text-color-text', 'SelectionTab', {
-        'is-selected': isSelected,
-      })}
+    <LinkButton
+      classes={classnames(
+        'inline bg-transparent min-w-[5.25rem] text-color-text hover:!no-underline',
+        {
+          'font-bold': isSelected,
+        }
+      )}
       // Listen for `onMouseDown` so that the tab is selected when _pressed_
       // as this makes the UI feel faster. Also listen for `onClick` as a fallback
       // to enable selecting the tab via other input methods.
@@ -61,15 +69,12 @@ function Tab({
       <>
         {children}
         {count > 0 && !isWaitingToAnchor && (
-          <span
-            className="text-tiny"
-            style="position:relative;bottom:3px;left:2px"
-          >
+          <span className="relative bottom-[3px] left-[2px] text-tiny">
             {count}
           </span>
         )}
       </>
-    </LabeledButton>
+    </LinkButton>
   );
 }
 
@@ -109,11 +114,13 @@ function SelectionTabs({ annotationsService, isLoading, settings }) {
   const showNotesUnavailableMessage = selectedTab === 'note' && noteCount === 0;
 
   return (
-    <div className="hyp-u-vertical-spacing--4 SelectionTabs__container">
     <div
-        className="hyp-u-layout-row hyp-u-horizontal-spacing--6 SelectionTabs"
-        role="tablist"
+      className={classnames(
+        // 9px balances out the space above the tabs
+        'space-y-3 pb-[9px]'
+      )}
     >
+      <div className="flex gap-x-6 theme-clean:ml-[15px]" role="tablist">
         <Tab
           count={annotationCount}
           isWaitingToAnchor={isWaitingToAnchorAnnotations}
@@ -145,7 +152,7 @@ function SelectionTabs({ annotationsService, isLoading, settings }) {
         )}
       </div>
       {selectedTab === 'note' && settings.enableExperimentalNewNoteButton && (
-        <div className="hyp-u-layout-row--justify-right">
+        <div className="flex justify-end">
           <LabeledButton
             data-testid="new-note-button"
             icon="add"
@@ -171,7 +178,7 @@ function SelectionTabs({ annotationsService, isLoading, settings }) {
             <br />
             Create one by selecting some text and clicking the{' '}
             <Icon
-              classes="m-0.5 inline -mt-0.5"
+              classes="inline m-0.5 -mt-0.5"
               name="annotate"
               title="Annotate"
             />{' '}

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

@@ -72,8 +72,8 @@ describe('SelectionTabs', () => {
       const annotationTab = wrapper.find('Tab[label="Annotations"]');
       const noteTab = wrapper.find('Tab[label="Page notes"]');
 
-      assert.isTrue(annotationTab.find('LabeledButton').props().pressed);
-      assert.isFalse(noteTab.find('LabeledButton').props().pressed);
+      assert.isTrue(annotationTab.find('LinkButton').props().pressed);
+      assert.isFalse(noteTab.find('LinkButton').props().pressed);
     });
 
     it('should not display the add-page-note button when the annotations tab is active', () => {
@@ -93,12 +93,11 @@ describe('SelectionTabs', () => {
 
       const annotationTabButton = wrapper
         .find('Tab[label="Annotations"]')
-        .find('LabeledButton');
+        .find('LinkButton');
       const noteTabButton = wrapper
         .find('Tab[label="Page notes"]')
-        .find('LabeledButton');
+        .find('LinkButton');
 
-      assert.isTrue(noteTabButton.find('button').hasClass('is-selected'));
       assert.isTrue(noteTabButton.prop('pressed'));
       assert.isFalse(annotationTabButton.prop('pressed'));
     });
@@ -175,7 +174,7 @@ describe('SelectionTabs', () => {
       const wrapper = createComponent();
 
       const orphanTab = wrapper.find('Tab[label="Orphans"]');
-      assert.isTrue(orphanTab.find('LabeledButton').prop('pressed'));
+      assert.isTrue(orphanTab.find('LinkButton').prop('pressed'));
     });
 
     it('should not display orphans tab if there are 0 orphans', () => {

src/styles/sidebar/components/SelectionTabs.scss

-@use '../../variables' as var;
-
-.SelectionTabs__container {
-  // FIXME: This should be a margin, and it should be handled by the parent,
-  // but needs to be considered carefully because applying vertical rhythm to
-  // this component's parent messes with the calculations in the virtualized
-  // thread list. Needs another pass. Note also that it is `10px` (and looks
-  // unbalanced at the standard vertical rhythm size of `1rem`)
-  padding-bottom: 10px;
-}
-
-.SelectionTab {
-  margin: 0;
-  padding: 0;
-  font-weight: normal;
-  background-color: transparent;
-
-  min-width: 5.25rem;
-
-  &:hover:not([disabled]) {
-    color: var.$color-link-hover;
-  }
-
-  &.is-selected {
-    font-weight: bold;
-  }
-}
-
-/** Clean theme affordances */
-#{var.$sidebar--theme-clean} .SelectionTabs {
-  margin-left: 15px;
-}

src/styles/sidebar/components/_index.scss

@@ -21,7 +21,6 @@
 @use './NotebookView';
 @use './NotebookResultCount';
 @use './PaginationNavigation';
-@use './SelectionTabs';
 @use './SearchInput';
 @use './StyledText';
 @use './ToastMessages';