fix: calcite-block disabled state doesn't 'hide' slider handle #560 (#…

…567)

* handle zIndex issues for CalciteScrim

* scrim for panel

* apply to other components.

* cleanup

* revert stuff

* set loading prop

* more legible code

* self closing tags

src/components/calcite-block/calcite-block.tsx

@@ -194,8 +194,9 @@ export class CalciteBlock {
         <article aria-expanded={collapsible ? (open ? "true" : "false") : null} aria-busy={loading}>
           {headerNode}
           <div class={CSS.content} hidden={!hasContent || !open}>
-            <slot />
-            {loading || disabled ? <CalciteScrim loading={false}></CalciteScrim> : null}
+            <CalciteScrim loading={loading} disabled={disabled}>
+              <slot />
+            </CalciteScrim>
           </div>
         </article>
       </Host>

src/components/calcite-panel/calcite-panel.tsx

@@ -189,14 +189,8 @@ export class CalcitePanel {
     );
   }
 
-  renderScrim(): VNode {
-    return this.loading || this.disabled ? (
-      <CalciteScrim loading={this.loading}></CalciteScrim>
-    ) : null;
-  }
-
   render() {
-    const { dismissed, dismissible, el, loading, panelKeyUpHandler } = this;
+    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
 
     const rtl = getElementDir(el) === "rtl";
 
@@ -215,7 +209,7 @@ export class CalcitePanel {
           {this.renderContent()}
           {this.renderFooter()}
         </article>
-        {this.renderScrim()}
+        <CalciteScrim loading={loading} disabled={disabled} />
       </Host>
     );
   }

src/components/calcite-pick-list/shared-list-render.tsx

@@ -4,7 +4,7 @@ import { VNode } from "@esri/calcite-components/dist/types/stencil.core";
 import { CSS } from "./resources";
 
 const renderScrim = (loading, disabled): VNode => {
-  return loading || disabled ? <CalciteScrim loading={loading}></CalciteScrim> : null;
+  return <CalciteScrim loading={loading} disabled={disabled} />;
 };
 
 export const List = ({ props, text, ...rest }): VNode => {

src/components/utils/CalciteScrim.tsx

@@ -1,5 +1,5 @@
 import { FunctionalComponent, h } from "@stencil/core";
-const divStyle = {
+const scrimDivStyle = {
   alignItems: "center",
   animation:
     "calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)",
@@ -16,10 +16,25 @@ const divStyle = {
 
 interface ScrimProps {
   loading: boolean;
+  disabled: boolean;
 }
 
-export const CalciteScrim: FunctionalComponent<ScrimProps> = ({ loading }) => (
-  <div style={divStyle}>{loading ? <calcite-loader is-active></calcite-loader> : null}</div>
-);
+const containerDivStyle = {
+  position: "relative",
+  zIndex: "1"
+};
+
+export const CalciteScrim: FunctionalComponent<ScrimProps> = ({ loading, disabled }, children) => {
+  const renderScrim = disabled || loading;
+  const hasChildren = children?.length;
+
+  const loaderNode = loading ? <calcite-loader is-active></calcite-loader> : null;
+
+  const scrimContainerNode = <div style={scrimDivStyle}>{loaderNode}</div>;
+
+  const childContainerNode = hasChildren ? <div style={containerDivStyle}>{children}</div> : null;
+
+  return renderScrim ? [scrimContainerNode, childContainerNode] : children;
+};
 
 export default CalciteScrim;