Rename components to placeholder

RELEASE-NOTES.md

@@ -1,10 +1,15 @@
 ## RELEASE NOTES
 
-### Version 2.4.0 - Sep xx, 2018
+### Version 2.4.0 - Sep 17, 2018
+
+**Install Notes**
+`2.4.0` includes a new component `placeholder`. To use this component in your existing SUI site, be sure to add `@placeholder: 'default';` to your `theme.config`. You can see an example in `theme.config.example`
 
 **New Components**
+- **Loader** - Added `ui placeholder` that can be used to mimic content while its loading
+
+**New UI Type**
 - **Segment** - Added new `ui placeholder segment` used to reserve space for UI when no content is available.
-- **Loader** - Added `ui content loader` that can be used to mimic content while its loading
 
 **Major Enhancements**
 - **Dropdown** - Added `clearable` dropdowns. When `clearable: true` is specified, you can
@@ -16,16 +21,17 @@ For example when `attachable: false` is used with a modal, or if IE11/Edge is us
 - **Modal** - Fixed issue where `scrolling modal` would not allow for scrolling with touch devices. #6449
 
 **Bugs**
+- **Dimmer** - Dimmer now sets `variation` at runtime, to support run-time swapping between `top aligned` and `middle aligned` using `.dimmer('setting', 'variation', 'top aligned')`
+- **Dropdown** - `inline dropdown` `close icon` default right margin default spacing slightly modified.
 - **Dropdown** - Fixed issue where `onChange` when used with `action: hide` would be missing the third param `$item` #6555
+- **Flag** - Add `uk` alias for `united kingdom` **Thanks @PhilipGarnero** #6531
+- **Icon** - Fixes missing `disk outline icon` alias #6556
+- **Label** - Fixed issue where `basic label` were appearing incorrectly **Thanks @lasley / @ColinFrick** #6582 #6440
+- **List** - Fixed issue where `content` would not take up 100% width when used alongside `img` or `icon`
 - **Menu/Dropdown** - Fixed `left menu` inside `ui menu` would display horizontally as `flex` #6359
-- **Dimmer** - Dimmer now sets `variation` at runtime, to support run-time swapping between `top aligned` and `middle aligned` using `.dimmer('setting', 'variation', 'top aligned')`
-- **Modal** - Modal now will remove `blurring` after undimming, to prevent issues with `position: fixed` #6520
 - **Menu/Dropdown** - Fixes dropdown item margin not obeyed inside `labeled icon menu` #6557
 - **Modal** - Fixes `@mobileTopAlignedMargin` theming variable was not implemented
-- **List** - Fixed issue where `content` would not take up 100% width when used alongside `img` or `icon`
-- **Dropdown** - `inline dropdown` `close icon` default right margin default spacing slightly modified.
-- **Icon** - Fixes missing `disk outline icon` alias #6556
-- **Flag** - Add `uk` alias for `united kingdom` **Thanks @PhilipGarnero** #6531
+- **Modal** - Modal now will remove `blurring` after undimming, to prevent issues with `position: fixed` #6520
 
 ### Version 2.3.3 - July 8th, 2018
 

src/definitions/elements/placeholder.less

@@ -22,13 +22,7 @@
 
 .ui.placeholder {
   position: static;
-  left: 0px;
-  top: 0px;
-  transform: none;
-  margin: 0em;
-  will-change: background-position, transform;
   overflow: hidden;
-  backface-visibility: hidden;
   animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
   animation-iteration-count: infinite;
   background-color: @white;
@@ -46,6 +40,22 @@
   }
 }
 
+.ui.placeholder + .ui.placeholder {
+  margin-top: @consecutivePlaceholderSpacing;
+}
+.ui.placeholder + .ui.placeholder {
+  animation-delay: 0.1s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.2s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.3s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.4s;
+}
+
 .ui.placeholder,
 .ui.placeholder > :before,
 .ui.placeholder .image.header:after,
@@ -211,3 +221,12 @@
 .ui.placeholder .very.short.line.line.line:after {
   width: @placeholderVeryShortLineOutdent;
 }
+
+
+/*-------------------
+        Fluid
+--------------------*/
+
+.ui.fluid.placehlder {
+  max-width: none;
+}

src/definitions/elements/segment.less

@@ -115,46 +115,51 @@
      Placeholder
 --------------------*/
 
