From edc09b850cb756d2b6605ce3948c03fdb6ad18ea Mon Sep 17 00:00:00 2001
From: Blackbaud-SteveBrush <steve.brush@blackbaud.com>
Date: Tue, 19 Sep 2017 17:42:29 -0400
Subject: [PATCH] Added xsmall breakpoint for fluid-grid

---
 ...allest-Differentrows-chrome-600x800-dpr-1.png | Bin 9255 -> 0 bytes
 .../fluid-grid/fluid-grid-visual.component.html  |  11 +++++++++++
 .../src/app/fluid-grid/fluid-grid.visual-spec.ts |   8 ++++----
 .../fluid-grid/fluid-grid-demo.component.html    |   8 ++++----
 src/app/components/fluid-grid/index.html         |   7 +++++--
 src/modules/fluid-grid/column.component.scss     |   2 ++
 src/modules/fluid-grid/column.component.spec.ts  |   2 ++
 src/modules/fluid-grid/column.component.ts       |   7 +++++++
 8 files changed, 35 insertions(+), 10 deletions(-)
 delete mode 100644 skyux-spa-visual-tests/screenshots-baseline/fluid-Grid-Screensmallest-Differentrows-chrome-600x800-dpr-1.png

diff --git a/skyux-spa-visual-tests/screenshots-baseline/fluid-Grid-Screensmallest-Differentrows-chrome-600x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/fluid-Grid-Screensmallest-Differentrows-chrome-600x800-dpr-1.png
deleted file mode 100644
index 85558dff816fe751a7ecf308f20caf898ff47fc8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9255
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
PKyV;gWtj?TW61vi<uPyW

diff --git a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.html b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.html
index c76f4d9a1..225858ad8 100644
--- a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.html
+++ b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.html
@@ -12,6 +12,17 @@
   </sky-row>
 </div>
 
+<div id="screenshot-fluid-grid-xsmall">
+  <sky-row>
+    <sky-column screenXSmall="6">
+      xsmall 6
+    </sky-column>
+    <sky-column screenXSmall="6">
+      xsmall 6
+    </sky-column>
+  </sky-row>
+</div>
+
 <div id="screenshot-fluid-grid-reverse">
   <sky-row [reverseColumnOrder]="true">
     <sky-column screenSmall="6">
diff --git a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts
index f92a59b63..0be11ed98 100644
--- a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts
+++ b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts
@@ -1,13 +1,13 @@
 import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
 
