search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 75 forks source link

Audit/review how `display` on `host` plays w/ `hidden`. #5176

Open Elijbet opened 2 years ago

Elijbet commented 2 years ago

Background

We need to ensure that hidden works consistently across components.

The snipped below was tried as a solution but reverted back. Aside from breaking transition on the scrim, it also doesn't align with the consumer's assumption about how Calcite hides elements and how native HTML elements use it.

Note: Changing the value of the CSS display property on an element with the hidden attribute overrides the behavior. For instance, elements styled display: flex will be displayed despite the hidden attribute's presence.

:host([hidden]) { 
   display: none !important; 
 }

Desired Outcome

Ensure that hidden worked consistently across components.

Related:

5137 #3821

driskull commented 2 years ago

I think we should probably just hide an inner container when hidden is on the host instead of applying styles directly on the host.

In a perfect world, we could keep the host styles pretty minimal to just things like the default display type and they wouldn't change during the component runtime.

geospatialem commented 1 year ago

Spike effort to determine which components should be addressed following the pattern Matt mentions above.

jcfranco commented 2 months ago

This may be superseded by https://github.com/Esri/calcite-design-system/issues/8623.