[Guided onboarding] Design polish

[alisonelizabeth]

This issue is to track any design feedback that we need to follow-up on for the guided setup component:

• Currently when a step is open, the other steps are not expandable when clicked, but we would like them to be. We want the user to be able to view the details of the other steps but only be able to start the current step as that one will be the only one with the start button PR comment ([Guided onboarding] Fix steps status #142526)

[elasticmachine]

Pinging @elastic/platform-onboarding (Team:Journey/Onboarding)

[cindychangy]

• Progress Bar:
  -The text for the value (steps) should be in the color: darkShade .
  -Both thelabel and valueTex should be font-size: 12px.
  -Can we add a margin-bottom: 5px; to the parent .euiProgress__data div? The default does not give adequate spacing.

[cindychangy]

• Revised Footer:
  Sorry this is a bit late, hopefully this is not a huge fix (I can also open a PR to do it as well, just let me know). We are condensing all of this to one line as seen in the screencap. The prototype shows this as well now (note: It looks like we will have to use some custom styling in the links and icons as it doesn't seem possible to achieve this look by default. Let me know if you see any complications and think this should be moved out of 8.6.

[alisonelizabeth]

Hi @cindychangy! Thanks for the feedback.

Regarding the progress bar, the proposed changes seem like custom styling on top of the EUI component. Is that correct? I would prefer not to change the default. If we think something should change, let's open up an issue against EUI and address there. Let me know what you think.

Sorry this is a bit late, hopefully this is not a huge fix (I can also open a PR to do it as well, just let me know).

This seems straightforward enough, however, I would consider it a low-priority item for us given the remaining work. If you have time to open up a PR yourself, that would be helpful!

[cindychangy]

This seems straightforward enough, however, I would consider it a low-priority item for us given the remaining work. If you have time to open up a PR yourself, that would be helpful!

Totally agree @alisonelizabeth, I will open a PR for the footer - thanks!

[bojanasan]

Adding a link to the new issue re: EUI Tour component interaction question (ability to dismiss by clicking out of the UI component.

[cindychangy]

• Adjust footer separators to display correctly on mobile ([Guided Onboarding] Panel style modifications #144164)

[cindychangy]

Link to EUI issue for using custom sizes for icons.

[cindychangy]

• Modify the panel to not have a fixed height and instead take the height of the content.

@alisonelizabeth, @yuliacech - re: the SIEM Figma discussion - do you see any issues with this? We are applying custom styling to the EuiFlyout already, so I think it is just a matter of adjusting those custom styles. I can open a PR for this, but let me know if you think there will be an issue.

[alisonelizabeth]

@alisonelizabeth, @yuliacech - re: the SIEM Figma discussion - do you see any issues with this? We are applying custom styling to the EuiFlyout already, so I think it is just a matter of adjusting those custom styles. I can open a PR for this, but let me know if you think there will be an issue.

@cindychangy I think this is fine if you're able to take this on. Note that the EUI team updated their docs on how to create a custom flyout so we will eventually migrate to using EuiPortal (see #143878 for more details). This doesn't necessarily change anything, but just sharing for awareness.

[alisonelizabeth]

I'm going to close this issue. I think we've addressed everything here, with the exception of:

• Progress customization - Won't fix; see comment on [Guided onboarding] Design polish #141223 (comment)
• Remove fixed height on dropdown panel - Opened [Guided onboarding] Remove fixed height on dropdown panel #144334

Please open individual design polish issues from now on that we can track for the next release.