Merge pull request #241 from fabscale/fn/add-grid-no-grow

feat: Add `@noGrow` option to grid to have exact grid column widths

Author: Francesco Novy

.github/dependabot.yml

@@ -7,6 +7,9 @@ updates:
   open-pull-requests-limit: 15
   assignees:
   - mydea
+  labels:
+  - dependencies
+  - internal
   commit-message:
     prefix: chore
     prefix-development: chore

.release-it.json

@@ -5,8 +5,7 @@
   "plugins": {
     "release-it-lerna-changelog": {
       "infile": "CHANGELOG.md"
-    },
-    "release-it-yarn-workspaces": {}
+    }
   },
   "git": {
     "tagName": "v${version}"

addon/components/layout/grid.hbs

@@ -1,7 +1,9 @@
 <div
-  class="layout-grid"
+  class={{
+    layout-join-classes 'layout-grid' (if @noGrow 'layout-grid--no-grow')
+  }}
   style={{layout-css-var grid-gap-size=@gapSize grid-size=@gridSize}}
   ...attributes
 >
   {{yield (component 'layout/grid/item')}}
-</div>
+</div>

addon/styles/addon.css

@@ -189,6 +189,10 @@
   grid-template-columns: repeat(auto-fit, minmax(var(--grid-size), 1fr));
 }
 
+.layout-grid--no-grow {
+  grid-template-columns: repeat(auto-fill, var(--grid-size));
+}
+
 .layout-grid-item {
   min-width: 0;
 }

package.json

@@ -40,6 +40,7 @@
     "@glimmer/tracking": "~1.0.4",
     "babel-eslint": "~10.1.0",
     "broccoli-asset-rev": "~3.0.0",
+    "ember-auto-import": "~2.0.1",
     "ember-cli": "~3.26.1",
     "ember-cli-dependency-checker": "~3.2.0",
     "ember-cli-inject-live-reload": "~2.0.2",
@@ -53,7 +54,7 @@
     "ember-prism": "~0.9.0",
     "ember-qunit": "~5.1.4",
     "ember-resolver": "~8.0.2",
-    "ember-source": "~3.27.2",
+    "ember-source": "~3.27.3",
     "ember-source-channel-url": "~3.0.0",
     "ember-template-lint": "~3.4.1",
     "ember-try": "~1.4.0",
@@ -69,7 +70,8 @@
     "qunit": "~2.15.0",
     "qunit-dom": "~1.6.0",
     "release-it": "~14.7.0",
-    "release-it-lerna-changelog": "~3.1.0"
+    "release-it-lerna-changelog": "~3.1.0",
+    "webpack": "~5.38.1"
   },
   "engines": {
     "node": "10.* || >= 12"

tests/dummy/app/controllers/grid.js

@@ -1,6 +1,15 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class GridController extends Controller {
+  @tracked gridNoGrow;
+
+  @action
+  updateProperty(property, value) {
+    this[property] = value;
+  }
+
   gridCode = `<Layout::Grid as |Item|>
   <Item>First item</Item>
   <Item>Second item</Item>

tests/dummy/app/templates/grid.hbs

@@ -46,13 +46,20 @@
 
       <Layout::Stack as |StackItem|>
         <StackItem>
-          <p>
-            There are no configuration options for the grid.
-          </p>
+          <Layout::Cluster @fullWidthOnMobile={{true}} as |Item|>
+            <Item>
+              <ConfigOption
+                @label='@noGrow'
+                @value={{this.gridNoGrow}}
+                @onChange={{fn this.updateProperty 'gridNoGrow'}}
+                @options={{array true}}
+              />
+            </Item>
+          </Layout::Cluster>
         </StackItem>
 
         <StackItem>
-          <Layout::Grid as |Item|>
+          <Layout::Grid @noGrow={{this.gridNoGrow}} as |Item|>
             <Item>
               <DemoItem />
             </Item>

tests/integration/components/layout/grid-test.js

@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import settled from '@ember/test-helpers/settled';
 
 module('Integration | Component | layout/grid', function (hooks) {
   setupRenderingTest(hooks);
@@ -43,6 +44,20 @@ module('Integration | Component | layout/grid', function (hooks) {
       .hasAttribute('style', '--grid-gap-size: 123px; --grid-size: 45px');
   });
 
+  test('it allows to specify @noGrow', async function (assert) {
+    await render(hbs`
+      <Layout::Grid @noGrow={{this.noGrow}}>
+      </Layout::Grid>
+    `);
+
+    assert.dom('.layout-grid').doesNotHaveClass('layout-grid--no-grow');
+
+    this.set('noGrow', true);
+    await settled();
+
+    assert.dom('.layout-grid').hasClass('layout-grid--no-grow');
+  });
+
   test('it allows to set @fullWidth on items', async function (assert) {
     await render(hbs`
       <Layout::Grid as |Item|>