HDS-4532 Move fallback values for CSS properties from JS to CSS

Author: KristinLBradley

packages/components/src/components/hds/layout/grid/index.ts

@@ -87,11 +87,10 @@ export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
       '--hds-layout-grid-column-min-width'?: string;
     } = {};
 
-    // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
-    // https://drafts.csswg.org/css-values/#calc-type-checking
-    inlineStyles['--hds-layout-grid-column-min-width'] =
-      this.args.columnMinWidth ?? '0px';
-
+    if (this.args.columnMinWidth) {
+      inlineStyles['--hds-layout-grid-column-min-width'] =
+        this.args.columnMinWidth;
+    }
     return inlineStyles;
   }
 

packages/components/src/components/hds/layout/grid/item.ts

@@ -30,8 +30,12 @@ export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignat
       '--hds-layout-grid-row-span'?: string;
     } = {};
 
-    inlineStyles['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
-    inlineStyles['--hds-layout-grid-row-span'] = this.args.rowSpan ?? '1';
+    if (this.args.colSpan) {
+      inlineStyles['--hds-layout-grid-column-span'] = this.args.colSpan;
+    }
+    if (this.args.rowSpan) {
+      inlineStyles['--hds-layout-grid-row-span'] = this.args.rowSpan;
+    }
 
     return inlineStyles;
   }

packages/components/src/styles/components/layout/grid.scss

@@ -18,7 +18,7 @@
       auto-fit, 
       minmax( 
         calc( 
-          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
         1fr 
       )
     );
@@ -76,6 +76,6 @@
 // LAYOUT > GRID > ITEM
 
 .hds-layout-grid-item {
-  grid-row-start: span var(--hds-layout-grid-row-span);
-  grid-column-start: span var(--hds-layout-grid-column-span);
+  grid-row-start: span var(--hds-layout-grid-row-span, 1);
+  grid-column-start: span var(--hds-layout-grid-column-span, 1);
 }

showcase/app/templates/layouts/grid.hbs

@@ -43,6 +43,17 @@
         </Hds::Layout::Grid>
       </Shw::Outliner>
     </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
   </Shw::Grid>
 
   <Shw::Divider @level={{2}} />

showcase/tests/integration/components/hds/layout/grid/index-test.js

@@ -40,11 +40,12 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   // COLUMN MIN WIDTH
 
-  test('it should render a default min-width of 0px if @columnMinWidth is not declared', async function (assert) {
+  // Note: A fallback value of 0px is set in the CSS for the `--hds-layout-grid-column-min-width` custom property
+  test('if the @columnMinWidth prop is not declared, --hds-layout-grid-column-min-width should be unset', async function (assert) {
     await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
     assert
       .dom('#test-layout-grid')
-      .hasStyle({ '--hds-layout-grid-column-min-width': '0px' });
+      .doesNotHaveStyle('--hds-layout-grid-column-min-width');
   });
 
   test('it should render the correct min-width if the @columnMinWidth prop is declared', async function (assert) {

showcase/tests/integration/components/hds/layout/grid/item-test.js

@@ -50,11 +50,12 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   // COL SPAN
 
-  test('it should render a default column span of 1 if @colSpan is not declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid" />`);
+  // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-column-span` custom property
+  test('if the @colSpan prop is not declared, --hds-layout-grid-column-span should be unset', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
     assert
-      .dom('#test-layout-grid')
-      .hasStyle({ '--hds-layout-grid-column-span': '1' });
+      .dom('#test-layout-grid-item')
+      .doesNotHaveStyle('--hds-layout-grid-column-span');
   });
 
   test('it should render the correct column span if the @colSpan prop is declared', async function (assert) {
@@ -68,11 +69,12 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   // ROW SPAN
 
-  test('it should render a default row span of 1 if @rowSpan is not declared', async function (assert) {
+  // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-row-span` custom property
+  test('if the @rowSpan prop is not declared, --hds-layout-grid-row-span should be unset', async function (assert) {
     await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid" />`);
     assert
       .dom('#test-layout-grid')
-      .hasStyle({ '--hds-layout-grid-row-span': '1' });
+      .doesNotHaveStyle('--hds-layout-grid-row-span');
   });
 
   test('it should render the correct row span if the @rowSpan prop is declared', async function (assert) {