Calcite-components: Refactor: use alternative style for components that should be hidden on initial render

[jcfranco]

Description

This global style affects anything using aria-hidden=true, which may cause issues since it is a valid use case to have a component be hidden from screen readers, but still visible on the page.

List of Changes

Use calcite-hydrated-hidden attribute on hosts that should be hidden on initial render instead of the global style mentioned above.

Areas of Impact

• All components setting aria-hidden=true on host: calcite-alert, calcite-popover, calcite-tooltip and calcite-tree-item.

[jcfranco]

Here are a few options to replace this:

1. Use calcite-hydrated-hidden={value} – simplest and only requires updating host attributes (con: not really a boolean attribute since it will render "true" | "false" in the HTML).
2. ☝️ + reflected prop – adds boilerplate convenience prop to all components, but boolean attribute behaves as expected and gets toggled accordingly.
3. Manually toggle calcite-hydrated-hidden using lifecycle methods – introduces more boilerplate :-1:

@driskull @macandcheese @paulcpederson WDYT?

[driskull]

I like ☝️ + reflected prop" :)

[paulcpederson]

If we were manually toggling things on lifecycle methods I don't think we would need this attribute at all, we could just manage our own hydration visibility.

[jcfranco]

If we were manually toggling things on lifecycle methods I don't think we would need this attribute at all, we could just manage our own hydration visibility.

Are you proposing this lifecycle helpers to toggle calcite-hydrated? I think this could work, but would break any consumer styling/queries w/ the hydrated class.

[paulcpederson]

Are you proposing this lifecycle helpers to toggle calcite-hydrated?

Yeah. I'm not 100% sure you can turn off the stencil hydrated stuff, though, and the docs are non-existent AFAIK

[driskull]

Maybe we should push a little harder for Stencil to make this easier?

It seems odd that every component should be made visibility: visible without a proper way to prevent that.

The solution they gave is to basically to undo what they are doing after it's already been done.

[jcfranco]

Maybe we should push a little harder for Stencil to make this easier?

Agreed, but we need something in the meantime.

[paulcpederson]

@jcfranco so on your initial options, wouldn't we be adding this prop exclusively to components that need to be hidden even when hydrated?

[jcfranco]

Correct.

[driskull]

In the meantime, I think the reflected prop is the nicest. Hopefully we can get Stencil to cook up something better like what you had proposed on that issue @paulcpederson.

[jcfranco]

Would hiddenOnHydrate be a better prop name than calciteHydratedHidden?

[driskull]

I think it should probably have calcite in it so that it's known as a component prop.

[paulcpederson]

Another way to approach this would be to override in global style sheet:

calcite-alert[calcite-hydrated]:not([active]) {
  visibility: hidden;
}

[jcfranco]

I like how that only requires changing the global CSS, but some components rely on internal/unreflected props to determine visibility (e.g., popover and tooltip depend on a reference element).

[jcfranco]

Took a stab at 2. found the following additional drawbacks:

• Adds more code to watch other props to compute its value and triggers another render cycle.
• Prop technically gets surfaced on the component's API
• No way to enforce read-only.

---

Correction regarding option 1: attributes would behave as proper booleans.

I still think 1 would be the simplest way to go until there's an official way of disabling the hydrated behavior (draft PR). Do we have a test for FOUC? I think everything renders properly, but want to double check.

[paulcpederson]

Looking at that pr I agree 1 is the best option.

I don't think we have a test for FOUC right now, but if we did all components with slotted content would fail. They have HTML content, which may parse and render prior to JS running. The way stencil hides non-hydrated content relies on JS to append a style tag to the document, so it won't hide anything until JS is fully parsed. In that time gap all slotted content will be visible, unless I have the wrong mental model of all this.

[jcfranco]

@paulcpederson Gotcha, thanks!