From c14d35df5ba2fa5e70ae95220192fcb7f19e196c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 18:30:55 -0400 Subject: [PATCH 01/12] More TS defs --- src/components/combo_box/index.d.ts | 1 + src/components/form/checkbox/index.d.ts | 1 + src/components/form/radio/index.d.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts index 51a0d8e3c05..8edec07a3ad 100644 --- a/src/components/combo_box/index.d.ts +++ b/src/components/combo_box/index.d.ts @@ -79,6 +79,7 @@ declare module '@elastic/eui' { export interface EuiComboBoxProps { id?: string; isDisabled?: boolean; + compressed?: boolean; className?: string; placeholder?: string; isLoading?: boolean; diff --git a/src/components/form/checkbox/index.d.ts b/src/components/form/checkbox/index.d.ts index 97a1a386f00..ec0d870bafd 100644 --- a/src/components/form/checkbox/index.d.ts +++ b/src/components/form/checkbox/index.d.ts @@ -24,6 +24,7 @@ declare module '@elastic/eui' { label?: ReactNode; type?: EuiCheckboxType; disabled?: boolean; + compressed?: boolean; indeterminate?: boolean; } diff --git a/src/components/form/radio/index.d.ts b/src/components/form/radio/index.d.ts index 25d1f103345..432612057fe 100644 --- a/src/components/form/radio/index.d.ts +++ b/src/components/form/radio/index.d.ts @@ -21,6 +21,7 @@ declare module '@elastic/eui' { export type EuiRadioGroupProps = CommonProps & Omit, 'onChange'> & { disabled?: boolean; + compressed?: boolean; name?: string; options?: EuiRadioGroupOption[]; idSelected?: string; From e8f43f4365b8e0a1bcad6f47820ce15215fb023d Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 22:36:45 -0400 Subject: [PATCH 02/12] Added doc section for prepend/appends and fixed the stylings based on the type of content .. mainly for including popovers or tooltips # Conflicts: # src/components/form/_variables.scss --- .../form_controls/form_controls_example.js | 57 ++++++ .../src/views/form_controls/prepend_append.js | 171 ++++++++++++++++++ .../date_picker/_date_picker_range.scss | 1 + src/components/form/_mixins.scss | 2 +- src/components/form/_variables.scss | 6 +- .../_form_control_layout.scss | 158 ++++++++-------- .../_form_control_layout_delimited.scss | 4 +- 7 files changed, 309 insertions(+), 90 deletions(-) create mode 100644 src-docs/src/views/form_controls/prepend_append.js diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index cad4de36cfc..4c61e9ea9f4 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -75,6 +75,10 @@ import Switch from './switch'; const switchSource = require('!!raw-loader!./switch'); const switchHtml = renderToHtml(Switch); +import PrependAppend from './prepend_append'; +const PrependAppendSource = require('!!raw-loader!./prepend_append'); +const PrependAppendHtml = renderToHtml(PrependAppend); + import FormControlLayout from './form_control_layout'; const formControlLayoutSource = require('!!raw-loader!./form_control_layout'); const formControlLayoutHtml = renderToHtml(FormControlLayout); @@ -315,6 +319,59 @@ export const FormControlsExample = { }, demo: , }, + { + title: 'Prepend and Append', + text: ( + +

+ Most form controls accept a prepend and{' '} + append prop that allows passing a single + node/string or an array of nodes/strings. Strings will be converted + into form labels and connected to the input via{' '} + htmlFor for accessibility. +

+

+ These are great for demarcating the input's metric like + "px" or "ms". You can also pass buttons for + input settings or additional filters. Just be sure to use + <EuiButtonEmpty size="xs" />. +

+ + ), + source: [ + { + type: GuideSectionTypes.JS, + code: PrependAppendSource, + }, + { + type: GuideSectionTypes.HTML, + code: PrependAppendHtml, + }, + ], + demo: , + snippet: [ + ``, + ` + Popover + + } + closePopover={() => {}} + /> + } + append={[ + , + "Label", + ]} +/>`, + ], + }, { title: 'Form control layout', source: [ diff --git a/src-docs/src/views/form_controls/prepend_append.js b/src-docs/src/views/form_controls/prepend_append.js new file mode 100644 index 00000000000..0abeceed18f --- /dev/null +++ b/src-docs/src/views/form_controls/prepend_append.js @@ -0,0 +1,171 @@ +import React, { Fragment, useState } from 'react'; + +import { + EuiButtonEmpty, + EuiButtonIcon, + EuiFieldText, + EuiIcon, + EuiIconTip, + EuiPopover, + EuiSpacer, + EuiSwitch, + EuiText, + EuiToolTip, +} from '../../../../src/components'; + +export default () => { + const [isCompressed, setCompressed] = useState(false); + const [isDisabled, setDisabled] = useState(false); + const [isReadOnly, setReadOnly] = useState(false); + + return ( + + setCompressed(e.target.checked)} + /> +   + setDisabled(e.target.checked)} + /> +   + setReadOnly(e.target.checked)} + /> + + + Tooltip + + } + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + + Popover + + } + closePopover={() => {}} + /> + } + append={ + + Tooltip + + } + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + + + + } + append={ + + Tooltip + + } + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + } + append={} + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + , + , + ]} + append={[ + } + closePopover={() => {}} + />, + , + ]} + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + } + closePopover={() => {}} + /> + } + prepend={ + + + + } + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + , 'String']} + append={[ + 'String', + , + ]} + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + + + , + ]} + append={[ + } + closePopover={() => {}} + />, + 'String', + ]} + compressed={isCompressed} + disabled={isDisabled} + readOnly={isReadOnly} + /> + + ); +}; diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index cedeb5772b4..6d169eb0744 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -48,6 +48,7 @@ } > .euiDatePickerRange__delimeter { + background-color: transparent !important; // override .euiFormControlLayout--group .euiText line-height: 1 !important; flex: 0 0 auto; padding-left: $euiFormControlPadding / 2; diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index d55408b48f8..524665376dc 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -149,7 +149,7 @@ @mixin euiFormControlReadOnlyStyle { cursor: default; // Use transparency since there is no border and in case form is on a non-white background - background: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88); + background: $euiFormBackgroundReadOnlyColor; border-color: transparent; box-shadow: none; } diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index c723b784d3e..6d098bf233a 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -21,11 +21,13 @@ $euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; // Coloring $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; +$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88) !default; $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 60%) !default; $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; -$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8); -$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%); +$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default; +$euiFormInputGroupLabelBackground: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .75) !default; +$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 10%) !default; diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index e8f69276dd7..ab9ff1e2a6e 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -21,6 +21,16 @@ align-items: stretch; padding: 1px; /* 1 */ + // Force the stretch of any children so they expand the full height of the control + > *, + .euiPopover__anchor, + .euiButtonEmpty, + .euiText, + .euiFormLabel, + .euiButtonIcon { + height: 100%; + } + .euiFormControlLayout__childrenWrapper { flex-grow: 1; } @@ -30,79 +40,86 @@ @include euiTextTruncate; flex-shrink: 0; height: 100%; - line-height: $euiFontSize - 1px; // The 1px less aligns the icons better - border: none; // remove any border in case it exists border-radius: 0; - &:first-child { - border-top-left-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - border-bottom-left-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - } + // ICONS - &:last-child { - border-top-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - border-bottom-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - } + &.euiIcon, + .euiIcon { + padding: 0 $euiSizeS; + width: $euiSizeXL; + border-radius: 0; - &:disabled { - background-color: $euiFormBackgroundDisabledColor; - color: $euiFormControlDisabledColor; // ensures established contrast + &:not(:focus) { + background-color: $euiFormInputGroupLabelBackground; + } } - // sass-lint:disable-block no-important - // This is the only way to target specific components to override styling - &.euiFormLabel, - &.euiText, - &.euiButtonIcon, - &.euiIcon { - background-color: $euiFormInputGroupLabelBackground; - & + .euiFormControlLayout__prepend, - & + .euiFormControlLayout__append { - padding-left: 0 !important; + &.euiButtonIcon, + &.euiButtonEmpty, + .euiButtonIcon, + .euiButtonEmpty { + transform: none !important; - &.euiButtonIcon, - &.euiIcon { - width: $euiSizeL; - } + // Undo sizing from icons inside buttons + .euiIcon { + background: none !important; + padding: 0; + width: $euiSize; } } + } - &.euiFormLabel, - &.euiText { - max-width: 50%; - white-space: nowrap; - margin-bottom: 0; - padding: $euiFormControlPadding; - border: none; - line-height: $euiFontSize; - } + .euiButtonIcon { + padding: 0 $euiSizeS; + width: $euiSizeXL; + border-radius: 0; - &.euiButtonIcon, - &.euiIcon { - padding: 0 $euiSizeS; - width: $euiSizeXL; - border: none; - transform: none !important; + &:not(:focus) { + background-color: $euiFormInputGroupLabelBackground; } } - // In case a tooltip was passed as a pre/append - // The cloned element's classname would have been passed to the tooltip not the anchor - .euiToolTipAnchor { - padding: $euiSizeXS; + .euiToolTipAnchor > .euiIcon { + height: 100%; background-color: $euiFormInputGroupLabelBackground; + padding: 0 $euiSizeS; + width: $euiSizeXL; + border-radius: 0; + } + + > .euiFormControlLayout__prepend, + > .euiFormControlLayout__append { + max-width: 50%; // Make sure max-width only applies to the outer most append/prepend element + } + + // sass-lint:disable-block no-important + // This is the only way to target specific components to override styling + + // TEXT + + .euiFormLabel, + .euiText { + background-color: $euiFormInputGroupLabelBackground; + padding: $euiFormControlPadding; + line-height: $euiFontSize !important; + cursor: default !important; // pointer cursor on some form labels but not others is confusing } // - // Borders + // BORDERS on buttons only - .euiFormControlLayout__prepend { - border-right: 1px solid $euiFormBorderColor; + .euiButtonEmpty { + border-right: $euiFormInputGroupBorder; } - .euiFormControlLayout__append { - border-left: 1px solid $euiFormBorderColor; + // Any buttons after the children wrapper or inside any elements after the children wrapper + // Need to swap border sides + .euiFormControlLayout__childrenWrapper ~ .euiButtonEmpty, + .euiFormControlLayout__childrenWrapper ~ * .euiButtonEmpty { + border-right: none; + border-left: $euiFormInputGroupBorder; } // @@ -111,23 +128,12 @@ &.euiFormControlLayout--compressed { @include euiFormControlDefaultShadow($borderOnly: true); border-radius: $euiBorderRadius / 2; + overflow: hidden; // Keeps backgrounds inside border radius - .euiFormControlLayout__prepend, - .euiFormControlLayout__append { - &:first-child { - border-top-left-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - border-bottom-left-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - } - - &:last-child { - border-top-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - border-bottom-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; - } - - &.euiFormLabel, - &.euiText { - padding: $euiFormControlCompressedPadding; - } + // Padding + .euiFormLabel, + .euiText { + padding: $euiFormControlCompressedPadding; } } @@ -141,22 +147,4 @@ background-color: transparent; // Ensures the input and layout don't double up on background color } } - - // - // ReadOnly-Compressed alterations - - &.euiFormControlLayout--compressed.euiFormControlLayout--readOnly { - .euiFormControlLayout__prepend, - .euiFormControlLayout__append { - height: $euiFormControlCompressedHeight; - border-top-left-radius: $euiFormControlCompressedBorderRadius; - border-bottom-left-radius: $euiFormControlCompressedBorderRadius; - } - } -} - -.euiFormControlLayout-isDisabled, -.euiFormControlLayout-isDisabled .euiDatePickerRange--inGroup { - background-color: $euiFormBackgroundDisabledColor; - color: $euiColorDarkShade; } diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 17a1c7dbafa..266c5567259 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -83,8 +83,8 @@ .euiFormControlLayoutDelimited__delimeter { // sass-lint:disable-block no-important - // Override EuiText line-height - line-height: 1 !important; + background-color: transparent !important; // Override .euiFormControlLayout--group > .euiFormLabel + line-height: 1 !important; // Override EuiText line-height flex: 0 0 auto; padding-left: $euiFormControlPadding / 2; padding-right: $euiFormControlPadding / 2; From c256bdc8994fd3c7eccc1875b38b97340d4a081c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 22:42:34 -0400 Subject: [PATCH 03/12] Fix up dark mode colors --- src/components/form/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 6d098bf233a..03663218b49 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -22,12 +22,12 @@ $euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; $euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88) !default; -$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 60%) !default; +$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default; -$euiFormInputGroupLabelBackground: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .75) !default; -$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 10%) !default; +$euiFormInputGroupLabelBackground: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorLightShade), .75) !default; +$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default; From 09bfb8a195ec910e31522302d158618bd5882f5d Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 22:53:23 -0400 Subject: [PATCH 04/12] More TS defs --- src/components/form/checkbox/index.d.ts | 1 + src/components/form/field_search/index.d.ts | 6 ++++-- src/components/form/form_row/index.d.ts | 4 +++- src/components/form/switch/index.d.ts | 1 + 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/form/checkbox/index.d.ts b/src/components/form/checkbox/index.d.ts index ec0d870bafd..5a9f43ad112 100644 --- a/src/components/form/checkbox/index.d.ts +++ b/src/components/form/checkbox/index.d.ts @@ -51,6 +51,7 @@ declare module '@elastic/eui' { options: EuiCheckboxGroupOption[]; idToSelectedMap: EuiCheckboxGroupIdToSelectedMap; onChange: ChangeEventHandler; + compressed?: boolean; } export const EuiCheckboxGroup: FunctionComponent< diff --git a/src/components/form/field_search/index.d.ts b/src/components/form/field_search/index.d.ts index 0fb4de69332..24637df7066 100644 --- a/src/components/form/field_search/index.d.ts +++ b/src/components/form/field_search/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { FunctionComponent, InputHTMLAttributes } from 'react'; +import { FunctionComponent, InputHTMLAttributes, Ref } from 'react'; declare module '@elastic/eui' { /** @@ -17,8 +17,10 @@ declare module '@elastic/eui' { isInvalid?: boolean; fullWidth?: boolean; isLoading?: boolean; - incremental?: boolean; onSearch?: (value: string) => void; + incremental?: boolean; + compressed?: boolean; + inputRef?: Ref; } export const EuiFieldSearch: FunctionComponent< diff --git a/src/components/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts index 564e4f58742..963a1b10aed 100644 --- a/src/components/form/form_row/index.d.ts +++ b/src/components/form/form_row/index.d.ts @@ -20,7 +20,6 @@ declare module '@elastic/eui' { label?: ReactNode; labelAppend?: ReactNode; describedByIds?: string[]; - compressed?: boolean; display?: | 'row' | 'rowCompressed' @@ -28,6 +27,9 @@ declare module '@elastic/eui' { | 'center' | 'centerCompressed' | 'columnCompressedSwitch'; + // **DEPRECATED: use `display: rowCompressed` instead.** + compressed?: boolean; + // **DEPRECATED: use `display: center` instead.** displayOnly?: boolean; }; diff --git a/src/components/form/switch/index.d.ts b/src/components/form/switch/index.d.ts index caaea6c1bdc..3afc67edcb7 100644 --- a/src/components/form/switch/index.d.ts +++ b/src/components/form/switch/index.d.ts @@ -9,6 +9,7 @@ declare module '@elastic/eui' { export type EuiSwitchProps = CommonProps & InputHTMLAttributes & { label?: ReactNode; + compressed?: boolean; }; export const EuiSwitch: FunctionComponent; From b30fc992a6b00ba994d5486ac4cd712b4352c2eb Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 23:03:38 -0400 Subject: [PATCH 05/12] cl --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c3f42b8228..a2f5dc0a1c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `14.1.1`. +- Added missing `compressed` TS definitions to `EuiComboBox`, `EuiCheckboxGroup`, `EuiCheckbox`, `EuiFieldSearch`, `EuiRadioGroup`, `EuiSwitch` ([#2338](https://github.com/elastic/eui/pull/2338)) + +**Bug fixes** + +- Fixed styling for `prepend` and `append` nodes that may be popovers or tooltips ([#2338](https://github.com/elastic/eui/pull/2338)) ## [`14.1.1`](https://github.com/elastic/eui/tree/v14.1.1) From 36ac2ca2b1dd31cac1c50c30e13ff73d4d816c7c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 23:19:16 -0400 Subject: [PATCH 06/12] Reduce spacing when text is not alone --- src/components/form/_variables.scss | 2 +- .../_form_control_layout.scss | 26 +++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 03663218b49..63254b9348d 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -29,5 +29,5 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default; -$euiFormInputGroupLabelBackground: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorLightShade), .75) !default; +$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 65%, 40%) !default; $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default; diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index ab9ff1e2a6e..83267d73915 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -105,6 +105,19 @@ padding: $euiFormControlPadding; line-height: $euiFontSize !important; cursor: default !important; // pointer cursor on some form labels but not others is confusing + + // If the next sibiling is not the input, pull it closer to the text to reduce space + + *:not(.euiFormControlLayout__childrenWrapper) { + margin-left: -$euiFormControlPadding; + } + } + + // If any child that is not the input has a next sibling that is text, pull it closer to the text to reduce space + > *:not(.euiFormControlLayout__childrenWrapper) { + + .euiFormLabel, + + .euiText { + margin-left: -$euiFormControlPadding; + } } // @@ -134,6 +147,19 @@ .euiFormLabel, .euiText { padding: $euiFormControlCompressedPadding; + + // If the next sibiling is not the input, pull it closer to the text to reduce space + + *:not(.euiFormControlLayout__childrenWrapper) { + margin-left: -$euiFormControlCompressedPadding; + } + } + + // If any child that is not the input has a next sibling that is text, pull it closer to the text to reduce space + > *:not(.euiFormControlLayout__childrenWrapper) { + + .euiFormLabel, + + .euiText { + margin-left: -$euiFormControlCompressedPadding; + } } } From 5947e6d2e23b1747bdcbc4c96be15bde1c9133d9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Sep 2019 00:40:58 -0400 Subject: [PATCH 07/12] Inset focus ring for icon buttons --- .../form/form_control_layout/_form_control_layout.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index 83267d73915..dc90cc3d9b1 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -49,10 +49,7 @@ padding: 0 $euiSizeS; width: $euiSizeXL; border-radius: 0; - - &:not(:focus) { - background-color: $euiFormInputGroupLabelBackground; - } + background-color: $euiFormInputGroupLabelBackground; } @@ -75,9 +72,10 @@ padding: 0 $euiSizeS; width: $euiSizeXL; border-radius: 0; + background-color: $euiFormInputGroupLabelBackground; - &:not(:focus) { - background-color: $euiFormInputGroupLabelBackground; + &:focus { + box-shadow: inset 0 0 0 2px $euiFocusRingColor; } } From 68cdff6217ef3e81074feadf44e2a6cdc68dc702 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 16:05:32 -0400 Subject: [PATCH 08/12] Add EuiButton to sibling spacer of EuiFormRow --- src/components/form/form_row/_form_row.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 4f16dea7551..27a33eba7dc 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -7,7 +7,8 @@ flex-direction: column; /* 1 */ max-width: $euiFormMaxWidth; - + .euiFormRow { + + .euiFormRow, + + .euiButton { margin-top: $euiSize; } } From 2285ccaa56dcf5c1b1a2577f011b6e829c862886 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 16:22:24 -0400 Subject: [PATCH 09/12] Fix EuiSuggest usage of append for status --- .../suggest/__snapshots__/suggest_input.test.js.snap | 4 ++-- src/components/suggest/_suggest_input.scss | 9 ++------- src/components/suggest/suggest_input.js | 9 ++++++--- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/suggest/__snapshots__/suggest_input.test.js.snap b/src/components/suggest/__snapshots__/suggest_input.test.js.snap index a3330c560fe..d4ee3bc430e 100644 --- a/src/components/suggest/__snapshots__/suggest_input.test.js.snap +++ b/src/components/suggest/__snapshots__/suggest_input.test.js.snap @@ -27,10 +27,10 @@ exports[`EuiSuggestInput is rendered 1`] = ` /> - + content={tooltipContent || statusMap[status].tooltip}> + ); From f422f4a0ced547e25ef807288de30e978b03e6b6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 16:24:59 -0400 Subject: [PATCH 10/12] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2f5dc0a1c9..8438309757f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added missing `compressed` TS definitions to `EuiComboBox`, `EuiCheckboxGroup`, `EuiCheckbox`, `EuiFieldSearch`, `EuiRadioGroup`, `EuiSwitch` ([#2338](https://github.com/elastic/eui/pull/2338)) +- Added auto-margin between `EuiFormRow` and `EuiButton` ([#2338](https://github.com/elastic/eui/pull/2338)) **Bug fixes** From 503e21a7a069133b631983752ab9aa785d798e8c Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 16:54:32 -0400 Subject: [PATCH 11/12] Added border to readOnly inputs --- src/components/form/_mixins.scss | 2 +- src/components/form/_variables.scss | 2 +- .../form/form_control_layout/_form_control_layout.scss | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 524665376dc..cb8be957403 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -151,7 +151,7 @@ // Use transparency since there is no border and in case form is on a non-white background background: $euiFormBackgroundReadOnlyColor; border-color: transparent; - box-shadow: none; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; } /** diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 63254b9348d..c556fec274e 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -21,7 +21,7 @@ $euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; // Coloring $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; -$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88) !default; +$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .95) !default; $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index dc90cc3d9b1..8e05136350a 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -165,7 +165,6 @@ // ReadOnly alterations &.euiFormControlLayout--readOnly { @include euiFormControlReadOnlyStyle; - padding: 0; /* 1 */ input { background-color: transparent; // Ensures the input and layout don't double up on background color From 48f021ce7a3b88c1c2357959f180573632f0b08d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 16:59:04 -0400 Subject: [PATCH 12/12] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8438309757f..2d8945e7c13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added missing `compressed` TS definitions to `EuiComboBox`, `EuiCheckboxGroup`, `EuiCheckbox`, `EuiFieldSearch`, `EuiRadioGroup`, `EuiSwitch` ([#2338](https://github.com/elastic/eui/pull/2338)) - Added auto-margin between `EuiFormRow` and `EuiButton` ([#2338](https://github.com/elastic/eui/pull/2338)) +- Added border to `[readOnly]` inputs ([#2338](https://github.com/elastic/eui/pull/2338)) **Bug fixes**