feat: Adding className as a prop (#2847)

* Adding className as a prop to use emotion * Adding className to feedback and input components
2023-12-07 14:48:37 -03:00
parent d70f8deeec
commit 590912b30f
21 changed files with 125 additions and 65 deletions
--- a/front/src/modules/ui/display/checkmark/components/Checkmark.tsx
+++ b/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>
  );
--- a/front/src/modules/ui/display/chip/components/EntityChip.tsx
+++ b/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}
    />
  ) : (
    <></>
--- a/front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx
+++ b/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}
--- a/front/src/modules/ui/display/typography/components/H2Title.tsx
+++ b/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) => (
-  <StyledContainer>
+export const H2Title = ({
+  title,
+  description,
+  addornment,
+  className,
+}: H2TitleProps) => (
+  <StyledContainer className={className}>
    <StyledTitleContainer>
      <StyledTitle>{title}</StyledTitle>
      {addornment}
--- a/front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
+++ b/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}
--- a/front/src/modules/ui/feedback/progress-bar/components/ProgressBar.tsx
+++ b/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,
--- a/front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+++ b/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 }}
    >
--- a/front/src/modules/ui/input/button/components/FloatingButtonGroup.tsx
+++ b/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;

--- a/front/src/modules/ui/input/button/components/IconButtonGroup.tsx
+++ b/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
--- a/front/src/modules/ui/input/button/components/MainButton.tsx
+++ b/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>
--- a/front/src/modules/ui/input/button/components/RoundedIconButton.tsx
+++ b/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>
  );
--- a/front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx
+++ b/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}>
--- a/front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
+++ b/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')}
--- a/front/src/modules/ui/input/components/AutosizeTextInput.tsx
+++ b/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
--- a/front/src/modules/ui/input/components/Checkbox.tsx
+++ b/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"
--- a/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
+++ b/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
--- a/front/src/modules/ui/input/components/IconPicker.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/input/components/ImageInput.tsx
+++ b/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}
--- a/front/src/modules/ui/input/components/Radio.tsx
+++ b/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"
--- a/front/src/modules/ui/input/components/TextArea.tsx
+++ b/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}
    />
  );
 };
--- a/front/src/modules/ui/input/components/Toggle.tsx
+++ b/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'}