fix(margin): Update docs to include "none" option (#3361)

salesforce-ux · Jun 29, 2018 · a3e9eb9 · a3e9eb9
1 parent 35d90ba
commit a3e9eb9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 29 deletions.
diff --git a/ui/utilities/margin/docs.mdx b/ui/utilities/margin/docs.mdx
@@ -3,19 +3,23 @@ import Example from '../../../shared/components/Example';
 
 <div className="lead">Adjust whitespace by applying horizontal and vertical margin helpers</div>
 
-The base unit of all our spacing metrics is **4**.
+The base unit of all of our spacing metrics is **4**.
 
 **Before using**
+
 - Most components already come with spacing included. These utility classes are for added convenience in laying out components.
-- Classes prefixed by `.slds-m-` are used for adding **margins**. Classes prefixed in `.slds-p-` are used for adding **padding**
+- Classes prefixed by `slds-m-` are used for adding **margins**. Classes prefixed in `slds-p-` are used for adding [padding](/components/utilities/padding)
 - The directions available for the spacing classes are `top`, `right`, `bottom`, and `left`.
 - You can use the `vertical` shortcut for both `top` and `bottom`, `horizontal` for both `right` and `left`, and `around` for all sides.
 - Use the `_xxx-small` through `_xx-large` scale to choose the size needed.
-- Where **vertical centering** is required, check out our [/components/utilities/media-objects/#center](centered media object) instead of applying extra `margin` or `padding`.
+- You can also use `none` as the size on any of the directions to enforce zero margin.
+- Where **vertical centering** is required, check out our [centered media object](/components/utilities/media-objects/#center) instead of applying extra `margin` or `padding`.
 
 ## Location - Top
+
 <Example title="top margins">
   <div>
+    <Margin size="none" position="top" />
     <Margin size="xxx-small" position="top" />
     <Margin size="xx-small" position="top" />
     <Margin size="x-small" position="top" />
@@ -28,8 +32,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Left
+
 <Example title="left margins">
   <div>
+    <Margin size="none" position="left" />
     <Margin size="xxx-small" position="left" />
     <Margin size="xx-small" position="left" />
     <Margin size="x-small" position="left" />
@@ -42,8 +48,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Bottom
+
 <Example title="bottom margins">
   <div>
+    <Margin size="none" position="bottom" />
     <Margin size="xxx-small" position="bottom" />
     <Margin size="xx-small" position="bottom" />
     <Margin size="x-small" position="bottom" />
@@ -56,8 +64,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Right
+
 <Example title="right margins">
   <div>
+    <Margin size="none" position="right" />
     <Margin size="xxx-small" position="right" />
     <Margin size="xx-small" position="right" />
     <Margin size="x-small" position="right" />
@@ -70,8 +80,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Horizontal
+
 <Example title="horizontal margins">
   <div>
+    <Margin size="none" position="horizontal" />
     <Margin size="xxx-small" position="horizontal" />
     <Margin size="xx-small" position="horizontal" />
     <Margin size="x-small" position="horizontal" />
@@ -84,8 +96,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Vertical
+
 <Example title="vertical margins">
   <div>
+    <Margin size="none" position="vertical" />
     <Margin size="xxx-small" position="vertical" />
     <Margin size="xx-small" position="vertical" />
     <Margin size="x-small" position="vertical" />
@@ -98,8 +112,10 @@ The base unit of all our spacing metrics is **4**.
 </Example>
 
 ## Location - Around
+
 <Example title="around margins">
   <div>
+    <Margin size="none" position="around" />
     <Margin size="xxx-small" position="around" />
     <Margin size="xx-small" position="around" />
     <Margin size="x-small" position="around" />

diff --git a/ui/utilities/margin/docs/Margin.jsx b/ui/utilities/margin/docs/Margin.jsx
@@ -2,42 +2,18 @@
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom/server';
-import style from './Margin.scss';
+import './Margin.scss';
 import classNames from 'classnames';
 import CodeBlock from '../../../../shared/components/CodeBlock';
 
-const Redline = props => (
-  <span className="doc-redline" style={{ width: props.width }}>
-    <span />
-  </span>
-);
-
 class Margin extends Component {
   render() {
-    let margin;
     let { size, position } = this.props;
-    const sizes = {
-      'xxx-small': '0.125rem',
-      'xx-small': '0.25rem',
-      'x-small': '0.5rem',
-      small: '0.75rem',
-      medium: '1rem',
-      large: '1.5rem',
-      'x-large': '2rem',
-      'xx-large': '3rem'
-    };
-    let widths = JSON.stringify(sizes);
-    JSON.parse(widths, (key, value) => {
-      if (key === size) {
-        margin = value;
-      }
-    });
     let spacingClass = `slds-m-${position}_${size}`;
     return (
       <div className="docs-codeblock">
         <div className="docs-codeblock-example">
-          <div className={classNames('doc-spacing')}>
+          <div className="doc-spacing">
             <div
               className={classNames(
                 'doc-margin doc-margin_primary',