feat(Tooltip): fix dynamic width

kronostechnologies · Mar 22, 2024 · 740a8b9 · 740a8b9
1 parent 9c9502a
commit 740a8b9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/packages/react/src/components/tooltip/tooltip.test.tsx.snap b/packages/react/src/components/tooltip/tooltip.test.tsx.snap
@@ -220,6 +220,7 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={false}
+    key="1"
     role="tooltip"
     style={
       {
@@ -492,6 +493,7 @@ exports[`Tooltip Has default desktop styles 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={false}
+    key="1"
     role="tooltip"
     style={
       {
@@ -768,6 +770,7 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={true}
+    key="1"
     role="tooltip"
     style={
       {
@@ -1040,6 +1043,7 @@ exports[`Tooltip Has mobile styles 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={true}
+    key="1"
     role="tooltip"
     style={
       {

diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
@@ -232,9 +232,14 @@ export const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>> = ({
     const [tooltipTimeout, setTooltipTimeout] = useState<NodeJS.Timeout | undefined>();
     const [controlledTooltipOpen, setControlledTooltipOpen] = useState<boolean>();
     const [isClicked, setIsClicked] = useState<boolean>(false);
+    const [tooltipKey, setTooltipKey] = useState<number>(0);
     const currentLabel = isClicked ? (confirmationLabel ?? label) : label;
     const tooltipVariant = (mode === 'confirm' && isClicked) ? 'success' : 'normal';
 
+    useEffect(() => {
+        setTooltipKey((prevKey) => prevKey + 1);
+    }, [currentLabel]);
+
     const getTooltipTriggerType = useCallback((): TriggerType | null => {
         if (disabled) {
             return null;
@@ -365,6 +370,7 @@ export const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>> = ({
                 isMobile={isMobile}
                 variant={tooltipVariant}
                 visible={popperTooltip.visible}
+                key={tooltipKey}
                 {...popperTooltip.getTooltipProps() /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 <TooltipArrow

diff --git a/packages/storybook/stories/tooltip.stories.tsx b/packages/storybook/stories/tooltip.stories.tsx
@@ -6,9 +6,10 @@ import {
     DropdownList,
     Tooltip,
     TooltipPlacement,
+    TextInput
 } from '@equisoft/design-elements-react';
 import { StoryFn as Story } from '@storybook/react';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import styled from 'styled-components';
 import { DesktopDecorator } from './utils/device-context-decorator';
 import { rawCodeParameters } from './utils/parameters';
@@ -132,8 +133,9 @@ export const WithDropdownNavigation: Story = () => {
 
 WithDropdownNavigation.decorators = [RouterDecorator];
 
-const CodeContainer = styled.div`
+const CodeContainer = styled.div<{ justifyContent?: string }>`
     display: flex;
+    justify-content: ${({ justifyContent }) => justifyContent ? justifyContent : 'flex-start' };
 `;
 export const WithConfirmation: Story = () => {
     const code = 'JBSW Y3DP EHPK 3PXP';
@@ -161,3 +163,50 @@ export const WithConfirmation: Story = () => {
         </Container>
     );
 };
+
+export const WithDynamicText: Story = () => {
+    const [label, setLabel] = useState<string>('Hide password')
+    const [iconName, setIconName] = useState<'eye' | 'eyeOff'>('eye');
+    const [inputType, setInputType] = useState<string>('password');
+    const [password, setPassword] = useState<string>('somePassword');
+    const handleOnClick = useCallback(() => {
+        if (label === 'Hide password') {
+            setLabel('Show password in plain text');
+            setIconName('eyeOff');
+            setInputType('password');
+        } else {
+            setLabel('Hide password');
+            setIconName('eye');
+            setInputType('text');
+        }
+    }, [label, setLabel]);
+    const handleOnPasswordChange = useCallback((newPassword) => {
+        setPassword(newPassword);
+    }, [setPassword]);
+
+    return (
+        <Container>
+            <CodeContainer justifyContent='flex-end'>
+                <TextInput
+                    required
+                    label="Password"
+                    type={inputType}
+                    value={password}
+                    onChange={handleOnPasswordChange}
+                    validationErrorMessage="This field is required"
+                />
+                <Tooltip
+                    label={label}
+                    desktopPlacement="top"
+                    defaultOpen
+                >
+                    <IconButton
+                        buttonType='primary'
+                        onClick={handleOnClick}
+                        iconName={iconName}
+                    />
+                </Tooltip>
+            </CodeContainer>
+        </Container>
+    );
+};