feat(components/layout): remove deprecated fluid grid gutter size opt…

…ions (#585)

BREAKING CHANGE: This change removes the `SkyFluidGridGutterSize` enum and the numerical options (0,
1, 2) from `SkyFluidGridGutterSizeType`. To address this, only use the strings 'small', 'medium',
and 'large' for  the fluid grid component's `gutterSize` property, and use
`SkyFluidGridGutterSizeType` for Typescript typing.

libs/components/layout/src/index.ts

@@ -18,7 +18,6 @@ export * from './lib/modules/description-list/description-list.module';
 export * from './lib/modules/description-list/types/description-list-mode';
 export * from './lib/modules/description-list/types/description-list-mode-type';
 
-export * from './lib/modules/fluid-grid/fluid-grid-gutter-size';
 export * from './lib/modules/fluid-grid/fluid-grid.module';
 export * from './lib/modules/fluid-grid/types/fluid-grid-gutter-size-type';
 

libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.component.html

@@ -1,9 +1,9 @@
 <div
   class="sky-fluid-grid"
   [ngClass]="{
-    'sky-fluid-grid-gutter-size-small': gutterSizeResolved === 'small',
-    'sky-fluid-grid-gutter-size-medium': gutterSizeResolved === 'medium',
-    'sky-fluid-grid-gutter-size-large': gutterSizeResolved === 'large',
+    'sky-fluid-grid-gutter-size-small': gutterSize === 'small',
+    'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',
+    'sky-fluid-grid-gutter-size-large': gutterSize === 'large',
     'sky-fluid-grid-no-margin': disableMargin
   }"
 >

libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.component.spec.ts

@@ -3,7 +3,6 @@ import { expect } from '@skyux-sdk/testing';
 
 import { FluidGridTestComponent } from './fixtures/fluid-grid.component.fixture';
 import { FluidGridTestModule } from './fixtures/fluid-grid.module.fixture';
-import { SkyFluidGridGutterSize } from './fluid-grid-gutter-size';
 import { SkyFluidGridGutterSizeType } from './types/fluid-grid-gutter-size-type';
 
 // #region helpers
@@ -64,29 +63,14 @@ describe('SkyFluidGridComponent', () => {
     const fluidGrid = getFluidGrid(fixture);
 
     validateGutterSize(fluidGrid, 'small', 'sky-fluid-grid-gutter-size-small');
-    validateGutterSize(
-      fluidGrid,
-      SkyFluidGridGutterSize.Small,
-      'sky-fluid-grid-gutter-size-small'
-    );
 
     validateGutterSize(
       fluidGrid,
       'medium',
       'sky-fluid-grid-gutter-size-medium'
     );
-    validateGutterSize(
-      fluidGrid,
-      SkyFluidGridGutterSize.Medium,
-      'sky-fluid-grid-gutter-size-medium'
-    );
 
     validateGutterSize(fluidGrid, 'large', 'sky-fluid-grid-gutter-size-large');
-    validateGutterSize(
-      fluidGrid,
-      SkyFluidGridGutterSize.Large,
-      'sky-fluid-grid-gutter-size-large'
-    );
   });
 
   it('should not have the no-margins CSS class when disableMargin is false or undefined', () => {

libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 
-import { SkyFluidGridGutterSize } from './fluid-grid-gutter-size';
 import { SkyFluidGridGutterSizeType } from './types/fluid-grid-gutter-size-type';
 
 /**
@@ -40,27 +39,6 @@ export class SkyFluidGridComponent {
     return this._gutterSize === undefined ? 'large' : this._gutterSize;
   }
 
-  /**
-   * @internal
-   */
-  public get gutterSizeResolved(): SkyFluidGridGutterSizeType {
-    // Before this change, the template did a `==` comparison, implicitly converting numerical
-    // string values to their numeric values before comparing them. Checking for the numerical
-    // string value in addition to the values allowed by the type maintains this behavior.
-    switch (this.gutterSize) {
-      case 'medium':
-      case SkyFluidGridGutterSize.Medium:
-      case SkyFluidGridGutterSize.Medium.toString():
-        return 'medium';
-      case 'small':
-      case SkyFluidGridGutterSize.Small:
-      case SkyFluidGridGutterSize.Small.toString():
-        return 'small';
-      default:
-        return 'large';
-    }
-  }
-
   private _disableMargin: boolean;
 
   private _gutterSize: SkyFluidGridGutterSizeType;

libs/components/layout/src/lib/modules/fluid-grid/types/fluid-grid-gutter-size-type.ts

@@ -1,7 +1 @@
-export type SkyFluidGridGutterSizeType =
-  | 0
-  | 1
-  | 2
-  | 'small'
-  | 'medium'
-  | 'large';
+export type SkyFluidGridGutterSizeType = 'small' | 'medium' | 'large';