[EuiComboBox] Truncate long placeholder text with ellipsis (#4210)

elastic · Nov 9, 2020 · fd8bf9b · fd8bf9b
1 parent d99c683
commit fd8bf9b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Fixed bug in small `EuiImage`'s not respecting the optional sizes when `allowFullScreen` is set to true ([#4207](https://github.com/elastic/eui/pull/4207))
 - Fixed incorrect initial rendering of `EuiDualRange` thumbs when element width is 0 ([#4230](https://github.com/elastic/eui/pull/4230))
 - Fixed bug in `EuiSelectable` to call `searchProps.onChange` and `searchProps.onSearch` calls in `EuiSelectable` ([#4153](https://github.com/elastic/eui/pull/4153))
+- Fixed truncation of the `EuiComboBox` `placeholder` text ([#4210](https://github.com/elastic/eui/pull/4210))
 
 **Theme: Amsterdam**
 

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -4,7 +4,7 @@
 
   /**
    * 1. Allow pills to truncate their text with an ellipsis.
-   * 2. Don't allow pills to overlap with the caret, loading icon or clear button.
+   * 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button.
    * 3. The height on combo can be larger than normal text inputs.
    */
 
@@ -51,6 +51,10 @@
 
     &.euiComboBox__inputWrap-isLoading {
       @include euiFormControlLayoutPadding(2); /* 2 */
+
+      .euiComboBoxPlaceholder {
+        @include euiFormControlLayoutPadding(2); /* 2 */
+      }
     }
 
     &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable {
@@ -121,6 +125,10 @@
 
       &.euiComboBox__inputWrap-isLoading {
         @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */
+
+        .euiComboBoxPlaceholder {
+          @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */
+        }
       }
 
       &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable {

diff --git a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss
@@ -1,7 +1,10 @@
 .euiComboBoxPlaceholder {
+  @include euiTextTruncate;
+  // Afford for the caret. The loading state is accounted for in _combo_box.scss
+  @include euiFormControlLayoutPadding(1, 'right');
   position: absolute;
   pointer-events: none;
-  padding: 0 $euiSizeXS;
+  padding-left: $euiSizeXS;
   line-height: $euiSizeXL;
   color: $euiColorMediumShade;
   margin-bottom: 0 !important; // sass-lint:disable-line no-important