Buttons refactoring (#3300)

* Added icon to buttons "Create package from folder" and "Push to bucket" in desktop layout
* Added components/Buttons/ButtonIconized, and replace FileView.AdaptiveLayoutButton
* Removed components/ButtonIcon
* Fix and unify margins

catalog/app/components/ButtonIconized.tsx

@@ -0,0 +1,53 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles({
+  icon: {
+    transition: 'ease transform .15s',
+  },
+  iconRotated: {
+    transform: `rotate(180deg)`,
+  },
+})
+
+interface ButtonIconShrinkingProps extends M.IconButtonProps {
+  icon: string
+  label: string
+  rotate?: boolean
+  variant?: 'text' | 'outlined' | 'contained'
+}
+
+export default function ButtonIconShrinking({
+  className,
+  label,
+  icon,
+  rotate,
+  variant = 'outlined',
+  ...props
+}: ButtonIconShrinkingProps) {
+  const classes = useStyles()
+  const t = M.useTheme()
+  const sm = M.useMediaQuery(t.breakpoints.down('sm'))
+  const iconElement = (
+    <M.Icon className={cx(classes.icon, { [classes.iconRotated]: rotate })}>
+      {icon}
+    </M.Icon>
+  )
+
+  return sm ? (
+    <M.IconButton className={className} edge="end" size="small" title={label} {...props}>
+      {iconElement}
+    </M.IconButton>
+  ) : (
+    <M.Button
+      className={className}
+      size="small"
+      startIcon={iconElement}
+      variant={variant}
+      {...props}
+    >
+      {label}
+    </M.Button>
+  )
+}

catalog/app/components/FileEditor/Controls.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
+import ButtonIconized from 'components/ButtonIconized'
 import { EditorState } from './State'
 
 interface AddFileButtonProps {
@@ -15,55 +16,6 @@ export function AddFileButton({ onClick }: AddFileButtonProps) {
   )
 }
 
-interface ButtonControlProps {
-  disabled?: boolean
-  className?: string
-  color?: 'primary'
-  icon: string
-  label: string
-  onClick: (event: React.MouseEvent) => void
-  variant?: 'outlined' | 'contained'
-}
-
-// TODO: use components/Buttons/ShrinkedIconButton
-function ButtonControl({
-  disabled,
-  className,
-  color,
-  icon,
-  label,
-  onClick,
-  variant = 'outlined',
-}: ButtonControlProps) {
-  const t = M.useTheme()
-  const sm = M.useMediaQuery(t.breakpoints.down('sm'))
-  return sm ? (
-    <M.IconButton
-      className={className}
-      disabled={disabled}
-      edge="end"
-      size="small"
-      onClick={onClick}
-      title={label}
-      color={color}
-    >
-      <M.Icon>{icon}</M.Icon>
-    </M.IconButton>
-  ) : (
-    <M.Button
-      className={className}
-      color={color}
-      disabled={disabled}
-      onClick={onClick}
-      size="small"
-      startIcon={<M.Icon>{icon}</M.Icon>}
-      variant={variant}
-    >
-      {label}
-    </M.Button>
-  )
-}
-
 interface ControlsProps extends EditorState {
   className?: string
 }
@@ -100,7 +52,7 @@ export function Controls({
   if (!editing)
     return (
       <>
-        <ButtonControl
+        <ButtonIconized
           className={className}
           disabled={disabled}
           icon="edit"
@@ -120,8 +72,8 @@ export function Controls({
     )
   return (
     <M.ButtonGroup disabled={disabled} className={className} size="small">
-      <ButtonControl icon="undo" onClick={onCancel} label="Cancel" />
-      <ButtonControl
+      <ButtonIconized icon="undo" onClick={onCancel} label="Cancel" />
+      <ButtonIconized
         color="primary"
         icon="save"
         label="Save"

catalog/app/components/Preview/Menu.tsx

@@ -1,34 +1,22 @@
-import cx from 'classnames'
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
 import * as AWS from 'utils/AWS'
 import * as LogicalKeyResolver from 'utils/LogicalKeyResolver'
 
-const useStyles = M.makeStyles((t) => ({
-  root: {
-    alignItems: 'center',
-    display: 'flex',
-    height: t.spacing(4),
-    justifyContent: 'center',
-    width: t.spacing(3),
-  },
-}))
-
 interface MenuProps {
   className?: string
   handle: LogicalKeyResolver.S3SummarizeHandle
 }
 
 export default function Menu({ className, handle }: MenuProps) {
-  const classes = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
   const downloadUrl = AWS.Signer.useDownloadUrl(handle)
   const handleClose = React.useCallback(() => setAnchorEl(null), [])
   const handleOpen = React.useCallback((e) => setAnchorEl(e.currentTarget), [])
   return (
-    <div className={cx(classes.root, className)}>
-      <M.IconButton onClick={handleOpen}>
+    <div className={className}>
+      <M.IconButton onClick={handleOpen} size="small">
         <M.Icon>more_vert</M.Icon>
       </M.IconButton>
       <M.Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>

catalog/app/components/Preview/index.js

@@ -3,4 +3,3 @@ export { default as render } from './render'
 export { default as load, getRenderProps } from './load'
 export { PreviewData, PreviewError, CONTEXT } from './types'
 export { default as Menu } from './Menu'
-export { default as ToggleButton } from './ToggleButton'

catalog/app/components/SearchResults/SearchResults.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import { copyWithoutSpaces } from 'components/BreadCrumbs'
+import ButtonIconized from 'components/ButtonIconized'
 import JsonDisplay from 'components/JsonDisplay'
 import Pagination from 'components/Pagination2'
 import * as Preview from 'components/Preview'
@@ -93,7 +94,13 @@ function ObjectHeader({ handle, showBucket, downloadable = false, expanded, onTo
     <Heading display="flex" alignItems="center" mb="0 !important">
       <ObjectCrumbs {...{ handle, showBucket }} />
       <M.Box flexGrow={1} />
-      <Preview.ToggleButton expanded={expanded} onToggle={onToggle} mr={1} />
+      <ButtonIconized
+        label={expanded ? 'Collapse' : 'Expand'}
+        icon={expanded ? 'unfold_less' : 'unfold_more'}
+        rotate={expanded}
+        onClick={onToggle}
+        mr={1}
+      />
       {!!downloadable && (
         <Preview.Menu handle={handle} expanded={expanded} onToggle={onToggle} />
       )}

catalog/app/components/SelectDropdown/SelectDropdown.tsx

@@ -47,6 +47,7 @@ interface SelectDropdownProps<Value extends ValueBase> {
   onOpen?: () => void
   options: Value[]
   value: ValueBase
+  className?: string
 }
 
 export default function SelectDropdown<Value extends ValueBase>({
@@ -61,8 +62,7 @@ export default function SelectDropdown<Value extends ValueBase>({
   onOpen,
   options,
   value,
-  ...props
-}: M.PaperProps & SelectDropdownProps<Value>) {
+}: SelectDropdownProps<Value>) {
   const classes = useStyles()
 
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
@@ -94,11 +94,7 @@ export default function SelectDropdown<Value extends ValueBase>({
   const { className: buttonClassName, ...buttonProps } = ButtonProps || {}
 
   return (
-    <M.Paper
-      className={cx(className, classes.root, { [classes.disabled]: disabled })}
-      elevation={0}
-      {...props}
-    >
+    <div className={cx(className, classes.root, { [classes.disabled]: disabled })}>
       <M.Button
         className={cx(classes.button, buttonClassName)}
         onClick={handleOpen}
@@ -141,6 +137,6 @@ export default function SelectDropdown<Value extends ValueBase>({
             ))
           : emptySlot}
       </M.Menu>
-    </M.Paper>
+    </div>
   )
 }

catalog/app/containers/Bucket/Dir.tsx

@@ -269,9 +269,18 @@ const useStyles = M.makeStyles((t) => ({
     overflowWrap: 'break-word',
   },
   button: {
+    marginLeft: t.spacing(1),
+  },
+  topbar: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginBottom: t.spacing(2),
+  },
+  actions: {
+    display: 'flex',
     flexShrink: 0,
     marginBottom: '-3px',
-    marginLeft: t.spacing(1),
+    marginLeft: 'auto',
     marginTop: '-3px',
   },
 }))
@@ -379,29 +388,30 @@ export default function Dir({
         title: 'Create package from directory',
       })}
 
-      <M.Box display="flex" alignItems="flex-start" mb={2}>
+      <div className={classes.topbar}>
         <div className={classes.crumbs} onCopy={copyWithoutSpaces}>
           {renderCrumbs(getCrumbs({ bucket, path, urls }))}
         </div>
-        <M.Box flexGrow={1} />
-        {preferences?.ui?.actions?.createPackage && (
-          <Successors.Button
-            bucket={bucket}
-            className={classes.button}
-            onChange={openPackageCreationDialog}
-          >
-            Create package from directory
-          </Successors.Button>
-        )}
-        {!cfg.noDownload && !cfg.desktop && (
-          <FileView.ZipDownloadForm
-            className={classes.button}
-            suffix={`dir/${bucket}/${path}`}
-            label="Download directory"
-          />
-        )}
-        <DirectoryMenu className={classes.button} bucket={bucket} path={path} />
-      </M.Box>
+        <div className={classes.actions}>
+          {preferences?.ui?.actions?.createPackage && (
+            <Successors.Button
+              bucket={bucket}
+              className={classes.button}
+              onChange={openPackageCreationDialog}
+            >
+              Create package from directory
+            </Successors.Button>
+          )}
+          {!cfg.noDownload && !cfg.desktop && (
+            <FileView.ZipDownloadForm
+              className={classes.button}
+              suffix={`dir/${bucket}/${path}`}
+              label="Download directory"
+            />
+          )}
+          <DirectoryMenu className={classes.button} bucket={bucket} path={path} />
+        </div>
+      </div>
 
       {preferences?.ui?.blocks?.code && <Code gutterBottom>{code}</Code>}