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