Adding the idea of opt-in gutters to the grid work. Only in CSS and V…

…ue packages so far. Using in showcase (only for System Cards so everything is a bit borked WIP but getting close).
AgnosticUI · Sep 24, 2020 · 9bea4f4 · 9bea4f4
1 parent 2ada5cf
commit 9bea4f4
Show file tree

Hide file tree

Showing 13 changed files with 363 additions and 164 deletions.
diff --git a/agnosticui-css/flexboxgrid-custom.css b/agnosticui-css/flexboxgrid-custom.css
@@ -1092,6 +1092,68 @@
   .initial-order-xl {
     order: initial;
   }
+
+  /* This enables us to opt back in for gutters for things like cards.
+  These are only meant to be applied to the row element */
+
+  .gutter-4 {
+    margin-left: -2px;
+    margin-right: -2px;
+  }
+  .gutter-4 .auto:not(:first-child) {
+    padding-left: 2px;
+  }
+  .gutter-4 .auto:not(:last-child) {
+    padding-right: 2px;
+  }
+
+  .gutter-8 {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+  .gutter-8 .auto:not(:first-child) {
+    padding-left: 4px;
+  }
+  .gutter-8 .auto:not(:last-child) {
+    padding-right: 4px;
+  }
+
+  .gutter-16 {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+  .gutter-16 .auto:not(:first-child) {
+    padding-left: 8px;
+  }
+  .gutter-16 .auto:not(:last-child) {
+    padding-right: 8px;
+  }
+
+  .gutter-24 {
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+  .gutter-24 .auto:not(:first-child) {
+    padding-left: 12px;
+  }
+  .gutter-24 .auto:not(:last-child) {
+    padding-right: 12px;
+  }
+
+  .gutter-32 {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+  .gutter-32 .auto:not(:first-child) {
+    padding-left: 16px;
+  }
+  .gutter-32 .auto:not(:last-child) {
+    padding-right: 16px;
+  }
+
+  .auto {
+    flex: 1 1 auto;
+  }
 }
 
 @media only screen and (max-width: 576px) {

diff --git a/agnosticui-css/flexboxgrid.html b/agnosticui-css/flexboxgrid.html
@@ -63,6 +63,31 @@ <h1>Basic Grid</h1>
       </div>
     </div>
   </div>
+
+  <div class="flexgrid-container">
+    <h1>Auto Width with opt-in gutters on 8pt grid.</h1>
+    <p>By default, we remove magic gutters. But,
+      you can opt back in for them when you need them (cards or boxes
+      are a good example use case) by applying gutter-4, gutter-8, gutter-16,
+      gutter-24, and finally gutter-32 on the row, and then using auto on the columns.
+      You can also do col-xs-12 (or col-sm-12 etc.), to ensure stacking on mobile or tablet
+      if you wish.</p>
+    <p>Here we've used gutter-16 to do so: </p>
+    <div class="row gutter-16 demo-only">
+      <div class="col-xs-12 auto">
+        <p class="demo-only-field">xs={12} auto</p>
+      </div>
+      <div class="col-xs-12 auto">
+        <p class="demo-only-field">xs={12} auto</p>
+      </div>
+      <div class="col-xs-12 auto">
+        <p class="demo-only-field">xs={12} auto</p>
+      </div>
+      <div class="col-xs-12 auto">
+        <p class="demo-only-field">xs={12} auto</p>
+      </div>
+    </div>
+  </div>
 </body>
 
 </html>
diff --git a/agnosticui-react/src/stories/FlexGrid.stories.js b/agnosticui-react/src/stories/FlexGrid.stories.js
@@ -22,13 +22,6 @@ export const UsageExamples = () => (
         <i>lg</i> = Large.
         <i>xl</i> = Extra Large.
       </p>
-      <p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i> part:</p>
-      <pre>
-        --agnosticui-default-sm-min: 576px;
-        --agnosticui-default-md-min: 768px;
-        --agnosticui-default-lg-min: 992px;
-        --agnosticui-default-xl-min: 1200px;
-      </pre>
       <FlexGrid>
         <FlexRow className={styles.DemoCol}>
           <FlexCol xs={12} sm={4} lg={6}>

diff --git a/agnosticui-vue/.storybook/main.js b/agnosticui-vue/.storybook/main.js
@@ -22,7 +22,7 @@ module.exports = {
       if (item.loader && item.loader.includes('/css-loader/')) {
         item.options.modules = {
           mode: 'local',
-          localIdentName: configType === 'PRODUCTION' ? '[local]--[hash:base64:5]' : '[name]__[local]--[hash:base64:5]',
+          localIdentName: configType === 'PRODUCTION' ? '[local]--[hash:base64:5]' : '[path][name]__[local]--[hash:base64:5]',
         };
       }
       return item;

diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexBoxGrid2Custom.module.css b/agnosticui-vue/src/stories/FlexGrid/FlexBoxGrid2Custom.module.css
@@ -1092,6 +1092,68 @@
   .initial-order-xl {
     order: initial;
   }
+
+  /* This enables us to opt back in for gutters for things like cards.
+  These are only meant to be applied to the row element */
+
+  .gutter-4 {
+    margin-left: -2px;
+    margin-right: -2px;
+  }
+  .gutter-4 .auto:not(:first-child) {
+    padding-left: 2px;
+  }
+  .gutter-4 .auto:not(:last-child) {
+    padding-right: 2px;
+  }
+
+  .gutter-8 {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+  .gutter-8 .auto:not(:first-child) {
+    padding-left: 4px;
+  }
+  .gutter-8 .auto:not(:last-child) {
+    padding-right: 4px;
+  }
+
+  .gutter-16 {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+  .gutter-16 .auto:not(:first-child) {
+    padding-left: 8px;
+  }
+  .gutter-16 .auto:not(:last-child) {
+    padding-right: 8px;
+  }
+
+  .gutter-24 {
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+  .gutter-24 .auto:not(:first-child) {
+    padding-left: 12px;
+  }
+  .gutter-24 .auto:not(:last-child) {
+    padding-right: 12px;
+  }
+
+  .gutter-32 {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+  .gutter-32 .auto:not(:first-child) {
+    padding-left: 16px;
+  }
+  .gutter-32 .auto:not(:last-child) {
+    padding-right: 16px;
+  }
+
+  .auto {
+    flex: 1 1 auto;
+  }
 }
 
 @media only screen and (max-width: 576px) {

diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexCol.vue b/agnosticui-vue/src/stories/FlexGrid/FlexCol.vue
@@ -25,6 +25,7 @@ const classMap = {
   mdOffset: "col-md-offset",
   lgOffset: "col-lg-offset",
   xlOffset: "col-xl-offset",
+  auto: "auto",
 };
 
 export default {
@@ -50,6 +51,10 @@ export default {
     lgOffset: { type: Number },
     /** xlOffset - number of units to offset when viewport is "extra large" */
     xlOffset: { type: Number },
+    /** auto - boolean. Useful if row has had gutters applied and you want the
+     * columns to grow/shrink against those gutters. Cards is an example use case.
+     */
+    auto: { type: Boolean },
     /** first - Forces a column to appear first */
     first: ViewportSizeTypeProp,
     /** last - Forces a column to appear last */
@@ -68,6 +73,10 @@ export default {
         extraClasses.push(this.customClasses);
       }
 
+      if (this.auto) {
+        extraClasses.push(getClass("auto"));
+      }
+
       if (this.first) {
         extraClasses.push(getClass("first-" + this.first));
       }

diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue b/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
@@ -5,7 +5,7 @@
 </template>
 <script>
 import getClass from "./classNames";
-import { ViewportSizeTypeProp } from "./types";
+import { GutterSizeTypeProp, ViewportSizeTypeProp } from "./types";
 const rowKeys = [
   "start",
   "center",
@@ -15,18 +15,24 @@ const rowKeys = [
   "bottom",
   "around",
   "between",
+  "gutter",
 ];
 
 export default {
   name: "agnostic-flexrow",
   computed: {
     classNames() {
       const modifiers = [this.customClasses, getClass("row")];
-
       for (let i = 0; i < rowKeys.length; ++i) {
         const key = rowKeys[i];
+        console.log("key: ", key);
         const value = this[key];
+        console.log("value: ", value);
         if (value) {
+          console.log(
+            "In value conditional. getClass returns: ",
+            getClass(`${key}-${value}`)
+          );
           modifiers.push(getClass(`${key}-${value}`));
         }
       }
@@ -51,6 +57,7 @@ export default {
     bottom: ViewportSizeTypeProp,
     around: ViewportSizeTypeProp,
     between: ViewportSizeTypeProp,
+    gutter: GutterSizeTypeProp,
     customClasses: {
       type: String,
       default: "",

diff --git a/agnosticui-vue/src/stories/FlexGrid/types.js b/agnosticui-vue/src/stories/FlexGrid/types.js
@@ -1,7 +1,12 @@
 export const ColumnSizeType = [Number, Boolean];
 
 export const ViewportSizeType = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const GutterSizeType = [4, 8, 16, 24, 32];
 
+export const GutterSizeTypeProp = {
+  type: Number,
+  validator: (v) => GutterSizeType.includes(v),
+}
 export const ViewportSizeTypeProp = {
   type: String,
   validator: (v) => ViewportSizeType.includes(v),

diff --git a/agnosticui-vue/src/stories/FlexGridTests.vue b/agnosticui-vue/src/stories/FlexGridTests.vue
@@ -9,16 +9,6 @@
         <i>lg</i> = Large.
         <i>xl</i> = Extra Large.
       </p>
-      <p>
-        The following breakpoints can be overriden by redefining in your stylesheet and omitting the
-        <i>-default</i> part:
-      </p>
-      <pre>
-          --agnosticui-default-sm-min: 576px;
-          --agnosticui-default-md-min: 768px;
-          --agnosticui-default-lg-min: 992px;
-          --agnosticui-default-xl-min: 1200px;
-        </pre>
       <FlexGrid tagName="section" customClasses="custom-grid-klass">
         <FlexRow :class="styles.DemoCol">
           <FlexCol v-bind:xs="12" v-bind:sm="4" v-bind:lg="6" v-bind:xl="4">
@@ -49,6 +39,42 @@
         </FlexRow>
       </FlexGrid>
     </section>
+    <section>
+      <h1>Gutters and auto width columns</h1>
+      <p>
+        By default, we remove magic gutters. But,
+        you can opt back in for them if you need them (cards or boxes
+        are a good example use case). Do so by applying one of:
+        <i>gutter-4</i>,
+        <i>gutter-8</i>,
+        <i>gutter-16</i>,
+        <i>gutter-24</i>, or
+        <i>gutter-32</i> on the row, and then use
+        <i>auto</i> on the columns.
+        You can also do something like:
+        <i>v-bind:xs="12"</i> (or
+        <i>v-bind:xml="12"</i>), to ensure stacking on mobile or tablet
+        if you wish.
+      </p>
+      <p>Here we've used gutter-16 to do so. If you narrow the viewport you'll see the cards still stack:</p>
+      <FlexGrid tagName="section">
+        <!-- Purposely adding all row keys just check they get inserted on row element :) -->
+        <FlexRow v-bind:gutter="16" :class="styles.DemoCol">
+          <FlexCol v-bind:xs="12" auto>
+            <div :class="styles.Field">v-bin:xs="12" auto</div>
+          </FlexCol>
+          <FlexCol v-bind:xs="12" auto>
+            <div :class="styles.Field">v-bin:xs="12" auto</div>
+          </FlexCol>
+          <FlexCol v-bind:xs="12" auto>
+            <div :class="styles.Field">v-bin:xs="12" auto</div>
+          </FlexCol>
+          <FlexCol v-bind:xs="12" auto>
+            <div :class="styles.Field">v-bin:xs="12" auto</div>
+          </FlexCol>
+        </FlexRow>
+      </FlexGrid>
+    </section>
     <section>
       <h1>Row attributes test. Maybe ignore this ;)</h1>
       <FlexGrid tagName="section" customClasses="custom-grid-klass">

diff --git a/showcase/package.json b/showcase/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "agnosticui-vue": "^1.0.1-2",
+    "agnosticui-vue": "^1.0.1-8",
     "agnosticui-css": "^1.0.1-7",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",