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

[Guided onboarding] Landing pages design follow ups #150084

Merged
merged 3 commits into from
Feb 7, 2023
Merged

[Guided onboarding] Landing pages design follow ups #150084

merged 3 commits into from
Feb 7, 2023

Conversation

yuliacech
Copy link
Contributor

Summary

Fixes #149695
Follow up to #149528

This PR fixes minor design issues on the new landing page:

  • Adds a document icon to cards that on click redirect the user to a Kibana page (not the guide cards)
  • Updates the color of the icon for completed guide card to match the header button (as per @cindychangy's comment)
  • Adds linebreaks to prevent one word dangling on the new line (as per @osmanis's comment)
  • Fixes the layout of the completed guide card and all cards on the page for small screens. See screenshots below

Screenshots

Before (large screens)

Screenshot 2023-02-01 at 17 58 11

After (large screens)

Screenshot 2023-02-01 at 18 01 16

Before (small screens)

Screenshot 2023-02-01 at 17 58 20

After (small screens)

Screenshot 2023-02-01 at 18 01 24

Checklist

@yuliacech yuliacech added release_note:skip Skip the PR/issue when compiling release notes Team:Journey/Onboarding Platform Journey Onboarding team v8.7.0 labels Feb 1, 2023
@yuliacech yuliacech requested a review from a team as a code owner February 1, 2023 17:04
@elasticmachine
Copy link
Contributor

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

yuliacech
yuliacech commented Feb 1, 2023
View reviewed changes
packages/kbn-guided-onboarding/src/components/landing_page/guide_card.tsx
<EuiFlexItem grow={false}>
<EuiIcon type="checkInCircleFilled" color="success" />
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
Copy link
Contributor Author

@yuliacech yuliacech Feb 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

We need to use the specific color value and not the "type" of color here because the icons' color is changed following a recent Emotion migration. We want to match the icon color to the color of the header button. More details here

yuliacech
yuliacech commented Feb 1, 2023
View reviewed changes
packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx
id="guidedOnboardingPackage.gettingStarted.cards.appSearch.title"
defaultMessage="Build an application on {lineBreak} top of Elasticsearch"
values={{
lineBreak: <br />,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I suggest using <br/> to break up the lines in a specific place because the cards are styled with the static width. So they wont grow or shrink in different screen sizes.

Copy link
Contributor

Choose a reason for hiding this comment

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

But it also looks perfectly fine without the line breaks. Should doing this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That fixes the issue when only one word is on the second line

@yuliacech yuliacech enabled auto-merge (squash) February 6, 2023 10:06
@yuliacech yuliacech force-pushed the guided_onboarding/8.7/landing_page_design_followup branch from 490aa8b to f0a439d Compare February 6, 2023 13:59
claracruz
claracruz approved these changes Feb 7, 2023
View reviewed changes
Copy link
Contributor

@claracruz claracruz left a comment

Choose a reason for hiding this comment

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

LGTM

@yuliacech yuliacech merged commit 5f74c6d into elastic:main Feb 7, 2023
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
home 153.2KB 153.8KB +565.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Feb 7, 2023
darnautov pushed a commit to darnautov/kibana that referenced this pull request Feb 7, 2023
@yuliacech @darnautov
[Guided onboarding] Landing pages design follow ups (elastic#150084)
3377ea8 
## Summary
Fixes elastic#149695
Follow up to elastic#149528

This PR fixes minor design issues on the new landing page: 
- Adds a `document` icon to cards that on click redirect the user to a
Kibana page (not the guide cards)
- Updates the color of the icon for completed guide card to match the
header button (as per @cindychangy's
[comment](elastic#149528 (comment)))
- Adds linebreaks to prevent one word dangling on the new line (as per
@osmanis's
[comment](elastic#149528 (comment)))
- Fixes the layout of the completed guide card and all cards on the page
for small screens. See screenshots below

### Screenshots
#### Before (large screens)
<img width="1333" alt="Screenshot 2023-02-01 at 17 58 11"
src="https://user-images.githubusercontent.com/6585477/216111021-32ee8162-5cf8-4948-8f1d-aa3790e6a7f9.png">

#### After (large screens)
<img width="1300" alt="Screenshot 2023-02-01 at 18 01 16"
src="https://user-images.githubusercontent.com/6585477/216111153-d22feadd-1796-4b20-9e97-f7e0b025c42d.png">

#### Before (small screens)
<img width="627" alt="Screenshot 2023-02-01 at 17 58 20"
src="https://user-images.githubusercontent.com/6585477/216111189-08d3cd2b-bd75-4d6b-9f52-8d74623cbe35.png">

#### After (small screens)
<img width="561" alt="Screenshot 2023-02-01 at 18 01 24"
src="https://user-images.githubusercontent.com/6585477/216111209-6dafed8a-d398-4090-a23f-af570b684d33.png">


### Checklist
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
benakansara pushed a commit to benakansara/kibana that referenced this pull request Feb 7, 2023
@yuliacech @benakansara
[Guided onboarding] Landing pages design follow ups (elastic#150084)
7b5d91d 
## Summary
Fixes elastic#149695
Follow up to elastic#149528

This PR fixes minor design issues on the new landing page: 
- Adds a `document` icon to cards that on click redirect the user to a
Kibana page (not the guide cards)
- Updates the color of the icon for completed guide card to match the
header button (as per @cindychangy's
[comment](elastic#149528 (comment)))
- Adds linebreaks to prevent one word dangling on the new line (as per
@osmanis's
[comment](elastic#149528 (comment)))
- Fixes the layout of the completed guide card and all cards on the page
for small screens. See screenshots below

### Screenshots
#### Before (large screens)
<img width="1333" alt="Screenshot 2023-02-01 at 17 58 11"
src="https://user-images.githubusercontent.com/6585477/216111021-32ee8162-5cf8-4948-8f1d-aa3790e6a7f9.png">

#### After (large screens)
<img width="1300" alt="Screenshot 2023-02-01 at 18 01 16"
src="https://user-images.githubusercontent.com/6585477/216111153-d22feadd-1796-4b20-9e97-f7e0b025c42d.png">

#### Before (small screens)
<img width="627" alt="Screenshot 2023-02-01 at 17 58 20"
src="https://user-images.githubusercontent.com/6585477/216111189-08d3cd2b-bd75-4d6b-9f52-8d74623cbe35.png">

#### After (small screens)
<img width="561" alt="Screenshot 2023-02-01 at 18 01 24"
src="https://user-images.githubusercontent.com/6585477/216111209-6dafed8a-d398-4090-a23f-af570b684d33.png">


### Checklist
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
@yuliacech yuliacech deleted the guided_onboarding/8.7/landing_page_design_followup branch February 15, 2024 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@claracruz claracruz claracruz approved these changes

Assignees
No one assigned
Labels
backport:skip This commit does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:Journey/Onboarding Platform Journey Onboarding team v8.7.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Guided onboarding] Add different icons for guide cards vs link cards
5 participants
@yuliacech @elasticmachine @kibana-ci @claracruz @kibanamachine