Add rounded corners to all components

src/annotator/components/AdderToolbar.tsx

@@ -19,7 +19,7 @@ function NumberIcon({ badgeCount }: { badgeCount: number }) {
   return (
     <span
       className={classnames(
-        'rounded-[4px] px-1 py-0.5',
+        'rounded px-1 py-0.5',
         // The background color is inherited from the current text color in
         // the containing button and will vary depending on hover state.
         'bg-current',
@@ -238,8 +238,8 @@ export default function AdderToolbar({
         // default border values from Tailwind and have to be explicit about all
         // border attributes.
         'border border-solid border-grey-3',
-        'absolute select-none bg-white rounded-[4px] shadow-adder-toolbar',
-        // Start at a very low opacity as we're going to fade in in the animation
+        'absolute select-none bg-white rounded shadow-adder-toolbar',
+        // Start at a very low opacity as we're going to fade-in in the animation
         'opacity-5',
         {
           'animate-adder-pop-up': arrowDirection === 'up' && isVisible,

src/annotator/components/ClusterToolbar.tsx

@@ -37,7 +37,7 @@ function ClusterStyleControl({
     <div className="space-y-2">
       <div className="flex items-center gap-x-2 text-annotator-base">
         <div
-          className="grow text-color-text px-2 py-1 rounded-[4px]"
+          className="grow text-color-text px-2 py-1 rounded"
           style={{
             backgroundColor: highlightStyles[appliedStyleName].color,
           }}
@@ -130,9 +130,10 @@ export default function ClusterToolbar({
   }
 
   return (
-    <Card>
+    <Card classes="overflow-hidden">
       <div className="flex flex-col text-annotator-base text-color-text">
         <Button
+          classes="rounded-none"
           data-testid="control-toggle-button"
           onClick={() => setOpen(!isOpen)}
           title={isOpen ? 'Hide highlight settings' : 'Show highlight settings'}

src/annotator/components/Toolbar.tsx

@@ -31,7 +31,7 @@ function ToolbarButton({ icon: Icon, ...buttonProps }: ToolbarButtonProps) {
   return (
     <Button
       classes={classnames(
-        'justify-center rounded-[4px]',
+        'justify-center rounded',
         'w-[30px] h-[30px]',
         'shadow border bg-white text-grey-6 hover:text-grey-9',
       )}
@@ -162,7 +162,7 @@ export default function Toolbar({
             classes={classnames(
               'transition-colors focus-visible-ring ring-inset',
               // Height and width to align with the sidebar's top bar
-              'h-[40px] w-[33px] pl-[6px]',
+              'h-[40px] w-[33px] pl-[6px] rounded-bl',
               'bg-white text-grey-5 hover:text-grey-9',
               // Turn on left and bottom borders to continue the
               // border of the sidebar's top bar

src/sidebar/components/Annotation/AnnotationPublishControl.tsx

@@ -93,7 +93,7 @@ function AnnotationPublishControl({
         <div
           className={classnames(
             // Round the right side of this menu-open button only
-            'flex flex-row rounded-r-sm bg-grey-7 hover:bg-grey-8',
+            'flex flex-row rounded-r bg-grey-7 hover:bg-grey-8',
           )}
           style={buttonStyle}
         >

src/sidebar/components/Annotation/AnnotationShareControl.tsx

@@ -144,7 +144,7 @@ function AnnotationShareControl({
         <div
           // Position this Card above its IconButton. Account for larger
           // IconButtons in touch interfaces
-          className="absolute bottom-8 right-1 touch:bottom-touch-minimum"
+          className="absolute bottom-8 right-0 touch:bottom-touch-minimum"
         >
           <Card
             classes={classnames(
@@ -195,7 +195,7 @@ function AnnotationShareControl({
             {showShareLinks && <ShareLinks shareURI={shareUri} />}
             <MenuArrow
               direction="down"
-              classes="bottom-[-8px] right-1 touch:right-[9px]"
+              classes="bottom-[-8px] right-2 touch:right-[9px]"
             />
           </Card>
         </div>

src/sidebar/components/AutocompleteList.tsx

@@ -107,11 +107,11 @@ export default function AutocompleteList<Item>({
         )}
         data-testid="autocomplete-list-container"
       >
-        <Card width="auto">
+        <Card width="auto" classes="overflow-hidden">
           <ul tabIndex={-1} aria-label="Suggestions" role="listbox" {...props}>
             {items}
           </ul>
-          <MenuArrow direction="up" classes="top-[-8px] left-[3px]" />
+          <MenuArrow direction="up" classes="top-[-8px] left-2" />
         </Card>
       </div>
     </div>

src/sidebar/components/MarkdownEditor.tsx

@@ -225,7 +225,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }: ToolbarProps) {
       className={classnames(
         // Allow buttons to wrap to second line if necessary.
         'flex flex-wrap w-full items-center',
-        'p-1 border-x border-t rounded-t-[4px] bg-white',
+        'p-1 border-x border-t rounded-t bg-white',
         // For touch interfaces, allow height to scale to larger button targets.
         // Don't wrap buttons but instead scroll horizontally. Add bottom
         // padding to provide some space for scrollbar.

src/sidebar/components/Menu.tsx

@@ -232,7 +232,7 @@ export default function Menu({
             direction="up"
             classes={classnames(
               // Position menu-arrow caret near bottom right of menu label/toggle control
-              'right-0 top-[calc(100%-3px)] w-[15px]',
+              'right-1 top-[calc(100%-3px)] w-[15px]',
               arrowClass,
             )}
           />
@@ -240,11 +240,13 @@ export default function Menu({
             className={classnames(
               'focus-visible-ring',
               // Position menu content near bottom of menu label/toggle control
-              'absolute top-[calc(100%+5px)] z-1 border shadow',
-              'bg-white text-md',
+              'absolute top-[calc(100%+5px)] z-1',
+              'border shadow rounded-lg overflow-hidden bg-white text-md',
               {
                 'left-0': align === 'left',
-                'right-0': align === 'right',
+                // Adding negative right distance so that the menu arrow does
+                // not overlap with the top-right corner when it's rounded
+                '-right-1': align === 'right',
               },
               contentClass,
             )}

src/sidebar/components/MenuItem.tsx

@@ -239,7 +239,7 @@ export default function MenuItem({
   const wrapperClasses = classnames(
     'focus-visible-ring ring-inset',
     'w-full min-w-[150px] flex items-center select-none',
-    'border-b',
+    'border-b rounded-none cursor-pointer',
     // Set this container as a "group" so that children may style based on its
     // layout state.
     // See https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
@@ -263,7 +263,7 @@ export default function MenuItem({
       'border-b-grey-3': isExpanded,
       'border-b-transparent': !isExpanded,
       'text-color-text-light': isDisabled,
-      'text-color-text': !isDisabled,
+      'text-color-text hover:text-color-text': !isDisabled,
     },
   );
 

src/sidebar/components/PaginationNavigation.tsx

@@ -19,7 +19,7 @@ function NavigationButton({ ...buttonProps }: NavigationButtonProps) {
     <Button
       classes={classnames(
         'px-3.5 py-2.5 gap-x-1',
-        'font-semibold',
+        'font-semibold rounded',
         // These colors are the same as the "dark" variant of IconButton
         'text-grey-7 bg-grey-2 enabled:hover:text-grey-9 enabled:hover:bg-grey-3',
         'disabled:text-grey-5 aria-pressed:bg-grey-3 aria-expanded:bg-grey-3',

src/sidebar/components/ProfileView.tsx

@@ -39,7 +39,7 @@ function ToastBadge({
   return (
     <div
       className={classnames(
-        'flex items-center gap-x-1 py-1 px-2 rounded-[4px]',
+        'flex items-center gap-x-1 py-1 px-2 rounded',
         'bg-green-success/10 animate-pulse-fade-out',
         classes,
       )}
@@ -97,13 +97,13 @@ export default function ProfileView() {
 
   // Render save-success message after each successful save, but do not render
   // it when a "request is in flight". This removal and re-adding across a
-  // sequence of saves ensures that the browser sees the message as newly- added
-  // to the accessiblity DOM and screen readers should announce it at the
+  // sequence of saves ensures that the browser sees the message as newly-added
+  // to the accessibility DOM and screen readers should announce it at the
   // appropriate times.
   const withSaveMessage = saveCount > 0 && !loading;
 
   return (
-    <Card data-testid="profile-container">
+    <Card data-testid="profile-container" classes="overflow-hidden">
       <div
         className={classnames(
           // Ensure there is enough height to clear both the heading text and the

src/sidebar/components/ShareDialog/ShareDialog.tsx

 import { Card, Tab } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 import { useState } from 'preact/hooks';
 
 import { useSidebarStore } from '../../store';
@@ -34,10 +35,12 @@ export default function ShareDialog({
   const panelTitle = `Share Annotations in ${groupName}`;
 
   const tabbedDialog = exportTab || importTab;
-  const [selectedTab, setSelectedTab] = useState<'share' | 'export' | 'import'>(
   // Determine initial selected tab, based on the first tab that will be displayed
-    shareTab ? 'share' : exportTab ? 'export' : 'import',
+  const initialTab = shareTab ? 'share' : exportTab ? 'export' : 'import';
+  const [selectedTab, setSelectedTab] = useState<'share' | 'export' | 'import'>(
+    initialTab,
   );
+  const isFirstTabSelected = tabbedDialog && selectedTab === initialTab;
 
   return (
     <SidebarPanel
@@ -85,7 +88,7 @@ export default function ShareDialog({
               </Tab>
             )}
           </TabHeader>
-          <Card>
+          <Card classes={classnames({ 'rounded-tl-none': isFirstTabSelected })}>
             <TabPanel
               id="share-panel"
               active={selectedTab === 'share'}

src/sidebar/components/SidebarPanel.tsx

@@ -69,6 +69,7 @@ export default function SidebarPanel({
           onClose={closePanel}
           transitionComponent={Slider}
           variant={variant}
+          scrollable={false}
         >
           {children}
         </Dialog>

src/sidebar/components/SortMenu.tsx

@@ -33,7 +33,7 @@ export default function SortMenu() {
   );
 
   return (
-    <div className="SortMenu">
+    <div data-component="SortMenu">
       <Menu
         label={menuLabel}
         title={`Sort by ${sortKey}`}

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

@@ -217,7 +217,7 @@ describe('Menu', () => {
     assert.isTrue(wrapper.find(contentSelector).hasClass('left-0'));
 
     wrapper.setProps({ align: 'right' });
-    assert.isTrue(wrapper.find(contentSelector).hasClass('right-0'));
+    assert.isTrue(wrapper.find(contentSelector).hasClass('-right-1'));
   });
 
   it('applies custom content class', () => {

tailwind-annotator.config.mjs

@@ -9,4 +9,14 @@ export default {
     // This module references `sidebar-frame` and related classes
     './src/annotator/sidebar.{js,ts,tsx}',
   ],
+  theme: {
+    extend: {
+      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',
+      },
+    }
+  }
 };

tailwind.config.mjs

@@ -24,10 +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 default `rounded-sm` size
-        DEFAULT: '0.125rem',
-      },
       boxShadow: {
         'adder-toolbar': '0px 2px 10px 0px rgba(0, 0, 0, 0.25)',
         focus: `0 0 0 2px ${focusBlue}`,