Skip to content

Commit

Permalink
[Docs] fixing KibanaPageTemplate docs (#100104)
Browse files Browse the repository at this point in the history
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
Michail Yasonik and kibanamachine authored May 14, 2021
1 parent 2f3e175 commit 2ba09e4
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 11 deletions.
2 changes: 1 addition & 1 deletion dev_docs/building_blocks.mdx
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
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)

0 comments on commit 2ba09e4

Please sign in to comment.