fix(react-component): ensure tooltips are fully visible by adding padding #18883

heloiselui · 2025-03-21T17:28:43Z

Closes #18661

Ensures tooltips are fully visible by adding padding to components affected by layout inconsistencies. This prevents tooltips from being clipped in StackBlitz.

Changelog

New

Added padding around CopyButton, Toggletip, and Tooltip to prevent tooltips from being cut off.

Changed

Wrapped components inside a <div> with appropriate padding (3rem to 9rem, depending on the component).

Testing / Reviewing

CI should pass.

Open Storybook and StackBlitz for the affected components:
- CopyButton (Default)
- Toggletip (Default)
- Tooltip (Default and Duration)
Verify that tooltips are no longer clipped and are fully visible on hover.

netlify · 2025-03-21T17:34:48Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`665618c`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67e6bd47a729100008549478
😎 Deploy Preview	https://deploy-preview-18883--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-03-21T17:36:43Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`665618c`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67e6bd4770ca7700089ba5cd
😎 Deploy Preview	https://deploy-preview-18883--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-03-21T17:39:15Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`665618c`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67e6bd47490fbf0008e6520d
😎 Deploy Preview	https://deploy-preview-18883--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2025-03-21T17:46:40Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.88%. Comparing base (2601d36) to head (665618c).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18883   +/-   ##
=======================================
  Coverage   84.88%   84.88%           
=======================================
  Files         396      396           
  Lines       14512    14512           
  Branches     4738     4773   +35     
=======================================
  Hits        12319    12319           
  Misses       2044     2044           
  Partials      149      149

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

preetibansalui · 2025-03-24T09:17:47Z

Hey @heloiselui, I can see that the components are correctly placed in Storybook on my end. I'm not sure if adding padding is necessary, especially for the Tooltip components, as I don't notice any difference after the changes. Let's discuss this PR in tomorrow's review call.

riddhybansal · 2025-03-24T10:42:53Z

Hey @heloiselui, I can see that the components are correctly placed in Storybook on my end. I'm not sure if adding padding is necessary, especially for the Tooltip components, as I don't notice any difference after the changes. Let's discuss this PR in tomorrow's review call.

Hey @preetibansalui the component gets clipped off when you Open it in stackblitz from overview . Here is the example stackblitz that we have currently and tooltip gets clipped off in stackblitz.

Now this is how stackblitz look after this PR

preetibansalui · 2025-03-24T11:04:11Z

Hey @heloiselui, I can see that the components are correctly placed in Storybook on my end. I'm not sure if adding padding is necessary, especially for the Tooltip components, as I don't notice any difference after the changes. Let's discuss this PR in tomorrow's review call.

Hey @preetibansalui the component gets clipped off when you Open it in stackblitz from overview . Here is the example stackblitz that we have currently and tooltip gets clipped off in stackblitz.

Now this is how stackblitz look after this PR

Ah, I see now. Thanks for the clarification @riddhybansal! Wondering if autoAlign prop could help here.

riddhybansal · 2025-03-24T14:58:52Z

Hey @heloiselui, I can see that the components are correctly placed in Storybook on my end. I'm not sure if adding padding is necessary, especially for the Tooltip components, as I don't notice any difference after the changes. Let's discuss this PR in tomorrow's review call.

Hey @preetibansalui the component gets clipped off when you Open it in stackblitz from overview . Here is the example stackblitz that we have currently and tooltip gets clipped off in stackblitz.
Now this is how stackblitz look after this PR

Ah, I see now. Thanks for the clarification @riddhybansal! Wondering if autoAlign prop could help here.

Umm yeah but
1.) Only toggletip and tooltip have autoalign prop not copy button
2.) Since autoalign is experimental , should we add autoalign prop in our default cases ?

kennylam

Looks good! Small thing – some of the inline styles can be added to decorators so they don't show up in the MDX source code panel.

packages/react/src/components/CopyButton/CopyButton.stories.js

kennylam · 2025-03-24T18:57:32Z

packages/react/src/components/Toggletip/Toggletip.stories.js

