Update shared components in `Thread`

src/sidebar/components/Thread.js

-import { IconButton, LabeledButton } from '@hypothesis/frontend-shared';
+import {
+  Button,
+  ButtonBase,
+  CaretRightIcon,
+  MenuExpandIcon,
+} from '@hypothesis/frontend-shared/lib/next';
 import classnames from 'classnames';
 import { useCallback, useMemo } from 'preact/hooks';
 
@@ -23,7 +28,7 @@ import ModerationBanner from './ModerationBanner';
  *   @param {() => void} props.onToggleReplies
  */
 function ThreadCollapseControl({ threadIsCollapsed, onToggleReplies }) {
-  const toggleIcon = threadIsCollapsed ? 'collapsed' : 'expand-menu';
+  const ToggleIcon = threadIsCollapsed ? CaretRightIcon : MenuExpandIcon;
   const toggleTitle = threadIsCollapsed ? 'Expand replies' : 'Collapse replies';
   return (
     <div
@@ -45,20 +50,20 @@ function ThreadCollapseControl({ threadIsCollapsed, onToggleReplies }) {
           'bg-white'
         )}
       >
-        <IconButton
+        <ButtonBase
           classes={classnames(
             // Pull the button up a little to align horizontally with the
             // thread/annotation's header. Override large touch targets for
             // touch interfaces; we need to conserve space here
-            '-mt-1 touch:min-w-[auto] touch:min-h-[auto]'
+            '-mt-1 touch:min-w-[auto] touch:min-h-[auto] p-[6.5px] text-grey-5 hover:text-grey-7'
           )}
+          data-testid="toggle-button"
           expanded={!threadIsCollapsed}
-          icon={toggleIcon}
           title={toggleTitle}
           onClick={onToggleReplies}
-          size="medium"
-          variant="light"
-        />
+        >
+          <ToggleIcon className="w-em h-em" />
+        </ButtonBase>
       </div>
     </div>
   );
@@ -186,11 +191,12 @@ function Thread({ thread, threadsService }) {
               />
             )}
             <div>
-              <LabeledButton
+              <Button
+                data-testid="show-hidden-button"
                 onClick={() => threadsService.forceVisible(thread)}
               >
                 Show {countHidden(thread)} more in conversation
-              </LabeledButton>
+              </Button>
             </div>
           </div>
         )}

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

@@ -115,7 +115,7 @@ describe('Thread', () => {
 
     // Retrieve the (caret) button for showing and hiding replies
     const getToggleButton = wrapper => {
-      return wrapper.find('IconButton');
+      return wrapper.find('button[data-testid="toggle-button"]');
     };
 
     beforeEach(() => {
@@ -209,9 +209,7 @@ describe('Thread', () => {
       collapsedThread.parent = '1';
       const wrapper = createComponent({ thread: collapsedThread });
 
-      assert.isTrue(
-        wrapper.find('IconButton[title="Expand replies"]').exists()
-      );
+      assert.isTrue(wrapper.find('button[title="Expand replies"]').exists());
     });
 
     it('does not render child threads', () => {
@@ -264,7 +262,10 @@ describe('Thread', () => {
       const wrapper = createComponent({ thread });
 
       act(() => {
-        wrapper.find('LabeledButton').props().onClick();
+        wrapper
+          .find('button[data-testid="show-hidden-button"]')
+          .props()
+          .onClick();
       });
 
       assert.calledOnce(fakeThreadsService.forceVisible);