Update to frontend-shared 7.0.1

package.json

@@ -12,7 +12,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.16.7",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-shared": "^6.10.0",
+    "@hypothesis/frontend-shared": "^7.0.1",
     "@hypothesis/frontend-testing": "^1.2.0",
     "@npmcli/arborist": "^7.0.0",
     "@octokit/rest": "^20.0.1",

src/annotator/components/Toolbar.tsx

@@ -8,7 +8,7 @@ import {
   NoteIcon,
   ShowIcon,
 } from '@hypothesis/frontend-shared';
-import type { ButtonCommonProps } from '@hypothesis/frontend-shared/lib/components/input/ButtonBase';
+import type { ButtonProps } from '@hypothesis/frontend-shared/lib/components/input/Button';
 import type {
   IconComponent,
   PresentationalProps,
@@ -19,7 +19,7 @@ import type { JSX, RefObject } from 'preact';
 // TODO: ToolbarButton should be extracted as a shared design pattern or
 // component
 type ToolbarButtonProps = PresentationalProps &
-  ButtonCommonProps &
+  ButtonProps &
   Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'> & {
     icon: IconComponent;
   };

src/sidebar/components/PaginationNavigation.tsx

@@ -3,7 +3,7 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
 } from '@hypothesis/frontend-shared';
-import type { ButtonCommonProps } from '@hypothesis/frontend-shared/lib/components/input/ButtonBase';
+import type { ButtonProps } from '@hypothesis/frontend-shared/lib/components/input/Button';
 import type { PresentationalProps } from '@hypothesis/frontend-shared/lib/types';
 import classnames from 'classnames';
 import type { JSX } from 'preact';
@@ -11,7 +11,7 @@ import type { JSX } from 'preact';
 import { pageNumberOptions } from '../util/pagination';
 
 type NavigationButtonProps = PresentationalProps &
-  ButtonCommonProps &
+  ButtonProps &
   Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>;
 
 function NavigationButton({ ...buttonProps }: NavigationButtonProps) {

src/sidebar/components/SearchInput.tsx

@@ -193,18 +193,15 @@ export default function SearchInput({
           <IconButton
             icon={SearchIcon}
             onClick={() => input.current?.focus()}
-            size="xs"
             title="Search annotations"
             // The containing form has a white background. The top bar is only
             // 40px high. If we allow standard touch-minimum height here (44px),
             // the visible white background exceeds the height of the top bar in
-            // touch contexts. Disable touch sizing, then add back the width
-            // rule to keep horizontal spacing consistent.
-            // FIXME:
-            // Button/IconButton are due a pass for responsive styling and
-            // appropriate styling API controls (@hypothesis/frontend-shared)
-            disableTouchSizing
-            classes="touch:min-w-touch-minimum"
+            // touch contexts. Disable touch sizing via `size="custom"`, then
+            // add back the width rule and padding to keep horizontal spacing
+            // consistent.
+            size="custom"
+            classes="touch:min-w-touch-minimum p-1"
           />
         </div>
       )}

tailwind.config.mjs

@@ -24,12 +24,6 @@ export default {
         'pulse-fade-out': 'pulse-fade-out 5s ease-in-out forwards',
         'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
       },
-      borderRadius: {
-        // Equivalent to tailwind defaults, but overriding values from frontend-shared preset
-        // Once the preset stops defining borderRadius, we can remove this
-        DEFAULT: '0.25rem',
-        lg: '0.5rem',
-      },
       boxShadow: {
         // A more prominent shadow than the one used by tailwind, intended for
         // popovers and menus

yarn.lock

@@ -1905,15 +1905,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypothesis/frontend-shared@npm:^6.10.0":
-  version: 6.12.0
-  resolution: "@hypothesis/frontend-shared@npm:6.12.0"
+"@hypothesis/frontend-shared@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "@hypothesis/frontend-shared@npm:7.0.1"
   dependencies:
     highlight.js: ^11.6.0
     wouter-preact: ^2.10.0-alpha.1
   peerDependencies:
     preact: ^10.4.0
-  checksum: c679a7ffc0265a6eb0394e2a5c0e39b381875f47d84e1b17922e3148f0fcd190584c9627a000467382ae1cdeea07931027407ce1f81a76ddec39d59d6f0b07a3
+  checksum: 9e010f87f175783e46a258ba95fe4a381091aeb8c7a229745867af5a6d9603a50fe7da407f531c935e0eb471479a3d7d44983b3afad138ce8d38507ecded6acf
   languageName: node
   linkType: hard
 
@@ -7681,7 +7681,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-shared": ^6.10.0
+    "@hypothesis/frontend-shared": ^7.0.1
     "@hypothesis/frontend-testing": ^1.2.0
     "@npmcli/arborist": ^7.0.0
     "@octokit/rest": ^20.0.1