Skip to content

[Core UI] Home Page Redesign Class & Style Tweaks #74037

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
merged 31 commits into from
Aug 5, 2020
Merged

[Core UI] Home Page Redesign Class & Style Tweaks #74037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
f3917c2
Redesigns home page
cqliu1 Jul 2, 2020
4a5e35a
Fixed home page header links spacing
cqliu1 Jul 21, 2020
bb3bdd1
Hide solutions wrapper when no solutions are available
cqliu1 Jul 21, 2020
338f385
Design PR: layout tweaks, responsive styles (#72944)
ryankeairns Jul 27, 2020
507656b
Fixed merge conflict
cqliu1 Jul 28, 2020
65d3c1a
Fixed click handler for change home route button
cqliu1 Jul 28, 2020
8ddb840
Updated app directory link
cqliu1 Jul 28, 2020
a3df8c5
Moved app directory link from ChangeHomeRoute component to home compo…
cqliu1 Jul 28, 2020
f73bbe3
Updated tests
cqliu1 Jul 28, 2020
cf3f33d
Added FeatureCatalogueRegistryStart type
cqliu1 Jul 29, 2020
0079a2e
BROKEN
cqliu1 Jul 29, 2020
b54bcf1
Home page refactor
cqliu1 Jul 29, 2020
5347be3
Fixed prop types
cqliu1 Jul 29, 2020
2d53520
Fixed nav links
cqliu1 Jul 29, 2020
dbd0e30
Removed images from solution card components
cqliu1 Jul 29, 2020
e1fc53a
card images as backgrounds, consolidate styles, BEM changes
ryankeairns Jul 30, 2020
d8136f6
style token icons for dark mode
ryankeairns Jul 30, 2020
d904c20
fix page height
ryankeairns Jul 30, 2020
724f822
Merge pull request #12 from ryankeairns/home/refactor-feature-catalogue
cqliu1 Jul 30, 2020
14e31b9
Updated home page feature order values
cqliu1 Jul 30, 2020
fc15c55
Added solutions registry to feature catalogue
cqliu1 Jul 31, 2020
44bc29f
Renamed solutions_panel to solutions_section
cqliu1 Jul 31, 2020
de161c5
Updated copy
cqliu1 Jul 31, 2020
31cbc47
changed .homSolutionsSection to .homSolutions
MichaelMarcialis Jul 31, 2020
5f7ec22
more class changes
MichaelMarcialis Jul 31, 2020
b16e2e3
use app id for modifier class creation
MichaelMarcialis Jul 31, 2020
8027a18
rm missed class
MichaelMarcialis Jul 31, 2020
2db6133
clean up scss
MichaelMarcialis Aug 1, 2020
7a309cf
final clean up
MichaelMarcialis Aug 1, 2020
8c6ac43
Merge branch 'elastic-home-page' of github.com:elastic/kibana into hp…
MichaelMarcialis Aug 5, 2020
d1f6013
correct merge conflict issues
MichaelMarcialis Aug 5, 2020
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
177 changes: 80 additions & 97 deletions src/plugins/home/public/application/components/_solutions_panel.scss
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions src/plugins/home/public/application/components/solutions_panel/solution_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,25 +62,26 @@ export const SolutionCard: FC<Props> = ({ solution, apps = [] }) =>
solution && apps.length ? (
<EuiFlexItem
key={solution.id}
className={`homSolutionsSection__container ${
solution.id === 'kibana' ? 'homSolutionsSection__single' : ''
} ${solution.className}`}
className={`${
solution.id === 'kibana' ? 'homSolutions__group homSolutions__group--single' : ''
} homSolutions__item`}
grow={1}
>
<EuiPanel
paddingSize="none"
className="homSolutionsSection__panel"
className={`homSolutionPanel homSolutionPanel--${solution.id}`}
onClick={createAppNavigationHandler(solution.path)} // TODO: double check this url once enterprise search overview page is available
>
<EuiFlexGroup gutterSize="none">
<EuiFlexItem grow={1} className={`homSolutionsSection__panelHeader`}>
<EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
<SolutionTitle
iconType={solution.icon}
title={solution.title}
subtitle={solution.description}
/>
</EuiFlexItem>
<EuiFlexItem grow={1} className="homSolutionsSection__panelDescriptions">

<EuiFlexItem grow={1} className="homSolutionPanel__content">
{getAppDescriptions(apps)}
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
12 changes: 5 additions & 7 deletions src/plugins/home/public/application/components/solutions_panel/solution_title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,23 @@ interface Props {
}

export const SolutionTitle: FC<Props> = ({ title, subtitle, iconType }) => (
<EuiFlexGroup
gutterSize="none"
alignItems="center"
className="homSolutionsSection__panelHeaderContent"
>
<EuiFlexGroup gutterSize="none" alignItems="center">
<EuiFlexItem className="eui-textCenter">
<EuiToken
iconType={iconType}
shape="circle"
fill="light"
size="l"
className="homSolutionsSection__panelIcon"
className="homSolutionPanel__icon"
/>

<EuiTitle className="eui-textInheritColor" size="s">
<p>{title}</p>
</EuiTitle>

{subtitle ? (
<EuiText size="s">
<p className="homSolutionsSection__panelSubtitle">
<p className="homSolutionPanel__subtitle">
{subtitle} <EuiIcon type="sortRight" />
</p>
</EuiText>
Expand Down
7 changes: 3 additions & 4 deletions src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,11 @@ export const SolutionsPanel: FC<Props> = ({ directories, solutions }) => {
solutionAppMap.set(solution.id, apps);
});

const halfWidthClass = 'homSolutionsSection__multiple';

return appCount || kibanaApps.length ? (
<Fragment>
<EuiFlexGroup className="homSolutionsSection" justifyContent="spaceAround">
<EuiFlexGroup className="homSolutions" justifyContent="spaceAround">
{appCount ? (
<EuiFlexItem grow={1} className={halfWidthClass}>
<EuiFlexItem grow={1} className="homSolutions__group homSolutions__group--multiple">
<EuiFlexGroup direction="column">
{solutions.map((solution) => (
<SolutionCard
Expand All @@ -81,6 +79,7 @@ export const SolutionsPanel: FC<Props> = ({ directories, solutions }) => {
</EuiFlexGroup>

<EuiHorizontalRule margin="xl" />

<EuiSpacer size="s" />
</Fragment>
) : (
Expand Down
1 change: 0 additions & 1 deletion src/plugins/home/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export class HomePublicPlugin
icon: 'logoKibana',
path: '/app/dashboards',
order: 400,
className: 'homSolutionsSection__blueCard',
});
Copy link
Contributor

@ryankeairns ryankeairns Aug 3, 2020

Choose a reason for hiding this comment

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

See comment above regarding why we likely need to keep this (or something similar to it).

Copy link
Contributor Author

@MichaelMarcialis MichaelMarcialis Aug 3, 2020

Choose a reason for hiding this comment

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

My reasoning for changing this class (and similar classes) is because I'm attempting to avoid classifying elements based on the styles they will convey. Instead, I'm trying to classify elements based on their content and/or role. Doing so will prove more sustainable maintenance-wise.

For example, if we were to change the color of this element from blue to purple, we'd have to update both the CSS and the class name. With the class structure I'm proposing, we'd only have to update the CSS. Thoughts?

Copy link
Contributor

@ryankeairns ryankeairns Aug 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Let's get a better understanding of the id usage here. Generally speaking, I agree that putting the color in the class name is not great.


return {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import { Capabilities } from 'src/core/public';
import { Capabilities, AppCategory } from 'src/core/public';
import { IconType } from '@elastic/eui';

/** @public */
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/enterprise_search/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export class EnterpriseSearchPlugin implements Plugin {
description: 'Search everything',
path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page
order: 100,
className: 'homSolutionsSection__greenCard',
});

plugins.home.featureCatalogue.register({
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/ingest_manager/kibana.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"ui": true,
"configPath": ["xpack", "ingestManager"],
"requiredPlugins": ["licensing", "data", "encryptedSavedObjects"],
"optionalPlugins": ["security", "features", "cloud", "usageCollection", "home" ],
"optionalPlugins": ["security", "features", "cloud", "usageCollection", "home"],
"extraPublicDirs": ["common"],
"requiredBundles": ["kibanaReact", "esUiShared", "home"]
}
3 changes: 3 additions & 0 deletions x-pack/plugins/observability/kibana.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
"xpack",
"observability"
],
"requiredPlugins": [
"home"
],
"optionalPlugins": [
"licensing",
"home"
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/observability/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ export class Plugin implements PluginClass<ObservabilityPluginSetup, Observabili
icon: 'logoObservability',
path: '/app/observability',
order: 200,
className: 'homSolutionsSection__magentaCard',
});
Copy link
Contributor

@ryankeairns ryankeairns Aug 3, 2020

Choose a reason for hiding this comment

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

See comment above regarding why we likely need to keep this (or something similar to it).

Copy link
Contributor Author

@MichaelMarcialis MichaelMarcialis Aug 3, 2020

Choose a reason for hiding this comment

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

See my comment above as well :)

}

Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/security_solution/public/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
icon: APP_ICON,
path: APP_OVERVIEW_PATH,
order: 300,
className: 'homSolutionsSection__blackCard',
Copy link
Contributor

@ryankeairns ryankeairns Aug 3, 2020

Choose a reason for hiding this comment

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

See comment above regarding why we likely need to keep this (or something similar to it).

Copy link
Contributor Author

@MichaelMarcialis MichaelMarcialis Aug 3, 2020

Choose a reason for hiding this comment

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

See my comment above as well :)

});

plugins.home.featureCatalogue.register({
Expand Down