Style home page header and other misc design tweaks #72481
Merged
+219
−203
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 tasks
Contributor
💔 Build Failed
Failed CI Steps
Test FailuresKibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/dashboard/dashboard_filter_bar·js.dashboard app using current data dashboard filter bar filter editor field list shows index pattern of vis when one is addedStandard OutStack TraceKibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/home/_home·js.homepage app Kibana takes you home clicking on console on homepage should take you to console appStandard OutStack TraceKibana Pipeline / kibana-oss-agent / Firefox UI Functional Tests.test/functional/apps/home/_home·js.homepage app Kibana takes you home clicking on console on homepage should take you to console appStandard OutStack Traceand 5 more failures, only showing the first 3. Build metricsasync chunks size
To update your PR or re-run it, just comment with: |
Contributor
MichaelMarcialis
left a comment
MichaelMarcialis
left a comment
There was a problem hiding this comment.
Left a few review comments and questions after the merge. Let me know if you'd prefer me to move them on over to @cqliu1's PR.
Comment on lines
1
to
4
| .homSolutionsPanel { | ||
| margin-top: -$euiSizeXL*2; | ||
| margin-top: -$euiSizeXL; | ||
|
|
||
| .homeSolutionsPanel--restrictHalfWidth { |
Contributor
There was a problem hiding this comment.
Out of curiosity, any reason/difference between use of class prefix hom and home here?
Contributor
Author
There was a problem hiding this comment.
Catherine will clean this one up. hom follows the three-letter precedent used all over Kibana.
Comment on lines
+35
to
+54
| <EuiFlexGroup className="homPage__footer" alignItems="center" gutterSize="s"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="s" color="subdued"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="home.changeHomeRouteText" | ||
| defaultMessage="Would you prefer to have an alternate home page for this Elastic space? " | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButtonEmpty size="xs" iconType="home" onClick={changeDefaultRoute}> | ||
| <FormattedMessage | ||
| id="home.changeHomeRouteLink" | ||
| defaultMessage="Change your home page route" | ||
| /> | ||
| </EuiButtonEmpty> | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> |
Contributor
There was a problem hiding this comment.
I'm wondering if it would be better to not utilize EuiFlexGroup in this situation, as I fear it has the potential to yield an odd layout. For example, assuming we had a long string of text that breaks a line (in the first EuiFlexItem), this would cause the button (in the second EuiFlexItem) to stay positioned to the right and vertically center itself. I'm not sure that's desirable in this situation.
Would it be better to have the button appear inline with the paragraph text, so that if/when the line is broken, the button also moves to the second line (thus avoiding the above odd layout)?
Contributor
Author
There was a problem hiding this comment.
Probably so and its worth tinkering with it. The reason I swapped it to use the flex components was to get the text and empty button to align vertically. It was visually misaligned when the button was inlined in the paragraph.
| $homePageWidth: 1200px; | ||
|
|
||
| .homPageHeader { | ||
| height: $homePageHeaderHeight; |
Contributor
There was a problem hiding this comment.
Is it necessary to define a fixed height for the home page header here? Ideally, the height of the header would scale to its contents. If only being used to account for the min-height in .homPageContainer, perhaps we can use a flexbox solution instead?
Contributor
Author
There was a problem hiding this comment.
This is also worth tinkering with. This fixed height made it simpler, in the end, to account for some of the shaded background color that was showing at the bottom of the screen. In other words, I was able to also use this value to resolve that issue. That said, it might be the culprit that generated the bottom 'band' 🤔
| width: auto; | ||
| } | ||
|
|
||
| .homSolutionsPanel__enterpriseSearchTopLeftImage img { |
Contributor
There was a problem hiding this comment.
As these panel patterns/images are purely cosmetic, would it be better to use CSS background images instead?
Contributor
Author
There was a problem hiding this comment.
Probably, yeah. I did a little consolidating of styles here, but the images need more attention. By re-slicing the images, we could simplify the styles further - if the padding was baked in, then we could set all the right, top, bottom, left values to 0.
| <EuiTitle size="m"> | ||
| <Fragment> | ||
| <header className="homPageHeader"> | ||
| <EuiFlexGroup gutterSize="none"> |
Contributor
There was a problem hiding this comment.
Regarding the gutterSize="none" prop, we should probably include some gutter space for smaller viewport sizes.
Contributor
Author
There was a problem hiding this comment.
There's a whole host of work needed here for responsiveness. I shied away from that to keep this PR readable 😬
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <EuiFlexGroup alignItems="flexEnd"> |
Contributor
There was a problem hiding this comment.
Possible to tighten up gutter spacing here to 16px (to match designs)?
cqliu1
added a commit
that referenced
this pull request
Jul 21, 2020
Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481)
cqliu1
added a commit
that referenced
this pull request
Jul 28, 2020
Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481)
cqliu1
added a commit
that referenced
this pull request
Aug 4, 2020
Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481)
cqliu1
added a commit
that referenced
this pull request
Aug 7, 2020
Adds auto scroll to advanced setting provided in the URL hash
Registered plugins to feature catalogue to be displayed on home page
Rearrange add data section
Fix solution panel conditional rendering
Removed extraneous import
Remmoved environment update from observability plugin
Registrered features to feature catalog for ingest manager, ml, and index lifecycle management
Fixed import
Added max width to Kibana solution card
Fixed feature id
Fixed enterprise search link
Updated solutions logos
Fixed beta label on ingest manager card
Fixed logos
Cleaned up CSS
Change home route redirects user to advanced settings
Conditionally renders default route advanced setting link
Restored app search logo
Hides graph description on home page on basic license
Style home page header and other misc design tweaks (#72481)
Fixed home page header links spacing
Hide solutions wrapper when no solutions are available
Design PR: layout tweaks, responsive styles (#72944)
* layout tweaks, responsive styles
* address feedback, improve bg color setup
* use EUI var for header height
Fixed merge conflict
Fixed click handler for change home route button
Updated app directory link
Moved app directory link from ChangeHomeRoute component to home component
Updated tests
Added FeatureCatalogueRegistryStart type
Home page refactor
Fixed prop types
Fixed nav links
Removed images from solution card components
card images as backgrounds, consolidate styles, BEM changes
style token icons for dark mode
fix page height
Updated home page feature order values
Added solutions registry to feature catalogue
Renamed solutions_panel to solutions_section
Updated copy
Removed imports
Chore: makes home plugin optional dependency
Fixed merge conflict
Added tests for new home components
Reverted component rename
[Core UI] Home Page Redesign Class & Style Tweaks (#74037)
Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Fixed i18n errors
Adde feature catalogue registry tests
Rename components
cqliu1
added a commit
that referenced
this pull request
Aug 11, 2020
Adds auto scroll to advanced setting provided in the URL hash
Registered plugins to feature catalogue to be displayed on home page
Rearrange add data section
Fix solution panel conditional rendering
Removed extraneous import
Remmoved environment update from observability plugin
Registrered features to feature catalog for ingest manager, ml, and index lifecycle management
Fixed import
Added max width to Kibana solution card
Fixed feature id
Fixed enterprise search link
Updated solutions logos
Fixed beta label on ingest manager card
Fixed logos
Cleaned up CSS
Change home route redirects user to advanced settings
Conditionally renders default route advanced setting link
Restored app search logo
Hides graph description on home page on basic license
Style home page header and other misc design tweaks (#72481)
Fixed home page header links spacing
Hide solutions wrapper when no solutions are available
Design PR: layout tweaks, responsive styles (#72944)
* layout tweaks, responsive styles
* address feedback, improve bg color setup
* use EUI var for header height
Fixed merge conflict
Fixed click handler for change home route button
Updated app directory link
Moved app directory link from ChangeHomeRoute component to home component
Updated tests
Added FeatureCatalogueRegistryStart type
Home page refactor
Fixed prop types
Fixed nav links
Removed images from solution card components
card images as backgrounds, consolidate styles, BEM changes
style token icons for dark mode
fix page height
Updated home page feature order values
Added solutions registry to feature catalogue
Renamed solutions_panel to solutions_section
Updated copy
Removed imports
Chore: makes home plugin optional dependency
Fixed merge conflict
Added tests for new home components
Reverted component rename
[Core UI] Home Page Redesign Class & Style Tweaks (#74037)
Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Fixed i18n errors
Adde feature catalogue registry tests
Rename components
cqliu1
added a commit
that referenced
this pull request
Aug 13, 2020
Adds auto scroll to advanced setting provided in the URL hash
Registered plugins to feature catalogue to be displayed on home page
Rearrange add data section
Fix solution panel conditional rendering
Removed extraneous import
Remmoved environment update from observability plugin
Registrered features to feature catalog for ingest manager, ml, and index lifecycle management
Fixed import
Added max width to Kibana solution card
Fixed feature id
Fixed enterprise search link
Updated solutions logos
Fixed beta label on ingest manager card
Fixed logos
Cleaned up CSS
Change home route redirects user to advanced settings
Conditionally renders default route advanced setting link
Restored app search logo
Hides graph description on home page on basic license
Style home page header and other misc design tweaks (#72481)
Fixed home page header links spacing
Hide solutions wrapper when no solutions are available
Design PR: layout tweaks, responsive styles (#72944)
* layout tweaks, responsive styles
* address feedback, improve bg color setup
* use EUI var for header height
Fixed merge conflict
Fixed click handler for change home route button
Updated app directory link
Moved app directory link from ChangeHomeRoute component to home component
Updated tests
Added FeatureCatalogueRegistryStart type
Home page refactor
Fixed prop types
Fixed nav links
Removed images from solution card components
card images as backgrounds, consolidate styles, BEM changes
style token icons for dark mode
fix page height
Updated home page feature order values
Added solutions registry to feature catalogue
Renamed solutions_panel to solutions_section
Updated copy
Removed imports
Chore: makes home plugin optional dependency
Fixed merge conflict
Added tests for new home components
Reverted component rename
[Core UI] Home Page Redesign Class & Style Tweaks (#74037)
Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Fixed i18n errors
Adde feature catalogue registry tests
Rename components
Switched solution descriptions to static strings
Fixed registered features
Fixed i18n errors
Show/hide solutions based on available nav links
Removed solution property from feature catalogue entry
Revert text changes
Updated security link
Updated snapshots
Fixed home plugin tests
Added solutions section tests
Removed mock
Fixed tutorial directory a11y tests
Fix ui capabilities catalogue test
Turned solution title into link
Added tests
Fixed security solution tests
Fixed ts errors
Updated snapshots
Revert vega snapshot changes
Retrieves height of global nav when scrolling to a field in advanced settings
Removed a tag from solution panel title
Apply a11y feedback
Updated snapshots
Added proptypes
Updated chrome ui header snapshots
Fixed manage data tests
cqliu1
added a commit
that referenced
this pull request
Aug 17, 2020
Adds auto scroll to advanced setting provided in the URL hash
Registered plugins to feature catalogue to be displayed on home page
Rearrange add data section
Fix solution panel conditional rendering
Removed extraneous import
Remmoved environment update from observability plugin
Registrered features to feature catalog for ingest manager, ml, and index lifecycle management
Fixed import
Added max width to Kibana solution card
Fixed feature id
Fixed enterprise search link
Updated solutions logos
Fixed beta label on ingest manager card
Fixed logos
Cleaned up CSS
Change home route redirects user to advanced settings
Conditionally renders default route advanced setting link
Restored app search logo
Hides graph description on home page on basic license
Style home page header and other misc design tweaks (#72481)
Fixed home page header links spacing
Hide solutions wrapper when no solutions are available
Design PR: layout tweaks, responsive styles (#72944)
* layout tweaks, responsive styles
* address feedback, improve bg color setup
* use EUI var for header height
Fixed merge conflict
Fixed click handler for change home route button
Updated app directory link
Moved app directory link from ChangeHomeRoute component to home component
Updated tests
Added FeatureCatalogueRegistryStart type
Home page refactor
Fixed prop types
Fixed nav links
Removed images from solution card components
card images as backgrounds, consolidate styles, BEM changes
style token icons for dark mode
fix page height
Updated home page feature order values
Added solutions registry to feature catalogue
Renamed solutions_panel to solutions_section
Updated copy
Removed imports
Chore: makes home plugin optional dependency
Fixed merge conflict
Added tests for new home components
Reverted component rename
[Core UI] Home Page Redesign Class & Style Tweaks (#74037)
Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Fixed i18n errors
Adde feature catalogue registry tests
Rename components
Switched solution descriptions to static strings
Fixed registered features
Fixed i18n errors
Show/hide solutions based on available nav links
Removed solution property from feature catalogue entry
Revert text changes
Updated security link
Updated snapshots
Fixed home plugin tests
Added solutions section tests
Removed mock
Fixed tutorial directory a11y tests
Fix ui capabilities catalogue test
Turned solution title into link
Added tests
Fixed security solution tests
Fixed ts errors
Updated snapshots
Revert vega snapshot changes
Retrieves height of global nav when scrolling to a field in advanced settings
Removed a tag from solution panel title
Apply a11y feedback
Updated snapshots
Added proptypes
Updated chrome ui header snapshots
Fixed manage data tests
cqliu1
added a commit
that referenced
this pull request
Aug 18, 2020
Adds auto scroll to advanced setting provided in the URL hash
Registered plugins to feature catalogue to be displayed on home page
Rearrange add data section
Fix solution panel conditional rendering
Removed extraneous import
Remmoved environment update from observability plugin
Registrered features to feature catalog for ingest manager, ml, and index lifecycle management
Fixed import
Added max width to Kibana solution card
Fixed feature id
Fixed enterprise search link
Updated solutions logos
Fixed beta label on ingest manager card
Fixed logos
Cleaned up CSS
Change home route redirects user to advanced settings
Conditionally renders default route advanced setting link
Restored app search logo
Hides graph description on home page on basic license
Style home page header and other misc design tweaks (#72481)
Fixed home page header links spacing
Hide solutions wrapper when no solutions are available
Design PR: layout tweaks, responsive styles (#72944)
* layout tweaks, responsive styles
* address feedback, improve bg color setup
* use EUI var for header height
Fixed merge conflict
Fixed click handler for change home route button
Updated app directory link
Moved app directory link from ChangeHomeRoute component to home component
Updated tests
Added FeatureCatalogueRegistryStart type
Home page refactor
Fixed prop types
Fixed nav links
Removed images from solution card components
card images as backgrounds, consolidate styles, BEM changes
style token icons for dark mode
fix page height
Updated home page feature order values
Added solutions registry to feature catalogue
Renamed solutions_panel to solutions_section
Updated copy
Removed imports
Chore: makes home plugin optional dependency
Fixed merge conflict
Added tests for new home components
Reverted component rename
[Core UI] Home Page Redesign Class & Style Tweaks (#74037)
Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Fixed i18n errors
Adde feature catalogue registry tests
Rename components
Switched solution descriptions to static strings
Fixed registered features
Fixed i18n errors
Show/hide solutions based on available nav links
Removed solution property from feature catalogue entry
Revert text changes
Updated security link
Updated snapshots
Fixed home plugin tests
Added solutions section tests
Removed mock
Fixed tutorial directory a11y tests
Fix ui capabilities catalogue test
Turned solution title into link
Added tests
Fixed security solution tests
Fixed ts errors
Updated snapshots
Revert vega snapshot changes
Retrieves height of global nav when scrolling to a field in advanced settings
Removed a tag from solution panel title
Apply a11y feedback
Updated snapshots
Added proptypes
Updated chrome ui header snapshots
Fixed manage data tests
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
There's more design/CSS work to be done here, but this is a start.