Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

- Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
- Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
- Added support for supplying `breadcrumbs` and `breadcrumbProps` directly to `EuiPageHeader` ([#5634](https://github.com/elastic/eui/pull/5634))
- Extended props of `EuiBreadcrumb` to include `HTMLElement` and `color` inherited from `EuiLink` ([#5634](https://github.com/elastic/eui/pull/5634))

## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)

Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/breadcrumbs/breadcrumbs.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export default () => {
{
text: 'Animals',
href: '#',
color: 'primary',
onClick: (e) => {
e.preventDefault();
},
Expand Down
28 changes: 28 additions & 0 deletions src-docs/src/views/breadcrumbs/breadcrumbs_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ import Max from './max';
import { EuiCallOut } from '../../../../src/components/call_out';
const maxSource = require('!!raw-loader!./max');

import Color from './color';
const colorSource = require('!!raw-loader!./color');

const breadcrumpProps = {
EuiBreadcrumbs,
EuiBreadcrumb: BreadcrumbProps,
Expand Down Expand Up @@ -241,5 +244,30 @@ export const BreadcrumbsExample = {
],
demo: <ResponsiveCustom />,
},
{
title: 'Color for emphasis',
text: (
<>
<p>
Each breadcrumb extends the color options from{' '}
<Link to="/navigation/link">
<strong>EuiLink</strong>
</Link>{' '}
when either an <EuiCode>href</EuiCode> or <EuiCode>onClick</EuiCode>{' '}
is applied . You can change the default color of a breadcrumb to add
emphasis or indicate state like <EuiCode>{"'danger'"}</EuiCode> for
an error. However, use caution not to use color alone.
</p>
</>
),
props: breadcrumpProps,
demo: <Color />,
source: [
{
type: GuideSectionTypes.JS,
code: colorSource,
},
],
},
],
};
32 changes: 32 additions & 0 deletions src-docs/src/views/breadcrumbs/color.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';

import { EuiBreadcrumbs, EuiBreadcrumb, EuiIcon } from '../../../../src';

const breadcrumbs: EuiBreadcrumb[] = [
{
text: 'Animals',
href: '#',
color: 'primary',
onClick: (e) => e.preventDefault(),
},
{
text: 'Reptiles',
color: 'primary',
},
{
text: (
<>
<EuiIcon type="alert" size="s" /> Boa constrictor
</>
),
title: 'Boa constrictor has an error',
href: '#',
color: 'danger',
onClick: (e) => e.preventDefault(),
},
{
text: 'Edit',
},
];

export default () => <EuiBreadcrumbs breadcrumbs={breadcrumbs} />;
1 change: 1 addition & 0 deletions src-docs/src/views/page_header/page_header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components';

export default () => (
<EuiPageHeader
bottomBorder
pageTitle="Page title"
iconType="logoKibana"
description="This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content."
Expand Down
34 changes: 34 additions & 0 deletions src-docs/src/views/page_header/page_header_breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import { requiredProps } from '../../../../src/test';

import { EuiPageHeader, EuiButton } from '../../../../src/components';

export default () => (
<EuiPageHeader
bottomBorder
pageTitle="Page title"
description="Example of a description."
breadcrumbs={[
{
text: 'Breadcrumb 1',
href: '#',
onClick: (e) => e.preventDefault(),
},
{
text: 'Breadcrumb 2',
href: '#',
onClick: (e) => e.preventDefault(),
},
{
text: 'Current',
href: '#',
onClick: (e) => e.preventDefault(),
},
]}
rightSideItems={[
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
]}
breadcrumbProps={requiredProps}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';

import { EuiPageHeader, EuiButton, EuiIcon } from '../../../../src/components';

export default () => (
<EuiPageHeader
bottomBorder
pageTitle="Page title"
description="Example of a description."
breadcrumbs={[
{
text: (
<>
<EuiIcon size="s" type="arrowLeft" /> Return
</>
),
color: 'primary',
'aria-current': false,
href: '#',
onClick: (e) => e.preventDefault(),
},
]}
rightSideItems={[
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
]}
/>
);
2 changes: 1 addition & 1 deletion src-docs/src/views/page_header/page_header_custom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from '../../../../src/components';

export default () => (
<EuiPageHeader alignItems="center">
<EuiPageHeader alignItems="center" bottomBorder>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Page title</h1>
Expand Down
70 changes: 45 additions & 25 deletions src-docs/src/views/page_header/page_header_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
EuiCode,
EuiPageHeader,
EuiPageHeaderSection,
EuiText,
} from '../../../../src/components';

import { pageHeaderConfig } from './playground';
Expand All @@ -20,9 +21,13 @@ import PageHeaderTabsTitle from './page_header_tabs_title';
const pageHeaderTabsTitleSource = require('!!raw-loader!./page_header_tabs_title');

import PageHeaderCustom from './page_header_custom';
import { EuiText } from '../../../../src/components/text';
const pageHeaderCustomSource = require('!!raw-loader!./page_header_custom');

import PageBreadcrumbs from './page_header_breadcrumbs';
const pageBreadcrumbsSource = require('!!raw-loader!./page_header_breadcrumbs');
import PageBreadcrumbsReturn from './page_header_breadcrumbs_return';
const pageBreadcrumbsReturnSource = require('!!raw-loader!./page_header_breadcrumbs_return');

export const PageHeaderExample = {
title: 'Page header',
intro: (
Expand Down Expand Up @@ -76,14 +81,6 @@ export const PageHeaderExample = {
),
demo: <PageHeader />,
props: { EuiPageHeader },
snippet: `<EuiPageHeader
pageTitle="Page title"
description="Example of a description."
rightSideItems={[
<EuiButton fill>Button 1</EuiButton>,
<EuiButton>Button 2</EuiButton>
]}
/>`,
},
{
title: 'Tabs in the page header',
Expand Down Expand Up @@ -113,14 +110,6 @@ export const PageHeaderExample = {
),
demo: <PageHeaderTabsTitle />,
props: { EuiPageHeader },
snippet: `<EuiPageHeader
pageTitle="Page title"
tabs={[
{ label:"Tab 1", isSelected: true },
{ label:"Tab 2" }
]}
bottomBorder
/>`,
},
{
source: [
Expand All @@ -143,14 +132,45 @@ export const PageHeaderExample = {
),
demo: <PageHeaderTabs />,
props: { EuiPageHeader },
snippet: `<EuiPageHeader
tabs={[
{ label:"Tab 1", isSelected: true },
{ label:"Tab 2" }
]}
bottomBorder
description="Example of a description."
/>`,
},
{
title: 'Breadcrumbs in the page header',
source: [
{
type: GuideSectionTypes.JS,
code: pageBreadcrumbsSource,
},
],
text: (
<>
<p>
<Link to="/navigation/breadcrumbs">Breadcrumbs</Link> are useful for
tracking in-page flows that{' '}
<strong>are not part of the entire application architecture</strong>
. To make this easy <strong>EuiPageHeader</strong> provides a{' '}
<EuiCode>breadcrumbs</EuiCode> prop that accepts the same
configuration as <EuiCode>EuiBreadrumbs.breadcrumbs</EuiCode>.
</p>
</>
),
demo: <PageBreadcrumbs />,
props: { EuiPageHeader },
},
{
source: [
{
type: GuideSectionTypes.JS,
code: pageBreadcrumbsReturnSource,
},
],
text: (
<p>
A common pattern is to use a single breadcrumb to return the user to a
listing page from which the current page was navigated to.
</p>
),
demo: <PageBreadcrumbsReturn />,
props: { EuiPageHeader },
},
{
title: 'Customizing the page header',
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page_header/page_header_tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EuiPageHeader } from '../../../../src/components';

export default () => (
<EuiPageHeader
bottomBorder
tabs={[
{
label: 'Tab 1',
Expand All @@ -14,6 +15,5 @@ export default () => (
},
]}
description="This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length."
bottomBorder
/>
);
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components';

export default () => (
<EuiPageHeader
bottomBorder
pageTitle="Page title"
tabs={[
{
Expand All @@ -18,6 +19,5 @@ export default () => (
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
]}
bottomBorder
/>
);
34 changes: 32 additions & 2 deletions src-docs/src/views/page_header/playground.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
EuiButton,
EuiTabs,
EuiImage,
EuiBreadcrumbs,
} from '../../../../src/components/';
import {
propUtilityForPlayground,
Expand All @@ -17,6 +18,16 @@ import {
createOptionalEnum,
} from '../../services/playground';

const breadcrumbs = `[
{
text: 'Breadcrumb',
href: '#',
},
{
text: 'Current',
},
]`;

const tabs = `[
{
label: 'Tab 1',
Expand Down Expand Up @@ -73,6 +84,14 @@ export const pageHeaderConfig = () => {
},
});

propsToUse.breadcrumbs = simulateFunction({
...propsToUse.breadcrumbs,
custom: {
...propsToUse.breadcrumbs.custom,
value: breadcrumbs,
},
});

propsToUse.tabs = simulateFunction({
...propsToUse.tabs,
custom: {
Expand All @@ -97,13 +116,24 @@ export const pageHeaderConfig = () => {
EuiButton,
EuiTabs,
EuiImage,
EuiBreadcrumbs,
},
imports: {
'@elastic/eui': {
named: ['EuiPageHeader', 'EuiButton', 'EuiTabs', 'EuiImage'],
named: [
'EuiPageHeader',
'EuiButton',
'EuiTabs',
'EuiImage',
'EuiBreadcrumbs',
],
},
},
customProps: generateCustomProps(['rightSideItems', 'tabs']),
customProps: generateCustomProps([
'rightSideItems',
'tabs',
'breadcrumbs',
]),
},
};
};
Loading