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 #6213

Merged
merged 66 commits into from
Sep 14, 2022
Merged

[Emotion] Convert EuiFlyout #6213

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
18d3348
Removed Sass styling files for EuiFlyout
breehall Aug 31, 2022
61800ce
Created flyout.styles.ts
breehall Aug 31, 2022
7efcece
Broke out Flyout Footer styling into its own file and object. Includi…
breehall Sep 6, 2022
b5f5921
Moved FlyoutHeader styles out of flyout.styles.tsx and moved them to …
breehall Sep 6, 2022
3e18b05
Moved styles for FlyoutBody to a new flyout_body.styles.ts file. Comb…
breehall Sep 6, 2022
360a9a4
Removed Flyout close button styles from the base Flyout styles and m…
breehall Sep 6, 2022
de678da
Removed classToMap objects for Flyout sides and paddingSizes
breehall Sep 6, 2022
316be14
Updated required snapshots and a test case for collapsible_nav
breehall Sep 6, 2022
a0ac180
CHANGELOG
breehall Sep 7, 2022
937a79f
Updated tests for collapsible_nav
breehall Sep 7, 2022
9e608b1
Merge branch 'main' of https://github.com/breehall/eui into emotion/f…
breehall Sep 7, 2022
27e67a6
Updated branch with main
breehall Sep 7, 2022
15e6fd9
Converted the euiOverflowShadowStyles function back to an internal fu…
breehall Sep 12, 2022
c2aac17
Updated class names across EuiFlyout and Flyout children to match the…
breehall Sep 12, 2022
98332f6
Updated a few variables that converted pixel sizes to ints to no long…
breehall Sep 12, 2022
c224568
Removed paddingSize as a parameter to the Emotion styling function. H…
breehall Sep 12, 2022
77c00ca
Created the composeFlyoutSizing function to DRY out the Flyout sizing…
breehall Sep 12, 2022
2bf220a
Changes instances of euiTheme.levels.header to euiTheme.levels.flyout…
breehall Sep 12, 2022
186ead6
Updated CHANGELOG
breehall Sep 12, 2022
55de900
Restructured FlyoutBody styles and created a nested object structure …
breehall Sep 12, 2022
caa04ad
Resolved a bug that caused the Flyout close button (when placed outsi…
breehall Sep 12, 2022
eda6240
Updated required snapshots for EuiFlyout and EuiCollapsibleNav
breehall Sep 12, 2022
fab04ac
Code cleanup
breehall Sep 12, 2022
204820c
Created _EuiYScrollWithShadows interface for euiYScrollWithShadows fu…
breehall Sep 13, 2022
95886a3
Update src/components/flyout/flyout_body.tsx
breehall Sep 13, 2022
dedda37
Update src/components/flyout/flyout_body.tsx
breehall Sep 13, 2022
511c5f9
Update src/components/flyout/flyout_body.tsx
breehall Sep 13, 2022
58f9b37
Update src/components/flyout/flyout.tsx
breehall Sep 13, 2022
e251419
Merge branch 'emotion/flyout__redo' of https://github.com/breehall/eu…
breehall Sep 13, 2022
c5871be
Updated the sizing calculation for the medium flyout. Previously, it …
breehall Sep 13, 2022
478887b
Removed size and type classNameToMap objects for EuiFlyout
breehall Sep 13, 2022
4e8cb47
Update src/components/flyout/flyout.styles.ts
breehall Sep 13, 2022
ca3c76a
Update src/components/flyout/flyout.tsx
breehall Sep 13, 2022
eb46835
Merge branch 'emotion/flyout__redo' of https://github.com/breehall/eu…
breehall Sep 13, 2022
c05b66c
Update src/components/flyout/flyout.styles.ts
breehall Sep 13, 2022
5f243e4
Update src/components/flyout/flyout.tsx
breehall Sep 13, 2022
68aca67
Merge branch 'emotion/flyout__redo' of https://github.com/breehall/eu…
breehall Sep 13, 2022
359c2f5
Quick lint
breehall Sep 13, 2022
3bc70c1
Updated required snapshots for Flyout and CollapsibleNav
breehall Sep 13, 2022
f0a680b
Quick check to see if updating flyout.styles.ts will update github file
breehall Sep 13, 2022
fc65e75
Update src/components/flyout/flyout.styles.ts
breehall Sep 13, 2022
0d44180
Update src/components/flyout/flyout.styles.ts
breehall Sep 13, 2022
e87ec67
Pulled the latest code from Github UI commits and updated snapshots f…
breehall Sep 13, 2022
d5785e7
Update upcoming_changelogs/6213.md
breehall Sep 14, 2022
6e069d7
A few name changes to Flyout animations per PR comments
breehall Sep 14, 2022
3028597
Merge branch 'emotion/flyout__redo' of https://github.com/breehall/eu…
breehall Sep 14, 2022
0f34e0e
[docs] Fix button group label
cee-chen Sep 14, 2022
3933d9e
[docs] Fix incorrectly named flyout example files
cee-chen Sep 14, 2022
e9494ce
[docs] Convert all flyout examples to typescript
cee-chen Sep 14, 2022
a7e9d45
Fix close button color
cee-chen Sep 14, 2022
dee610f
Remove unnecessary left/right unsets on outside close buttons
cee-chen Sep 14, 2022
333d272
Fix flyout borders
cee-chen Sep 14, 2022
e6b0b1d
Fix euiFlyoutBody__banner CSS
cee-chen Sep 14, 2022
5536a15
Delete Amsterdam Flyout scss
cee-chen Sep 14, 2022
289b6ce
[EuiFlyoutBody] Misc fixes
cee-chen Sep 14, 2022
485be84
Merge remote-tracking branch 'upstream/main' into emotion/flyout__redo
cee-chen Sep 14, 2022
5dbe365
Use new mathWithUnits helper
cee-chen Sep 14, 2022
937695a
Fix various flyout width issues
cee-chen Sep 14, 2022
04ef1c9
Remove now-unused modifier classes from .euiFlyout__closeButton
cee-chen Sep 14, 2022
52ecb68
[misc] add newlines to Emotion styles for readability
cee-chen Sep 14, 2022
336a505
[docs] improve default value documentation
cee-chen Sep 14, 2022
1f93ad2
Update snapshots
cee-chen Sep 14, 2022
8ad5e9f
[misc] clean up syntax for inline styles
cee-chen Sep 14, 2022
d2d3d4a
clean up box-shadow unset
cee-chen Sep 14, 2022
9253c8a
Fix missing !important on 90vw
cee-chen Sep 14, 2022
a7bbed8
Restore removed comments/context
cee-chen Sep 14, 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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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 euiCollapsibleNav emotion-euiFlyout-flyoutPadding-none-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-11bfchb-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__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