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

[Emotion] Convert EuiFlyout #6108

Closed
wants to merge 33 commits into from
Closed

[Emotion] Convert EuiFlyout #6108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4e1db78
Merge pull request #1 from elastic/main
breehall Feb 28, 2022
0671ea5
Merge branch 'main' of https://github.com/breehall/eui
breehall Mar 9, 2022
b2acbfe
Merge branch 'main' of https://github.com/breehall/eui
breehall Mar 15, 2022
9ccab1b
Merge branch 'main' of https://github.com/breehall/eui
breehall Apr 6, 2022
91bfff4
Merge branch 'main' of https://github.com/breehall/eui
breehall Apr 19, 2022
1e52a2a
Merge branch 'main' of https://github.com/breehall/eui
breehall Apr 28, 2022
f0b9331
Initial groundwork for Flyout conversion. Created a "forms" maxWidth …
breehall Apr 29, 2022
3c01b90
Pulled in latest code from main, clean up branch
breehall Jun 21, 2022
aaf06bd
Converted EuiFlyout Header, Body, and Footer component to Emotion. Up…
breehall Jun 22, 2022
16091ff
Progress on EUI Flyout conversion
breehall Jun 27, 2022
005b60a
Created EuiFlyoutContext in order to pass the padding size to EuiFlyo…
breehall Jul 11, 2022
043cbd7
commit
breehall Jul 12, 2022
ba7a2a2
Footer styles
breehall Jul 13, 2022
d503d66
Merge branch 'main' of https://github.com/breehall/eui into emotion/f…
breehall Jul 21, 2022
3ae673e
Merge branch 'main' of https://github.com/breehall/eui into emotion/f…
breehall Aug 1, 2022
40a8d39
Merge branch 'main' of https://github.com/breehall/eui into emotion/f…
breehall Aug 1, 2022
5e41701
Convert EuiFlyout styles to Emotion
breehall Aug 2, 2022
2a4c9fa
Convert EuiFlyout styles to Emotion
breehall Aug 3, 2022
a877c8f
Broke each child component's styling into separate files
breehall Aug 3, 2022
4c98c72
updated padding styles to use logicalCSS
breehall Aug 3, 2022
0d4dca8
Removed converted Sass files. Updated required test cases and snapsho…
breehall Aug 4, 2022
5530abc
CHANGELOG
breehall Aug 4, 2022
adaecd9
Updated provider snapshots
breehall Aug 4, 2022
cf171b3
Updated EuiCollapsibleNav Cypress test. The test responsible for vali…
breehall Aug 8, 2022
c453605
Resolved styling bug that caused left side flyout close buttons to ap…
breehall Aug 8, 2022
b41e35b
Removed the use of EuiFlyoutContext in EuiFlyoutHeader. Placed the Eu…
breehall Aug 30, 2022
fb78caf
Removed the use of EuiFlyoutContext in EuiFlyoutBody. Placed the EuiF…
breehall Aug 30, 2022
ba248ba
Removed the use of EuiFlyoutContext in EuiFlyoutFooter. Placed the Eu…
breehall Aug 30, 2022
14f237b
Removed style files for EuiFlyout children (header, body, and footer)…
breehall Aug 30, 2022
0609425
Removed the EuiFlyoutContext object and its reference in EuiFlyout
breehall Aug 30, 2022
507409d
Merged in the latest breakpoint changes from main with current code a…
breehall Aug 30, 2022
aa9bd0e
Updated select styles to use LogicalCSS properties. Updated snapshots…
breehall Aug 30, 2022
d9535fd
Remerged Flyout types back into Flyout.tsx as we are no longer using …
breehall Aug 31, 2022
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
36 changes: 18 additions & 18 deletions src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -66,15 +66,15 @@ Array [
>
<nav
aria-label="aria-label"
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav testClass1 testClass2"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
data-test-subj="test subject string"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -112,14 +112,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 240px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -162,14 +162,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -208,14 +208,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -253,14 +253,14 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
data-focus-lock-disabled="disabled"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width:320px"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -298,14 +298,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -349,14 +349,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 320px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down Expand Up @@ -395,14 +395,14 @@ Array [
data-focus-lock-disabled="false"
>
<nav
class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
class="euiFlyout euiFlyout--overlay euiFlyout--left euiFlyout--padding-none euiCollapsibleNav emotion-euiFlyout-euiFlyoutHeader-euiFlyoutBody-euiFlyoutFooter-overlay-left"
id="id"
style="width: 240px;"
tabindex="-1"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-1cd4sys-fill-text-hoverStyles-EuiButtonIcon-closeButton-closeButton--outside-closeButton--outside-left"
data-test-subj="euiFlyoutCloseButton"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/collapsible_nav/collapsible_nav.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('EuiCollapsibleNav', () => {
cy.mount(<Nav />);
cy.wait(400);
cy.get('[data-test-subj="navSpecButton"]').realClick();
cy.get('.euiOverlayMask').realClick();
cy.get('.euiOverlayMask').realClick({ position: 'bottomRight' });
expect(cy.get('#navSpec').should('not.exist'));
});

Expand Down
Loading