From f917029280079b9059d0757b34f0cc1c1cc2646c Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 13 Aug 2019 09:29:24 -0400 Subject: [PATCH] [Feature branch] Compressed form rows (#2181) * Removed padding from compressed form row * Create mixin for `euiTextBreakWord` * Added option for horizontal compressed style Breaking: `compressed` is no longer passed to children * [Docs] Final compressed doc example changes * Fix combobox height * Fixed usages where spacers were needed * Deprecated `displayOnly` for `display: center` --- .../guide_locale_selector.js | 1 - .../guide_page/guide_page_chrome.js | 10 +- .../src/views/color_picker/custom_button.js | 2 + src-docs/src/views/combo_box/containers.js | 2 + src-docs/src/views/context/context.js | 2 + .../src/views/context_menu/context_menu.js | 2 + .../src/views/flyout/flyout_complicated.js | 1 + .../src/views/form_layouts/form_compressed.js | 44 +- .../form_layouts/form_layouts_example.js | 34 +- src-docs/src/views/form_layouts/form_rows.js | 3 + .../src/views/form_layouts/inline_popover.js | 3 + .../src/views/form_layouts/inline_sizing.js | 6 +- .../src/views/form_validation/validation.js | 3 + src-docs/src/views/popover/trap_focus.js | 3 + src/components/combo_box/_combo_box.scss | 6 +- .../date_popover/relative_tab.js | 2 +- .../__snapshots__/quick_select.test.js.snap | 20 +- .../quick_select_popover/quick_select.js | 3 + .../quick_select_popover/refresh_interval.js | 2 + src/components/expression/_expression.scss | 2 +- .../described_form_group.test.js.snap | 89 ++-- .../form/file_picker/_file_picker.scss | 3 +- .../form/form_help_text/_form_help_text.scss | 2 +- .../form/form_label/_form_label.scss | 1 - .../__snapshots__/form_row.test.js.snap | 425 ++++++++++++------ src/components/form/form_row/_form_row.scss | 53 ++- src/components/form/form_row/form_row.js | 86 ++-- src/components/form/form_row/form_row.test.js | 28 +- src/components/form/form_row/index.d.ts | 1 + src/components/table/_table.scss | 2 +- src/global_styling/mixins/_typography.scss | 13 +- src/global_styling/utility/_utility.scss | 5 +- 32 files changed, 602 insertions(+), 257 deletions(-) diff --git a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js index e6f8c1065b6..52f545c5478 100644 --- a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js +++ b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js @@ -12,7 +12,6 @@ export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => { onChange={() => onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en') } - compressed={true} /> ); diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index 9971aefb689..352ac98ab62 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -166,12 +166,10 @@ export class GuidePageChrome extends Component { selectedTheme={this.props.selectedTheme} /> {location.host === 'localhost:8030' ? ( // eslint-disable-line no-restricted-globals - - - + ) : null} diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js index 31d715b6a91..57625d7af47 100644 --- a/src-docs/src/views/color_picker/custom_button.js +++ b/src-docs/src/views/color_picker/custom_button.js @@ -5,6 +5,7 @@ import { EuiFormRow, EuiColorPickerSwatch, EuiBadge, + EuiSpacer, } from '../../../../src/components'; import { isValidHex } from '../../../../src/services'; @@ -43,6 +44,7 @@ export class CustomButton extends Component { } /> + + + + + {action} )} diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js index 6b7aa521605..1b724641ca3 100644 --- a/src-docs/src/views/context_menu/context_menu.js +++ b/src-docs/src/views/context_menu/context_menu.js @@ -7,6 +7,7 @@ import { EuiIcon, EuiPopover, EuiSwitch, + EuiSpacer, } from '../../../../src/components'; function flattenPanelTree(tree, array = []) { @@ -87,6 +88,7 @@ export default class extends Component { label="Current time range" /> + Copy iFrame code ), diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index 6901f5e3014..343d5412e63 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -195,6 +195,7 @@ export class FlyoutComplicated extends Component { + {flyoutContent} {htmlCode} diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js index 7151cd19c48..8ab9ba27cb8 100644 --- a/src-docs/src/views/form_layouts/form_compressed.js +++ b/src-docs/src/views/form_layouts/form_compressed.js @@ -10,6 +10,7 @@ import { EuiFilePicker, EuiRange, EuiSelect, + EuiSpacer, EuiSwitch, EuiPanel, } from '../../../../src/components'; @@ -57,9 +58,16 @@ export default class extends Component { ], radioIdSelected: `${idPrefix}5`, comboBoxSelectionOptions: [], + value: '20', }; } + onRangeChange = e => { + this.setState({ + value: e.target.value, + }); + }; + onSwitchChange = () => { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, @@ -92,31 +100,35 @@ export default class extends Component { - + display="columnCompressed"> + - + - - + + - + this.setState({ comboBoxSelectionOptions }) @@ -124,13 +136,22 @@ export default class extends Component { /> - - + + + display="rowCompressed"> - + + + Save form diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index dd71d1199b8..47bb218318a 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -108,7 +108,7 @@ export const FormLayoutsExample = { `, }, { - title: 'Compressed', + title: 'Compressed and horizontal', source: [ { type: GuideSectionTypes.JS, @@ -122,21 +122,33 @@ export const FormLayoutsExample = { text: (

If the particular form is in an area with a small amount of real - estate, you can add the prop compressed to the{' '} - EuiFormRows and it will pass down to the form - controls. + estate, you can pass{' '} + display="rowCompressed" to the{' '} + EuiFormRows but you will also need to pass{' '} + compressed=true to the form controls themselves. + For editor style controls, pass{' '} + display="columnCompressed" to align the + labels and inputs horizontally.

), props: { EuiFormRow, }, demo: , - snippet: ` - + `, + ` + +`, + ], }, { title: 'Described form groups', @@ -224,12 +236,16 @@ export const FormLayoutsExample = {

When supplying children to an EuiFormRow that is{' '} not a form control, and you need to the content to - vertically center with the other form controls, add the prop{' '} - displayOnly. + vertically center with the other form controls, change the{' '} + display prop to center or{' '} + centerCompressed.

), demo: , + snippet: ` + +`, }, { title: 'In a popover', diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index 00ea340f377..42b14c9ab53 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -10,6 +10,7 @@ import { EuiLink, EuiRange, EuiSelect, + EuiSpacer, EuiSwitch, EuiText, } from '../../../../src/components'; @@ -135,6 +136,8 @@ export default class extends Component { />
+ + Save form diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js index 23a9fa41e66..c9af9fa01d7 100644 --- a/src-docs/src/views/form_layouts/inline_popover.js +++ b/src-docs/src/views/form_layouts/inline_popover.js @@ -10,6 +10,7 @@ import { EuiFlexItem, EuiFieldNumber, EuiRange, + EuiSpacer, EuiSwitch, } from '../../../../src/components'; @@ -125,6 +126,8 @@ export default class extends Component { + + Save ); diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js index d8602cae275..d66e8da3c98 100644 --- a/src-docs/src/views/form_layouts/inline_sizing.js +++ b/src-docs/src/views/form_layouts/inline_sizing.js @@ -23,13 +23,13 @@ export default () => (
- + - - Save + + Save diff --git a/src-docs/src/views/form_validation/validation.js b/src-docs/src/views/form_validation/validation.js index ae1c6834413..b1667d0ccfc 100644 --- a/src-docs/src/views/form_validation/validation.js +++ b/src-docs/src/views/form_validation/validation.js @@ -7,6 +7,7 @@ import { EuiFormRow, EuiTextArea, EuiFieldText, + EuiSpacer, } from '../../../../src/components'; export default class extends Component { @@ -70,6 +71,8 @@ export default class extends Component { />
+ + {button} diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js index 6b62246e343..7d69f04ceb5 100644 --- a/src-docs/src/views/popover/trap_focus.js +++ b/src-docs/src/views/popover/trap_focus.js @@ -4,6 +4,7 @@ import { EuiButton, EuiFormRow, EuiPopover, + EuiSpacer, EuiSwitch, } from '../../../../src/components'; @@ -54,6 +55,8 @@ export default class extends Component {
+ + Copy IFRAME code
); diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index e962ee457ff..4f3e2be4976 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -11,7 +11,7 @@ */ &--compressed, - .euiFormControlLayout--compressed { + .euiFormControlLayout { height: auto; } @@ -98,6 +98,10 @@ line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; padding-bottom: 0; + + &.euiComboBox__inputWrap-isClearable { + @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */ + } } } } diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js index 008913739e1..1399f260242 100644 --- a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js +++ b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js @@ -104,7 +104,7 @@ export class EuiRelativeTab extends Component { - + @@ -160,6 +161,7 @@ export class EuiQuickSelect extends Component { aria-label="Quick time value" value={this.state.timeValue} onChange={this.onTimeValueChange} + compressed /> @@ -170,6 +172,7 @@ export class EuiQuickSelect extends Component { value={this.state.timeUnits} options={timeUnitsOptions} onChange={this.onTimeUnitsChange} + compressed /> diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js index fc618ef33f5..e7f5e52b1cb 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js +++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js @@ -128,6 +128,7 @@ export class EuiRefreshInterval extends Component { onChange={this.onValueChange} aria-label="Refresh interval value" data-test-subj="superDatePickerRefreshIntervalInput" + compressed /> @@ -139,6 +140,7 @@ export class EuiRefreshInterval extends Component { options={refreshUnitsOptions} onChange={this.onUnitsChange} data-test-subj="superDatePickerRefreshIntervalUnitsSelect" + compressed /> diff --git a/src/components/expression/_expression.scss b/src/components/expression/_expression.scss index 3ee436b8af4..3797018cc0b 100644 --- a/src/components/expression/_expression.scss +++ b/src/components/expression/_expression.scss @@ -3,7 +3,7 @@ * but then wrap long words */ .euiExpression { - @include euiTextOverflowWrap; /* 1 */ + @include euiTextBreakWord; /* 1 */ @include euiFontSizeS; @include euiCodeFont; diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap index 7009392b9b5..7c5dbeffbc1 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap @@ -36,6 +36,7 @@ exports[`EuiDescribedFormGroup is rendered 1`] = ` > -
+
- - -
+ - Error one -
-
- -
+ Error one +
+
+ - Error two -
- - -
+ Error two +
+ + - Help text - - +
+ Help text +
+
+
diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss index bb8aca6035a..f22ba6b295e 100644 --- a/src/components/form/file_picker/_file_picker.scss +++ b/src/components/form/file_picker/_file_picker.scss @@ -44,6 +44,7 @@ .euiFilePicker--compressed & { top: $euiSizeS; + left: $euiSizeS; } .euiFilePicker--large & { @@ -76,7 +77,7 @@ .euiFilePicker--compressed & { @include euiFormControlStyleCompressed($includeStates: false); - @include euiFormControlWithIcon; /* 2 */ + @include euiFormControlWithIcon($compressed: true); /* 2 */ height: $euiFormControlCompressedHeight; } diff --git a/src/components/form/form_help_text/_form_help_text.scss b/src/components/form/form_help_text/_form_help_text.scss index 2bce1e4caad..d449b0e2c6a 100644 --- a/src/components/form/form_help_text/_form_help_text.scss +++ b/src/components/form/form_help_text/_form_help_text.scss @@ -1,5 +1,5 @@ .euiFormHelpText { @include euiFontSizeXS; - padding-top: $euiSizeS; + padding-top: $euiSizeXS; color: $euiColorDarkShade; } diff --git a/src/components/form/form_label/_form_label.scss b/src/components/form/form_label/_form_label.scss index e321f960221..887d7de476c 100644 --- a/src/components/form/form_label/_form_label.scss +++ b/src/components/form/form_label/_form_label.scss @@ -4,7 +4,6 @@ .euiFormLabel { @include euiFontSizeXS; display: inline-block; - margin-bottom: $euiSizeXS; transition: all $euiAnimSpeedFast $euiAnimSlightResistance; color: $euiTitleColor; font-weight: $euiFontWeightSemiBold; diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap index 0ef700dad94..c239a1bc3ac 100644 --- a/src/components/form/form_row/__snapshots__/form_row.test.js.snap +++ b/src/components/form/form_row/__snapshots__/form_row.test.js.snap @@ -3,6 +3,7 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = ` -
+
- +
+ +
`; @@ -44,6 +52,7 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = ` exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = ` -
+
- +
+ +
`; @@ -85,6 +101,7 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = ` exports[`EuiFormRow behavior onFocus is called in child 1`] = ` -
+
- +
+ +
`; @@ -126,6 +150,7 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = ` exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] = ` -
+
- +
+ +
`; @@ -171,9 +203,28 @@ exports[`EuiFormRow is rendered 1`] = ` data-test-subj="test subject string" id="generated-id-row" > - +
+ +
+ +`; + +exports[`EuiFormRow props compressed is rendered 1`] = ` +
+
+ +
`; @@ -182,12 +233,91 @@ exports[`EuiFormRow props describedByIds is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > - +
+ +
+ +`; + +exports[`EuiFormRow props display type center is rendered 1`] = ` +
+
+ +
+
+`; + +exports[`EuiFormRow props display type centerCompressed is rendered 1`] = ` +
+
+ +
+
+`; + +exports[`EuiFormRow props display type columnCompressed is rendered 1`] = ` +
+
+ +
+
+`; + +exports[`EuiFormRow props display type row is rendered 1`] = ` +
+
+ +
+
+`; + +exports[`EuiFormRow props display type rowCompressed is rendered 1`] = ` +
+
+ +
`; @@ -197,7 +327,7 @@ exports[`EuiFormRow props displayOnly is rendered 1`] = ` id="generated-id-row" >
-
- Error -
-
- Error2 + +
+ Error +
+
+ Error2 +
`; @@ -239,16 +373,20 @@ exports[`EuiFormRow props error as string is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
- Error + +
+ Error +
`; @@ -258,9 +396,13 @@ exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = ` class="euiFormRow" id="generated-id-row" > - +
+ +
`; @@ -269,9 +411,13 @@ exports[`EuiFormRow props fullWidth is rendered 1`] = ` class="euiFormRow euiFormRow--fullWidth" id="generated-id-row" > - +
+ +
`; @@ -280,9 +426,13 @@ exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = ` class="euiFormRow euiFormRow--hasEmptyLabelSpace" id="generated-id-row" > - +
+ +
`; @@ -291,17 +441,21 @@ exports[`EuiFormRow props helpText is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
- - This is help text. - + +
+ + This is help text. + +
`; @@ -311,9 +465,13 @@ exports[`EuiFormRow props id is rendered 1`] = ` class="euiFormRow" id="id-row" > - +
+ +
`; @@ -322,18 +480,24 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -342,36 +506,29 @@ exports[`EuiFormRow props label append is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > - - -
- - label - -
-
- - append - -
- + label + + + append + +
+ +
`; @@ -380,8 +537,11 @@ exports[`EuiFormRow props label is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -403,8 +567,11 @@ exports[`EuiFormRow props label renders as a legend and subsquently a fieldset w className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index b4220f576ab..f0c6ff0e701 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -6,9 +6,8 @@ display: flex; /* 1 */ flex-direction: column; /* 1 */ max-width: $euiFormMaxWidth; - padding-bottom: $euiSizeS; - + * { + + .euiFormRow { margin-top: $euiSize; } } @@ -18,26 +17,60 @@ } .euiFormRow--hasEmptyLabelSpace { - margin-top: $euiFontSizeXS + $euiSizeS; /* 2 */ + margin-top: ($euiFontSizeXS * $euiLineHeight) + $euiSizeXS; /* 2 */ // the following ensure that contents that aren't inheritly the same height // as inputs will align to the vertical center - min-height: $euiSizeXXL; + min-height: $euiFormControlHeight; padding-bottom: 0; justify-content: center; } -.euiFormRow--compressed { - + * { - margin-top: $euiSizeS; +.euiFormRow__labelWrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: $euiSizeXS; +} + +.euiFormRow--horizontal { + flex-direction: row; + align-items: stretch; + + .euiFormRow__label { + @include euiTextBreakWord; + hyphens: auto; + max-width: 100%; // Fixes IE + } + + .euiFormRow__labelWrapper { + display: block; + line-height: $euiFormControlCompressedHeight - 1px; // The 1px less helps the alignment of the text baseline + width: calc(33% - #{$euiSizeS}); + margin-right: $euiSizeS; + margin-bottom: 0; } - .euiFormRow__text { - padding-top: $euiSizeM / 2; + .euiFormRow__fieldWrapper { + width: 67%; + } + + + .euiFormRow--horizontal { + margin-top: $euiSizeS; } } -.euiFormRow__displayOnlyWrapper { +.euiFormRow__fieldWrapperDisplayOnly { min-height: $euiFormControlHeight; display: flex; align-items: center; } + +.euiFormRow--compressed { + &.euiFormRow--hasEmptyLabelSpace { + min-height: $euiFormControlCompressedHeight; + } + + .euiFormRow__fieldWrapperDisplayOnly { + min-height: $euiFormControlCompressedHeight; + } +} diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js index 79835cb54df..2eed0fdca96 100644 --- a/src/components/form/form_row/form_row.js +++ b/src/components/form/form_row/form_row.js @@ -8,10 +8,19 @@ import { withRequiredProp } from '../../../utils/prop_types/with_required_prop'; import { EuiFormHelpText } from '../form_help_text'; import { EuiFormErrorText } from '../form_error_text'; import { EuiFormLabel } from '../form_label'; -import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import makeId from './make_id'; +const displayToClassNameMap = { + row: null, + rowCompressed: 'euiFormRow--compressed', + columnCompressed: 'euiFormRow--compressed euiFormRow--horizontal', + center: null, + centerCompressed: 'euiFormRow--compressed', +}; + +export const DISPLAYS = Object.keys(displayToClassNameMap); + export class EuiFormRow extends Component { constructor(props) { super(props); @@ -63,19 +72,39 @@ export class EuiFormRow extends Component { className, describedByIds, compressed, + display, displayOnly, ...rest } = this.props; const { id } = this.state; + /** + * Remove when `compressed` is deprecated + */ + let shimDisplay; + if (compressed && display === 'row') { + shimDisplay = 'rowCompressed'; + } else { + shimDisplay = display; + } + + /** + * Remove when `displayOnly` is deprecated + */ + if (compressed && displayOnly) { + shimDisplay = 'centerCompressed'; + } else if (displayOnly && display === 'row') { + shimDisplay = 'center'; + } + const classes = classNames( 'euiFormRow', { 'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace, 'euiFormRow--fullWidth': fullWidth, - 'euiFormRow--compressed': compressed, }, + displayToClassNameMap[shimDisplay], className ); @@ -110,11 +139,11 @@ export class EuiFormRow extends Component { const isLegend = label && labelType === 'legend' ? true : false; const labelID = isLegend ? `${id}-${labelType}` : undefined; - if (label) { + if (label || labelAppend) { optionalLabel = ( - // Outer div ensures the label is inline-block (only takes up as much room as it needs) -
+
{label} + {labelAppend && ' '} + {labelAppend}
); } - if (labelAppend) { - optionalLabel = ( - - {optionalLabel} - {labelAppend} - - ); - } - const optionalProps = {}; const describingIds = [...describedByIds]; @@ -155,17 +173,17 @@ export class EuiFormRow extends Component { optionalProps['aria-describedby'] = describingIds.join(' '); } - let field = cloneElement(Children.only(children), { + const field = cloneElement(Children.only(children), { id, onFocus: this.onFocus, onBlur: this.onBlur, - compressed: compressed, ...optionalProps, }); - if (displayOnly) { - field =
{field}
; - } + const fieldWrapperClasses = classNames('euiFormRow__fieldWrapper', { + euiFormRow__fieldWrapperDisplayOnly: + displayOnly || display.startsWith('center'), + }); const Element = labelType === 'legend' ? 'fieldset' : 'div'; @@ -177,9 +195,11 @@ export class EuiFormRow extends Component { aria-labelledby={labelID} // Only renders a string if label type is 'legend' > {optionalLabel} - {field} - {optionalErrors} - {optionalHelpText} +
+ {field} + {optionalErrors} + {optionalHelpText} +
); } @@ -219,11 +239,20 @@ EuiFormRow.propTypes = { */ describedByIds: PropTypes.array, /** - * Tightens up the spacing and sends down the - * compressed prop to the input + * **DEPRECATED: use `display: rowCompressed` instead.** + * When `true`, tightens up the spacing. */ compressed: PropTypes.bool, /** + * When `rowCompressed`, just tightens up the spacing; + * Set to `columnCompressed` if compressed + * and horizontal layout is needed. + * Set to `center` or `centerCompressed` to align non-input + * content better with inline rows. + */ + display: PropTypes.oneOf(DISPLAYS), + /** + * **DEPRECATED: use `display: center` instead.** * Vertically centers non-input style content so it aligns * better with input style content. */ @@ -231,6 +260,7 @@ EuiFormRow.propTypes = { }; EuiFormRow.defaultProps = { + display: 'row', hasEmptyLabelSpace: false, fullWidth: false, describedByIds: [], diff --git a/src/components/form/form_row/form_row.test.js b/src/components/form/form_row/form_row.test.js index c32f7d24ac2..69d7e270667 100644 --- a/src/components/form/form_row/form_row.test.js +++ b/src/components/form/form_row/form_row.test.js @@ -3,7 +3,7 @@ import { shallow, render, mount } from 'enzyme'; import { requiredProps } from '../../../test'; import sinon from 'sinon'; -import { EuiFormRow } from './form_row'; +import { EuiFormRow, DISPLAYS } from './form_row'; jest.mock('./make_id', () => () => 'generated-id'); @@ -200,6 +200,32 @@ describe('EuiFormRow', () => { expect(component).toMatchSnapshot(); }); + + describe('compressed', () => { + test('is rendered', () => { + const component = render( + + + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('display type', () => { + DISPLAYS.forEach(display => { + test(`${display} is rendered`, () => { + const component = render( + + + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); describe('behavior', () => { diff --git a/src/components/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts index 93aadba7221..76c08290f4c 100644 --- a/src/components/form/form_row/index.d.ts +++ b/src/components/form/form_row/index.d.ts @@ -21,6 +21,7 @@ declare module '@elastic/eui' { labelAppend?: ReactNode; describedByIds?: string[]; compressed?: boolean; + display?: 'row' | 'rowCompressed' | 'columnCompressed'; displayOnly?: boolean; }; diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 468c0c96ec3..d4d1aa61d13 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -138,7 +138,7 @@ } .euiTableCellContent__text { - @include euiTextOverflowWrap; /* 4 */ + @include euiTextBreakWord; /* 4 */ min-width: 0; text-overflow: ellipsis; } diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index a677a7aa711..18d86ffb6b6 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -1,4 +1,5 @@ // sass-lint:disable no-vendor-prefixes +// sass-lint:disable no-important // Our base fonts @@ -96,13 +97,11 @@ letter-spacing: -.03em; } -// Overflow-wrap for breaking on word -// Does not work on `display: flex` items -@mixin euiTextOverflowWrap { - @include internetExplorerOnly { - word-break: break-all; - } - overflow-wrap: break-word; +@mixin euiTextBreakWord { + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other + word-break: break-word; // IE doesn't understand but that's ok } // Text truncation diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index d5cc5c41d6f..55765690c41 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -25,10 +25,7 @@ .eui-textInheritColor {color: inherit !important;} .eui-textBreakWord { - // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ - overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container - word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other - word-break: break-word; // IE doesn't understand but that's ok + @include euiTextBreakWord; } .eui-textBreakAll {