Fix combobox appearance when compressed, with pills, and in group (op…

…ensearch-project#1371) Also: * Adjust prepend and appends in form layouts Signed-off-by: Miki <[email protected]>
virajsanghvi · Aug 23, 2024 · ce392b5 · ce392b5
1 parent 7bdea7a
commit ce392b5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,11 +8,10 @@
 
 ### 📈 Features/Enhancements
 
-- Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))
-- Add a property to control the gap between an icon and the content of OuiButton and OuiButtonEmpty ([#1367](https://github.com/opensearch-project/oui/pull/1367))
-
 ### 🐛 Bug Fixes
 
+- Fix combobox appearance when compressed and in-group ([#1371](https://github.com/opensearch-project/oui/pull/1371))
+
 ### 🚞 Infrastructure
 
 ### 📝 Documentation
@@ -23,7 +22,16 @@
 
 ### 🔩 Tests
 
-## [Unreleased `1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)
+
+## [`1.11.0`](https://github.com/opensearch-project/oui/tree/1.11)
+
+### 📈 Features/Enhancements
+
+- Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))
+- Add a property to control the gap between an icon and the content of OuiButton and OuiButtonEmpty ([#1367](https://github.com/opensearch-project/oui/pull/1367))
+
+
+## [`1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)
 
 ### 📈 Features/Enhancements
 
@@ -72,7 +80,6 @@
 - Fix next reset for code blocks and super update button icon ([#1306])(https://github.com/opensearch-project/oui/pull/1306)
 - Fix the appearance of form controls in grouped layouts ([#1311])(https://github.com/opensearch-project/oui/pull/1311)
 - Fix QuickSelectPopover padding in SuperDatePicker ([#1315](https://github.com/opensearch-project/oui/pull/1315))
-- Fix now button to be secondary in SuperDatePicker ([#1320](https://github.com/opensearch-project/oui/pull/1320))
 
 ### 🚞 Infrastructure
 

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -76,6 +76,20 @@
     &.ouiComboBox__inputWrap-isLoading.ouiComboBox__inputWrap-isClearable {
       @include ouiFormControlLayoutPadding(3); /* 2 */
     }
+
+    &--inGroup#{&}--compressed {
+      height: $ouiFormControlLayoutGroupInputCompressedHeight; /* 2 */
+      line-height: $ouiFormControlLayoutGroupInputCompressedHeight; /* 2 */
+
+      .ouiComboBoxPill,
+      .ouiComboBoxPill + .ouiComboBoxPill {
+        margin: $ouiSizeXS $ouiSizeXS 0 0;
+      }
+
+      .ouiComboBoxPill--plainText {
+        line-height: calc($ouiSizeL - 2px);
+      }
+    }
   }
 
   /**
@@ -138,7 +152,19 @@
     }
   }
 
+  .ouiFormControlLayout--group {
+    .ouiComboBox__input {
+      height: ($ouiSizeXL - 2px);
+    }
+  }
+
   &.ouiComboBox--compressed {
+    .ouiFormControlLayout--group {
+      .ouiComboBox__input {
+        height: $ouiFormControlLayoutGroupInputCompressedHeight;
+      }
+    }
+
     .ouiComboBox__inputWrap {
       line-height: $ouiFormControlCompressedHeight; /* 2 */
       padding-top: 0;
@@ -165,13 +191,6 @@
     }
   }
 
-  // Overrides the top and bottom padding of 8px with ouiFormControlLayout--group 
-  // when append/prepend is enabled, original top, bottom padding was 1px
-  .ouiFormControlLayout--group {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
   // Overrides line-height of 16px coming from ouiFormControlLayout--group .ouiText
   .ouiFormControlLayout--group .ouiText {
     // sass-lint:disable-block no-important

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
@@ -18,14 +18,44 @@
   line-height: $ouiSizeL - 2px;
   vertical-align: baseline;
 
+  &.ouiBadge {
+    // A badge adds 1px border around the pill
+    line-height: $ouiSizeL - 4px;
+  }
+
   &,
   & + & /* 1 */ {
     margin: $ouiSizeXS;
   }
 
+  // In a group, reduce top and left margins and increase right margin by 1px
+  .ouiFormControlLayout--group &,
+  .ouiFormControlLayout--group & + & /* 1 */ {
+    margin: ($ouiSizeXS - 1px) ($ouiSizeXS + 1px) $ouiSizeXS ($ouiSizeXS - 1px);
+  }
+
+  &.ouiBadge,
+  &.ouiBadge + &.ouiBadge /* 1 */ {
+    margin: ($ouiSizeXS + 1px) $ouiSizeXS;
+  }
+
   .ouiComboBox--compressed &,
   .ouiComboBox--compressed & + & /* 1 */ {
+    margin: $ouiSizeXS $ouiSizeXS 0 0;
+    line-height: calc($ouiSizeL - 2px);
+  }
+
+  // In a group, reduce top and left margins and increase right margin by 1px
+  .ouiComboBox--compressed .ouiFormControlLayout--group &,
+  .ouiComboBox--compressed .ouiFormControlLayout--group & + & /* 1 */ {
+    margin: ($ouiSizeXS - 1px) ($ouiSizeXS + 1px) 0 -1px;
+  }
+
+  .ouiComboBox--compressed &.ouiBadge,
+  .ouiComboBox--compressed &.ouiBadge + &.ouiBadge /* 1 */ {
     margin: ($ouiSizeXS + 1px) $ouiSizeXS 0 0;
+    // A badge adds 1px border around
+    line-height: calc($ouiSizeL - 4px);
   }
 
   &--plainText {

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -141,7 +141,7 @@
   .ouiText {
     background-color: $ouiFormInputGroupLabelBackground;
     padding: $ouiFormControlPadding;
-    line-height: $ouiSize !important;
+    line-height: calc($ouiSize - 2px) !important;
     cursor: default !important; // pointer cursor on some form labels but not others is confusing
 
     // If the next sibling is not the input, pull it closer to the text to reduce space