bug(button): needlessly added tooltip overwrites user-added title

[maxpatiiuk]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

1. Calcite button has a mechanism of automatically adding tooltip when button's content is longer than the button
2. This backfires when button does not have text content (but has aria-label and title instead) because the shadow DOM's title gets an empty tooltip, which prevents the browser from displaying the user-provided tooltip on <calcite-button>

<calcite-button style="width:32px;height:32px" scale="s" title="MY TITLE!!!">
  <calcite-icon icon="compass-needle" scale="m" />
</calcite-button>

Expected Behavior

Don't add tooltip to shadow dom's button if the tooltip is going to be empty

Reproduction Sample

https://codepen.io/maxpatiiuk/pen/KKJEaER?editors=1000

Reproduction Steps

1. Hover over the button
2. No tooltip is visible
3. See that the <button> in the shadow dom has an empty title attribute - remove that and bug is fixed

Reproduction Version

2.0.0

Relevant Info

Google Chrome | 120.0.6099.71 (Official Build) (arm64) OS | macOS Version 14.1.2 (Build 23B92) JavaScript | V8 12.0.267.8

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

JS API users reported issues with button losing it's title after being migrated to calcite. Short-term workaround has been to duplicate the title on the content slotted into the button

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[jcfranco]

@maxpatiiuk Belated thanks for creating this issue and taking it on. ✨💪✨

@geospatialem @brittneytewks I've assigned this to our current milestone.

[github-actions[bot]]

Installed and assigned for verification.

[jcfranco]

@maxpatiiuk Thanks again for the fix! 🎉

[DitwanP]

🍡 Verified locally on main