HDS-4532 Remove isInline argument

Author: KristinLBradley

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

@@ -27,7 +27,6 @@ export interface HdsLayoutGridSignature {
     columnMinWidth?: string;
     align?: HdsLayoutGridAligns;
     gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
-    isInline?: boolean;
   };
   Blocks: {
     default: [
@@ -113,11 +112,6 @@ export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
       }
     }
 
-    // add a class based on the @isInline argument
-    if (this.args.isInline) {
-      classes.push('hds-layout-grid--is-inline');
-    }
-
     return classes.join(' ');
   }
 }

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

@@ -32,14 +32,6 @@
     var(--hds-layout-grid-column-gap, 0);
 }
 
-// inline
-
-.hds-layout-grid--is-inline {
-  display: inline-grid;
-  // prevents issue where grid columns don't line up in a row
-  max-width: 100%;
-}
-
 // align
 
 .hds-layout-grid--align-items-start { align-items: start; }

showcase/app/templates/layouts/grid.hbs

@@ -122,36 +122,6 @@
       {{/each}}
     {{/let}}
   </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H2>Display</Shw::Text::H2>
-
-  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
-    {{#let (array false true) as |booleans|}}
-      {{#each booleans as |isInline|}}
-        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
-          <Hds::Text::Body @size="200" @tag="div">
-            Lorem
-            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
-              <Shw::Placeholder @text="#1" @height="24" />
-              <Shw::Placeholder @text="#2" @height="24" />
-              <Shw::Placeholder @text="#3" @height="24" />
-              <Shw::Placeholder @text="#4" @height="24" />
-            </Hds::Layout::Grid>
-            sit amet
-            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
-              <Shw::Placeholder @text="#A" @height="24" />
-              <Shw::Placeholder @text="#B" @height="24" />
-              <Shw::Placeholder @text="#C" @height="24" />
-              <Shw::Placeholder @text="#D" @height="24" />
-            </Hds::Layout::Grid>
-            elit.
-          </Hds::Text::Body>
-        </SF.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Grid>
 </section>
 
 <Shw::Divider />
@@ -179,6 +149,8 @@
     </SG.Item>
   </Shw::Grid>
 
+  <Shw::Divider @level="2" />
+
   <Shw::Text::H3>colspan</Shw::Text::H3>
 
   <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
@@ -240,6 +212,8 @@
     </SG.Item>
   </Shw::Grid>
 
+  <Shw::Divider @level="2" />
+
   <Shw::Text::H3>rowspan</Shw::Text::H3>
 
   <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
@@ -282,6 +256,8 @@
     </SG.Item>
   </Shw::Grid>
 
+  <Shw::Divider @level="2" />
+
   <Shw::Text::H3>colspan & rowspan</Shw::Text::H3>
 
   <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>

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

@@ -71,26 +71,22 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     assert.dom('#test-layout-grid').hasTagName('section');
   });
 
-  // ALIGN / IS-INLINE
+  // ALIGN
 
-  test('it should render the element without specific classes if no @align/@isInline are declared', async function (assert) {
+  test('it should render the element without specific classes if @align is not declared', async function (assert) {
     await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
     assert
       .dom('#test-layout-grid')
       .doesNotHaveClass(/hds-layout-grid--align-items-/);
-    assert
-      .dom('#test-layout-grid')
-      .doesNotHaveClass('.hds-layout-grid--is-inline');
   });
 
-  test('it should render the correct CSS classes if the @align/@isInline props are declared', async function (assert) {
+  test('it should render the correct CSS classes if @align props are declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @align="stretch" @wrap={{true}} @isInline={{true}} />`
+      hbs`<Hds::Layout::Grid id="test-layout-grid" @align="stretch" @wrap={{true}} />`
     );
     assert
       .dom('#test-layout-grid')
       .hasClass('hds-layout-grid--align-items-stretch');
-    assert.dom('#test-layout-grid').hasClass('hds-layout-grid--is-inline');
   });
 
   // GAP