From 1605e563ca8f73cddd441da90f59956138b3e976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Wed, 15 Feb 2023 17:41:14 +0000
Subject: [PATCH 1/2] feat: add x-small to CTA and add max to token input

---
 src/component-library/CTA/BaseCTA.tsx         |  4 +-
 src/component-library/CTA/CTA.style.tsx       |  4 +-
 src/component-library/CTA/CTA.tsx             |  7 ++--
 .../TokenInput/TokenInput.style.tsx           |  9 ++---
 .../TokenInput/TokenInputBalance.tsx          | 39 +++++++------------
 src/component-library/theme/theme.ts          |  5 +++
 src/component-library/utils/prop-types.ts     |  2 +
 7 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/src/component-library/CTA/BaseCTA.tsx b/src/component-library/CTA/BaseCTA.tsx
index 531dcce9f0..6f67107350 100644
--- a/src/component-library/CTA/BaseCTA.tsx
+++ b/src/component-library/CTA/BaseCTA.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, HTMLAttributes } from 'react';
 import { StyledComponent } from 'styled-components';
 
-import { CTAVariants, ElementTypeProp, Sizes } from '../utils/prop-types';
+import { CTASizes, CTAVariants, ElementTypeProp } from '../utils/prop-types';
 import { OutlinedCTA, PrimaryCTA, SecondaryCTA, StyledCTAProps, TextCTA } from './CTA.style';
 
 const ctaElements: Record<CTAVariants, StyledComponent<'button', any, StyledCTAProps, never>> = {
@@ -14,7 +14,7 @@ const ctaElements: Record<CTAVariants, StyledComponent<'button', any, StyledCTAP
 type Props = {
   variant?: CTAVariants;
   fullWidth?: boolean;
-  size?: Sizes;
+  size?: CTASizes;
   disabled?: boolean;
   isFocusVisible?: boolean;
 };
diff --git a/src/component-library/CTA/CTA.style.tsx b/src/component-library/CTA/CTA.style.tsx
index 35e3f53e52..3c1e833c6d 100644
--- a/src/component-library/CTA/CTA.style.tsx
+++ b/src/component-library/CTA/CTA.style.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 import { theme } from '../theme';
-import { Sizes } from '../utils/prop-types';
+import { CTASizes } from '../utils/prop-types';
 
 interface StyledCTAProps {
   $fullWidth: boolean;
-  $size: Sizes;
+  $size: CTASizes;
   $isFocusVisible?: boolean;
 }
 
diff --git a/src/component-library/CTA/CTA.tsx b/src/component-library/CTA/CTA.tsx
index e626da222e..dfe98e7cf2 100644
--- a/src/component-library/CTA/CTA.tsx
+++ b/src/component-library/CTA/CTA.tsx
@@ -6,11 +6,12 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { LoadingSpinner } from '../LoadingSpinner';
 import { useDOMRef } from '../utils/dom';
-import { Sizes } from '../utils/prop-types';
+import { CTASizes } from '../utils/prop-types';
 import { BaseCTA, BaseCTAProps } from './BaseCTA';
 import { LoadingWrapper } from './CTA.style';
 
-const loadingSizes: Record<Sizes, number> = {
+const loadingSizes: Record<CTASizes, number> = {
+  'x-small': 14,
   small: 16,
   medium: 18,
   large: 20
@@ -18,7 +19,7 @@ const loadingSizes: Record<Sizes, number> = {
 
 type Props = {
   fullWidth?: boolean;
-  size?: Sizes;
+  size?: CTASizes;
   loading?: boolean;
   onPress?: (e: PressEvent) => void;
 };
diff --git a/src/component-library/TokenInput/TokenInput.style.tsx b/src/component-library/TokenInput/TokenInput.style.tsx
index 82a00537c5..a7896ce06c 100644
--- a/src/component-library/TokenInput/TokenInput.style.tsx
+++ b/src/component-library/TokenInput/TokenInput.style.tsx
@@ -11,9 +11,8 @@ type StyledClickableProps = {
   $isClickable: boolean;
 };
 
-type StyledTokenInputBalanceValueProps = {
+type StyledUSDAdornmentProps = {
   $isDisabled?: boolean;
-  $isFocusVisible: boolean;
 };
 
 type StyledListItemSelectedLabelProps = {
@@ -27,7 +26,7 @@ const StyledTicker = styled.span`
   text-overflow: ellipsis;
 `;
 
-const StyledUSDAdornment = styled.span<Pick<StyledTokenInputBalanceValueProps, '$isDisabled'>>`
+const StyledUSDAdornment = styled.span<StyledUSDAdornmentProps>`
   display: block;
   font-size: ${theme.text.xs};
   line-height: ${theme.lineHeight.s};
@@ -68,11 +67,9 @@ const StyledTokenInputBalanceLabel = styled.dt`
   }
 `;
 
-const StyledTokenInputBalanceValue = styled.span<StyledTokenInputBalanceValueProps>`
+const StyledTokenInputBalanceValue = styled.span`
   display: block;
   color: ${theme.colors.textSecondary};
-  cursor: ${({ $isDisabled }) => !$isDisabled && 'pointer'};
-  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
 `;
 
 const StyledListItemLabel = styled(Span)<StyledListItemSelectedLabelProps>`
diff --git a/src/component-library/TokenInput/TokenInputBalance.tsx b/src/component-library/TokenInput/TokenInputBalance.tsx
index 27934a9db4..9c66156129 100644
--- a/src/component-library/TokenInput/TokenInputBalance.tsx
+++ b/src/component-library/TokenInput/TokenInputBalance.tsx
@@ -1,8 +1,6 @@
-import { useFocusRing } from '@react-aria/focus';
-import { usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { ReactNode } from 'react';
 
+import { CTA } from '../CTA';
 import {
   StyledTokenInputBalanceLabel,
   StyledTokenInputBalanceValue,
@@ -25,29 +23,18 @@ const TokenInputBalance = ({
   className,
   isDisabled,
   label = 'Balance'
-}: TokenInputBalanceProps): JSX.Element => {
-  const { pressProps } = usePress({ onPress: onClickBalance, isDisabled: isDisabled });
-  const { focusProps, isFocusVisible } = useFocusRing();
-  const balanceValueProps = isDisabled
-    ? {}
-    : {
-        role: 'button',
-        tabIndex: 0,
-        'aria-label': 'apply balance',
-        ...mergeProps(pressProps, focusProps)
-      };
-
-  return (
-    <StyledTokenInputBalanceWrapper className={className}>
-      <StyledTokenInputBalanceLabel>{label}</StyledTokenInputBalanceLabel>
-      <dd>
-        <StyledTokenInputBalanceValue $isDisabled={isDisabled} $isFocusVisible={isFocusVisible} {...balanceValueProps}>
-          {ticker ? value : 0}
-        </StyledTokenInputBalanceValue>
-      </dd>
-    </StyledTokenInputBalanceWrapper>
-  );
-};
+}: TokenInputBalanceProps): JSX.Element => (
+  <StyledTokenInputBalanceWrapper className={className}>
+    <StyledTokenInputBalanceLabel>{label}</StyledTokenInputBalanceLabel>
+    <dd>
+      <StyledTokenInputBalanceValue>{ticker ? value : 0}</StyledTokenInputBalanceValue>
+    </dd>
+    // TODO: change border radius
+    <CTA onPress={onClickBalance} disabled={isDisabled} size='x-small'>
+      MAX
+    </CTA>
+  </StyledTokenInputBalanceWrapper>
+);
 
 export { TokenInputBalance };
 export type { TokenInputBalanceProps };
diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts
index bb546e38f3..2d103a30b4 100644
--- a/src/component-library/theme/theme.ts
+++ b/src/component-library/theme/theme.ts
@@ -164,6 +164,11 @@ const theme = {
       text: 'var(--colors-cta-text-text)',
       bgHover: 'var(--colors-cta-text-hover)'
     },
+    'x-small': {
+      padding: 'var(--spacing-1)',
+      text: 'var(--text-xs)',
+      lineHeight: '1'
+    },
     small: {
       padding: 'var(--spacing-2)',
       text: 'var(--text-xs)',
diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts
index 943aa948af..b0265ec68a 100644
--- a/src/component-library/utils/prop-types.ts
+++ b/src/component-library/utils/prop-types.ts
@@ -48,6 +48,8 @@ export type Variants = typeof variant[number];
 
 export type CTAVariants = typeof ctaVariant[number];
 
+export type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
+
 export type Status = typeof status[number];
 
 export type Sizes = typeof sizes[number];

From 8319e878e48e9ddb2d9674fec07abf1df51e509d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Thu, 16 Feb 2023 09:51:21 +0000
Subject: [PATCH 2/2] fix: final

---
 .../TokenInput/TokenInputBalance.tsx          | 29 ++++++++++---------
 src/component-library/theme/theme.ts          |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/component-library/TokenInput/TokenInputBalance.tsx b/src/component-library/TokenInput/TokenInputBalance.tsx
index 9c66156129..187527971e 100644
--- a/src/component-library/TokenInput/TokenInputBalance.tsx
+++ b/src/component-library/TokenInput/TokenInputBalance.tsx
@@ -21,20 +21,23 @@ const TokenInputBalance = ({
   value,
   onClickBalance,
   className,
-  isDisabled,
+  isDisabled: isDisabledProp,
   label = 'Balance'
-}: TokenInputBalanceProps): JSX.Element => (
-  <StyledTokenInputBalanceWrapper className={className}>
-    <StyledTokenInputBalanceLabel>{label}</StyledTokenInputBalanceLabel>
-    <dd>
-      <StyledTokenInputBalanceValue>{ticker ? value : 0}</StyledTokenInputBalanceValue>
-    </dd>
-    // TODO: change border radius
-    <CTA onPress={onClickBalance} disabled={isDisabled} size='x-small'>
-      MAX
-    </CTA>
-  </StyledTokenInputBalanceWrapper>
-);
+}: TokenInputBalanceProps): JSX.Element => {
+  const isDisabled = isDisabledProp || !ticker || value === 0;
+
+  return (
+    <StyledTokenInputBalanceWrapper className={className}>
+      <StyledTokenInputBalanceLabel>{label}</StyledTokenInputBalanceLabel>
+      <dd>
+        <StyledTokenInputBalanceValue>{ticker ? value : 0}</StyledTokenInputBalanceValue>
+      </dd>
+      <CTA onPress={onClickBalance} disabled={isDisabled} size='x-small'>
+        MAX
+      </CTA>
+    </StyledTokenInputBalanceWrapper>
+  );
+};
 
 export { TokenInputBalance };
 export type { TokenInputBalanceProps };
diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts
index 2d103a30b4..b206ac45f7 100644
--- a/src/component-library/theme/theme.ts
+++ b/src/component-library/theme/theme.ts
@@ -167,6 +167,7 @@ const theme = {
     'x-small': {
       padding: 'var(--spacing-1)',
       text: 'var(--text-xs)',
+      // TODO: revist on redesign
       lineHeight: '1'
     },
     small: {