feat: Adding className as a prop (#2847)

* Adding className as a prop to use emotion

* Adding className to feedback and input components

front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -26,6 +26,7 @@ type AutosizeTextInputProps = {
   variant?: AutosizeTextInputVariant;
   buttonTitle?: string;
   value?: string;
+  className?: string;
 };
 
 const StyledContainer = styled.div`
@@ -117,6 +118,7 @@ export const AutosizeTextInput = ({
   variant = AutosizeTextInputVariant.Default,
   buttonTitle,
   value = '',
+  className,
 }: AutosizeTextInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
@@ -183,7 +185,7 @@ export const AutosizeTextInput = ({
 
   return (
     <>
-      <StyledContainer>
+      <StyledContainer className={className}>
         <StyledInputContainer>
           {!isHidden && (
             <StyledTextArea

front/src/modules/ui/input/components/Checkbox.tsx

@@ -28,6 +28,7 @@ type CheckboxProps = {
   variant?: CheckboxVariant;
   size?: CheckboxSize;
   shape?: CheckboxShape;
+  className?: string;
 };
 
 const StyledInputContainer = styled.div`
@@ -117,6 +118,7 @@ export const Checkbox = ({
   variant = CheckboxVariant.Primary,
   size = CheckboxSize.Small,
   shape = CheckboxShape.Squared,
+  className,
 }: CheckboxProps) => {
   const [isInternalChecked, setIsInternalChecked] =
     React.useState<boolean>(false);
@@ -134,7 +136,7 @@ export const Checkbox = ({
   const checkboxId = 'checkbox' + v4();
 
   return (
-    <StyledInputContainer>
+    <StyledInputContainer className={className}>
       <StyledInput
         autoComplete="off"
         type="checkbox"

front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx

@@ -13,6 +13,7 @@ export type EntityTitleDoubleTextInputProps = {
   firstValuePlaceholder: string;
   secondValuePlaceholder: string;
   onChange: (firstValue: string, secondValue: string) => void;
+  className?: string;
 };
 
 const StyledDoubleTextContainer = styled.div`
@@ -41,6 +42,7 @@ export const EntityTitleDoubleTextInput = ({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
+  className,
 }: EntityTitleDoubleTextInputProps) => {
   const {
     goBackToPreviousHotkeyScope,
@@ -54,7 +56,7 @@ export const EntityTitleDoubleTextInput = ({
   };
 
   return (
-    <StyledDoubleTextContainer>
+    <StyledDoubleTextContainer className={className}>
       <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
         {(nodeDimensions) => (
           <StyledTextInput

front/src/modules/ui/input/components/IconPicker.tsx

@@ -26,6 +26,7 @@ type IconPickerProps = {
   onClose?: () => void;
   onOpen?: () => void;
   variant?: IconButtonVariant;
+  className?: string;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -52,6 +53,7 @@ export const IconPicker = ({
   onClose,
   onOpen,
   variant = 'secondary',
+  className,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
 
@@ -79,55 +81,57 @@ export const IconPicker = ({
 
   return (
     <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
-        clickableComponent={
-          <IconButton
-            disabled={disabled}
-            Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
-            variant={variant}
-          />
-        }
-        dropdownMenuWidth={176}
-        dropdownComponents={
-          <DropdownMenu width={176}>
-            <DropdownMenuSearchInput
-              placeholder="Search icon"
-              autoFocus
-              onChange={(event) => setSearchString(event.target.value)}
+      <div className={className}>
+        <Dropdown
+          dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
+          clickableComponent={
+            <IconButton
+              disabled={disabled}
+              Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
+              variant={variant}
             />
-            <DropdownMenuSeparator />
-            <DropdownMenuItemsContainer>
-              {isLoading ? (
-                <DropdownMenuSkeletonItem />
-              ) : (
-                <StyledMenuIconItemsContainer>
-                  {iconKeys.map((iconKey) => (
-                    <StyledLightIconButton
-                      key={iconKey}
-                      aria-label={convertIconKeyToLabel(iconKey)}
-                      isSelected={selectedIconKey === iconKey}
-                      size="medium"
-                      title={iconKey}
-                      Icon={icons[iconKey]}
-                      onClick={() => {
-                        onChange({ iconKey, Icon: icons[iconKey] });
-                        closeDropdown();
-                      }}
-                    />
-                  ))}
-                </StyledMenuIconItemsContainer>
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        onClickOutside={onClickOutside}
-        onClose={() => {
-          onClose?.();
-          setSearchString('');
-        }}
-        onOpen={onOpen}
-      />
+          }
+          dropdownMenuWidth={176}
+          dropdownComponents={
+            <DropdownMenu width={176}>
+              <DropdownMenuSearchInput
+                placeholder="Search icon"
+                autoFocus
+                onChange={(event) => setSearchString(event.target.value)}
+              />
+              <DropdownMenuSeparator />
+              <DropdownMenuItemsContainer>
+                {isLoading ? (
+                  <DropdownMenuSkeletonItem />
+                ) : (
+                  <StyledMenuIconItemsContainer>
+                    {iconKeys.map((iconKey) => (
+                      <StyledLightIconButton
+                        key={iconKey}
+                        aria-label={convertIconKeyToLabel(iconKey)}
+                        isSelected={selectedIconKey === iconKey}
+                        size="medium"
+                        title={iconKey}
+                        Icon={icons[iconKey]}
+                        onClick={() => {
+                          onChange({ iconKey, Icon: icons[iconKey] });
+                          closeDropdown();
+                        }}
+                      />
+                    ))}
+                  </StyledMenuIconItemsContainer>
+                )}
+              </DropdownMenuItemsContainer>
+            </DropdownMenu>
+          }
+          onClickOutside={onClickOutside}
+          onClose={() => {
+            onClose?.();
+            setSearchString('');
+          }}
+          onOpen={onOpen}
+        />
+      </div>
     </DropdownScope>
   );
 };

front/src/modules/ui/input/components/ImageInput.tsx

@@ -90,6 +90,7 @@ type ImageInputProps = Omit<React.ComponentProps<'div'>, 'children'> & {
   isUploading?: boolean;
   errorMessage?: string | null;
   disabled?: boolean;
+  className?: string;
 };
 
 export const ImageInput = ({
@@ -100,6 +101,7 @@ export const ImageInput = ({
   isUploading = false,
   errorMessage,
   disabled = false,
+  className,
 }: ImageInputProps) => {
   const theme = useTheme();
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
@@ -108,7 +110,7 @@ export const ImageInput = ({
   };
 
   return (
-    <StyledContainer>
+    <StyledContainer className={className}>
       <StyledPicture
         withPicture={!!picture}
         disabled={disabled}

front/src/modules/ui/input/components/Radio.tsx

@@ -118,6 +118,7 @@ export const Radio = ({
   size = RadioSize.Small,
   labelPosition = LabelPosition.Right,
   disabled = false,
+  className,
 }: RadioProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);
@@ -125,7 +126,7 @@ export const Radio = ({
   };
 
   return (
-    <StyledContainer labelPosition={labelPosition}>
+    <StyledContainer className={className} labelPosition={labelPosition}>
       <StyledRadioInput
         type="radio"
         id="input-radio"

front/src/modules/ui/input/components/TextArea.tsx

@@ -14,6 +14,7 @@ export type TextAreaProps = {
   onChange?: (value: string) => void;
   placeholder?: string;
   value?: string;
+  className?: string;
 };
 
 const StyledTextArea = styled(TextareaAutosize)`
@@ -51,6 +52,7 @@ export const TextArea = ({
   placeholder,
   minRows = 1,
   value = '',
+  className,
   onChange,
 }: TextAreaProps) => {
   const computedMinRows = Math.min(minRows, MAX_ROWS);
@@ -78,6 +80,7 @@ export const TextArea = ({
       onFocus={handleFocus}
       onBlur={handleBlur}
       disabled={disabled}
+      className={className}
     />
   );
 };

front/src/modules/ui/input/components/Toggle.tsx

@@ -36,6 +36,7 @@ export type ToggleProps = {
   onChange?: (value: boolean) => void;
   color?: string;
   toggleSize?: ToggleSize;
+  className?: string;
 };
 
 export const Toggle = ({
@@ -43,6 +44,7 @@ export const Toggle = ({
   onChange,
   color,
   toggleSize = 'medium',
+  className,
 }: ToggleProps) => {
   const [isOn, setIsOn] = useState(value ?? false);
 
@@ -72,6 +74,7 @@ export const Toggle = ({
       isOn={isOn}
       color={color}
       toggleSize={toggleSize}
+      className={className}
     >
       <StyledCircle
         animate={isOn ? 'on' : 'off'}