github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update EUI layout components in dev examples (#163494)

Browse source 
## Summary

Partially addresses https://github.com/elastic/kibana/issues/161422

New look of developer examples:

<img width="1231" alt="image"
src="15a3b31d-4f0c-4508-afa7-cb02e00f6b53">
This commit is contained in:
Vadim Kibana 2023-08-10 11:19:06 +02:00 • committed by GitHub
parent 2113878837
commit 8e94530cc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 54 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

101
examples/developer_examples/public/app.tsx
View file

@ -11,9 +11,9 @@ import ReactDOM from 'react-dom';
import { import {
EuiText, EuiText,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiCard, EuiCard,
EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiPageHeader,
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiFieldSearch, EuiFieldSearch,
@ -44,59 +44,66 @@ function DeveloperExamples({ examples, navigateToApp, getUrlForApp }: Props) {
}); });
return ( return (
<EuiPageContent> <>
<EuiPageContentHeader> <EuiPageTemplate.Header>
<EuiText> <EuiFlexGroup justifyContent={'spaceBetween'}>
<h1>Developer examples</h1> <EuiFlexItem>
<p> <EuiPageHeader pageTitle={'Developer examples'} />
The following examples showcase services and APIs that are available to developers. <EuiText>
The following examples showcase services and APIs that are available to developers.
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldSearch <EuiFieldSearch
fullWidth
placeholder="Search" placeholder="Search"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
isClearable={true} isClearable={true}
aria-label="Search developer examples" aria-label="Search developer examples"
/> />
</p>
</EuiText>
</EuiPageContentHeader>
<EuiFlexGroup wrap>
{filteredExamples.map((def) => (
<EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
<EuiCard
description={
<EuiHighlight search={search} highlightAll={true}>
{def.description}
</EuiHighlight>
}
title={
<React.Fragment>
<EuiLink
onClick={() => {
navigateToApp(def.appId);
}}
>
<EuiHighlight search={search} highlightAll={true}>
{def.title}
</EuiHighlight>
</EuiLink>
<EuiButtonIcon
iconType="popout"
onClick={() =>
window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
}
>
Open in new tab
</EuiButtonIcon>
</React.Fragment>
}
image={def.image}
footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
/>
</EuiFlexItem> </EuiFlexItem>
))} </EuiFlexGroup>
</EuiFlexGroup> </EuiPageTemplate.Header>
</EuiPageContent> <EuiPageTemplate.Section>
<EuiFlexGroup wrap>
{filteredExamples.map((def) => (
<EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
<EuiCard
description={
<EuiHighlight search={search} highlightAll={true}>
{def.description}
</EuiHighlight>
}
title={
<React.Fragment>
<EuiLink
onClick={() => {
navigateToApp(def.appId);
}}
>
<EuiHighlight search={search} highlightAll={true}>
{def.title}
</EuiHighlight>
</EuiLink>
<EuiButtonIcon
iconType="popout"
onClick={() =>
window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
}
>
Open in new tab
</EuiButtonIcon>
</React.Fragment>
}
image={def.image}
footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiPageTemplate.Section>
</>
); );
} }