feat(components): pass rectRef to TotalLayoutFooterContainer for it t…

…o be able to center itself when fixed feat(components): Add autoHeight property to Tooltip + Add option of emtpy level to InputLabel to fix button centering when inline + Add new icons --------- Ticket: task/AcaPortfolio-60 Reviewed-by: @MIGUELez11 Refs: #132 Co-authored-by: paola-p <> Co-authored-by: Fernando Marín Sánchez <[email protected]>
leemonade · Apr 18, 2024 · 61e0cdf · 61e0cdf
1 parent ab9da0a
commit 61e0cdf
Show file tree

Hide file tree

Showing 19 changed files with 8,199 additions and 8,148 deletions.
diff --git a/packages/components/src/form/InputLabel/InputLabel.constants.js b/packages/components/src/form/InputLabel/InputLabel.constants.js
@@ -5,10 +5,12 @@ export const INPUT_LABEL_DEFAULT_PROPS = {
   description: '',
   withDescriptionIcon: false,
   required: false,
+  showEmptyLabel: false,
 };
 export const INPUT_LABEL_PROP_TYPES = {
   label: PropTypes.string,
   description: PropTypes.string,
   withDescriptionIcon: PropTypes.bool,
   required: PropTypes.bool,
+  showEmptyLabel: PropTypes.bool,
 };
diff --git a/packages/components/src/form/InputLabel/InputLabel.js b/packages/components/src/form/InputLabel/InputLabel.js
@@ -6,14 +6,21 @@ import { InputDescription } from '../InputDescription';
 import { InputLabelStyles } from './InputLabel.styles';
 import { INPUT_LABEL_DEFAULT_PROPS, INPUT_LABEL_PROP_TYPES } from './InputLabel.constants';
 
