Remove reference to col--padded for spacing utilities for grid gutters

Author: brandonferrua

ui/utilities/grid/flavors/automatic-sizing/index.markup.md

@@ -1,5 +1,7 @@
+**Note**: The `<div>` with class `slds-box` is for demo purposes only.
+
 By default, the grid items within a `.{{cssPrefix}}grid` do not stretch to take up that available white-space on the main axis. Apply `.{{cssPrefix}}col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.
 
-To apply gutters between each grid item, the following classes are available to add your intended gutters, `.{{cssPrefix}}col--padded`, `.{{cssPrefix}}col--padded-medium` and `.{{cssPrefix}}col--padded-large`.
+To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.{{cssPrefix}}p-horizontal--small`, `.{{cssPrefix}}p-horizontal--medium`, `.{{cssPrefix}}p-horizontal--large`, `.{{cssPrefix}}p-around--small`, `.{{cssPrefix}}p-around--medium` and `.{{cssPrefix}}p-horizontal--large`.
 
 You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.{{cssPrefix}}grid--pull-padded`, `.{{cssPrefix}}grid--pull-padded-medium` or `.{{cssPrefix}}grid--pull-padded-large` to the `.{{cssPrefix}}grid`.

ui/utilities/grid/flavors/automatic-sizing/index.react.example.jsx

@@ -11,32 +11,71 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React from 'react';
 import { prefix as pf } from 'app_modules/ui/util/component';
+//
+//
+// export const preview = (
+//   <div className="demo-only demo-container">
+//     <div className={pf('grid')}>
+//       <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+//       <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+//     </div>
+//
+//     <div className={pf('grid grid--pull-padded')} style={{marginTop: '2rem'}}>
+//       <div className={pf('col--padded')}><div className={pf('box box--small theme--shade text-align--center')}>col--padded</div></div>
+//       <div className={pf('col--padded')}><div className={pf('box box--small theme--shade text-align--center')}>col--padded</div></div>
+//     </div>
+//   </div>
+// );
+//
+// export const code = (
+//   <div className="demo-only demo-container">
+//     <div className={pf('grid')}>
+//       <div className={pf('col')}>col</div>
+//       <div className={pf('col')}>col</div>
+//     </div>
+//
+//     <div className={pf('grid grid--pull-padded')}>
+//       <div className={pf('col--padded')}>col--padded</div>
+//       <div className={pf('col--padded')}>col--padded</div>
+//     </div>
+//   </div>
+// );
 
-
-export const preview = (
-  <div className="demo-only demo-container">
-    <div className={pf('grid')}>
-      <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
-      <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
-    </div>
-
-    <div className={pf('grid grid--pull-padded')} style={{marginTop: '2rem'}}>
-      <div className={pf('col--padded')}><div className={pf('box box--small theme--shade text-align--center')}>col--padded</div></div>
-      <div className={pf('col--padded')}><div className={pf('box box--small theme--shade text-align--center')}>col--padded</div></div>
-    </div>
-  </div>
-);
-
-export const code = (
-  <div className="demo-only demo-container">
-    <div className={pf('grid')}>
-      <div className={pf('col')}>col</div>
-      <div className={pf('col')}>col</div>
-    </div>
-
-    <div className={pf('grid grid--pull-padded')}>
-      <div className={pf('col--padded')}>col--padded</div>
-      <div className={pf('col--padded')}>col--padded</div>
-    </div>
-  </div>
-);
+export let states = [
+  {
+    id: 'stretch',
+    label: 'Column Stretch',
+    element:
+      <div className={pf('grid')}>
+        <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+        <div className={pf('col')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+      </div>
+  },
+  {
+    id: 'stretch-gutters',
+    label: 'Column Stretch w/ Gutters',
+    element:
+      <div className={pf('grid grid--pull-padded-medium')}>
+        <div className={pf('col p-horizontal--medium')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+        <div className={pf('col p-horizontal--medium')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+      </div>
+  },
+  {
+    id: 'no-stretch',
+    label: 'No Column Stretch',
+    element:
+      <div className={pf('grid')}>
+        <div><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+        <div><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+      </div>
+  },
+  {
+    id: 'no-stretch-gutters',
+    label: 'No Column Stretch w/ Gutters',
+    element:
+      <div className={pf('grid grid--pull-padded-medium')}>
+        <div className={pf('p-horizontal--medium')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+        <div className={pf('p-horizontal--medium')}><div className={pf('box box--small theme--shade text-align--center')}>col</div></div>
+      </div>
+  }
+];

ui/utilities/grid/flavors/manual-sizing/index.react.example.jsx

@@ -16,27 +16,27 @@ import { prefix as pf } from 'app_modules/ui/util/component';
 export const preview = (
   <div className="demo-only demo-container">
     <div className={pf('grid wrap grid--pull-padded')}>
-      <div className={pf('col--padded size--1-of-1 p-bottom--large')}>
+      <div className={pf('p-horizontal--small size--1-of-1 p-bottom--large')}>
         <div className={pf('box box--small theme--shade text-align--center')}>1</div>
       </div>
-      <div className={pf('col--padded size--1-of-2 medium-size--5-of-6 large-size--8-of-12 p-bottom--large')}>
+      <div className={pf('p-horizontal--small size--1-of-2 medium-size--5-of-6 large-size--8-of-12 p-bottom--large')}>
         <div className={pf('box box--small theme--shade text-align--center')}>2</div>
       </div>
-      <div className={pf('col--padded size--1-of-2 medium-size--1-of-6 large-size--4-of-12 p-bottom--large')}>
+      <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-6 large-size--4-of-12 p-bottom--large')}>
         <div className={pf('box box--small theme--shade text-align--center')}>3</div>
       </div>
-      <div className={pf('col--padded size--1-of-1 medium-size--1-of-2 large-size--1-of-3 p-bottom--large')}>
+      <div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2 large-size--1-of-3 p-bottom--large')}>
         <div className={pf('box box--small theme--shade text-align--center')}>4</div>
       </div>
-      <div className={pf('col--padded size--1-of-1 medium-size--1-of-2 large-size--1-of-3 p-bottom--large')}>
+      <div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2 large-size--1-of-3 p-bottom--large')}>
         <div className={pf('box box--small theme--shade text-align--center')}>5</div>
       </div>
-      <div className={pf('col--padded size--1-of-1 large-size--1-of-3')}>
+      <div className={pf('p-horizontal--small size--1-of-1 large-size--1-of-3')}>
         <div className={pf('grid wrap grid--pull-padded')}>
-          <div className={pf('col--padded size--1-of-2 medium-size--1-of-1 large-size--1-of-2 p-bottom--large')}>
+          <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-1 large-size--1-of-2 p-bottom--large')}>
             <div className={pf('box box--small theme--shade text-align--center')}>6</div>
           </div>
-          <div className={pf('col--padded size--1-of-2 medium-size--1-of-1 large-size--1-of-2 p-bottom--large')}>
+          <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-1 large-size--1-of-2 p-bottom--large')}>
             <div className={pf('box box--small theme--shade text-align--center')}>7</div>
           </div>
         </div>
@@ -48,15 +48,15 @@ export const preview = (
 export const code = (
   <div className="demo-only demo-container">
     <div className={pf('grid wrap grid--pull-padded')}>
-      <div className={pf('col--padded size--1-of-1')}>1</div>
-      <div className={pf('col--padded size--1-of-2 medium-size--5-of-6 large-size--8-of-12')}>2</div>
-      <div className={pf('col--padded size--1-of-2 medium-size--1-of-6 large-size--4-of-12')}>3</div>
-      <div className={pf('col--padded size--1-of-1 medium-size--1-of-2 large-size--1-of-3')}>4</div>
-      <div className={pf('col--padded size--1-of-1 medium-size--1-of-2 large-size--1-of-3')}>5</div>
-      <div className={pf('col--padded size--1-of-1 large-size--1-of-3')}>
+      <div className={pf('p-horizontal--small size--1-of-1')}>1</div>
+      <div className={pf('p-horizontal--small size--1-of-2 medium-size--5-of-6 large-size--8-of-12')}>2</div>
+      <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-6 large-size--4-of-12')}>3</div>
+      <div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2 large-size--1-of-3')}>4</div>
+      <div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2 large-size--1-of-3')}>5</div>
+      <div className={pf('p-horizontal--small size--1-of-1 large-size--1-of-3')}>
         <div className={pf('grid wrap grid--pull-padded')}>
-          <div className={pf('col--padded size--1-of-2 medium-size--1-of-1 large-size--1-of-2')}>6</div>
-          <div className={pf('col--padded size--1-of-2 medium-size--1-of-1 large-size--1-of-2')}>7</div>
+          <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-1 large-size--1-of-2')}>6</div>
+          <div className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-1 large-size--1-of-2')}>7</div>
         </div>
       </div>
     </div>

ui/utilities/sizing/flavors/widths/index.markup.md

@@ -1 +1 @@
-**Note** The `<div>` with class `slds-box` is for demo purposes only.
+**Note**: The `<div>` with class `slds-box` is for demo purposes only.