feat: compact textfield and masked textfield

src/components/DatePicker/DatePicker.types.ts

@@ -24,7 +24,7 @@ export type DatePickerProps = {
   /** Calendar options for DateRangePicker */
   options?: ExtraOption[];
   /** Props of the TextField input */
-  inputProps?: TextFieldProps;
+  inputProps?: Omit<TextFieldProps, 'size'>;
   /** The format of the date displayed in the input field */
   dateFormatOverride?: DateFormatType;
   /** if the datepicker can be clear with backspace */

src/components/Label/Label.style.ts

@@ -10,7 +10,11 @@ import { generateStylesFromTokens } from 'components/Typography/utils';
 export const LABEL_TRANSFORM_LEFT_SPACING = rem(3);
 
 export const labelStyle =
-  ({ isAnimated, hasError }: Pick<LabelProps, 'isAnimated' | 'hasError'>) =>
+  ({
+    isAnimated,
+    hasError,
+    size = 'normal',
+  }: Pick<LabelProps, 'isAnimated' | 'hasError' | 'size'>) =>
   (theme: Theme): SerializedStyles => {
     const tokens = getTextInputBaseTokens(theme);
 
@@ -34,6 +38,6 @@ export const labelStyle =
       margin: auto;
       white-space: nowrap;
 
-      ${generateStylesFromTokens(tokens('normal.input'))}
+      ${generateStylesFromTokens(tokens(`input.${size}` as const))}
     `;
   };

src/components/Label/Label.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ComponentSizes } from 'types';
 
 import { labelStyle } from './Label.style';
 
@@ -11,19 +12,22 @@ export type LabelProps = {
   isRequired: boolean;
   /** If the label must be moved to the top */
   isAnimated?: boolean;
+  /** HTML <label/>'s for prop */
   htmlFor?: string;
-  size?: string;
+  /** The size of the label */
+  size?: ComponentSizes;
 };
 
 const Label: React.FCC<LabelProps> = ({
   hasError = false,
   htmlFor,
   label,
+  size = 'normal',
   isRequired = false,
   isAnimated = false,
 }) => {
   return (
-    <label htmlFor={htmlFor} css={labelStyle({ isAnimated, hasError })}>
+    <label htmlFor={htmlFor} css={labelStyle({ isAnimated, hasError, size })}>
       {label} {isRequired && '*'}
     </label>
   );

src/components/List/types.ts

@@ -1,4 +1,5 @@
 import { Key } from 'react';
+import { ComponentSizes } from 'types';
 
 import { SelectOption } from 'components/Select';
 
@@ -7,6 +8,6 @@ export type ListSelected = 'all' | Iterable<Key>;
 
 export type ListItemType = SelectOption;
 
-export type ListRowSize = 'compact' | 'normal';
+export type ListRowSize = ComponentSizes;
 
 export type SelectHandlerType = (option: ListItemType) => void;

src/components/MultiTextFieldBase/MultiTextFieldBase.tsx

@@ -160,7 +160,6 @@ const MultiTextFieldBase = React.forwardRef<HTMLInputElement, Props & InputProps
             />
             {label && (
               <Label
-                size={'md'}
                 htmlFor={id}
                 label={label}
                 isRequired={isRequired}

src/components/NumberField/NumberField.tsx

@@ -16,6 +16,7 @@ export type NumberFieldProps = Omit<
   TextFieldProps,
   | 'mask'
   | 'maskChar'
+  | 'size'
   | 'value'
   | 'onChange'
   | 'isMulti'

src/components/NumberField/components/Stepper/Stepper.style.ts

@@ -25,7 +25,7 @@ export const buttonWrapperStyle =
     return css`
       background: transparent;
       border: none;
-      height: calc(${tokens('container')} / 2);
+      height: calc(${tokens('container.normal')} / 2);
 
       &:hover {
         cursor: pointer;

src/components/SearchField/SearchField.tsx

@@ -14,7 +14,7 @@ import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.t
 export type SearchFieldProps = {
   /** A callback that's called when the user clicks the 'clear' icon */
   onClear: () => void;
-} & TextFieldProps &
+} & Omit<TextFieldProps, 'size'> &
   TestProps;
 
 const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {
@@ -28,7 +28,7 @@ const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>((props,
   const sx = {
     wrapper: {
       borderRadius: rem(100),
-      height: tokens('container'),
+      height: tokens('container.normal'),
     },
   };
 

src/components/Select/components/MultiselectTextField/MultiselectTextField.tsx

@@ -166,7 +166,6 @@ const MultiselectTextField = React.forwardRef<HTMLInputElement, Props & InputPro
             />
             {label && (
               <Label
-                size={'md'}
                 htmlFor={id}
                 label={label}
                 isRequired={isRequired}

src/components/TextField/TextField.stories.mdx

@@ -61,6 +61,26 @@ such as icons and components, and a multi-input functionality with the help of t
 
 ## Variants
 
+### TextField sizes
+
+There are 2 Textfield sizes: `normal` and `compact`.
+
+<Tip>
+  Compact TextField doesn't support placeholder (only in masked version using the mask prop) and
+  multi-textfield functionality. To use these, please use normal-size TextField.
+</Tip>
+
+<Preview>
+  <Story name="TextField sizes">
+    <Stack>
+      <TextField label={'Label'} />
+    </Stack>
+    <Stack>
+      <TextField label={'Label'} size="compact" />
+    </Stack>
+  </Story>
+</Preview>
+
 ### TextField with Label and Placeholder
 
 Regular TextField with label options. Label that will float, with or without Placeholder
@@ -201,6 +221,7 @@ MultiTextField enables a user to enter one or individual entries as free text.
     <Stack>
       <TextFieldShowCase
         label={text('Label', 'Label')}
+        size={select('size', ['normal', 'compact'], 'normal')}
         placeholder={text('Placeholder', 'Placeholder')}
         isDisabled={boolean('isDisabled', false)}
         hasSuffix={boolean('hasSuffixIcon', false)}

src/components/TextField/TextField.tsx

@@ -14,7 +14,7 @@ import TextInputBase, { TextInputBaseProps } from 'components/TextInputBase';
 import { inputStyle } from 'components/TextInputBase/TextInputBase.style';
 
 export type InputProps = Partial<
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'disabled'>
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'disabled' | 'size'>
 >;
 
 type MaskProps = { mask?: never } | { mask?: string | (string | RegExp)[]; placeholder?: never };
@@ -53,6 +53,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
     suffix = null,
     label,
     placeholder = '',
+    size = 'normal',
     isRequired = false,
     isDisabled,
     isReadOnly,
@@ -79,6 +80,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
     id,
     suffix,
     status,
+    size,
     isDisabled,
     ref,
     sx,
@@ -87,8 +89,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
   const inputProps = {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     readOnly: isLocked || isReadOnly,
-    css: inputStyle({ label, placeholder, isLocked, isDisabled }),
-    placeholder: placeholder ? `${placeholder} ${isRequired ? '*' : ''}` : label,
+    css: inputStyle({ label, placeholder, isLocked, isDisabled, size }),
+    ...(size === 'normal'
+      ? { placeholder: placeholder ? `${placeholder} ${isRequired ? '*' : ''}` : label }
+      : { placeholder: ' ' }),
     // eslint-disable-next-line @typescript-eslint/naming-convention
     required: isRequired,
     id: id,
@@ -139,6 +143,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
             <Label
               htmlFor={id}
               label={label}
+              size={size}
               isRequired={isRequired}
               isAnimated={Boolean(rest.value)}
               hasError={!isDisabled && status?.type === 'error'}