-.ui.empty.segment {
+.ui.placeholder.segment {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
-  padding: @emptyPadding;
-  min-height: @emptyMinHeight;
-  background: @emptyBackground;
-  border-color: @emptyBorderColor;
-  box-shadow: @emptyBoxShadow;
-}
-
-.ui.empty.segment .button,
-.ui.empty.segment textarea {
+  max-width: initial;
+  animation: none;
+  overflow: visible;
+  padding: @placeholderPadding;
+  min-height: @placeholderMinHeight;
+  background: @placeholderBackground;
+  border-color: @placeholderBorderColor;
+  box-shadow: @placeholderBoxShadow;
+}
+
+.ui.placeholder.segment .button,
+.ui.placeholder.segment textarea {
   display: block;
 }
-.ui.empty.segment .button,
-.ui.empty.segment .field,
-.ui.empty.segment textarea,
-.ui.empty.segment > .ui.input {
-  max-width: 300px;
+.ui.placeholder.segment .field,
+.ui.placeholder.segment textarea,
+.ui.placeholder.segment > .ui.input,
+.ui.placeholder.segment .button {
+  max-width: @placeholderContentMaxWidth;
   margin-left: auto;
   margin-right: auto;
 }
-.ui.empty.segment .column .button,
-.ui.empty.segment .column .field,
-.ui.empty.segment .column textarea,
-.ui.empty.segment .column > .ui.input {
-  max-width: 250px;
+.ui.placeholder.segment .column .button,
+.ui.placeholder.segment .column .field,
+.ui.placeholder.segment .column textarea,
+.ui.placeholder.segment .column > .ui.input {
+  max-width: @placeholderContentMaxWidth;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.ui.empty.segment > .inline  {
+.ui.placeholder.segment > .inline  {
   align-self: center;
 }
-.ui.empty.segment > .inline > .button {
+.ui.placeholder.segment > .inline > .button {
   display: inline-block;
   width: auto;
-  margin: 0px @5px 0px 0px;
+  margin: @placeholderContentInlineButtonMargin;
 }
-.ui.empty.segment > .inline > .button:last-child {
+.ui.placeholder.segment > .inline > .button:last-child {
   margin-right: 0px;
 }
 

src/themes/default/elements/placeholder.variables

@@ -1,4 +1,4 @@
-@placeholderMaxWidth: 50rem;
+@placeholderMaxWidth: 30rem;
 
 /* Key Content Sizing */
 @placeholderLineMargin: @relative12px;
@@ -8,6 +8,9 @@
 
 @placeholderSpacing: @relative20px;
 
+/* Repeated Placeholder */
+@consecutivePlaceholderSpacing: 2rem;
+
 /* Image */
 @placeholderImageHeight: 100px;
 
@@ -16,13 +19,13 @@
 @placeholderImageTextIndent: @10px;
 
 /* Paragraph */
-@placeholderHeaderLineOneOutdent: 40%;
-@placeholderHeaderLineTwoOutdent: 20%;
+@placeholderHeaderLineOneOutdent: 20%;
+@placeholderHeaderLineTwoOutdent: 60%;
 
-@placeholderLineOneOutdent: @placeholderLongLineOutdent;
-@placeholderLineTwoOutdent: @placeholderShortLineOutdent;
-@placeholderLineThreeOutdent: @placeholderMediumLineOutdent;
-@placeholderLineFourOutdent: @placeholderVeryShortLineOutdent;
+@placeholderLineOneOutdent: @placeholderFullLineOutdent;
+@placeholderLineTwoOutdent: @placeholderMediumLineOutdent;
+@placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent;
+@placeholderLineFourOutdent: @placeholderLongLineOutdent;
 @placeholderLineFiveOutdent: @placeholderShortLineOutdent;
 
 
@@ -30,14 +33,14 @@
 @placeholderLoadingAnimationDuration: 2s;
 @placeholderLoadingGradientWidth: 1200px;
 @placeholderLoadingGradient: linear-gradient(to right,
-  #EEEEEE 0%,
-  #DDDDDD 15%,
-  #EEEEEE 30%
+  rgba(0, 0, 0, 0.08) 0%,
+  rgba(0, 0, 0, 0.15) 15%,
+  rgba(0, 0, 0, 0.08) 30%
 );
 @placeholderInvertedLoadingGradient: linear-gradient(to right,
-  #222222 0%,
-  #333333 15%,
-  #222222 30%
+  rgba(255, 255, 255, 0.08) 0%,
+  rgba(255, 255, 255, 0.14) 15%,
+  rgba(255, 255, 255, 0.08) 30%
 );
 
 /* Variations */

src/themes/default/elements/segment.variables

@@ -49,11 +49,13 @@
 *******************************/
 
 /* Placeholder */
-@emptyBackground: @offWhite;
-@emptyPadding: @padding;
-@emptyBorderColor: @borderColor;
-@emptyBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
-@emptyMinHeight: 18rem;
+@placeholderBackground: @offWhite;
+@placeholderPadding: @padding;
+@placeholderBorderColor: @borderColor;
+@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+@placeholderMinHeight: 18rem;
+@placeholderContentMaxWidth: 15rem;
+@placeholderContentInlineButtonMargin: 0px @5px 0px 0px;
 
 
 /* Piled */