@@ -89,7 +89,7 @@ export const ExperimentalAutoAlign = () => {

 export const Default = (args) => {
  return (
-    <>
+    <div style={{ padding: '3rem' }}>


This can be moved to the story decorators at the end of this file

Default.story = { decorators: [ (story) => ( <div style={{ display: 'flex', alignItems: 'center', + padding: '3rem', }}> {story()} </div> ), ], };

kennylam · 2025-03-24T19:00:52Z

packages/react/src/components/Tooltip/Tooltip.stories.js

-        <Help />
-      </button>
-    </Tooltip>
+    <div style={{ padding: '9rem' }}>


This can be moved to the Default decorators.

decorators: [ (Story, context) => { if (context.name.toLowerCase().includes('auto align')) { return <Story />; } return ( - <div className="sb-tooltip-story"> + <div style={{ padding: '9rem' }} className="sb-tooltip-story"> <Story /> </div> );

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

…ories.js" This reverts commit edbebee.

heloiselui · 2025-03-26T10:35:59Z

Looks good! Small thing – some of the inline styles can be added to decorators so they don't show up in the MDX source code panel.

Hey @kennylam! I tried using your suggestion with decorators, which I agree is a cleaner solution, but unfortunately it doesn’t work in StackBlitz since decorators aren’t applied there.
To make sure the tooltips aren’t clipped in the preview (StackBlitz), I went with the inline div approach for now. Preeti’s suggestion is also a good one, once autoAlign is out of experimental, it could be a solid long-term fix.

preetibansalui · 2025-03-26T12:34:36Z

Looks good! Small thing – some of the inline styles can be added to decorators so they don't show up in the MDX source code panel.

Hey Kenny! I tried using your suggestion with decorators, which I agree is a cleaner solution, but unfortunately it doesn’t work in StackBlitz since decorators aren’t applied there. To make sure the tooltips aren’t clipped in the preview (StackBlitz), I went with the inline div approach for now. Preeti’s suggestion is also a good one, once autoAlign is out of experimental, it could be a solid long-term fix.

I agree that autoAlign is currently an experimental prop, so it shouldn't be set as the default. Let's hold off on incorporating it until it becomes stable. Once it's finalized, we can update the stories to use autoAlign in place of padding. For now, we can continue using padding as the default or decorators if its working fine for stackblitz .

heloiselui added 3 commits March 21, 2025 17:09

fix(copybutton): ensure tooltips are fully visible by adding padding

b8fc46d

fix(toggletip): ensure tooltips are fully visible by adding padding

53004e7

fix(tooltip): ensure tooltips are fully visible by adding padding

52589e6

heloiselui added the status: ready for review 👀 label Mar 21, 2025

heloiselui marked this pull request as ready for review March 21, 2025 18:06

heloiselui requested review from a team as code owners March 21, 2025 18:06

heloiselui requested review from preetibansalui and kennylam March 21, 2025 18:06

heloiselui added package: react carbon-components-react package: @carbon/react @carbon/react and removed package: react carbon-components-react labels Mar 21, 2025

riddhybansal approved these changes Mar 22, 2025

View reviewed changes

heloiselui added status: one more review 👀 component: tooltip component: copy-button component: toggle-tip and removed status: ready for review 👀 labels Mar 24, 2025

kennylam reviewed Mar 25, 2025

View reviewed changes

heloiselui and others added 2 commits March 25, 2025 21:33

Update packages/react/src/components/CopyButton/CopyButton.stories.js

edbebee

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Revert "Update packages/react/src/components/CopyButton/CopyButton.st…

2771f7d

…ories.js" This reverts commit edbebee.

Merge branch 'main' into 18661-fix-tooltip-visibility

665618c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-component): ensure tooltips are fully visible by adding padding #18883

fix(react-component): ensure tooltips are fully visible by adding padding #18883

heloiselui commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

codecov bot commented Mar 21, 2025 •

edited

Loading

preetibansalui commented Mar 24, 2025

riddhybansal commented Mar 24, 2025

preetibansalui commented Mar 24, 2025 •

edited

Loading

riddhybansal commented Mar 24, 2025

kennylam left a comment

kennylam Mar 24, 2025

kennylam Mar 24, 2025

heloiselui commented Mar 26, 2025 •

edited

Loading

preetibansalui commented Mar 26, 2025

fix(react-component): ensure tooltips are fully visible by adding padding #18883

Are you sure you want to change the base?

fix(react-component): ensure tooltips are fully visible by adding padding #18883

Conversation

heloiselui commented Mar 21, 2025 • edited Loading

Changelog

New

Changed

Testing / Reviewing

netlify bot commented Mar 21, 2025 • edited Loading

✅ Deploy Preview for v11-carbon-web-components ready!

netlify bot commented Mar 21, 2025 • edited Loading

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Mar 21, 2025 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

codecov bot commented Mar 21, 2025 • edited Loading

Codecov Report

preetibansalui commented Mar 24, 2025

riddhybansal commented Mar 24, 2025

preetibansalui commented Mar 24, 2025 • edited Loading

riddhybansal commented Mar 24, 2025

kennylam left a comment

Choose a reason for hiding this comment

kennylam Mar 24, 2025

Choose a reason for hiding this comment

kennylam Mar 24, 2025

Choose a reason for hiding this comment

heloiselui commented Mar 26, 2025 • edited Loading

preetibansalui commented Mar 26, 2025

heloiselui commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

codecov bot commented Mar 21, 2025 •

edited

Loading

preetibansalui commented Mar 24, 2025 •

edited

Loading

heloiselui commented Mar 26, 2025 •

edited

Loading