skeleton preloader and IE11 bug fixes

CHANGELOG.md

@@ -26,6 +26,11 @@
 #### Fixed
 * Fixed: Label required asterisk color no longer fails color contrast test.
 * Fixed: Textarea web component specific styles were not loading due to an incorrect :host() pseudo-class.
+* Fixed: Alert content text was not wrapping correctly in IE11.
+* Fixed: Brand web component skeleton was rendering with the width and height values of CenturyLink logo instead of Lumen logo.
+* Fixed: Button web component skeleton rendered with an inconsistent display property that caused skeletons to stack instead of rendering inline.
+* Fixed: Button web component skeleton was not respecting icon button sizes.
+* Fixed: Progress web component skeleton rendered with a margin that caused the component to jump after preloading. 
 ### Documentation
 #### Added
 * Added: Installation page now includes framework specific boilerplates for Vue, Stencil, Angular, and React.

src/chi/components/alert/_alert-common.scss

@@ -133,6 +133,7 @@ $states: (
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    width: 100%;
 
     .chi-alert__title {
       font-size: $font-size-base;

src/chi/skeletons/brand.scss

@@ -3,17 +3,17 @@
 $sizes: (
   'xs': 0.75rem,
   'sm': 1rem,
-  'md': 2rem,
-  'lg': 4rem,
-  'xl': 6rem,
-  'xxl': 8rem);
+  'md': 1.25rem,
+  'lg': 1.5rem,
+  'xl': 2rem,
+  'xxl': 2.5rem);
 
 chi-brand:not(.hydrated) {
   animation: shine $animation-duration infinite linear;
   display: block;
   font-size: 0;
-  height: 2rem;
-  width: 10rem;
+  height: 1.25rem;
+  width: 8.75rem;
 
   @each $name, $height in $sizes {
     &[size=#{$name}] {

src/chi/skeletons/button.scss

@@ -7,7 +7,7 @@
 
 chi-button:not(.hydrated) {
   animation: shine $animation-duration infinite linear;
-  display: flex;
+  display: inline-flex;
   font-size: 0;
   height: 2rem;
   width: 6rem;
@@ -24,5 +24,21 @@ chi-button:not(.hydrated) {
     height: 3rem;
   }
 
+  &[type='icon'] {
+    width: 2rem;
+
+    &[size='sm'] {
+      width: 1.5rem;
+    }
+
+    &[size='lg'] {
+      width: 2.5rem;
+    }
+
+    &[size='xl'] {
+      width: 3rem;
+    }
+  }
+
   @include background-gradient;
 }

src/chi/skeletons/progress.scss

@@ -5,8 +5,6 @@ chi-progress:not(.hydrated) {
   display: block;
   font-size: 0;
   height: 0.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.75rem;
 
   @include background-gradient;
 }

src/website/views/getting-started/whats-new.pug

@@ -38,6 +38,11 @@ script(nomodule='' src='../../js/ce/ux-chi-ce/ux-chi-ce.js')
     ul.-text.-pl--2
       li Fixed: Label required asterisk color no longer fails color contrast test.
       li Fixed: Textarea web component specific styles were not loading due to an incorrect :host() pseudo-class.
+      li Fixed: Alert content text was not wrapping correctly in IE11.
+      li Fixed: Brand web component skeleton was rendering with the width and height values of CenturyLink logo instead of Lumen logo.
+      li Fixed: Button web component skeleton rendered with an inconsistent display property that caused skeletons to stack instead of rendering inline.
+      li Fixed: Button web component skeleton was not respecting icon button sizes.
+      li Fixed: Progress web component skeleton rendered with a margin that caused the component to jump after preloading.
     h3.-text--h3.-text--bold Documentation
     h4.-text--h4.-text--bold Added
     ul.-text.-pl--2

src/website/views/templates/portal.pug

@@ -827,7 +827,7 @@ h3 Alert
         .chi-modal__content
           .-d--flex
             i.chi-icon.icon-circle-x.-sm--3.-icon--danger.-mr--2
-            div
+            .-w--100
               p.-text--bold.-m--0 Replace this subhead text with specific text from project documentation
               p.-mt--1.-mb--0
                 | Supporting text to explain the subhead text. Check user story to customize based on requirements.
@@ -868,7 +868,7 @@ h3 Alert
             <div class="chi-modal__content">
               <div class="-d--flex">
                 <i class="chi-icon icon-circle-x -sm--3 -icon--danger -mr--2"></i>
-                <div>
+                <div class="-w--100">
                   <p class="-text--bold -m--0">Replace this subhead text with specific text from project documentation</p>
                   <p class="-mt--1 -mb--0">Supporting text to explain the subhead text. Check user story to customize based on requirements. This is placeholder text to show spacing and line height. Replace this text with text provided in requirements.</p>
                 </div>