Sometimes calcite-notice doesn't show the icon when icon sets to true

[qingyingwu]

Check existing issues

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

Actual Behavior

Using ArcGIS Velocity, sometimes the calcite-notice doesn't show the icon when icon sets to true as the screenshot shown below:

As an experiment, adding another calcite-notice by providing an icon name, the icon shows correctly:

the code used for the screenshot above:

      <CalciteNotice open kind="success" icon width="full">
        <div slot="message">
          {t('Steps.IdentifyKeyFields.NoLocationNeeded', {
            labelKey
          })}
        </div>
      </CalciteNotice>
      <CalciteNotice open kind="success" icon="layers-reference" width="full">
        <div slot="message">
          {t('Steps.IdentifyKeyFields.NoLocationNeeded', {
            labelKey
          })}
        </div>
      </CalciteNotice>

In ArcGIS Velocity, the issue was not always reproducible. At some places, the calcite-notice shows the icon consistently, and at some other places most of the time it doesn't show the icon. The link below contains testing details: https://devtopia.esri.com/WebGIS/arcgis-velocity-online/issues/15021#issuecomment-4822238

Expected Behavior

calcite-notice should display the icon correctly.

Reproduction Sample

repro sample

Reproduction Steps

1. add a calcite-notice and set icon to true.

The reproduction sample shows that calcite-notice doesn't show the icon consistently when setting icon to true.

Reproduction Version

2.9.0

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

Minor impact that slightly degrades user experience

Calcite package

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

Esri team

ArcGIS Velocity

[jcfranco]

As a workaround, you can use icon="" on the custom-element or to use the React wrapper with one of the suggested boolean attribute gotcha workarounds (see updated repro case).

This is a known issue with React and booleans. In this case, the mixed boolean + string type adds another layer to this gotcha. When using a boolean attribute, the React wrapper handles it properly, but when using the custom element directly (i.e., not the wrapper), React will set icon="true", which the component will then use as the icon name. You can see this in the console:

We recommend using the wrapper for React use cases, so not sure if adding a note about this to the doc is appropriate. cc @benelan @geospatialem

Closing based on the above.

[github-actions[bot]]

cc @geospatialem, @brittneytewks