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/display/checkmark/components/Checkmark.tsx

@@ -14,13 +14,15 @@ const StyledContainer = styled.div`
   width: 20px;
 `;
 
-export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
+export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'> & {
+  className?: string;
+};
 
-export const Checkmark = (_props: CheckmarkProps) => {
+export const Checkmark = ({ className }: CheckmarkProps) => {
   const theme = useTheme();
 
   return (
-    <StyledContainer>
+    <StyledContainer className={className}>
       <IconCheck color={theme.grayScale.gray0} size={14} />
     </StyledContainer>
   );

front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -16,6 +16,7 @@ export type EntityChipProps = {
   avatarType?: AvatarType;
   variant?: EntityChipVariant;
   LeftIcon?: IconComponent;
+  className?: string;
 };
 
 export enum EntityChipVariant {
@@ -31,6 +32,7 @@ export const EntityChip = ({
   avatarType = 'rounded',
   variant = EntityChipVariant.Regular,
   LeftIcon,
+  className,
 }: EntityChipProps) => {
   const navigate = useNavigate();
 
@@ -69,6 +71,7 @@ export const EntityChip = ({
       }
       clickable={!!linkToEntity}
       onClick={handleLinkClick}
+      className={className}
     />
   ) : (
     <></>

front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -21,8 +21,10 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
 
 export const OverflowingTextWithTooltip = ({
   text,
+  className,
 }: {
   text: string | null | undefined;
+  className?: string;
 }) => {
   const textElementId = `title-id-${uuidV4()}`;
 
@@ -51,6 +53,7 @@ export const OverflowingTextWithTooltip = ({
     <>
       <StyledOverflowingText
         data-testid="tooltip"
+        className={className}
         ref={textRef}
         id={textElementId}
         cursorPointer={isTitleOverflowing}

front/src/modules/ui/display/typography/components/H2Title.tsx

@@ -4,6 +4,7 @@ type H2TitleProps = {
   title: string;
   description?: string;
   addornment?: React.ReactNode;
+  className?: string;
 };
 
 const StyledContainer = styled.div`
@@ -33,8 +34,13 @@ const StyledDescription = styled.h3`
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
-export const H2Title = ({ title, description, addornment }: H2TitleProps) => (
+export const H2Title = ({
-  <StyledContainer>
+  title,
+  description,
+  addornment,
+  className,
+}: H2TitleProps) => (
+  <StyledContainer className={className}>
     <StyledTitleContainer>
       <StyledTitle>{title}</StyledTitle>
       {addornment}

front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -69,6 +69,7 @@ export type DialogProps = React.ComponentPropsWithoutRef<typeof motion.div> & {
   buttons?: DialogButtonOptions[];
   allowDismiss?: boolean;
   children?: React.ReactNode;
+  className?: string;
   onClose?: () => void;
 };
 
@@ -78,6 +79,7 @@ export const Dialog = ({
   buttons = [],
   allowDismiss = true,
   children,
+  className,
   onClose,
   id,
 }: DialogProps) => {
@@ -133,6 +135,7 @@ export const Dialog = ({
           closeSnackbar();
         }
       }}
+      className={className}
     >
       <StyledDialogContainer
         variants={containerVariants}

front/src/modules/ui/feedback/progress-bar/components/ProgressBar.tsx

@@ -16,6 +16,12 @@ export type ProgressBarProps = {
   barHeight?: number;
   barColor?: string;
   autoStart?: boolean;
+  className?: string;
+};
+
+export type StyledBarProps = {
+  barHeight?: number;
+  className?: string;
 };
 
 export type ProgressBarControls = AnimationControls & {
@@ -23,7 +29,7 @@ export type ProgressBarControls = AnimationControls & {
   pause: () => Promise<any>;
 };
 
-const StyledBar = styled.div<Pick<ProgressBarProps, 'barHeight'>>`
+const StyledBar = styled.div<StyledBarProps>`
   height: ${({ barHeight }) => barHeight}px;
   overflow: hidden;
   width: 100%;
@@ -43,6 +49,7 @@ export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
       barHeight = 24,
       barColor,
       autoStart = true,
+      className,
     },
     ref,
   ) => {
@@ -86,7 +93,7 @@ export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
     }, [controls, delay, duration, easing, autoStart, start]);
 
     return (
-      <StyledBar barHeight={barHeight}>
+      <StyledBar className={className} barHeight={barHeight}>
         <StyledBarFilling
           style={{
             originX: 0,

front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -99,6 +99,7 @@ export interface SnackBarProps extends React.ComponentPropsWithoutRef<'div'> {
   duration?: number;
   variant?: SnackbarVariant;
   children?: React.ReactNode;
+  className?: string;
   onClose?: () => void;
 }
 
@@ -113,6 +114,7 @@ export const SnackBar = ({
   onClose,
   id,
   title,
+  className,
 }: SnackBarProps) => {
   const theme = useTheme();
 
@@ -157,6 +159,7 @@ export const SnackBar = ({
 
   return (
     <StyledMotionContainer
+      className={className}
       aria-live={role === 'alert' ? 'assertive' : 'polite'}
       {...{ id, onMouseEnter, onMouseLeave, role, title, variant }}
     >

front/src/modules/ui/input/button/components/FloatingButtonGroup.tsx

@@ -13,13 +13,15 @@ const StyledFloatingButtonGroupContainer = styled.div`
 
 export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
   children: React.ReactElement[];
+  className?: string;
 };
 
 export const FloatingButtonGroup = ({
   children,
   size,
+  className,
 }: FloatingButtonGroupProps) => (
-  <StyledFloatingButtonGroupContainer>
+  <StyledFloatingButtonGroupContainer className={className}>
     {React.Children.map(children, (child, index) => {
       let position: FloatingButtonPosition;
 

front/src/modules/ui/input/button/components/IconButtonGroup.tsx

@@ -18,6 +18,7 @@ export type IconButtonGroupProps = Pick<
     Icon: IconComponent;
     onClick?: (event: MouseEvent<any>) => void;
   }[];
+  className?: string;
 };
 
 export const IconButtonGroup = ({
@@ -25,8 +26,9 @@ export const IconButtonGroup = ({
   iconButtons,
   size,
   variant,
+  className,
 }: IconButtonGroupProps) => (
-  <StyledIconButtonGroupContainer>
+  <StyledIconButtonGroupContainer className={className}>
     {iconButtons.map(({ Icon, onClick }, index) => {
       const position: IconButtonPosition =
         index === 0

front/src/modules/ui/input/button/components/MainButton.tsx

@@ -106,10 +106,14 @@ export const MainButton = ({
   type,
   onClick,
   disabled,
+  className,
 }: MainButtonProps) => {
   const theme = useTheme();
   return (
-    <StyledButton {...{ disabled, fullWidth, onClick, type, variant }}>
+    <StyledButton
+      className={className}
+      {...{ disabled, fullWidth, onClick, type, variant }}
+    >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
     </StyledButton>

front/src/modules/ui/input/button/components/RoundedIconButton.tsx

@@ -37,11 +37,12 @@ export const RoundedIconButton = ({
   Icon,
   onClick,
   disabled,
+  className,
 }: RoundedIconButtonProps) => {
   const theme = useTheme();
 
   return (
-    <StyledIconButton {...{ disabled, onClick }}>
+    <StyledIconButton className={className} {...{ disabled, onClick }}>
       {<Icon size={theme.icon.size.md} />}
     </StyledIconButton>
   );

front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx

@@ -96,17 +96,20 @@ const StyledColorSchemeContent = styled(motion.div)<
 export type ColorSchemeSegmentProps = {
   variant: ColorScheme;
   controls: AnimationControls;
+  className?: string;
 } & React.ComponentPropsWithoutRef<'div'>;
 
 const ColorSchemeSegment = ({
   variant,
   controls,
   style,
+  className,
   onClick,
   onMouseEnter,
   onMouseLeave,
 }: ColorSchemeSegmentProps) => (
   <StyledColorSchemeBackground
+    className={className}
     {...{ variant, style, onClick, onMouseEnter, onMouseLeave }}
   >
     <StyledColorSchemeContent animate={controls} variant={variant}>

front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx

@@ -27,14 +27,16 @@ const StyledLabel = styled.span`
 
 export type ColorSchemePickerProps = {
   value: ColorScheme;
+  className?: string;
   onChange: (value: ColorScheme) => void;
 };
 
 export const ColorSchemePicker = ({
   value,
   onChange,
+  className,
 }: ColorSchemePickerProps) => (
-  <StyledContainer>
+  <StyledContainer className={className}>
     <StyledCardContainer>
       <ColorSchemeCard
         onClick={() => onChange('Light')}

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
+      <div className={className}>
-        dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
+        <Dropdown
-        clickableComponent={
+          dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
-          <IconButton
+          clickableComponent={
-            disabled={disabled}
+            <IconButton
-            Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
+              disabled={disabled}
-            variant={variant}
+              Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
-          />
+              variant={variant}
-        }
-        dropdownMenuWidth={176}
-        dropdownComponents={
-          <DropdownMenu width={176}>
-            <DropdownMenuSearchInput
-              placeholder="Search icon"
-              autoFocus
-              onChange={(event) => setSearchString(event.target.value)}
             />
-            <DropdownMenuSeparator />
+          }
-            <DropdownMenuItemsContainer>
+          dropdownMenuWidth={176}
-              {isLoading ? (
+          dropdownComponents={
-                <DropdownMenuSkeletonItem />
+            <DropdownMenu width={176}>
-              ) : (
+              <DropdownMenuSearchInput
-                <StyledMenuIconItemsContainer>
+                placeholder="Search icon"
-                  {iconKeys.map((iconKey) => (
+                autoFocus
-                    <StyledLightIconButton
+                onChange={(event) => setSearchString(event.target.value)}
-                      key={iconKey}
+              />
-                      aria-label={convertIconKeyToLabel(iconKey)}
+              <DropdownMenuSeparator />
-                      isSelected={selectedIconKey === iconKey}
+              <DropdownMenuItemsContainer>
-                      size="medium"
+                {isLoading ? (
-                      title={iconKey}
+                  <DropdownMenuSkeletonItem />
-                      Icon={icons[iconKey]}
+                ) : (
-                      onClick={() => {
+                  <StyledMenuIconItemsContainer>
-                        onChange({ iconKey, Icon: icons[iconKey] });
+                    {iconKeys.map((iconKey) => (
-                        closeDropdown();
+                      <StyledLightIconButton
-                      }}
+                        key={iconKey}
-                    />
+                        aria-label={convertIconKeyToLabel(iconKey)}
-                  ))}
+                        isSelected={selectedIconKey === iconKey}
-                </StyledMenuIconItemsContainer>
+                        size="medium"
-              )}
+                        title={iconKey}
-            </DropdownMenuItemsContainer>
+                        Icon={icons[iconKey]}
-          </DropdownMenu>
+                        onClick={() => {
-        }
+                          onChange({ iconKey, Icon: icons[iconKey] });
-        onClickOutside={onClickOutside}
+                          closeDropdown();
-        onClose={() => {
+                        }}
-          onClose?.();
+                      />
-          setSearchString('');
+                    ))}
-        }}
+                  </StyledMenuIconItemsContainer>
-        onOpen={onOpen}
+                )}
-      />
+              </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'}