-describe('Fluid grid', () => {
+fdescribe('Fluid grid', () => {
 
-  it('should display all columns on different rows when on a very small screen', () => {
+  it('should handle very small screens', () => {
     return SkyVisualTest.setupTest('fluid-grid', 600)
       .then(() => {
         return SkyVisualTest.compareScreenshot({
-          screenshotName: 'fluid-grid-screensmallest-differentrows',
-          selector: '#screenshot-fluid-grid',
+          screenshotName: 'fluid-grid-screenxsmall',
+          selector: '#screenshot-fluid-grid-xsmall',
           checkAccessibility: true
         });
       });
diff --git a/src/app/components/fluid-grid/fluid-grid-demo.component.html b/src/app/components/fluid-grid/fluid-grid-demo.component.html
index 9ddaefb81..d2d331a35 100644
--- a/src/app/components/fluid-grid/fluid-grid-demo.component.html
+++ b/src/app/components/fluid-grid/fluid-grid-demo.component.html
@@ -141,11 +141,11 @@
   </sky-row>
 
   <sky-row>
-    <sky-column screenSmall="8" screenMedium="9" screenLarge="10">
-      small="8" medium="9" large="10"
+    <sky-column screenXSmall="6" screenSmall="8" screenMedium="9" screenLarge="10">
+        screenXSmall="6" small="8" medium="9" large="10"
     </sky-column>
-    <sky-column screenSmall="4" screenMedium="3" screenLarge="2">
-      small="4" medium="3" large="2"
+    <sky-column screenXSmall="6" screenSmall="4" screenMedium="3" screenLarge="2">
+        screenXSmall="6" small="4" medium="3" large="2"
     </sky-column>
   </sky-row>
 
diff --git a/src/app/components/fluid-grid/index.html b/src/app/components/fluid-grid/index.html
index ea3602377..8612a7855 100644
--- a/src/app/components/fluid-grid/index.html
+++ b/src/app/components/fluid-grid/index.html
@@ -1,6 +1,6 @@
 <sky-demo-page pageTitle="Fluid grid">
   <sky-demo-page-summary>
-The fluid grid component provides a responsive 12-column layout to organize content for all device sizes. The fluid grid consists of <code>sky-row</code> and <code>sky-column</code> tags. You place column elements in row elements, and then you can specify how much of the layout to use for each column element on small, medium, and large screens. For extra small screens (less than 768px), the fluid grid automatically stacks columns vertically across the entire 12-column layout.
+The fluid grid component provides a responsive 12-column layout to organize content for all device sizes. The fluid grid consists of <code>sky-row</code> and <code>sky-column</code> tags. You place column elements in row elements, and then you can specify how much of the layout to use for each column element on extra-small, small, medium, and large screens.
   </sky-demo-page-summary>
 
   <sky-demo-page-properties sectionHeading="Sky row properties">
@@ -10,8 +10,11 @@
 
   </sky-demo-page-properties>
   <sky-demo-page-properties sectionHeading="Sky column properties">
+    <sky-demo-page-property propertyName="screenXSmall" isOptional="true">
+      Specifies the number of columns (1-12) to use for the element on extra-small screens (less than 768px). If you do not specify a value, the fluid grid displays the column at 100% width.
+    </sky-demo-page-property>
     <sky-demo-page-property propertyName="screenSmall" isOptional="true">
-      Specifies the number of columns (1-12) to use for the element on small screens (768-991px). If you do not specify a value, the fluid grid displays the element vertically across the entire layout.
+      Specifies the number of columns (1-12) to use for the element on small screens (768-991px). If you do not specify a value, the element inherits the screenXSmall value.
     </sky-demo-page-property>
     <sky-demo-page-property propertyName="screenMedium" isOptional="true">
       Specifies the number of columns (1-12) to use for the element on medium screens (992-1199px). If you do not specify a value, the element inherits the screenSmall value.
diff --git a/src/modules/fluid-grid/column.component.scss b/src/modules/fluid-grid/column.component.scss
index 64b93b2cd..33fd6a8c3 100644
--- a/src/modules/fluid-grid/column.component.scss
+++ b/src/modules/fluid-grid/column.component.scss
@@ -8,6 +8,8 @@
   min-height: 1px;
 }
 
+@include create_columns(xs);
+
 @media (min-width: $sky-screen-sm-min) {
   @include create_columns(sm);
 }
diff --git a/src/modules/fluid-grid/column.component.spec.ts b/src/modules/fluid-grid/column.component.spec.ts
index b503fb6f2..4fd500b03 100644
--- a/src/modules/fluid-grid/column.component.spec.ts
+++ b/src/modules/fluid-grid/column.component.spec.ts
@@ -28,10 +28,12 @@ describe('SkyColumnComponent', () => {
   });
 
   it('should add a class for small, medium, and large breakpoints', () => {
+    component.screenXSmall = 1;
     component.screenSmall = 1;
     component.screenMedium = 2;
     component.screenLarge = 5;
     fixture.detectChanges();
+    expect(element.className).toContain('sky-column-xs-1');
     expect(element.className).toContain('sky-column-sm-1');
     expect(element.className).toContain('sky-column-md-2');
     expect(element.className).toContain('sky-column-lg-5');
diff --git a/src/modules/fluid-grid/column.component.ts b/src/modules/fluid-grid/column.component.ts
index 9c3c7c724..7fc870710 100644
--- a/src/modules/fluid-grid/column.component.ts
+++ b/src/modules/fluid-grid/column.component.ts
@@ -11,6 +11,9 @@ import {
   styleUrls: ['./column.component.scss']
 })
 export class SkyColumnComponent implements OnInit {
+  @Input()
+  public screenXSmall: number;
+
   @Input()
   public screenSmall: number;
 
@@ -28,6 +31,10 @@ export class SkyColumnComponent implements OnInit {
       'sky-column'
     ];
 
+    if (this.screenXSmall) {
+      classnames.push(`sky-column-xs-${this.screenXSmall}`);
+    }
+
     if (this.screenSmall) {
       classnames.push(`sky-column-sm-${this.screenSmall}`);
     }