feat: field suffix size based on field size

Orfium · May 21, 2024 · 71afdd8 · 71afdd8
1 parent 53001cb
commit 71afdd8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/NumberField/NumberField.tsx b/src/components/NumberField/NumberField.tsx
@@ -122,7 +122,7 @@ const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props,
           </ReactAriaNumberField>
         </div>
         {suffixContent && !hasStepper && (
-          <div aria-hidden={!suffixContent} css={suffixContainerStyle()}>
+          <div aria-hidden={!suffixContent} css={suffixContainerStyle({})}>
             {suffixContent}
           </div>
         )}

diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -3,6 +3,8 @@ import { css } from '@emotion/react';
 import type { Theme } from 'theme';
 import { rem } from 'theme/utils';
 
+import type { TextFieldProps } from '.';
+
 export const iconWrapperStyle =
   ({ iconPosition, isClickable }: { iconPosition?: 'left' | 'right'; isClickable?: boolean }) =>
   (theme: Theme): SerializedStyles =>
@@ -17,10 +19,10 @@ export const iconWrapperStyle =
     `;
 
 export const suffixContainerStyle =
-  (isClickable = false) =>
+  ({ size, isClickable }: Pick<TextFieldProps, 'size'> & { isClickable?: boolean }) =>
   (): SerializedStyles => {
     return css`
-      min-width: ${rem(44)};
+      min-width: ${rem(size === 'compact' ? 28 : 44)};
       overflow: visible;
       display: flex;
       align-items: center;

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -152,7 +152,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
             />
           </div>
           {suffixContent && (
-            <div aria-hidden={!suffixContent} css={suffixContainerStyle()}>
+            <div aria-hidden={!suffixContent} css={suffixContainerStyle({size})}>
               {suffixContent}
             </div>
           )}