feat(flow-item, panel): added loading and disabled props, nodes, and …

…styles. (#359)

src/assets/styles/_color.scss

@@ -32,6 +32,8 @@ $vibrant-blue: $v-bb-120;
   --calcite-app-border-active: #{$blue};
 
   --calcite-app-disabled-opacity: 0.25;
+
+  --calcite-app-scrim: #{rgba($white, 0.8)};
 }
 
 @mixin calciteDarkThemeVars {
@@ -50,6 +52,8 @@ $vibrant-blue: $v-bb-120;
 
   --calcite-app-border: #{$darkest-gray};
   --calcite-app-border-subtle: #{$darkest-gray};
+
+  --calcite-app-scrim: #{rgba($darker-gray, 0.8)};
 }
 
 :root {

src/components/calcite-flow-item/calcite-flow-item.tsx

@@ -27,6 +27,11 @@ export class CalciteFlowItem {
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Disabled is used to prevent interaction.
+   */
+  @Prop({ reflect: true }) disabled = false;
+
   /**
    * Heading text.
    */
@@ -198,7 +203,7 @@ export class CalciteFlowItem {
 
     return (
       <Host>
-        <calcite-panel>
+        <calcite-panel loading={this.loading} disabled={this.disabled}>
           {this.renderBackButton(rtl)}
           <h2 class={CSS.heading} slot="header-content">
             {heading}

src/components/calcite-flow/calcite-flow.scss

@@ -4,6 +4,7 @@ $start-alpha: 0.5;
   display: flex;
   height: 100%;
   overflow: hidden;
+  position: relative;
 
   .frame {
     width: 100%;

src/components/calcite-flow/calcite-flow.tsx

@@ -16,11 +16,6 @@ export class CalciteFlow {
   //
   // --------------------------------------------------------------------------
 
-  /**
-   * When true, content is waiting to be loaded. Show a busy indicator.
-   */
-  @Prop({ reflect: true }) loading = false;
-
   /**
    * Used to set the component's color scheme.
    */

src/components/calcite-panel/calcite-panel.scss

@@ -49,3 +49,18 @@
   padding: var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing-half);
   flex-flow: row nowrap;
 }
+
+.blocking-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--calcite-app-scrim);
+  z-index: 2;
+
+  animation: calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);
+}

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

@@ -43,11 +43,21 @@ export class CalcitePanel {
     this.calcitePanelDismissedChange.emit();
   }
 
+  /**
+   * Disabled is used to prevent interaction.
+   */
+  @Prop({ reflect: true }) disabled = false;
+
   /**
    * Displays a close button in the trailing side of the header.
    */
   @Prop({ reflect: true }) dismissible = false;
 
+  /**
+   * When true, content is waiting to be loaded. Show a busy indicator.
+   */
+  @Prop({ reflect: true }) loading = false;
+
   /**
    * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
    */
@@ -177,6 +187,14 @@ export class CalcitePanel {
     );
   }
 
+  renderBlocker(): VNode {
+    return this.loading || this.disabled ? (
+      <div class={CSS.blockingContainer}>
+        {this.loading ? <calcite-loader is-active></calcite-loader> : null}
+      </div>
+    ) : null;
+  }
+
   render() {
     const { dismissed, dismissible, el, panelKeyUpHandler } = this;
 
@@ -195,6 +213,7 @@ export class CalcitePanel {
           {this.renderHeader()}
           {this.renderContent()}
           {this.renderFooter()}
+          {this.renderBlocker()}
         </article>
       </Host>
     );

src/components/calcite-panel/resources.ts

@@ -5,7 +5,8 @@ export const CSS = {
   headerContent: "header-content",
   headerTrailingContent: "header-trailing-content",
   contentContainer: "content-container",
-  footer: "footer"
+  footer: "footer",
+  blockingContainer: "blocking-container"
 };
 
 export const TEXT = {

src/demos/calcite-flow.html

@@ -51,8 +51,14 @@ <h1>calcite-flow</h1>
             margin: 1rem 0.2rem;
             min-width: 5rem;
           }
+          .toggles {
+            margin: 1rem 0;
+          }
         </style>
-
+        <div class="toggles">
+          <calcite-button onclick="toggleProperty('loading')">Toggle loading</calcite-button>
+          <calcite-button onclick="toggleProperty('disabled')">Toggle disabled</calcite-button>
+        </div>
         <div class="flow-container">
           <calcite-flow id="flow">
             <calcite-flow-item heading="First Panel">
@@ -158,5 +164,14 @@ <h2>Flow RTL</h2>
         </script>
       </section>
     </main>
+    <script>
+      function toggleProperty(property) {
+        const blocks = document.getElementsByTagName("calcite-flow-item");
+
+        for (i = 0; i < blocks.length; i++) {
+          blocks[i].toggleAttribute(property);
+        }
+      }
+    </script>
   </body>
 </html>