feat(loading-state): Add the loading-state component

jeff-phillips-18 · jeff-phillips-18 · commit 3b740cb57eee · 2018-11-08T07:20:46.000-05:00
diff --git a/backstop/config/scenarios/loading-state.js b/backstop/config/scenarios/loading-state.js
@@ -0,0 +1,6 @@
+module.exports = [{
+  removeSelectors: ['.page-header + .alert'],
+  label: 'loading-state',
+  url: 'dist/tests/loading-state.html',
+  disabled: false
+}]
diff --git a/backstop_data/bitmaps_reference/backstop_default_loading-state_0_document_0_large-device.png b/backstop_data/bitmaps_reference/backstop_default_loading-state_0_document_0_large-device.png
diff --git a/src/less/loading-state.less b/src/less/loading-state.less
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: (@spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: (@spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: (@spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: (@spinner-size-xs * .5);
+  }
+}
diff --git a/src/less/patternfly-additions.less b/src/less/patternfly-additions.less
@@ -52,6 +52,7 @@
 @import "icons.less";
 @import "infotip.less";
 @import "layouts.less";
+@import "loading-state.less";
 @import "links.less";
 @import "list-pf.less";
 @import "list-view.less";
diff --git a/src/less/spinner.less b/src/less/spinner.less
@@ -14,28 +14,28 @@
   border-right: 4px solid fade(@color-pf-black, 25%);
   border-radius: 100%;
   border-top: 4px solid fade(@color-pf-black, 75%);
-  height: (@font-size-base * 2);
+  height: @spinner-size;
   margin: 0 auto;
   position: relative;
-  width: (@font-size-base * 2);
+  width: @spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: (@font-size-base * 2.5);
-    width: (@font-size-base * 2.5);
+    height: @spinner-size-lg;
+    width: @spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: (@font-size-base * 1.5);
-    width: (@font-size-base * 1.5);
+    height: @spinner-size-sm;
+    width: @spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: @font-size-base;
-    width: @font-size-base;
+    height: @spinner-size-xs;
+    width: @spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: fade(@color-pf-white, 25%);
diff --git a/src/less/variables.less b/src/less/variables.less
@@ -567,6 +567,10 @@
 @panel-success-heading-bg:                                          @brand-success;
 @panel-warning-border:                                              @brand-warning;
 @panel-warning-heading-bg:                                          @brand-warning;
+@spinner-size:                                                      (@font-size-base * 2);
+@spinner-size-lg:                                                   (@font-size-base * 2.5);
+@spinner-size-sm:                                                   (@font-size-base * 1.5);
+@spinner-size-xs:                                                   @font-size-base;
 @state-warning-text:                                                @brand-warning;
 @state-danger-text:                                                 @brand-danger;
 // Reference variable declared in block above
diff --git a/src/sass/converted/patternfly/_loading-state.scss b/src/sass/converted/patternfly/_loading-state.scss
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: ($spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: ($spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: ($spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: ($spinner-size-xs * .5);
+  }
+}
diff --git a/src/sass/converted/patternfly/_spinner.scss b/src/sass/converted/patternfly/_spinner.scss
@@ -14,28 +14,28 @@
   border-right: 4px solid rgba($color-pf-black, (25/100));
   border-radius: 100%;
   border-top: 4px solid rgba($color-pf-black, (75/100));
-  height: ($font-size-base * 2);
+  height: $spinner-size;
   margin: 0 auto;
   position: relative;
-  width: ($font-size-base * 2);
+  width: $spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: ($font-size-base * 2.5);
-    width: ($font-size-base * 2.5);
+    height: $spinner-size-lg;
+    width: $spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: ($font-size-base * 1.5);
-    width: ($font-size-base * 1.5);
+    height: $spinner-size-sm;
+    width: $spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: $font-size-base;
-    width: $font-size-base;
+    height: $spinner-size-xs;
+    width: $spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: rgba($color-pf-white, (25/100));
diff --git a/src/sass/converted/patternfly/_variables.scss b/src/sass/converted/patternfly/_variables.scss
@@ -567,6 +567,10 @@ $panel-success-border:                                              $brand-succe
 $panel-success-heading-bg:                                          $brand-success !default;
 $panel-warning-border:                                              $brand-warning !default;
 $panel-warning-heading-bg:                                          $brand-warning !default;
+$spinner-size:                                                      ($font-size-base * 2) !default;
+$spinner-size-lg:                                                   ($font-size-base * 2.5) !default;
+$spinner-size-sm:                                                   ($font-size-base * 1.5) !default;
+$spinner-size-xs:                                                   $font-size-base !default;
 $state-warning-text:                                                $brand-warning !default;
 $state-danger-text:                                                 $brand-danger !default;
 // Reference variable declared in block above
diff --git a/src/sass/converted/rcue/_loading-state.scss b/src/sass/converted/rcue/_loading-state.scss
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: ($spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: ($spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: ($spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: ($spinner-size-xs * .5);
+  }
+}
diff --git a/src/sass/converted/rcue/_patternfly-additions.scss b/src/sass/converted/rcue/_patternfly-additions.scss
@@ -52,6 +52,7 @@
 @import 'icons';
 @import 'infotip';
 @import 'layouts';
+@import 'loading-state';
 @import 'links';
 @import 'list-pf';
 @import 'list-view';
diff --git a/src/sass/converted/rcue/_spinner.scss b/src/sass/converted/rcue/_spinner.scss
@@ -14,28 +14,28 @@
   border-right: 4px solid rgba($color-pf-black, (25/100));
   border-radius: 100%;
   border-top: 4px solid rgba($color-pf-black, (75/100));
-  height: ($font-size-base * 2);
+  height: $spinner-size;
   margin: 0 auto;
   position: relative;
-  width: ($font-size-base * 2);
+  width: $spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: ($font-size-base * 2.5);
-    width: ($font-size-base * 2.5);
+    height: $spinner-size-lg;
+    width: $spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: ($font-size-base * 1.5);
-    width: ($font-size-base * 1.5);
+    height: $spinner-size-sm;
+    width: $spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: $font-size-base;
-    width: $font-size-base;
+    height: $spinner-size-xs;
+    width: $spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: rgba($color-pf-white, (25/100));
diff --git a/src/sass/converted/rcue/_variables.scss b/src/sass/converted/rcue/_variables.scss
@@ -567,6 +567,10 @@ $panel-success-border:                                              $brand-succe
 $panel-success-heading-bg:                                          $brand-success !default;
 $panel-warning-border:                                              $brand-warning !default;
 $panel-warning-heading-bg:                                          $brand-warning !default;
+$spinner-size:                                                      ($font-size-base * 2) !default;
+$spinner-size-lg:                                                   ($font-size-base * 2.5) !default;
+$spinner-size-sm:                                                   ($font-size-base * 1.5) !default;
+$spinner-size-xs:                                                   $font-size-base !default;
 $state-warning-text:                                                $brand-warning !default;
 $state-danger-text:                                                 $brand-danger !default;
 // Reference variable declared in block above
diff --git a/tests/pages/loading-state.html b/tests/pages/loading-state.html
@@ -0,0 +1,32 @@
+---
+categories: [Widgets]
+layout: page
+title: Loading State
+resource: true
+---
+<div style="width: 350px;">
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf loading-state-pf-lg">
+      <span class="spinner spinner-lg" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner spinner-sm" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner spinner-xs" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+</div>
