Fix fields

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/PasswordField/PasswordField.tsx

@@ -32,17 +32,9 @@ import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
 export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
   (props, ref) => {
     const {
-      className,
-      icon,
-      size = 'small',
       label,
-      secondaryLabel,
-      description,
-      isRequired,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
-      placeholder,
-      ...rest
     } = props;
 
     useEffect(() => {
@@ -53,15 +45,28 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    const { classNames: passwordFieldClassNames, dataAttributes } = useStyles(
-      'PasswordField',
-      {
-        size,
-      },
-    );
-
     const { classNames: textFieldClassNames } = useStyles('TextField', {});
 
+    const {
+      classNames: passwordFieldClassNames,
+      dataAttributes,
+      style,
+      cleanedProps,
+    } = useStyles('PasswordField', {
+      size: 'small',
+      ...props,
+    });
+
+    const {
+      className,
+      description,
+      icon,
+      isRequired,
+      secondaryLabel,
+      placeholder,
+      ...rest
+    } = cleanedProps;
+
     // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
     const secondaryLabelText =
       secondaryLabel || (isRequired ? 'Required' : null);
@@ -76,6 +81,7 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         type="password"
+        style={style}
         {...rest}
         ref={ref}
       >

packages/ui/src/components/SearchField/SearchField.tsx

@@ -32,19 +32,9 @@ import type { SearchFieldProps } from './types';
 export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
   (props, ref) => {
     const {
-      className,
-      icon,
-      size = 'small',
       label,
-      secondaryLabel,
-      description,
-      isRequired,
-      onChange,
-      placeholder = 'Search',
-      startCollapsed = false,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
-      ...rest
     } = props;
 
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -58,14 +48,28 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    const { classNames: textFieldClassNames, dataAttributes } = useStyles(
-      'TextField',
-      {
-        size,
-      },
-    );
+    const { classNames: textFieldClassNames } = useStyles('TextField');
 
-    const { classNames: searchFieldClassNames } = useStyles('SearchField', {});
+    const {
+      classNames: searchFieldClassNames,
+      dataAttributes,
+      style,
+      cleanedProps,
+    } = useStyles('SearchField', {
+      size: 'small',
+      ...props,
+    });
+
+    const {
+      className,
+      description,
+      icon,
+      isRequired,
+      secondaryLabel,
+      placeholder,
+      startCollapsed,
+      ...rest
+    } = cleanedProps;
 
     // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
     const secondaryLabelText =
@@ -105,6 +109,7 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         data-collapsed={isCollapsed}
         onFocusChange={handleClick}
         onChange={handleChange}
+        style={style}
         {...rest}
         ref={ref}
       >

packages/ui/src/components/TextField/TextField.tsx

@@ -27,17 +27,9 @@ import { useStyles } from '../../hooks/useStyles';
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
   (props, ref) => {
     const {
-      className,
-      icon,
-      size = 'small',
       label,
-      secondaryLabel,
-      description,
-      isRequired,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
-      placeholder,
-      ...rest
     } = props;
 
     useEffect(() => {
@@ -48,9 +40,23 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    const { classNames, dataAttributes } = useStyles('TextField', {
-      size,
-    });
+    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+      'TextField',
+      {
+        size: 'small',
+        ...props,
+      },
+    );
+
+    const {
+      className,
+      description,
+      icon,
+      isRequired,
+      secondaryLabel,
+      placeholder,
+      ...rest
+    } = cleanedProps;
 
     // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
     const secondaryLabelText =
@@ -62,6 +68,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
+        style={style}
         {...rest}
         ref={ref}
       >

packages/ui/src/utils/componentDefinitions.ts

@@ -248,6 +248,9 @@ export const componentDefinitions = {
       root: 'bui-PasswordField',
       inputVisibility: 'bui-InputVisibility',
     },
+    dataAttributes: {
+      size: ['small', 'medium'] as const,
+    },
   },
   Popover: {
     classNames: {
@@ -276,6 +279,7 @@ export const componentDefinitions = {
     },
     dataAttributes: {
       startCollapsed: [true, false] as const,
+      size: ['small', 'medium'] as const,
     },
   },
   Select: {
@@ -366,6 +370,7 @@ export const componentDefinitions = {
     dataAttributes: {
       invalid: [true, false] as const,
       disabled: [true, false] as const,
+      size: ['small', 'medium'] as const,
     },
   },
   Tooltip: {