github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -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 {
EuiText,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageTemplate,
EuiCard,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageHeader,
EuiFlexGroup,
EuiFlexItem,
EuiFieldSearch,
@ -44,59 +44,66 @@ function DeveloperExamples({ examples, navigateToApp, getUrlForApp }: Props) {
});
return (
<EuiPageContent>
<EuiPageContentHeader>
<EuiText>
<h1>Developer examples</h1>
<p>
The following examples showcase services and APIs that are available to developers.
<>
<EuiPageTemplate.Header>
<EuiFlexGroup justifyContent={'spaceBetween'}>
<EuiFlexItem>
<EuiPageHeader pageTitle={'Developer examples'} />
<EuiText>
The following examples showcase services and APIs that are available to developers.
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldSearch
fullWidth
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
isClearable={true}
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>
))}
</EuiFlexGroup>
</EuiPageContent>
</EuiFlexGroup>
</EuiPageTemplate.Header>
<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>
</>
);
}