Skip to content

[Guided Onboarding] Make onboarding panel auto height #147333

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

Merged
cindychangy merged 4 commits into from
Dec 13, 2022
Merged

[Guided Onboarding] Make onboarding panel auto height #147333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
601afca
replace custom style for prop
cindychangy Dec 12, 2022
c698469
make panel auto height
cindychangy Dec 12, 2022
a824bfc
Merge branch 'main' into guided_onboarding_panel_height
cindychangy Dec 12, 2022
ad4e0fd
add comment to clarify styles
cindychangy Dec 12, 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
8 changes: 5 additions & 3 deletions src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,20 @@ export const getGuidePanelStyles = (euiTheme: EuiThemeComputed) => ({
flyoutOverrides: {
flyoutContainer: css`
top: 55px !important;
bottom: 25px !important;
// Unsetting bottom and height default values to create auto height
bottom: unset !important;
Copy link
Copy Markdown
Contributor

@yuliacech yuliacech Dec 12, 2022

Choose a reason for hiding this comment

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

nit: would it be possible to delete the property completely?

Copy link
Copy Markdown
Contributor

@alisonelizabeth alisonelizabeth Dec 12, 2022

Choose a reason for hiding this comment

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

(If it's not possible to delete, it might be worth adding a comment to explain why.)

Copy link
Copy Markdown
Contributor Author

@cindychangy cindychangy Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@yuliacech @alisonelizabeth - good point, I added a comment to clarify (does not work if we remove these values) - I had one quick question, is this placement the correct place to put it, or should I add it all the way at the top with the commented description:

/**
 *
 * Style overrides for the setup guide dropdown panel.
 * There is currently no existing EUI component that fully supports what we need...

Copy link
Copy Markdown
Contributor

@alisonelizabeth alisonelizabeth Dec 12, 2022

Choose a reason for hiding this comment

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

I think this is OK 👍. Not sure if there are any specific guidelines around this, but in this case, I think it's easier to follow next to the CSS.

height: unset !important;
right: calc(${euiTheme.size.s} + 128px); // Accounting for margin on button
border-radius: 6px;
inline-size: 480px !important;
height: auto;
animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
box-shadow: none;
max-height: 76vh;
@media (max-width: ${euiTheme.breakpoint.s}px) {
right: 25px !important;
}
`,
flyoutBody: css`
overflow: scroll;
.euiFlyoutBody__overflowContent {
width: 480px;
padding-top: 10px;
Expand Down
1 change: 1 addition & 0 deletions src/plugins/guided_onboarding/public/components/guide_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ export const GuidePanel = ({ api, application, notifications }: GuidePanelProps)
css={styles.flyoutOverrides.flyoutContainer}
maskProps={{ headerZindexLocation: 'above' }}
data-test-subj="guidePanel"
maxWidth={480}
>
<EuiFlyoutHeader>
<EuiButtonEmpty
Expand Down