fix: hover interaction with more button (#7020)

alexnm · web-flow · commit 0d79ef4204ae · 2022-10-13T22:26:14.000+03:00
* fix: hover interaction with more button

* fix: variant for square IconButton

* chore: comment
diff --git a/packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx b/packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx
@@ -220,10 +220,14 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
               // TODO: add aria-label based on title to IconButton?
               <IconButton
                 name="arrowDown"
+                variant="square"
                 size={16}
                 title="Back to overview"
                 css={{
                   transform: 'rotate(90deg)',
+                  '&:active:not(:disabled)': {
+                    transform: 'rotate(90deg)',
+                  },
                 }}
                 onClick={() => {
                   setViewState('initial');
@@ -255,6 +259,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
             // TODO: IconButton doesn't have aria label or visuallyhidden text (reads floating label too late)
             <IconButton
               name="cross"
+              variant="square"
               size={16}
               title="Close modal"
               onClick={() => actions.modals.newSandboxModal.close()}
diff --git a/packages/app/src/app/pages/Dashboard/Components/Branch/BranchCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Branch/BranchCard.tsx
@@ -43,6 +43,9 @@ export const BranchCard: React.FC<BranchProps> = ({
         ':hover': {
           backgroundColor: 'card.backgroundHover',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'card.background',
+        },
         ':focus-visible': {
           borderColor: 'focusBorder',
         },
@@ -90,8 +93,9 @@ export const BranchCard: React.FC<BranchProps> = ({
             </Text>
           </Tooltip>
           <IconButton
+            variant="square"
             name="more"
-            size={9}
+            size={14}
             title="Branch actions"
             onClick={evt => {
               evt.stopPropagation();
diff --git a/packages/app/src/app/pages/Dashboard/Components/Branch/BranchListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Branch/BranchListItem.tsx
@@ -44,6 +44,9 @@ export const BranchListItem = ({
               ? 'purpleOpaque'
               : 'list.hoverBackground',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'transparent',
+        },
       })}
     >
       <Element
@@ -96,8 +99,9 @@ export const BranchListItem = ({
           </Column>
         </Grid>
         <IconButton
+          variant="square"
           name="more"
-          size={9}
+          size={14}
           title="Branch actions"
           onClick={evt => {
             evt.stopPropagation();
diff --git a/packages/app/src/app/pages/Dashboard/Components/Filters/SortOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Filters/SortOptions/index.tsx
@@ -36,6 +36,7 @@ export const SortOptions: FunctionComponent = React.memo(() => {
         <IconButton
           name="arrowDown"
           size={11}
+          variant="square"
           title="Reverse sort direction"
           onClick={toggleSort}
           css={{ transform: `rotate(${order === 'desc' ? 0 : 180}deg)` }}
diff --git a/packages/app/src/app/pages/Dashboard/Components/Folder/FolderCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Folder/FolderCard.tsx
@@ -54,6 +54,9 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
       ':hover': {
         backgroundColor: 'card.backgroundHover',
       },
+      ':has(button:hover)': {
+        backgroundColor: 'card.background',
+      },
       ':focus-visible': {
         borderColor: 'focusBorder',
       },
@@ -67,8 +70,9 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
     >
       {!isNewFolder ? (
         <IconButton
+          variant="square"
           name="more"
-          size={9}
+          size={14}
           title="Folder actions"
           onClick={onContextMenu}
         />
diff --git a/packages/app/src/app/pages/Dashboard/Components/Folder/FolderListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Folder/FolderListItem.tsx
@@ -56,6 +56,9 @@ export const FolderListItem = ({
           cursor: 'default',
           backgroundColor: selected ? 'purpleOpaque' : 'list.hoverBackground',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'transparent',
+        },
         width: '100%',
         height: 64,
         borderBottom: '1px solid',
@@ -73,7 +76,13 @@ export const FolderListItem = ({
                 height: 32,
               })}
             >
-              <Icon name="folder" size={24} width={32} title="folder" color="#E3FF73" />
+              <Icon
+                name="folder"
+                size={24}
+                width={32}
+                title="folder"
+                color="#E3FF73"
+              />
             </Stack>
             <Stack justify="space-between" align="center">
               {editing ? (
@@ -109,8 +118,9 @@ export const FolderListItem = ({
       </Grid>
       {!isNewFolder ? (
         <IconButton
+          variant="square"
           name="more"
-          size={9}
+          size={14}
           title="Sandbox actions"
           onClick={onContextMenu}
         />
diff --git a/packages/app/src/app/pages/Dashboard/Components/Notification/Notification.tsx b/packages/app/src/app/pages/Dashboard/Components/Notification/Notification.tsx
@@ -58,6 +58,7 @@ export const Notification = ({ children, pageType }: NotificationProps) => {
           >
             <IconButton
               name="cross"
+              variant="round"
               title="Dismiss notification"
               onClick={dismissNotification}
             />
diff --git a/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx
@@ -36,6 +36,9 @@ export const RepositoryCard: React.FC<RepositoryProps> = ({
         ':hover': {
           backgroundColor: 'card.backgroundHover',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'card.background',
+        },
         ':focus-visible': {
           borderColor: 'focusBorder',
         },
@@ -51,8 +54,9 @@ export const RepositoryCard: React.FC<RepositoryProps> = ({
           marginLeft: 'auto',
           marginRight: 0,
         })}
+        variant="square"
         name="more"
-        size={9}
+        size={14}
         title="Repository actions"
         onClick={evt => {
           evt.stopPropagation();
diff --git a/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryListItem.tsx
@@ -43,6 +43,9 @@ export const RepositoryListItem: React.FC<RepositoryProps> = ({
               ? 'purpleOpaque'
               : 'list.hoverBackground',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'transparent',
+        },
       })}
     >
       <Element
@@ -85,8 +88,9 @@ export const RepositoryListItem: React.FC<RepositoryProps> = ({
           </Column>
         </Grid>
         <IconButton
+          variant="square"
           name="more"
-          size={9}
+          size={14}
           title="Repository actions"
           onClick={evt => {
             evt.stopPropagation();
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx
@@ -131,8 +131,9 @@ const SandboxTitle: React.FC<SandboxTitleProps> = React.memo(
         </div>
       ) : (
         <IconButton
+          variant="square"
           name="more"
-          size={9}
+          size={14}
           title="Sandbox Actions"
           onClick={onContextMenu}
         />
@@ -259,6 +260,9 @@ export const SandboxCard = ({
         ':hover': {
           backgroundColor: 'card.backgroundHover',
         },
+        ':has(button:hover)': {
+          backgroundColor: 'card.background',
+        },
         ':focus-visible': {
           borderColor: 'focusBorder',
         },
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx
@@ -58,6 +58,9 @@ export const SandboxListItem = ({
         cursor: 'default',
         backgroundColor: selected ? 'purpleOpaque' : 'list.hoverBackground',
       },
+      ':has(button:hover)': {
+        backgroundColor: 'transparent',
+      },
     })}
   >
     <Element
@@ -187,7 +190,8 @@ export const SandboxListItem = ({
       </Grid>
       <IconButton
         name="more"
-        size={9}
+        variant="square"
+        size={14}
         title="Sandbox actions"
         onClick={onContextMenu}
       />
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/WorkspaceSettings.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/WorkspaceSettings.tsx
@@ -311,6 +311,7 @@ export const WorkspaceSettings = () => {
                   {activeWorkspaceAuthorization ===
                     TeamMemberAuthorization.Admin && (
                     <IconButton
+                      variant="square"
                       name="edit"
                       size={12}
                       title="Edit team"
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/WorkspaceSettings.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/WorkspaceSettings.tsx
@@ -189,6 +189,7 @@ export const WorkspaceSettings = () => {
                   </Text>
                   <IconButton
                     name="edit"
+                    variant="square"
                     size={12}
                     title="Edit team"
                     onClick={() => setEditing(false)}
@@ -294,6 +295,7 @@ export const WorkspaceSettings = () => {
                 </Text>
                 <IconButton
                   name="edit"
+                  variant="square"
                   size={12}
                   title="Edit team"
                   onClick={() => setEditing(true)}
diff --git a/packages/components/src/components/IconButton/index.tsx b/packages/components/src/components/IconButton/index.tsx
@@ -12,12 +12,15 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   title: string;
   /** Size of the icon, the button is set to 26x26 */
   size?: number;
+  /** Variant - square or round */
+  variant?: 'square' | 'round';
 };
 
 export const IconButton: React.FC<IconButtonProps> = ({
   name,
   title,
   size,
+  variant = 'round',
   css = {},
   ...props
 }) => (
@@ -29,7 +32,9 @@ export const IconButton: React.FC<IconButtonProps> = ({
         {
           width: '26px', // same width as (height of the button)
           paddingX: 0,
-          borderRadius: '50%',
+          borderRadius: variant === 'round' ? '50%' : '2px',
+          // Round variant is legacy, so keeps cursor pointer for backwards compat in the editor
+          cursor: variant === 'round' ? 'pointer' : 'default',
           ':hover:not(:disabled)': {
             backgroundColor: 'secondaryButton.background',
           },

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export const Notification = ({ children, pageType }: NotificationProps) => {`
`58`	`58`	`>`
`59`	`59`	`<IconButton`
`60`	`60`	`name="cross"`
	`61`	`+ variant="round"`
`61`	`62`	`title="Dismiss notification"`
`62`	`63`	`onClick={dismissNotification}`
`63`	`64`	`/>`