index-without-carbon.min.css breaks left/right aligned tooltips for OverflowMenus and IconButtons

[justindm234]

Package

Carbon for IBM Products

Description

When an application includes index-without-carbon.min.css, the alignment of left/right tooltips for OverflowMenus and IconButtons breaks (the tooltip becomes partially positioned over the element):

Without index-without-carbon.min.css:
https://stackblitz.com/edit/github-srfy1t-sugmjm?file=package.json,src%2FApp.jsx,src%2Fmain.jsx

With index-without-carbon.min.css:
https://stackblitz.com/edit/github-srfy1t-wnjsje?file=package.json,src%2Fmain.jsx,src%2FApp.jsx

I believe the root problem is from _string-formatter.scss

Component(s) impacted

• Carbon OverflowMenu
• Carbon IconButton
  Maybe more?

Browser

Chrome, Firefox

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

2.30.0

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

IBM Z Hardware Management Console

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-srfy1t-wnjsje?file=package.json,src%2Fmain.jsx,src%2FApp.jsx

Steps to reproduce the issue (if applicable)

• Import index-without-carbon.min.css
• Render an OverflowMenu or IconButton with align "left" or "right"

The problem does not exist with index-without-carbon-released-only.min.css

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