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 */