Calcite Alert "title" slot not appearing correctly when "icon" set to true (or boolean)

[abp6318]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When setting a calcite-alert's icon attribute to true, the "title" slot does not appear causing the alert to appear empty.

Stopped working when we upgraded from v1.10.0 to v1.11.0 (calcite components).

Above, the left is 1.10 and the right is 1.11. We changed no code and this is where we see the issue.

There are no listed changes to the calcite-alert in the changelog, but you can see changes in the diff files: @esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0

Expected Behavior

When setting a calcite-alert's icon attribute to true, the "title" slot appears and the icon is determined based on the kind.

Reproduction Sample

https://codepen.io/AaronPutterman/pen/Exzbjqx?editors=1000 // does not seem to happen in codepen

Reproduction Steps

1. Create a calcite-alert
2. Set a string in the "title" slot
3. Set the icon attribute to true
4. View the difference between v1.10 and v1.11

Reproduction Version

1.11

Relevant Info

• Chip: Apple M2 Pro,
• macOS: 14.5 (23F79)
• MacBook Pro 16-inch, 2023
• Chrome

Regression?

1.10

Priority impact

impact - p3 - not time sensitive

Impact

We found a minor work around, and this is a very old issue/bug, so I'm guessing this won't get touched for a long time.

Logging in case this issue shows up here or elsewhere in the future.

Calcite package

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

Esri team

ArcGIS Hub

[jcfranco]

@abp6318 Thanks for reporting this. A few questions:

1. Are you using the dist or components output target?
2. Are components being used in an application framework?
3. Is this still reproducible in the latest version (2.10.0 releasing soon)?
4. Could you provide a repro case that demonstrates the issue?

[jcfranco]

when "icon" set to true (or boolean)

Based on the above, there might be some overlap with #9562.

[abp6318]

@jcfranco --

Are you using the dist or components output target?

I believe we are using the dist, but I can double check and get back to you.

Are components being used in an application framework?

We are using the calcite components within Stencil (web components) and then rendering them with React (in this instance, otherwise we usually use Ember)

Is this still reproducible in the latest version (2.10.0 releasing soon)?

I was unable to repro in the latest version, but my team still thought it was worth logging just in case there's more happening behind the scenes.

Could you provide a repro case that demonstrates the issue? ... Based on the above, there might be some overlap with #9562.

Unforuntately, I can't reproduce this bug in a shareable example, but you're right in that it does appear related to 9562.

[jcfranco]

@abp6318 Thanks for the info! It seems like using the latest mitigates this issue, so we'll proceed to close.