diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c0bca2d7c..5c19245548 100644 --- 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 index 3fa12e8298..2d6bb022e6 100644 --- 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 index 4048e59613..02f3822ca3 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 @@ -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 index 0beab25759..98c3573e4d 100644 --- 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