fix: add prop fullWidth

Telefonica · Jul 27, 2023 · 87c93f7 · 87c93f7
1 parent f01c828
commit 87c93f7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/tooltip.css.ts b/src/tooltip.css.ts
@@ -135,6 +135,10 @@ export const container = style([
     },
 ]);
 
+export const fullWidth = style({
+    width: '100%',
+});
+
 export const enter = style({
     transform: enterTransform,
 });
@@ -158,4 +162,4 @@ export const exit = style({
 
 export const exitActive = style({
     animation: `${fadeOutKeyframes} 0.3s ${animationTiming} both`,
-});
+});
diff --git a/src/tooltip.tsx b/src/tooltip.tsx
@@ -106,6 +106,7 @@ type Props = {
     targetLabel: string;
     delay?: boolean;
     dataAttributes?: DataAttributes;
+    fullWidth?: boolean;
     textAlign?: TextAlign;
     changedPosition?: string;
 };
@@ -119,6 +120,7 @@ const Tooltip: React.FC<Props> = ({
     targetLabel,
     delay = true,
     dataAttributes,
+    fullWidth,
     changedPosition,
     ...rest
 }) => {
@@ -375,11 +377,13 @@ const Tooltip: React.FC<Props> = ({
         }
     }, [isVisible, getContainerPosition, position, width]);
 
+    const targetStyle = fullWidth && styles.fullWidth;
+
     return (
         <>
             <div
                 ref={targetRef}
-                className={styles.wrapper}
+                className={classnames(styles.wrapper, targetStyle)}
                 onPointerOver={() => {
                     if (closeTooltipTimeoutId.current) {
                         clearTimeout(closeTooltipTimeoutId.current);