[calcite-loader, calcite-input-message] Drop active in favor of hidden

[jcfranco]

Description

Stems from https://github.com/Esri/calcite-components/pull/3778/files#r774706383

It seems that calcite-loader/calcite-input-message[active] is used to toggle visibility, so we should deprecate/remove it in favor of the global hidden attribute.

https://codepen.io/jcfranco/pen/KKXQErV?editors=1000

To avoid breaking changes:

• active should be deprecated
• styles for hidden should be added (these have higher precedence than active)

Proposed Advantages

One less custom prop to manage, and it aligns with existing HTML conventions.

Relevant Info

N/A

Which Component

• calcite-loader
• calcite-input-message

[driskull]

Agreed.

We do have some components that are not visible by default...

• modal
• popover
• tooltip
• ?

However, these use visibility to hide them instead of display. Also, we would expect those components to not be visible by default. In this case, I think I would expect loader to be visible by default.

[macandcheese]

Do we need to allow this to be configured at all?

Should users just be adding and removing the element, or does having the ability to toggle visibility via prop aid in a transition or fade-in or something? cc @asangma

[driskull]

Do we need to allow this to be configured at all?

I don't think so. We just choose what we want to do.

Should users just be adding and removing the element, or does having the ability to toggle visibility via prop aid in a transition or fade-in or something?

That's a good question. If a user had to construct a calcite-modal at the time that the user wanted to display it would that be problematic? It might be an inconvenience. Currently, a user can just write the HTML for a modal and then enable it at a later time.

As for hidden vs active... hidden will set display:none which might be problematic for animations of modals/alerts/tooltips/popovers. I think that's why we are using our own property, to handle animation. We might be able to do animation using hidden but it might be a little tricky.

[driskull]

In the case of calcite-loader, we probably don't need an active property and can just use the hidden attribute.

I don't see any animation going on when setting active for this component. It's also not a component that contains any content, so there's no reason not to just remove it or set hidden property on it.

[jcfranco]

I updated the issue to include calcite-input-message. I think the other components brought up earlier can stay as is since, active/open is linked to their behavior . Loader and input message are more like atoms that can be displayed/hidden by an owning component.

[github-actions]

Installed and assigned for verification.

[geospatialem]

This update looks great, nice work, @Elijbet! ✨

@jcfranco Wondering since the active prop is deprecated, and will likely no longer be supported in the future if this would constitute a breaking change, since users will have to toggle hidden as opposed to active?

[geospatialem]

Re-assigning to revert prior to the upcoming release for additional testing and follow-up.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on next.634 for loader and input-message! ✨