From 22de3863a079c3d5b36267231a0c9a8a49bf706b Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 10 Jul 2019 13:38:54 -0400 Subject: [PATCH 01/19] Removed padding from compressed form row --- src/components/form/form_row/_form_row.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index b4220f576ab..15de6fb2e9d 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -27,6 +27,8 @@ } .euiFormRow--compressed { + padding-bottom: 0; + + * { margin-top: $euiSizeS; } From 7b6e1169ccc0f1f8b639e131395111c78d3463e4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 29 Jul 2019 17:45:53 -0400 Subject: [PATCH 02/19] Create mixin for `euiTextBreakWord` --- src/components/expression/_expression.scss | 2 +- src/components/table/_table.scss | 2 +- src/global_styling/mixins/_typography.scss | 13 ++++++------- src/global_styling/utility/_utility.scss | 5 +---- 4 files changed, 9 insertions(+), 13 deletions(-) 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/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 { From a6843dba8cfdff3ff44a90f1b2829e8bb2e715c4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 29 Jul 2019 19:32:11 -0400 Subject: [PATCH 03/19] Added option for horizontal compressed style Breaking: `compressed` is no longer passed to children --- .../src/views/form_layouts/form_compressed.js | 31 +- .../form_layouts/form_layouts_example.js | 6 +- .../described_form_group.test.js.snap | 80 +++-- .../__snapshots__/form_row.test.js.snap | 326 ++++++++++++------ src/components/form/form_row/_form_row.scss | 35 +- src/components/form/form_row/form_row.js | 14 +- src/components/form/form_row/form_row.test.js | 22 ++ 7 files changed, 352 insertions(+), 162 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js index 7151cd19c48..c4c257912db 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'; @@ -92,31 +93,35 @@ export default class extends Component { - + compressed="horizontal"> + - + - - + + - + this.setState({ comboBoxSelectionOptions }) @@ -124,8 +129,15 @@ export default class extends Component { /> - - + + + + 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..63ea75b6cd0 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -123,8 +123,10 @@ export const FormLayoutsExample = {

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. + EuiFormRows but you will also need to pass it to + the form controls. For editor style controls, pass{' '} + compressed="horizontal" to align the + labels and inputs horizontally.

), props: { 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..a97b0af676f 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 @@ -325,7 +325,9 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- - -
+ - Error one -
- - -
+ Error one +
+ + - Error two -
- - -
+ Error two +
+ + - Help text - - +
+ Help text +
+ + 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..03d8ca226fa 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 @@ -16,7 +16,9 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -57,7 +63,9 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -98,7 +110,9 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -139,7 +157,9 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] = className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -171,9 +195,43 @@ exports[`EuiFormRow is rendered 1`] = ` data-test-subj="test subject string" id="generated-id-row" > - +
+ +
+ +`; + +exports[`EuiFormRow props compressed horizontally is rendered 1`] = ` +
+
+ +
+
+`; + +exports[`EuiFormRow props compressed is rendered 1`] = ` +
+
+ +
`; @@ -182,12 +240,16 @@ exports[`EuiFormRow props describedByIds is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > - +
+ +
`; @@ -197,13 +259,17 @@ exports[`EuiFormRow props displayOnly is rendered 1`] = ` id="generated-id-row" >
- - just some text - + + just some text + +
`; @@ -213,23 +279,27 @@ exports[`EuiFormRow props error as array is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
- Error -
-
- Error2 + +
+ Error +
+
+ Error2 +
`; @@ -239,16 +309,20 @@ exports[`EuiFormRow props error as string is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
- Error + +
+ Error +
`; @@ -258,9 +332,13 @@ exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = ` class="euiFormRow" id="generated-id-row" > - +
+ +
`; @@ -269,9 +347,13 @@ exports[`EuiFormRow props fullWidth is rendered 1`] = ` class="euiFormRow euiFormRow--fullWidth" id="generated-id-row" > - +
+ +
`; @@ -280,9 +362,13 @@ exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = ` class="euiFormRow euiFormRow--hasEmptyLabelSpace" id="generated-id-row" > - +
+ +
`; @@ -291,17 +377,21 @@ exports[`EuiFormRow props helpText is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
- - This is help text. - + +
+ + This is help text. + +
`; @@ -311,9 +401,13 @@ exports[`EuiFormRow props id is rendered 1`] = ` class="euiFormRow" id="id-row" > - +
+ +
`; @@ -322,7 +416,9 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = ` class="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -351,7 +451,9 @@ exports[`EuiFormRow props label append is rendered 1`] = ` -
+
- +
+ +
`; @@ -380,7 +486,9 @@ exports[`EuiFormRow props label is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > -
+
- +
+ +
`; @@ -403,7 +515,9 @@ 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 15de6fb2e9d..2a50ca7ac5e 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -8,7 +8,7 @@ max-width: $euiFormMaxWidth; padding-bottom: $euiSizeS; - + * { + + .euiFormRow { margin-top: $euiSize; } } @@ -29,15 +29,40 @@ .euiFormRow--compressed { padding-bottom: 0; - + * { - margin-top: $euiSizeS; - } - .euiFormRow__text { padding-top: $euiSizeM / 2; } } +.euiFormRow--horizontal { + flex-direction: row; + align-items: stretch; + line-height: $euiFormControlHeight; // Lines up label with form control + + .euiFormRow__labelWrapper { + @include euiTextBreakWord; + hyphens: auto; + width: calc(33% - #{$euiSizeS}); + margin-right: $euiSizeS; + } + + .euiFormLabel { + margin-bottom: 0; + } + + .euiFormRow__fieldWrapper { + width: 67%; + } + + &.euiFormRow--compressed { + line-height: $euiFormControlCompressedHeight; + } + + + .euiFormRow--horizontal { + margin-top: $euiSizeS; + } +} + .euiFormRow__displayOnlyWrapper { min-height: $euiFormControlHeight; display: flex; diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js index 79835cb54df..444884f8acc 100644 --- a/src/components/form/form_row/form_row.js +++ b/src/components/form/form_row/form_row.js @@ -75,6 +75,7 @@ export class EuiFormRow extends Component { 'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace, 'euiFormRow--fullWidth': fullWidth, 'euiFormRow--compressed': compressed, + 'euiFormRow--horizontal': compressed === 'horizontal', }, className ); @@ -113,7 +114,7 @@ export class EuiFormRow extends Component { if (label) { optionalLabel = ( // Outer div ensures the label is inline-block (only takes up as much room as it needs) -
+
{optionalLabel} - {field} - {optionalErrors} - {optionalHelpText} +
+ {field} + {optionalErrors} + {optionalHelpText} +
); } @@ -222,7 +224,7 @@ EuiFormRow.propTypes = { * Tightens up the spacing and sends down the * compressed prop to the input */ - compressed: PropTypes.bool, + compressed: PropTypes.oneOf([true, false, 'horizontal']), /** * Vertically centers non-input style content so it aligns * better with input style content. diff --git a/src/components/form/form_row/form_row.test.js b/src/components/form/form_row/form_row.test.js index c32f7d24ac2..78ba1a94036 100644 --- a/src/components/form/form_row/form_row.test.js +++ b/src/components/form/form_row/form_row.test.js @@ -200,6 +200,28 @@ describe('EuiFormRow', () => { expect(component).toMatchSnapshot(); }); + + describe('compressed', () => { + test('is rendered', () => { + const component = render( + + + + ); + + expect(component).toMatchSnapshot(); + }); + + test('horizontally is rendered', () => { + const component = render( + + + + ); + + expect(component).toMatchSnapshot(); + }); + }); }); describe('behavior', () => { From 97e1a168b9b4cd9c77bac8807e8811747d5cf0dd Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 29 Jul 2019 19:53:10 -0400 Subject: [PATCH 04/19] Added TS def, Fixed usages --- .../src/views/form_layouts/described_form_group.js | 1 + .../src/views/form_layouts/form_layouts_example.js | 12 ++++++++++-- .../__snapshots__/quick_select.test.js.snap | 12 ++++++------ .../quick_select_popover/quick_select.js | 3 +++ .../quick_select_popover/refresh_interval.js | 2 ++ src/components/form/form_row/index.d.ts | 2 +- 6 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index bd2d65c9928..c224b6e8ec7 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -164,6 +164,7 @@ export default class extends Component { label="Should we do this?" checked={this.state.isSwitchChecked} onChange={this.onSwitchChange} + fullWidth /> 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 63ea75b6cd0..68454833128 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -133,12 +133,20 @@ export const FormLayoutsExample = { EuiFormRow, }, demo: , - snippet: ` - + +`, + ` + `, + ], }, { title: 'Described form groups', diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap index 2670ccd60ad..6f39afba6cb 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap @@ -70,7 +70,7 @@ exports[`EuiQuickSelect is rendered 1`] = ` > @@ -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/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts index 93aadba7221..1a143f63005 100644 --- a/src/components/form/form_row/index.d.ts +++ b/src/components/form/form_row/index.d.ts @@ -20,7 +20,7 @@ declare module '@elastic/eui' { label?: ReactNode; labelAppend?: ReactNode; describedByIds?: string[]; - compressed?: boolean; + compressed?: boolean | 'horizontal'; displayOnly?: boolean; }; From d20fd29056752c71d8ac1f53a001cf574a216a8c Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 29 Jul 2019 20:15:27 -0400 Subject: [PATCH 05/19] Fix some errors --- .../guide_locale_selector/guide_locale_selector.js | 1 - src-docs/src/views/form_layouts/described_form_group.js | 1 - src-docs/src/views/form_layouts/form_compressed.js | 9 +++++++++ 3 files changed, 9 insertions(+), 2 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/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index c224b6e8ec7..bd2d65c9928 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -164,7 +164,6 @@ export default class extends Component { label="Should we do this?" checked={this.state.isSwitchChecked} onChange={this.onSwitchChange} - fullWidth /> diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js index c4c257912db..b668fa7bcbe 100644 --- a/src-docs/src/views/form_layouts/form_compressed.js +++ b/src-docs/src/views/form_layouts/form_compressed.js @@ -58,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, @@ -137,6 +144,8 @@ export default class extends Component { id="range" showInput compressed + value={this.state.value} + onChange={this.onRangeChange} /> From 791354cc99b5ef5b8696110332064d05093ef3c8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 10:43:58 -0400 Subject: [PATCH 06/19] Fixed inline spacing for compressed --- .../src/views/form_layouts/inline_sizing.js | 14 +++++----- src/components/form/form_row/_form_row.scss | 28 ++++++++++++------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js index d8602cae275..00757b68c6f 100644 --- a/src-docs/src/views/form_layouts/inline_sizing.js +++ b/src-docs/src/views/form_layouts/inline_sizing.js @@ -13,23 +13,23 @@ import { export default () => ( - - + + - - + + - + - - Save + + Save diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 2a50ca7ac5e..9c84b2ce024 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -18,22 +18,14 @@ } .euiFormRow--hasEmptyLabelSpace { - margin-top: $euiFontSizeXS + $euiSizeS; /* 2 */ + margin-top: $euiFontSizeXS + $euiSizeM; /* 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 { - padding-bottom: 0; - - .euiFormRow__text { - padding-top: $euiSizeM / 2; - } -} - .euiFormRow--horizontal { flex-direction: row; align-items: stretch; @@ -68,3 +60,19 @@ display: flex; align-items: center; } + +.euiFormRow--compressed { + padding-bottom: 0; + + .euiFormRow__text { + padding-top: $euiSizeM / 2; + } + + &.euiFormRow--hasEmptyLabelSpace { + margin-top: $euiFontSizeXS + $euiSizeS; /* 2 */ + } + + .euiFormRow__displayOnlyWrapper { + min-height: $euiFormControlCompressedHeight; + } +} From 334d88c869f2ac2cc727c63094fe46628d7b841f Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 13:40:28 -0400 Subject: [PATCH 07/19] Some more fixes for inline forms --- src-docs/src/views/form_layouts/form_rows.js | 3 +++ src-docs/src/views/form_layouts/inline_popover.js | 3 +++ .../form/form_help_text/_form_help_text.scss | 2 +- src/components/form/form_row/_form_row.scss | 15 ++++++++------- 4 files changed, 15 insertions(+), 8 deletions(-) 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/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_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 9c84b2ce024..b4a64e5b79f 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -18,7 +18,7 @@ } .euiFormRow--hasEmptyLabelSpace { - margin-top: $euiFontSizeXS + $euiSizeM; /* 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: $euiFormControlHeight; @@ -26,13 +26,18 @@ justify-content: center; } +.euiFormRow__labelWrapper { + font-size: 0; // Ensures the wrapper doesn't create extra height +} + .euiFormRow--horizontal { flex-direction: row; align-items: stretch; - line-height: $euiFormControlHeight; // Lines up label with form control .euiFormRow__labelWrapper { @include euiTextBreakWord; + font-size: inherit; // Helps with alignment + line-height: $euiFormControlCompressedHeight - 1px; // The 1px less helps the alignment of the text baseline hyphens: auto; width: calc(33% - #{$euiSizeS}); margin-right: $euiSizeS; @@ -46,10 +51,6 @@ width: 67%; } - &.euiFormRow--compressed { - line-height: $euiFormControlCompressedHeight; - } - + .euiFormRow--horizontal { margin-top: $euiSizeS; } @@ -69,7 +70,7 @@ } &.euiFormRow--hasEmptyLabelSpace { - margin-top: $euiFontSizeXS + $euiSizeS; /* 2 */ + min-height: $euiFormControlCompressedHeight; } .euiFormRow__displayOnlyWrapper { From a9b0769832586a56d9cb2de693cbe339eb798363 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 14:17:50 -0400 Subject: [PATCH 08/19] More fixes --- src/components/combo_box/_combo_box.scss | 4 +++ .../form/file_picker/_file_picker.scss | 3 +- .../form/form_label/_form_label.scss | 1 - .../__snapshots__/form_row.test.js.snap | 36 ++++++------------- src/components/form/form_row/_form_row.scss | 17 +++------ src/components/form/form_row/form_row.js | 19 ++-------- 6 files changed, 25 insertions(+), 55 deletions(-) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index e962ee457ff..cbab60c3db2 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -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/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_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 03d8ca226fa..6012b17c3a0 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 @@ -442,33 +442,19 @@ exports[`EuiFormRow props label append is rendered 1`] = ` className="euiFormRow" id="generated-id-row" > - - -
- - label - -
- - - append - - + label + + + append +
diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index b4a64e5b79f..8b2089404c7 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -6,7 +6,6 @@ display: flex; /* 1 */ flex-direction: column; /* 1 */ max-width: $euiFormMaxWidth; - padding-bottom: $euiSizeS; + .euiFormRow { margin-top: $euiSize; @@ -27,7 +26,10 @@ } .euiFormRow__labelWrapper { - font-size: 0; // Ensures the wrapper doesn't create extra height + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: $euiSizeXS; } .euiFormRow--horizontal { @@ -36,14 +38,11 @@ .euiFormRow__labelWrapper { @include euiTextBreakWord; - font-size: inherit; // Helps with alignment + display: block; line-height: $euiFormControlCompressedHeight - 1px; // The 1px less helps the alignment of the text baseline hyphens: auto; width: calc(33% - #{$euiSizeS}); margin-right: $euiSizeS; - } - - .euiFormLabel { margin-bottom: 0; } @@ -63,12 +62,6 @@ } .euiFormRow--compressed { - padding-bottom: 0; - - .euiFormRow__text { - padding-top: $euiSizeM / 2; - } - &.euiFormRow--hasEmptyLabelSpace { min-height: $euiFormControlCompressedHeight; } diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js index 444884f8acc..b10a321bd32 100644 --- a/src/components/form/form_row/form_row.js +++ b/src/components/form/form_row/form_row.js @@ -8,7 +8,6 @@ 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'; @@ -111,9 +110,8 @@ 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]; From 2f1466f221399a4a82bf34333d80c33d61b8e0c2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 14:21:23 -0400 Subject: [PATCH 09/19] Revert a doc change --- src-docs/src/views/form_layouts/inline_sizing.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js index 00757b68c6f..d8602cae275 100644 --- a/src-docs/src/views/form_layouts/inline_sizing.js +++ b/src-docs/src/views/form_layouts/inline_sizing.js @@ -13,23 +13,23 @@ import { export default () => ( - - + + - - + + - + - - Save + + Save From 4dd5911ea2dc2f5c48035d39b1ef4d092402935b Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 14:23:39 -0400 Subject: [PATCH 10/19] [Docs] Final compressed doc example changes --- src-docs/src/views/form_layouts/form_compressed.js | 11 +++++++++-- .../src/views/form_layouts/form_layouts_example.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js index b668fa7bcbe..ebffc77aabe 100644 --- a/src-docs/src/views/form_layouts/form_compressed.js +++ b/src-docs/src/views/form_layouts/form_compressed.js @@ -13,6 +13,8 @@ import { EuiSpacer, EuiSwitch, EuiPanel, + EuiText, + EuiLink, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -100,7 +102,12 @@ export default class extends Component { + compressed="horizontal" + labelAppend={ + + Link to some help + + }> @@ -116,7 +123,7 @@ export default class extends Component { - + `, }, { - title: 'Compressed', + title: 'Compressed and horizontal', source: [ { type: GuideSectionTypes.JS, From cd71516cb464b97da6e895fa6f165771ba1220f3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 14:24:19 -0400 Subject: [PATCH 11/19] [TEMP] Docs changes to other examples for testing --- src-docs/src/views/form_layouts/form_rows.js | 26 +++++++++++++------ src-docs/src/views/form_layouts/full_width.js | 12 +++++---- src-docs/src/views/form_layouts/inline.js | 15 ++++++----- .../src/views/form_layouts/inline_popover.js | 25 ++++++++++-------- .../src/views/form_layouts/inline_sizing.js | 14 +++++----- 5 files changed, 55 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index 42b14c9ab53..c805430c4f4 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -88,12 +88,16 @@ export default class extends Component { render() { return ( - - + + Link to some help @@ -101,6 +105,7 @@ export default class extends Component { }> - - + + - - + + - + + labelType="legend" + compressed> diff --git a/src-docs/src/views/form_layouts/full_width.js b/src-docs/src/views/form_layouts/full_width.js index 7095c637fb1..b27888416fd 100644 --- a/src-docs/src/views/form_layouts/full_width.js +++ b/src-docs/src/views/form_layouts/full_width.js @@ -15,10 +15,10 @@ export default () => ( - + - Search + Search @@ -27,13 +27,15 @@ export default () => ( - + helpText="Note that the fullWidth prop is not passed to the form row's child" + compressed> + - + ( - - + + - - + + - - Save + + Save diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js index c9af9fa01d7..c3e7f5a5924 100644 --- a/src-docs/src/views/form_layouts/inline_popover.js +++ b/src-docs/src/views/form_layouts/inline_popover.js @@ -79,18 +79,18 @@ export default class extends Component { - - + + - - + + - - Save + + Save @@ -109,7 +109,7 @@ export default class extends Component { const formSample2 = ( - + - - + + - - + + diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js index d8602cae275..00757b68c6f 100644 --- a/src-docs/src/views/form_layouts/inline_sizing.js +++ b/src-docs/src/views/form_layouts/inline_sizing.js @@ -13,23 +13,23 @@ import { export default () => ( - - + + - - + + - + - - Save + + Save From e15a8468a868833f3874b419f5090aa085e462fb Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 14:39:40 -0400 Subject: [PATCH 12/19] Fix combobox height --- src/components/combo_box/_combo_box.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index cbab60c3db2..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; } From ba09f6791fb1797d3a27b9b7e5eec0300d8a857d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 16:30:40 -0400 Subject: [PATCH 13/19] Fixed usages where spacers were needed --- .../src/components/guide_page/guide_page_chrome.js | 10 ++++------ src-docs/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-docs/src/views/context_menu/context_menu.js | 2 ++ src-docs/src/views/flyout/flyout_complicated.js | 1 + src-docs/src/views/form_validation/validation.js | 3 +++ src-docs/src/views/popover/trap_focus.js | 3 +++ .../super_date_picker/date_popover/relative_tab.js | 2 +- 9 files changed, 20 insertions(+), 7 deletions(-) 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 e731c00036a..b358edbb01b 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -161,12 +161,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_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/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 { - + Date: Tue, 30 Jul 2019 18:36:25 -0400 Subject: [PATCH 14/19] Remove labelAppend --- src-docs/src/views/form_layouts/form_compressed.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js index ebffc77aabe..b6916258df0 100644 --- a/src-docs/src/views/form_layouts/form_compressed.js +++ b/src-docs/src/views/form_layouts/form_compressed.js @@ -13,8 +13,6 @@ import { EuiSpacer, EuiSwitch, EuiPanel, - EuiText, - EuiLink, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -102,12 +100,7 @@ export default class extends Component { - Link to some help - - }> + compressed="horizontal"> From 564a35efd4aee2e37b986cce7efd075f15c040e8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 30 Jul 2019 18:48:19 -0400 Subject: [PATCH 15/19] Fix IE --- .../described_form_group.test.js.snap | 3 ++- .../__snapshots__/form_row.test.js.snap | 17 ++++++++++++----- src/components/form/form_row/_form_row.scss | 8 ++++++-- src/components/form/form_row/form_row.js | 6 ++++-- 4 files changed, 24 insertions(+), 10 deletions(-) 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 a97b0af676f..749e2d4e3df 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 @@ -330,6 +330,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` >