diff --git a/src/components/color_picker/__snapshots__/color_picker.test.js.snap b/src/components/color_picker/__snapshots__/color_picker.test.js.snap index 9156adca9ac..2c1ee677c44 100644 --- a/src/components/color_picker/__snapshots__/color_picker.test.js.snap +++ b/src/components/color_picker/__snapshots__/color_picker.test.js.snap @@ -25,7 +25,7 @@ exports[`renders EuiColorPicker 1`] = ` {([openLabel, closeLabel]) => ( input { @@ -73,6 +73,10 @@ &.euiComboBox-isOpen { .euiComboBox__inputWrap { @include euiFormControlFocusStyle; + + &--compressed { + @include euiFormControlFocusStyle($borderOnly: true); + } } } @@ -90,6 +94,7 @@ &.euiComboBox--compressed { .euiComboBox__inputWrap { + // height: $euiFormControlCompressedHeight; /* 2 */ line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; padding-bottom: 0; diff --git a/src/components/combo_box/combo_box_input/_combo_box_pill.scss b/src/components/combo_box/combo_box_input/_combo_box_pill.scss index b45de89e028..76885f306de 100644 --- a/src/components/combo_box/combo_box_input/_combo_box_pill.scss +++ b/src/components/combo_box/combo_box_input/_combo_box_pill.scss @@ -1,10 +1,22 @@ -// Overwrites the base styling of EuiBadge, to give it a larger size and margins -// that make sense in the input wrap. +/* + * 1. Overwrites the base styling of EuiBadge, to give it a larger size and margins + * that make sense in the input wrap. + */ .euiComboBoxPill { - margin: $euiSizeXS !important; // sass-lint:disable-line no-important + height: $euiSizeL - 2px; line-height: $euiSizeL - 2px; vertical-align: baseline; + &, + & + & /* 1 */ { + margin: $euiSizeXS; + } + + .euiComboBox--compressed &, + .euiComboBox--compressed & + & /* 1 */ { + margin: $euiSizeXS $euiSizeXS 0 0; + } + &--plainText { @include euiFont; @include euiTextTruncate; diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index e5e693ff171..b4ef09779af 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -28,6 +28,10 @@ // This is mostly here so that we can provide an inline version that doesn't have the // shadows and depth. .euiDatePicker { + .euiFormControlLayout { + height: auto; + } + &.euiDatePicker--shadow { .react-datepicker-popper { @include euiBottomShadowMedium; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap index 731246ec4a5..65499eca970 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap @@ -2,6 +2,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
start @@ -24,7 +24,7 @@ exports[`EuiFormControlLayoutDelimited is rendered 1`] = `
end @@ -40,7 +40,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`] class="euiFormControlLayout__childrenWrapper" > start @@ -61,7 +61,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`] end @@ -77,7 +77,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a string 1 class="euiFormControlLayout__childrenWrapper" > start @@ -91,7 +91,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a string 1 end 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 12cfbafe776..db4b0a93d0f 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -3,7 +3,7 @@ .euiFormControlLayout { // Let the height expand as needed - @include euiFormControlSize(auto, $includeAlternates: true); + @include euiFormControlSize($includeAlternates: true); } .euiFormControlLayout__childrenWrapper { @@ -18,7 +18,7 @@ // Match just the regular drop shadow of inputs @include euiFormControlDefaultShadow; display: flex; - align-items: center; + align-items: stretch; padding: 1px; /* 1 */ .euiFormControlLayout__childrenWrapper { @@ -28,25 +28,61 @@ .euiFormControlLayout__prepend, .euiFormControlLayout__append { flex-shrink: 0; - height: $euiFormControlLayoutGroupInputHeight; - line-height: $euiFontSize; + 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; + } + + &:last-child { + border-top-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; + border-bottom-right-radius: $euiFormControlLayoutGroupInputCompressedBorderRadius; + } &:disabled { background-color: $euiFormBackgroundDisabledColor; color: $euiFormControlDisabledColor; // ensures established contrast } + // 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, + &.euiIcon { + width: $euiSizeL; + } + } + } + &.euiFormLabel, &.euiText { white-space: nowrap; margin-bottom: 0; padding: $euiFormControlPadding; border: none; - background-color: $euiFormInputGroupLabelBackground; line-height: $euiFontSize; } + + &.euiButtonIcon, + &.euiIcon { + padding: 0 $euiSizeS; + width: $euiSizeXL; + border: none; + transform: none !important; + } } // @@ -64,22 +100,28 @@ // Compressed alterations &.euiFormControlLayout--compressed { + @include euiFormControlDefaultShadow($borderOnly: true); + border-radius: $euiBorderRadius / 2; + .euiFormControlLayout__prepend, .euiFormControlLayout__append { - height: $euiFormControlLayoutGroupInputCompressedHeight; + &: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-top: $euiFormControlCompressedPadding; - padding-bottom: $euiFormControlCompressedPadding; + padding: $euiFormControlCompressedPadding; } } } - > .euiFormControlLayout--compressed { - height: $euiFormControlLayoutGroupInputCompressedHeight; - } - // // ReadOnly alterations &.euiFormControlLayout--readOnly { @@ -89,10 +131,17 @@ input { 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: $euiFormControlHeight; // Matching input height, as euiFormControlSize() does not apply to the smaller height to readOnly states + height: $euiFormControlCompressedHeight; + border-top-left-radius: $euiFormControlCompressedBorderRadius; + border-bottom-left-radius: $euiFormControlCompressedBorderRadius; } } } diff --git a/src/components/form/form_control_layout/_form_control_layout_range.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss similarity index 50% rename from src/components/form/form_control_layout/_form_control_layout_range.scss rename to src/components/form/form_control_layout/_form_control_layout_delimited.scss index 81c7af082c3..824785c0d1d 100644 --- a/src/components/form/form_control_layout/_form_control_layout_range.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -1,6 +1,11 @@ +@import '../variables'; +@import '../mixins'; + .euiFormControlLayoutDelimited { // Match just the regular drop shadow of inputs @include euiFormControlDefaultShadow; + display: flex; + align-items: stretch; padding: 1px; /* 1 */ > .euiFormControlLayout__childrenWrapper { @@ -8,18 +13,34 @@ align-items: center; } - input { - height: $euiFormControlLayoutGroupInputHeight; + &[class*='--compressed'] { + @include euiFormControlDefaultShadow($borderOnly: true); + border-radius: $euiBorderRadius / 2; + + .euiFormControlLayoutDelimited__input { + height: 100%; + padding-top: 0; // Fixes IE + padding-bottom: 0; // Fixes IE + padding-left: $euiFormControlCompressedPadding; + padding-right: $euiFormControlCompressedPadding; + } + + .euiFormControlLayoutIcons { + padding-left: $euiFormControlCompressedPadding; + padding-right: $euiFormControlCompressedPadding; + } } - &[class*='--compressed'] input { - height: $euiFormControlLayoutGroupInputCompressedHeight; - padding-top: 0; // Fixes IE - padding-bottom: 0; // Fixes IE + &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper { + width: 100%; } - &[class*='--fullWidth'] input { - max-width: none; + &[class*='--readOnly'] { + @include euiFormControlReadOnlyStyle; + + input { + background-color: transparent; // Ensures the input and layout don't double up on background color + } } .euiFormControlLayoutIcons { @@ -36,14 +57,17 @@ } } -.euiFormControlLayoutDelimited__child--noStyle { +.euiFormControlLayoutDelimited__input { // sass-lint:disable-block no-important box-shadow: none !important; border-radius: 0 !important; -} - -.euiFormControlLayoutDelimited__child--centered { text-align: center; + height: 100%; + min-width: 0; // Fixes FF + + .euiFormControlLayoutDelimited[class*='--compressed'] & { + max-width: none; + } } .euiFormControlLayoutDelimited__delimeter { diff --git a/src/components/form/form_control_layout/_form_control_layout_icons.scss b/src/components/form/form_control_layout/_form_control_layout_icons.scss index 5d2b4e12eb4..732b12d1dcb 100644 --- a/src/components/form/form_control_layout/_form_control_layout_icons.scss +++ b/src/components/form/form_control_layout/_form_control_layout_icons.scss @@ -10,11 +10,20 @@ > * + * { margin-left: $euiFormControlPadding / 2; } + + .euiFormControlLayout--compressed & { + left: $euiFormControlCompressedPadding; + } } .euiFormControlLayoutIcons--right { left: auto; right: $euiFormControlPadding; + + .euiFormControlLayout--compressed & { + left: auto; + right: $euiFormControlCompressedPadding; + } } // If the control is disabled, change the color of the icons diff --git a/src/components/form/form_control_layout/_index.scss b/src/components/form/form_control_layout/_index.scss index d14b350f0ef..a3a22b9f3a7 100644 --- a/src/components/form/form_control_layout/_index.scss +++ b/src/components/form/form_control_layout/_index.scss @@ -1,7 +1,7 @@ @import 'variables'; @import 'mixins'; @import 'form_control_layout'; -@import 'form_control_layout_range'; +@import 'form_control_layout_delimited'; @import 'form_control_layout_icons'; @import 'form_control_layout_clear_button'; @import 'form_control_layout_custom_icon'; diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss index 8a174285f9a..bd4ab8c56e5 100644 --- a/src/components/form/form_control_layout/_mixins.scss +++ b/src/components/form/form_control_layout/_mixins.scss @@ -1,14 +1,22 @@ -@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right') { - $iconPaddingStart: $euiSizeXXL; +@import '../variables'; + +@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { + $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding; + $secondIconSize: $euiFormControlPadding + $euiSize; + + @if ($compressed) { + $firstIconSize: $euiFormControlCompressedPadding + $euiSize + $euiFormControlCompressedPadding; + $secondIconSize: $euiFormControlCompressedPadding + $euiSize; + } @if variable-exists(numOfIcons) == false { @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().'; } @else if $numOfIcons == 1 { - padding-#{$side}: $iconPaddingStart; + padding-#{$side}: $firstIconSize; } @else if $numOfIcons == 2 { - padding-#{$side}: $iconPaddingStart + $euiSize; + padding-#{$side}: $firstIconSize + $secondIconSize; } @else if $numOfIcons == 3 { - padding-#{$side}: $iconPaddingStart + ($euiSize * 2) + $euiSizeS; + padding-#{$side}: $firstIconSize + ($secondIconSize * 2); } } diff --git a/src/components/form/form_control_layout/_variables.scss b/src/components/form/form_control_layout/_variables.scss index 8e04c7aeba1..75232099a40 100644 --- a/src/components/form/form_control_layout/_variables.scss +++ b/src/components/form/form_control_layout/_variables.scss @@ -6,3 +6,4 @@ $euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px; /* 1 */ $euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px; /* 1 */ +$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2; diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx index 56f3b34481a..57a6a426dc4 100644 --- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx +++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx @@ -49,8 +49,7 @@ function addClassesToControl(control: ReactElement) { return cloneElement(control, { className: classNames( control.props.className, - 'euiFormControlLayoutDelimited__child--noStyle', - 'euiFormControlLayoutDelimited__child--centered' + 'euiFormControlLayoutDelimited__input' ), }); } diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss index 93e2f795623..26db7bbcebb 100644 --- a/src/components/form/select/_select.scss +++ b/src/components/form/select/_select.scss @@ -14,6 +14,7 @@ padding-bottom: 0; /* 2 */ &--compressed { + @include euiFormControlWithIcon($side: 'right', $compressed: true); /* 1 */ line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; /* 2 */ padding-bottom: 0; /* 2 */ diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss index 07460eba20b..2d96c6a81b0 100644 --- a/src/components/form/super_select/_super_select_control.scss +++ b/src/components/form/super_select/_super_select_control.scss @@ -24,6 +24,7 @@ } &--compressed { + @include euiFormControlWithIcon($side: 'right', $compressed: true); /* 1 */ line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; /* 2 */ padding-bottom: 0; /* 2 */