Support a non-transparent state for FAB

[rebollin]

Check existing issues

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

Description

Because floating action buttons (FAB) can hover over text, there is a need to make the disabled button state not transparent. This is due to the potential of text appearing behind the button, making it nearly impossible to read. See below:

Acceptance Criteria

A readable disabled state if there is a text or image behind the button

Relevant Info

No response

Which Component

Floating action button

Example Use Case

In the feature table we are adding a FAB that overlays content in the table. This is visually hard to understanding what is happening.

Priority impact

impact - p3 - not time sensitive

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 Online

[ashetland]

Agree with this, but also makes me question our current pattern of using opacity for disabled states.

[geospatialem]

@rebollin Could the following be achieved using the hidden attribute/property: https://codepen.io/geospatialem/pen/LYoWNdm

In the above use case, using the block expand/collapse to toggle the property.

[rebollin]

@geospatialem we don't want to hide the button, just show in a disabled state. We manually adjusted the opacity which isn't ideal but works for now. I do think this is a gap that hopefully can be filled at some point though!