Added x-small breakpoint for fluid-grid

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">

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
         });
       });

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>
 

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.

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);
 }

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');

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}`);
     }