fix(grid): Add documentation for col bump classes (#3193)

Author: Ayesha Mazumdar

ui/utilities/grid/_doc.scss

@@ -28,7 +28,7 @@
  *
  * @utility
  * @name grid
- * @selector [class*='slds-grid'], [class*='slds-wrap'], [class*='slds-nowrap'], [class*='slds-gutters'], .slds-col, [class*='slds-col-'], .slds-has-flexi-truncate, .slds-no-flex, .slds-no-space, [class*='slds-grow'], [class*='slds-shrink'], [class*='slds-container']
+ * @selector [class*='slds-grid'], [class*='slds-wrap'], [class*='slds-nowrap'], [class*='slds-gutters'], .slds-col, [class*='slds-col-'], [class*='slds-col_'], .slds-has-flexi-truncate, .slds-no-flex, .slds-no-space, [class*='slds-grow'], [class*='slds-shrink'], [class*='slds-container']
  * @support dev-ready
  * @layout responsive
  */

ui/utilities/grid/docs.mdx

@@ -362,6 +362,40 @@ If you want your columns to grow from the end of the horizontal axis, apply the
   </Grid>
 </Example>
 
+### Content alignment with bump
+
+To "bump" a single or multiple grid items, apply the class `slds-col_bump-{direction}`, with `{direction}` being either left, right, top or bottom, to a grid item.
+
+**Bump Left**
+
+In the example below, applying the left bump class to item 5 bumps items 1 through 4 to the left.
+
+<Example title="Grid Content Alignment Bump Left">
+  <Grid bareGrid>
+    <div><span>1</span></div>
+    <div><span>2</span></div>
+    <div><span>3</span></div>
+    <div><span>4</span></div>
+    <div className="slds-col_bump-left"><span>5</span></div>
+    <div><span>6</span></div>
+  </Grid>
+</Example>
+
+**Bump Right**
+
+In the example below, applying the right bump class to item 5 bumps item 6 to the right.
+
+<Example title="Grid Content Alignment Bump Right">
+  <Grid bareGrid>
+    <div><span>1</span></div>
+    <div><span>2</span></div>
+    <div><span>3</span></div>
+    <div><span>4</span></div>
+    <div className="slds-col_bump-right"><span>5</span></div>
+    <div><span>6</span></div>
+  </Grid>
+</Example>
+
 ### Reversed
 
 There may be times you find yourself in a situation to reverse the visual flow of your columns, you can do this both horizontally and vertically. To reverse the horizontal flow, add the class `slds-grid_reverse` to the `slds-grid` container. To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
@@ -452,7 +486,7 @@ To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the
 
 To specify the vertical placement of grid items on the cross axis, you can apply `slds-align-top`, `slds-align-middle`, and `slds-align-bottom` to a `slds-col` element.
 
-<Example title="Grid Vertical Align inidividual">
+<Example title="Grid Vertical Align individual">
   <Grid style={{height: '200px'}}>
     <Column className="slds-align-top">1</Column>
     <Column className="slds-align-middle">2</Column>

ui/utilities/grid/docs/Grid.jsx

@@ -25,7 +25,8 @@ class Grid extends Component {
       <div
         className={classNames(
           'simple-grid',
-          this.props.small && 'simple-grid_small'
+          this.props.small && 'simple-grid_small',
+          this.props.bareGrid && 'simple-grid_bare-columns'
         )}
       >
         <CodeView>

ui/utilities/grid/docs/Grid.scss

@@ -37,3 +37,20 @@
 .simple-grid__buttons {
   margin: auto;
 }
+
+.simple-grid_bare-columns .slds-grid > div {
+  display: inline-flex;
+  background: #54698d;
+  color: #fff;
+  text-align: center;
+  background-clip: content-box;
+  border: 1px solid #fff;
+  border-radius: 0;
+}
+
+.simple-grid_bare-columns .slds-grid > div > span {
+  align-self: center;
+  margin: auto;
+  font-size: 1.575rem;
+  padding: 0.5rem;
+}