Add rounded corners to all components

hypothesis · Nov 7, 2023 · 76ae2a4 · 76ae2a4
1 parent 07b9710
commit 76ae2a4
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 27 deletions.
diff --git a/package.json b/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.8.1",
+    "@hypothesis/frontend-shared": "^6.10.0",
     "@hypothesis/frontend-testing": "^1.0.1",
     "@npmcli/arborist": "^7.0.0",
     "@octokit/rest": "^20.0.1",

diff --git a/src/annotator/components/AdderToolbar.tsx b/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,

diff --git a/src/annotator/components/ClusterToolbar.tsx b/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'}

diff --git a/src/annotator/components/Toolbar.tsx b/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

diff --git a/src/sidebar/components/MarkdownEditor.tsx b/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.

diff --git a/src/sidebar/components/Menu.tsx b/src/sidebar/components/Menu.tsx
@@ -232,19 +232,21 @@ 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,
             )}
           />
           <div
             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,
             )}

diff --git a/src/sidebar/components/PaginationNavigation.tsx b/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',

diff --git a/src/sidebar/components/ProfileView.tsx b/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,
       )}

diff --git a/src/sidebar/components/ShareDialog/ShareDialog.tsx b/src/sidebar/components/ShareDialog/ShareDialog.tsx
@@ -1,4 +1,5 @@
 import { Card, Tab } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 import { useState } from 'preact/hooks';
 
 import { useSidebarStore } from '../../store';
@@ -38,6 +39,10 @@ export default function ShareDialog({
     // Determine initial selected tab, based on the first tab that will be displayed
     shareTab ? 'share' : exportTab ? 'export' : 'import',
   );
+  const isFirstTabSelected =
+    (shareTab && selectedTab === 'share') ||
+    (!shareTab && exportTab && selectedTab === 'export') ||
+    (!shareTab && !exportTab && importTab && selectedTab === 'import');
 
   return (
     <SidebarPanel
@@ -85,7 +90,7 @@ export default function ShareDialog({
               </Tab>
             )}
           </TabHeader>
-          <Card>
+          <Card classes={classnames({ 'rounded-tl-none': isFirstTabSelected })}>
             <TabPanel
               id="share-panel"
               active={selectedTab === 'share'}

diff --git a/src/sidebar/components/SidebarPanel.tsx b/src/sidebar/components/SidebarPanel.tsx
@@ -69,6 +69,7 @@ export default function SidebarPanel({
           onClose={closePanel}
           transitionComponent={Slider}
           variant={variant}
+          scrollable={false}
         >
           {children}
         </Dialog>

diff --git a/src/sidebar/components/SortMenu.tsx b/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}`}

diff --git a/src/sidebar/components/test/Menu-test.js b/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', () => {

diff --git a/tailwind-annotator.config.mjs b/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',
+      },
+    }
+  }
 };
diff --git a/tailwind.config.mjs b/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}`,

diff --git a/yarn.lock b/yarn.lock
@@ -1944,15 +1944,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypothesis/frontend-shared@npm:^6.8.1":
-  version: 6.9.0
-  resolution: "@hypothesis/frontend-shared@npm:6.9.0"
+"@hypothesis/frontend-shared@npm:^6.10.0":
+  version: 6.10.0
+  resolution: "@hypothesis/frontend-shared@npm:6.10.0"
   dependencies:
     highlight.js: ^11.6.0
     wouter-preact: ^2.10.0-alpha.1
   peerDependencies:
     preact: ^10.4.0
-  checksum: e8fe4a40a7502476f7eb16957803158084e140b8dc95b0ff54aae25cf02a2c780953e42c776715f7eddf8bc5e1119223b5aeaa070ae65c194ba38b06dfff650a
+  checksum: bf58240a46270ab6674e2c1bbd2ea5994ac6112b9bb531ae69bc3dbb7418e335a62577bf99660369264fff9ae1813f47d27cb9ecd6764a7fe1cd471ee9bb825d
   languageName: node
   linkType: hard
 
@@ -7630,7 +7630,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-shared": ^6.8.1
+    "@hypothesis/frontend-shared": ^6.10.0
     "@hypothesis/frontend-testing": ^1.0.1
     "@npmcli/arborist": ^7.0.0
     "@octokit/rest": ^20.0.1