feat: add narrow variant of ActionButton (#506)

* feat: add narrow variant of ActionButton * Update src/components/ActionButton.tsx Co-authored-by: cartcrom <[email protected]> * fix: lint --------- Co-authored-by: cartcrom <[email protected]>
Uniswap · Feb 28, 2023 · 0ce2b25 · 0ce2b25 · vercel · Feb 28, 2023
1 parent 41b0f25
commit 0ce2b25
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
@@ -7,10 +7,10 @@ import Button from './Button'
 import Row, { RowProps } from './Row'
 import Tooltip from './Tooltip'
 
-const StyledButton = styled(Button)<{ shouldUseDisabledColor?: boolean }>`
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+const StyledButton = styled(Button)<{ shouldUseDisabledColor?: boolean; narrow?: boolean }>`
+  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}em;
   flex-grow: 1;
-  max-height: 56px;
+  max-height: ${({ narrow }) => (narrow ? '2.5em' : '3.5em')};
   transition: background-color ${AnimationSpeed.Medium} ease-out, border-radius ${AnimationSpeed.Medium} ease-out,
     flex-grow ${AnimationSpeed.Medium} ease-out;
   ${({ theme, disabled, shouldUseDisabledColor }) =>
@@ -57,11 +57,11 @@ const actionCss = css`
   }
 `
 
-export const Overlay = styled(Row)<{ hasAction: boolean }>`
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+export const Overlay = styled(Row)<{ hasAction: boolean; narrow?: boolean }>`
+  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}em;
   flex-flow: row-reverse nowrap;
   margin-top: 0.25em;
-  min-height: 3.5em;
+  min-height: ${({ narrow }) => (narrow ? '2.5em' : '3.5em')};
   transition: padding ${AnimationSpeed.Medium} ease-out;
   ${({ hasAction }) => hasAction && actionCss}
 `
@@ -84,6 +84,7 @@ interface BaseProps {
   action?: Action
   wrapperProps?: Omit<React.HtmlHTMLAttributes<HTMLDivElement>, keyof RowProps>
   shouldUseDisabledColor?: boolean
+  narrow?: boolean
 }
 
 export type ActionButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
@@ -96,6 +97,7 @@ export default function ActionButton({
   onClick,
   children,
   wrapperProps,
+  narrow,
   ...rest
 }: ActionButtonProps) {
   const textColor = useMemo(() => {
@@ -115,17 +117,27 @@ export default function ActionButton({
     }
   }, [color, disabled])
 
+  const buttonSize = useMemo(() => (narrow ? 'small' : action ? 'medium' : 'large'), [narrow, action])
+
   return (
-    <Overlay data-testid="action-button" hasAction={Boolean(action)} flex align="stretch" {...wrapperProps}>
+    <Overlay
+      data-testid="action-button"
+      hasAction={Boolean(action)}
+      flex
+      align="stretch"
+      narrow={narrow}
+      {...wrapperProps}
+    >
       {!action?.hideButton && (
         <StyledButton
           color={color}
           disabled={disabled || action?.disableButton}
           shouldUseDisabledColor={shouldUseDisabledColor}
           onClick={action?.onClick || onClick}
+          narrow={narrow}
           {...rest}
         >
-          <ThemedText.TransitionButton buttonSize={action ? 'medium' : 'large'} color={textColor}>
+          <ThemedText.TransitionButton buttonSize={buttonSize} color={textColor}>
             {action?.children || children}
           </ThemedText.TransitionButton>
         </StyledButton>