Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix combobox appearance when compressed and in-group #1371

Merged
merged 1 commit into from
Aug 23, 2024

Conversation

AMoo-Miki
Copy link
Collaborator

@AMoo-Miki AMoo-Miki commented Aug 22, 2024

Description

Fix combobox appearance when compressed, with pills, and in group

Also:

  • Adjust prepend and appends in form layouts

diff

Check List

  • New functionality includes testing.
  • New functionality has been documented.
  • All tests pass
    • yarn lint
    • yarn test-unit
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

@AMoo-Miki AMoo-Miki changed the title Fix combobox appearence when compressed and in-group Fix combobox appearance when compressed and in-group Aug 22, 2024
@AMoo-Miki AMoo-Miki force-pushed the cb-compressed-in-group branch from 61122b4 to af9a9bc Compare August 22, 2024 04:32
Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you post a screenshot? Just want to relate the changes to reality

}

.ouiComboBoxPill--plainText {
line-height: calc($ouiSizeL - 2px);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why ouiSizeL? What is the 2px based on? borders?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$ouiSizeL is the original value for the line-height of .ouiComboBoxPill--plainText. However, all in-group elements have a - 2px either by using $ouiFormControlLayoutGroupInputCompressedHeight or when the values are not standard, by directly performing the - 2px. This is because the group wrapper adds a top and bottom border around the entire group.

Also:
* Adjust prepend and appends in form layouts

Signed-off-by: Miki <[email protected]>
@AMoo-Miki AMoo-Miki force-pushed the cb-compressed-in-group branch from af9a9bc to a5315f8 Compare August 23, 2024 05:08
Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for diff

@@ -76,6 +76,20 @@
&.ouiComboBox__inputWrap-isLoading.ouiComboBox__inputWrap-isClearable {
@include ouiFormControlLayoutPadding(3); /* 2 */
}

&--inGroup#{&}--compressed {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't realize interpolation worked inside selectors

@AMoo-Miki AMoo-Miki merged commit ce392b5 into opensearch-project:main Aug 23, 2024
17 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Aug 23, 2024
)

Also:
* Adjust prepend and appends in form layouts

Signed-off-by: Miki <[email protected]>
(cherry picked from commit ce392b5)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AMoo-Miki pushed a commit that referenced this pull request Aug 23, 2024
) (#1372)

Also:
* Adjust prepend and appends in form layouts


(cherry picked from commit ce392b5)

Signed-off-by: Miki <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants