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.

Sign up for GitHub

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

Jump to bottom

[Emotion] Convert EuiComboBox #7950

Merged
merged 16 commits into from
Aug 8, 2024
Merged

[Emotion] Convert EuiComboBox #7950

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
036f334
Convert base EuiComboBox styles
cee-chen Aug 6, 2024
5f334c6
Convert append/prepend margin styles to Emotion
cee-chen Aug 6, 2024
bbdf2f4
Convert form control/input styles to Emotion
cee-chen Aug 7, 2024
32144e9
Convert input amsterdam overrides to Emotion
cee-chen Aug 7, 2024
4f3fccd
Convert pill styles to Emotion
cee-chen Aug 7, 2024
8e84be5
Convert options list styles to Emotion
cee-chen Aug 7, 2024
37b9d15
🔥 Remove unused EuiComboBoxOption component/CSS
cee-chen Aug 7, 2024
5bfac1b
Convert remaining option styles
cee-chen Aug 7, 2024
98490bc
Convert option title styles
cee-chen Aug 7, 2024
b8ceba2
Delete Sass files
cee-chen Aug 7, 2024
7f0f3f3
VRT updates
cee-chen Aug 7, 2024
701d4d1
changelog
cee-chen Aug 7, 2024
d8b173e
Fix plaintext prepend/append mobile wrapping
cee-chen Aug 7, 2024
b0ed250
Fix/DRY out EuiIcon vertical alignment in all prepend/append nodes
cee-chen Aug 7, 2024
2d0b7a0
Update Cypress test
cee-chen Aug 8, 2024
c6daf78
Skip tooltip VRT
cee-chen Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_With_Tooltip.png
View file
Open in desktop
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

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

Group titles/labels shifting slightly vertically is, if not intentional, then expected due to line height changes from using euiTitle() directly. It's likely also not an issue long term as we'll be switching to EuiSelectable's group labels in the future

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

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

Quick note that the pill being lower than before is intentional. It's more visually centered now (hooray!)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_With_Tooltip.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/7950.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Converted `EuiComboBox` to Emotion
20 changes: 10 additions & 10 deletions packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@

exports[`EuiComboBox renders 1`] = `
<div
class="euiComboBox testClass1 testClass2 emotion-euiTestCss"
class="euiComboBox testClass1 testClass2 emotion-euiComboBox-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
>
<div
class="euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<div
class="euiComboBox__inputWrap euiFormControlLayout--1icons"
class="euiComboBox__inputWrap emotion-euiComboBoxInputWrapper-multiSelect"
data-test-subj="comboBoxInput"
tabindex="-1"
>
Expand All @@ -27,7 +27,7 @@ exports[`EuiComboBox renders 1`] = `
aria-invalid="false"
aria-label="aria-label"
autocomplete="off"
class="euiComboBox__input"
class="euiComboBox__input emotion-euiComboBoxInput"
data-test-subj="comboBoxSearchInput"
id="generated-id__eui-combobox-id"
role="combobox"
Expand Down Expand Up @@ -62,21 +62,21 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
<body>
<div>
<div
class="euiComboBox euiComboBox-isOpen"
class="euiComboBox euiComboBox-isOpen emotion-euiComboBox"
data-test-subj="alsoGetsAppliedToOptionsList"
>
<div
class="euiPopover euiPopover-isOpen euiInputPopover emotion-euiPopover-block-EuiInputPopover"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
>
<div
class="euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<div
class="euiComboBox__inputWrap euiFormControlLayout--1icons"
class="euiComboBox__inputWrap emotion-euiComboBoxInputWrapper-multiSelect-open"
data-test-subj="comboBoxInput"
tabindex="-1"
>
Expand All @@ -86,7 +86,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
aria-expanded="true"
aria-invalid="false"
autocomplete="off"
class="euiComboBox__input"
class="euiComboBox__input emotion-euiComboBoxInput"
data-test-subj="comboBoxSearchInput"
id="generated-id__eui-combobox-id"
role="combobox"
Expand Down Expand Up @@ -153,11 +153,11 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
data-focus-lock-disabled="disabled"
>
<div
class="euiComboBoxOptionsList"
class="euiComboBoxOptionsList emotion-euiComboBoxOptionList"
data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
>
<div
class="euiComboBoxOptionsList__virtualization"
class="euiComboBoxOptionsList__virtualization emotion-euiComboBoxOptionList__virtualization"
style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
>
<div
Expand Down
147 changes: 0 additions & 147 deletions packages/eui/src/components/combo_box/_combo_box.scss
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/eui/src/components/combo_box/_index.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/eui/src/components/combo_box/combo_box.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ describe('EuiComboBox', () => {
);
cy.get('[data-test-subj="comboBoxSearchInput"]')
.invoke('width')
.should('be.eq', 354);
.should('be.eq', 356);
});
});

Expand Down
22 changes: 22 additions & 0 deletions packages/eui/src/components/combo_box/combo_box.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css } from '@emotion/react';

import { logicalCSS } from '../../global_styling';

export const euiComboBoxStyles = {
euiComboBox: css`
position: relative;
${logicalCSS('width', '100%')}
${logicalCSS('height', 'auto')}
`,
fullWidth: css`
${logicalCSS('max-width', '100%')}
`,
};
5 changes: 1 addition & 4 deletions packages/eui/src/components/combo_box/combo_box.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,13 +357,10 @@ describe('EuiComboBox', () => {
/>
);

expect(container.firstElementChild!.className).toContain('-fullWidth');
expect(container.innerHTML).toContain(
'euiFormControlLayout--fullWidth'
);
expect(container.innerHTML).toContain('euiComboBox--fullWidth');
expect(container.innerHTML).toContain(
'euiComboBox__inputWrap--fullWidth'
);
});

test('autoFocus', () => {
Expand Down
Loading
Loading