-const InputLabel = ({ label, description, withDescriptionIcon, required, ...props }) => {
+const InputLabel = ({
+  label,
+  description,
+  withDescriptionIcon,
+  required,
+  showEmptyLabel,
+  ...props
+}) => {
   const { classes } = InputLabelStyles({}, { name: 'InputLabel' });
 
   return (
     <Box className={classes.container}>
-      {!isEmpty(label) && (
+      {(!isEmpty(label) || showEmptyLabel) && (
         <Text as="label" className={classes.label} {...props}>
-          {label}
+          {!isEmpty(label) ? label : <span dangerouslySetInnerHTML={{ __html: '&nbsp;' }} />}
           {required && <span className={classes.required}>*</span>}
         </Text>
       )}

diff --git a/packages/components/src/form/InputLabel/InputLabel.stories.js b/packages/components/src/form/InputLabel/InputLabel.stories.js
@@ -18,9 +18,7 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ ...props }) => {
-  return <InputLabel {...props} />;
-};
+const Template = ({ ...props }) => <InputLabel {...props} />;
 
 export const Playground = Template.bind({});
 

diff --git a/packages/components/src/form/InputWrapper/InputWrapper.constants.js b/packages/components/src/form/InputWrapper/InputWrapper.constants.js
@@ -21,6 +21,7 @@ export const INPUT_WRAPPER_PROP_TYPES = {
   headerStyle: PropTypes.any,
   contentStyle: PropTypes.any,
   autoComplete: PropTypes.string,
+  showEmptyLabel: PropTypes.bool,
 };
 export const INPUT_WRAPPER_DEFAULT_PROPS = {
   label: '',

diff --git a/packages/components/src/form/InputWrapper/InputWrapper.js b/packages/components/src/form/InputWrapper/InputWrapper.js
@@ -31,6 +31,7 @@ const InputWrapper = ({
   className,
   style,
   formValues,
+  showEmptyLabel,
   ...props
 }) => {
   const size = INPUT_WRAPPER_SIZES.includes(sizeProp) ? sizeProp : 'md';
@@ -46,14 +47,15 @@ const InputWrapper = ({
   return (
     <Box className={cx(classes.root, className)} style={style} {...props}>
       {/* Label & Description */}
-      {hasHeader && (
+      {(hasHeader || showEmptyLabel) && (
         <Stack
           direction="column"
           className={cx(classes.header, headerClassName)}
           style={headerStyle}
         >
           <InputLabel
             label={label}
+            showEmptyLabel={showEmptyLabel}
             required={required}
             {...labelProps}
             description={description}

diff --git a/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
@@ -16,9 +16,11 @@ const TotalLayoutFooterContainer = ({
   style,
   width,
   clean,
+  rectRef,
   skipOffset,
 }) => {
   const [showFooterBorder, setShowFooterBorder] = React.useState(false);
+  const [footerStyles, setFooterStyles] = React.useState({});
   const { classes } = TotalLayoutFooterContainerStyles(
     {
       showFooterBorder: showFooterBorder || _showFooterBorder,
@@ -60,9 +62,30 @@ const TotalLayoutFooterContainer = ({
     return () => {};
   }, [scrollRef?.current, handleScroll]);
 
+  React.useEffect(() => {
+    let animationFrameId;
+
+    if (rectRef?.current) {
+      const updateFooterStyles = () => {
+        const clientRect = rectRef?.current?.getBoundingClientRect();
+        // Aquí actualizamos el estado o hacemos lo que sea necesario con clientRect
+        // Por ejemplo, si necesitas actualizar el estado basado en clientRect, puedes hacerlo aquí.
+        // Asegúrate de tener un estado para almacenar los estilos que quieres actualizar.
+        setFooterStyles({ left: clientRect?.left, width: clientRect?.width });
+
+        animationFrameId = requestAnimationFrame(updateFooterStyles);
+      };
+
+      animationFrameId = requestAnimationFrame(updateFooterStyles);
+    }
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [rectRef?.current]);
+
   return (
     <Stack justifyContent="center" fullWidth>
-      <Box className={classes.footer} style={style}>
+      <Box className={classes.footer} style={{ ...style, ...footerStyles }}>
         <Stack fullWidth style={{ height: 72, padding: clean ? 0 : '16px 24px' }}>
           <Stack direction="row" spacing={2} noFlex>
             {leftZone}
@@ -90,6 +113,7 @@ TotalLayoutFooterContainer.propTypes = {
   style: PropTypes.object,
   width: PropTypes.number,
   clean: PropTypes.bool,
+  rectRef: PropTypes.object,
   skipOffset: PropTypes.bool,
 };
 

diff --git a/packages/components/src/overlay/Tooltip/Tooltip.js b/packages/components/src/overlay/Tooltip/Tooltip.js
@@ -9,12 +9,21 @@ import {
   TOOLTIP_POSITION,
 } from './Tooltip.constants';
 
-const Tooltip = ({ size, color, position, withArrow, useAria, withinPortal, ...props }) => {
+const Tooltip = ({
+  size,
+  color,
+  position,
+  withArrow,
+  useAria,
+  withinPortal,
+  autoHeight,
+  ...props
+}) => {
   size = TOOLTIP_SIZES.includes(size) ? size : 'sm';
   color = TOOLTIP_COLORS.includes(color) ? color : 'primary';
   position = TOOLTIP_POSITION.includes(position) ? position : 'top';
 
-  const { classes, cx } = TooltipStyles({ size, color });
+  const { classes, cx } = TooltipStyles({ size, color, autoHeight });
 
   return (
     <MantineTooltip

diff --git a/packages/components/src/overlay/Tooltip/Tooltip.styles.js b/packages/components/src/overlay/Tooltip/Tooltip.styles.js
@@ -1,24 +1,24 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem, getPaddings, getFontExpressive } from '../../theme.mixins';
 
-const getSizes = (theme, size) => {
+const getSizes = (theme, size, autoHeight) => {
   const { spacing } = theme;
 
   return {
     xs: {
       fontSize: pxToRem(12),
-      height: pxToRem(spacing[5]),
+      height: !autoHeight && pxToRem(spacing[5]),
       ...getPaddings(spacing[1], spacing[2]),
     },
 
     sm: {
       fontSize: pxToRem(theme.fontSizes['1']),
-      height: pxToRem(spacing[7]),
+      height: !autoHeight && pxToRem(spacing[7]),
       ...getPaddings(spacing[1], spacing[3]),
     },
     md: {
       fontSize: pxToRem(theme.fontSizes['2']),
-      height: pxToRem(spacing[10]),
+      height: !autoHeight && pxToRem(spacing[10]),
       ...getPaddings(spacing[2], spacing[4]),
     },
   }[size];
@@ -50,15 +50,15 @@ const getColor = (theme, color) =>
     },
   })[color];
 
-const TooltipStyles = createStyles((theme, { color, size }) => ({
+const TooltipStyles = createStyles((theme, { color, size, autoHeight }) => ({
   root: {},
   arrow: {
     ...getColor(theme, color),
   },
   tooltip: {
     ...getFontExpressive(null, 400),
     ...getColor(theme, color),
-    ...getSizes(theme, size),
+    ...getSizes(theme, size, autoHeight),
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',