Tearsheet: redesign when it checks for definition overflow

[wkeese]

Package

Carbon for IBM Products

Description

@devadula-nandan added code in #6686 (for #4230) to display a tooltip when the tearsheet description overflows. I'm seeing some issues:

1. I've seen TearsheetShell re-rendering in an infinite loop. Not sure why but perhaps this is related.
2. It measures overflow every time TearsheetShell() is called, even when nothing relevant has changed. This happens even (a) when the tearsheet is closed and/or (b) before the description is even rendered.
3. It needs to run when the browser width changes... and it does... but just out of luck from some unrelated code.

What I would suggest is to replace the current code of:

const isOverflowing = checkHeightOverflow(descriptionRef.current);

with:

const [isOverflowing, setIsOverflowing] = useState(false);
useEffect(() => {
  setIsOverflowing(checkHeightOverflow(descriptionRef.current));
}, [description, width]);

Note that normally useState() and useEffect() can be replaced by a single useMemo(), but in this case I want to wait for the TearsheetShell to (re)render before measuring.

Component(s) impacted

Tearsheet, maybe TearsheetNarrow too.

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.59.0

Suggested Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IKC

CodeSandbox or Stackblitz example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-tearsheet--tearsheet&globals=viewport:basic

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[elycheea]

Thanks for reporting @wkeese! I’ve moved this to bugs, and we’ll take a look.