fix: pageheader subtitle truncation visibility

[davidmenendez]

Closes #6534

two issues i'd like to point out

1. StringFormatter needs to be updated to be TypeScript
2. StringFormatter doesn't dynamically hide the overflow text. I'm not sure if we have an alternative to StringFormatter that can display the text without making the popover always visible. would like some thoughts on this.

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	e7a3117
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/675affcbe10e8900084dd424
😎 Deploy Preview	https://deploy-preview-6551--ibm-products-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]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	a0fd063
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/675bc0979c11ad0008cc31c3
😎 Deploy Preview	https://deploy-preview-6551--carbon-for-ibm-products.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.

[davidmenendez]

even using DefinitionTooltip, which is what the title does, it won't dynamically change without adding additional code to flip it from needs truncation to doesn't need truncation. the code that handles that logic in PageHeaderTitle could be moved into a hook and reused.

just wanted to get some opinions on all this because it turned out to be more complicated than i thought 😅

[davidmenendez]

updated the subtitle to use DefinitionTooltip similar to title and added a new hook that re-uses the overflow logic for the title to be used in subtitle

[codecov]

Codecov Report

Attention: Patch coverage is 94.44444% with 1 line in your changes missing coverage. Please review.

Project coverage is 80.05%. Comparing base (36bd4f9) to head (a0fd063).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6551      +/-   ##
==========================================
- Coverage   80.06%   80.05%   -0.01%     
==========================================
  Files         394      395       +1     
  Lines       12907    12911       +4     
  Branches     4277     4278       +1     
==========================================
+ Hits        10334    10336       +2     
- Misses       2573     2575       +2     

Components	Coverage Δ
ibm-products	∅ <ø> (∅)
ibm-products-web-components	∅ <ø> (∅)

[makafsal]

Long text in subtitle breaks styles.

[anamikaanu96]

Hey @davidmenendez, It looks like the styles and tooltip are breaking when we update the subtitle using the controls.

[amal-k-joy]

Change looks good. However found this behaviour , but not sure is really applicable to adopter. However , could not see this issue for title

Screen.Recording.2024-12-09.at.4.46.58.PM.mov

[davidmenendez]

@anamikaanu96 @makafsal @amal-k-joy thank you for catching this. i realized that my problem was that i wasn't accounting for calculating the overflow by height. i refactored my code to take that into consideration for subtitle.

[davidmenendez]

i know this needs to include testing, but i wanted to get feedback on the implementation of this solution. specifically with regards to replaceWithOverflow.ts.

would love to get y'all's opinion on this!

cc: @elycheea @matthewgallo

[amal-k-joy]

i know this needs to include testing, but i wanted to get feedback on the implementation of this solution. specifically with regards to replaceWithOverflow.ts.

would love to get y'all's opinion on this!

cc: @elycheea @matthewgallo

Solution looks good to me , since we we clamping vertically based on number of lines, its sensible to check for height overflow in case of title.
Also a thought, regarding the util naming, the functionality looks more like checking for overflow. (checkForOverflow, checkForOverflowWidth, checkForOverflowHeight )

[davidmenendez]

Solution looks good to me , since we we clamping vertically based on number of lines, its sensible to check for height overflow in case of title. Also a thought, regarding the util naming, the functionality looks more like checking for overflow. (checkForOverflow, checkForOverflowWidth, checkForOverflowHeight )

to be honest i struggled a bit with naming convention here and i think it's because i got too caught up in maintaining the "normal" vs "overflow" refs, but now that i think about it those could (should) be done in the component instead of the utility.

[davidmenendez]

tests have been added 👍

[amal-k-joy]

Awesome work .

fixt

[davidmenendez]

also for #6636