feat(form-element): Add modifier to reduce vertical space (#3066)

* feat(form-element): Add tightened modifier

* Add snapshots and documentation

* Add snapshots and documentation

* Fix path

* Update snapshots

* Lint

* Make sure examples have unique IDs

* 😢

* Update record detail

* Update AT on edit button

* feat(form-element): Add tests

* Remove unused props

* Update example to use stacked checkbox variant

ui/components/checkbox/base/_index.scss

@@ -28,8 +28,13 @@
       flex-direction: column;
     }
 
+    .slds-form-element__label {
+      margin-bottom: $spacing-xx-small;
+    }
+
     .slds-checkbox_faux {
       order: 1;
+      margin-bottom: 1px;
     }
   }
 
@@ -55,7 +60,6 @@
   .slds-form-element__label {
     display: inline;
     vertical-align: middle;
-    font-size: $font-size-medium;
   }
 
   [type="checkbox"] {

ui/components/checkbox/base/example.jsx

@@ -65,14 +65,16 @@ export let Checkbox = props => {
         htmlFor={props.id ? props.id : uniqueId}
       >
         <span className="slds-checkbox_faux" />
-        <span
-          className={classNames(
-            'slds-form-element__label',
-            props.hideLabel ? 'slds-assistive-text' : null
-          )}
-        >
-          {props.label}
-        </span>
+        {props.label && (
+          <span
+            className={classNames(
+              'slds-form-element__label',
+              props.hideLabel ? 'slds-assistive-text' : null
+            )}
+          >
+            {props.label}
+          </span>
+        )}
       </label>
     </span>
   );

ui/components/form-element/__tests__/enzyme.spec.js

@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+/* eslint-env jest */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow, render } from 'enzyme';
+
+import { FormElement } from '../base/example';
+import { Input } from '../../input/base/example';
+
+describe('Form Element', () => {
+  it('renders without crashing', () => {
+    ReactDOM.render(<FormElement />, document.createElement('div'));
+  });
+
+  it('renders a label targeting the html element', () => {
+    const example = shallow(
+      <FormElement label="Form label" inputId="input-1">
+        <Input id="input-1" />
+      </FormElement>
+    );
+    const rendered = example.render();
+    expect(example.find('.slds-form-element__label')).toHaveLength(1);
+    expect(rendered.find('[for="input-1"]')).toHaveLength(1);
+    expect(example.find('#input-1')).toHaveLength(1);
+  });
+
+  it('renders a required field', () => {
+    const example = shallow(
+      <FormElement label="Form label" inputId="input-1" required>
+        <Input id="input-1" required />
+      </FormElement>
+    );
+    expect(example.find('.slds-required')).toHaveLength(1);
+  });
+
+  it('renders a form field with an error', () => {
+    const example = shallow(
+      <FormElement
+        className="slds-has-error"
+        label="Form label"
+        inputId="input-1"
+        errorId="error-1"
+        required
+        message="This field is required"
+      >
+        <Input id="input-1" required aria-describedby="error-1" />
+      </FormElement>
+    );
+    expect(example.find('#error-1')).toHaveLength(1);
+    expect(example.find('[aria-describedby="error-1"]')).toHaveLength(1);
+  });
+});

ui/components/form-element/__tests__/snapshot.spec.js

@@ -0,0 +1,67 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+/* eslint-env jest */
+
+import React from 'react';
+import createHelpers from '../../../../jest.setup';
+import { FormElement } from '../base/example';
+import { Input } from '../../input/base/example';
+import ButtonIcon from '../../button-icons/';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+describe('Form Element', () => {
+  it('renders base form element with input', () =>
+    matchesMarkupAndStyle(
+      <FormElement label="Form label" inputId="input-1">
+        <Input id="input-1" />
+      </FormElement>
+    ));
+  it('renders base required form element with input', () =>
+    matchesMarkupAndStyle(
+      <FormElement label="Form label" inputId="input-1" required>
+        <Input id="input-1" required />
+      </FormElement>
+    ));
+  it('renders base errored form element with input', () =>
+    matchesMarkupAndStyle(
+      <FormElement
+        className="slds-has-error"
+        label="Form label"
+        inputId="input-1"
+        errorId="error-1"
+        required
+        message="This field is required"
+      >
+        <Input id="input-1" required aria-describedby="error-1" />
+      </FormElement>
+    ));
+  it('renders inline editable form element in view mode', () =>
+    matchesMarkupAndStyle(
+      <div className="slds-form-element slds-form-element_small slds-form-element_edit slds-hint-parent">
+        <span className="slds-form-element__label">Status</span>
+        <div className="slds-form-element__control">
+          <span className="slds-form-element__static slds-border_bottom">
+            In Progress
+          </span>
+          <ButtonIcon
+            iconClassName="slds-button__icon_hint"
+            symbol="edit"
+            assistiveText="Edit: Status"
+            title="Edit: Status"
+          />
+        </div>
+      </div>
+    ));
+  it('renders condensed form element in view mode', () =>
+    matchesMarkupAndStyle(
+      <div className="slds-form-element slds-form-element_small slds-form-element_edit slds-form-element_small">
+        <span className="slds-form-element__label">Status</span>
+        <div className="slds-form-element__control">
+          <span className="slds-form-element__static slds-border_bottom">
+            In Progress
+          </span>
+        </div>
+      </div>
+    ));
+});

ui/components/form-element/base/_index.scss

@@ -85,6 +85,75 @@
     .slds-form-element__static {
       width: calc(100% - #{$square-icon-small-boundary}); // Leave space for edit icon
     }
+
+    .slds-button_icon {
+      vertical-align: bottom;
+    }
+  }
+}
+
+
+/**
+ * Fixed text that sits to the left or right of an input
+ *
+ * @selector .slds-form-element__addon
+ * @restrict .slds-form-element span
+ */
+.slds-form-element__addon {
+  display: inline-block;
+  margin: 0 $spacing-x-small;
+  align-self: center;
+}
+
+/**
+ * Read-only components are used to display immutable data within a form
+ *
+ * @summary Initializes read-only form element
+ *
+ * @selector .slds-form-element__static
+ * @restrict .slds-form-element span, .slds-form-element div
+ */
+.slds-form-element__static {
+  display: inline-block;
+  padding-top: $spacing-xx-small;
+  padding-bottom: $spacing-xx-small;
+  min-height: calc(#{$line-height-button} + 2px); // For IE
+  font-size: $input-static-font-size;
+  font-weight: $input-static-font-weight;
+  color: $input-static-color;
+
+  &.slds-text-longform *:last-child {
+    margin-bottom: 0;
+  }
+
+  /**
+   * Inline Edit on static form element
+   *
+   * @selector .slds-form-element__static_edit
+   * @restrict .slds-form-element__static
+   */
+  &--edit {
+    width: calc(100% - #{$square-icon-small-boundary}); // Leave space for edit icon
+  }
+}
+
+/**
+ * @summary Reduce vertical height of a form element
+ * @selector .slds-form-element_small
+ * @restrict .slds-form-element
+ * @modifier
+ */
+.slds-form-element_small {
+
+  .slds-form-element__label {
+    padding-top: 4px;
+    margin-bottom: 0;
+  }
+
+  .slds-form-element__static {
+    padding-top: 0;
+    padding-bottom: 1px;
+    min-height: calc(1.25rem + 2px);
   }
 }