Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandonferrua committed Feb 15, 2018
1 parent 118b520 commit 73989b0bf16047cd76e3eeca6af5d2b1c1c5fa51
Showing with 2,215 additions and 115 deletions.
  1. +976 −0 test/__tests__/__snapshots__/Form_Element_Base.json
  2. +74 −0 test/__tests__/__snapshots__/Form_Element_Condensed.json
  3. +138 −0 test/__tests__/__snapshots__/Form_Element_Error.json
  4. +136 −0 test/__tests__/__snapshots__/Form_Element_Inline_Edit.json
  5. +74 −0 test/__tests__/__snapshots__/Form_Element_Readonly.json
  6. +109 −0 test/__tests__/__snapshots__/Form_Element_Required.json
  7. +1 −1 ...y-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_task_timeline_item.json
  8. +1 −1 ...napshots__/Activity_Timeline_Expandable_renders_a_timeline_item_trigger_with_a_task_checkbox.json
  9. +1 −1 ...line/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item_with_icons.json
  10. +1 −1 ..._tests__/__snapshots__/Activity_Timeline_Expandable_renders_the_deprecated_combined_timeline.json
  11. +8 −8 ui/components/checkbox/__tests__/__snapshots__/renders_a_checkbox_group.json
  12. +8 −8 ui/components/checkbox/__tests__/__snapshots__/renders_a_checkbox_group_with_error.json
  13. +5 −5 ui/components/checkbox/__tests__/__snapshots__/renders_a_default_checkbox.json
  14. +5 −5 ui/components/checkbox/__tests__/__snapshots__/renders_a_disabled_checkbox.json
  15. +8 −8 ui/components/checkbox/__tests__/__snapshots__/renders_a_disabled_checkbox_group.json
  16. +1 −1 ui/components/checkbox/__tests__/__snapshots__/renders_a_required_checkbox.json
  17. +8 −8 ui/components/checkbox/__tests__/__snapshots__/renders_a_required_checkbox_group.json
  18. +7 −7 ui/components/checkbox/__tests__/__snapshots__/renders_a_stacked_checkbox.json
  19. +1 −1 ui/components/checkbox/__tests__/__snapshots__/renders_an_error_state_checkbox.json
  20. +5 −5 ui/components/checkbox/__tests__/__snapshots__/renders_an_indeterminate_checkbox.json
  21. +5 −1 ui/components/checkbox/base/_index.scss
  22. +10 −8 ui/components/checkbox/base/example.jsx
  23. +13 −0 ...rm-element/__tests__/__snapshots__/Form_Element_renders_base_errored_form_element_with_input.json
  24. +11 −0 ...nents/form-element/__tests__/__snapshots__/Form_Element_renders_base_form_element_with_input.json
  25. +12 −0 ...m-element/__tests__/__snapshots__/Form_Element_renders_base_required_form_element_with_input.json
  26. +11 −0 ...orm-element/__tests__/__snapshots__/Form_Element_renders_condensed_form_element_in_view_mode.json
  27. +15 −0 ...nents/form-element/__tests__/__snapshots__/Form_Element_renders_inline_editable_form_element.json
  28. +15 −0 ...ement/__tests__/__snapshots__/Form_Element_renders_inline_editable_form_element_in_view_mode.json
  29. +54 −0 ui/components/form-element/__tests__/enzyme.spec.js
  30. +67 −0 ui/components/form-element/__tests__/snapshot.spec.js
  31. +69 −0 ui/components/form-element/base/_index.scss
  32. +342 −0 ui/components/form-element/docs.mdx
  33. +0 −46 ui/components/input/base/_index.scss
  34. +24 −0 ui/components/input/base/example.jsx

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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"] {
@@ -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>
);

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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);
});
});
@@ -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>
));
});
@@ -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);
}
}

Oops, something went wrong.

0 comments on commit 73989b0

Please sign in to comment.
You can’t perform that action at this time.