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

[Docs] fixing KibanaPageTemplate docs #100104

Merged
merged 2 commits into from
May 14, 2021
Merged

[Docs] fixing KibanaPageTemplate docs #100104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae63e9e
fixing KibanaPageTemplate docs
May 13, 2021
447e277
Merge branch 'master' into fix-docs
kibanamachine May 14, 2021
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
2 changes: 1 addition & 1 deletion dev_docs/building_blocks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Check out the Map Embeddable if you wish to embed a map in your application.

All Kibana pages should use KibanaPageTemplate to setup their pages. It's a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements.

Check out <DocLink id="kibDevDocsKBTTutorial" text="the KibanaPageTemplate tutorial" /> for more implementation guidance.
Check out <DocLink id="kibDevDocsKPTTutorial" text="the KibanaPageTemplate tutorial" /> for more implementation guidance.

**Github labels**: `EUI`

Expand Down
20 changes: 10 additions & 10 deletions dev_docs/tutorials/kibana_page_template.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
id: kibDevDocsKBLTutorial
slug: /kibana-dev-docs/tutorials/kibana-page-layout
title: KibanaPageLayout component
id: kibDevDocsKPTTutorial
slug: /kibana-dev-docs/tutorials/kibana-page-template
title: KibanaPageTemplate component
summary: Learn how to create pages in Kibana
date: 2021-03-20
tags: ['kibana', 'dev', 'ui', 'tutorials']
---

`KibanaPageLayout` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.
`KibanaPageTemplate` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.

Refer to EUI's documentation on [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.

Expand All @@ -18,7 +18,7 @@ Use the `isEmptyState` prop for when there is no page content to show. For examp
The default empty state uses any `pageHeader` info provided to populate an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.

```tsx
<KibanaPageLayout
<KibanaPageTemplate
isEmptyState={true}
pageHeader={{
iconType: 'dashboardApp',
Expand All @@ -42,10 +42,10 @@ The default empty state uses any `pageHeader` info provided to populate an [`Eui

### Custom empty state

You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageLayout.
You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageTemplate.

```tsx
<KibanaPageLayout isEmptyState={true}>
<KibanaPageTemplate isEmptyState={true}>
<EuiEmptyPrompt
title={<h1>No data</h1>}
body="You have no data. Would you like some of ours?"
Expand All @@ -55,7 +55,7 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
</EuiButton>,
]}
/>
</KibanaPageLayout>
</KibanaPageTemplate>
```

![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png)
Expand All @@ -65,7 +65,7 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `<h2>`.

```tsx
<KibanaPageLayout
<KibanaPageTemplate
isEmptyState={true}
pageHeader={{
pageTitle: 'Dashboards',
Expand All @@ -80,7 +80,7 @@ When passing both a `pageHeader` configuration and `isEmptyState`, the component
</EuiButton>,
]}
/>
</KibanaPageLayout>
</KibanaPageTemplate>
```

![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png)