Skip to content

Commit d5e031e

Browse files
author
cchaos
committed
Added exampleToggles to GuideSectionExample for easily passing through custom controls
Update EuiPage’s example usage to use GuideSection directly
1 parent c305078 commit d5e031e

4 files changed

Lines changed: 98 additions & 74 deletions

File tree

‎src-docs/src/components/guide_section/guide_section.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import {
2121
GuideSectionExampleTabsProps,
2222
} from './guide_section_parts/guide_section_tabs';
2323

24-
export interface GuideSection {
24+
export interface GuideSection
25+
extends Pick<
26+
GuideSectionExample,
27+
'exampleToggles' | 'demoPanelProps' | 'ghostBackground'
28+
> {
2529
id?: string;
2630
title?: string;
2731
text?: ReactNode;
@@ -31,10 +35,8 @@ export interface GuideSection {
3135
slug: string;
3236
demo: ReactNode;
3337
};
34-
demoPanelProps?: GuideSectionExample['demoPanelProps'];
3538
props?: object;
3639
playground?: any;
37-
ghostBackground?: boolean;
3840
wrapText?: boolean;
3941
snippet?: string | string[];
4042
}
@@ -78,6 +80,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
7880
ghostBackground,
7981
wrapText = true,
8082
demoPanelProps,
83+
exampleToggles,
8184
snippet,
8285
}) => {
8386
const { path } = useRouteMatch();
@@ -191,6 +194,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
191194
{renderPlayground()}
192195
</EuiFlyout>
193196
)}
197+
194198
{(demo || fullScreen) && (
195199
<>
196200
<EuiSpacer />
@@ -216,6 +220,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
216220
tabs={renderTabs()}
217221
ghostBackground={ghostBackground}
218222
demoPanelProps={demoPanelProps}
223+
exampleToggles={exampleToggles}
219224
/>
220225
</>
221226
)}

‎src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
22
import classNames from 'classnames';
33
import { EuiSplitPanel } from '../../../../../src/components/panel';
44
import { _EuiSplitPanelInnerProps } from '../../../../../src/components/panel/split_panel/';
5+
import { EuiHorizontalRule } from '../../../../../src';
56

67
export interface GuideSectionExample {
78
example: ReactNode;
@@ -10,6 +11,8 @@ export interface GuideSectionExample {
1011
tabContent?: ReactNode;
1112
ghostBackground?: boolean;
1213
demoPanelProps?: _EuiSplitPanelInnerProps;
14+
/** Creates another inner split panel containing an array of custom controls */
15+
exampleToggles?: any;
1316
}
1417

1518
export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
@@ -18,6 +21,7 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
1821
ghostBackground = false,
1922
tabContent,
2023
demoPanelProps,
24+
exampleToggles,
2125
}) => {
2226
const classes = classNames(demoPanelProps?.className, {
2327
guideDemo__ghostBackground: ghostBackground,
@@ -32,6 +36,15 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
3236
>
3337
{example}
3438
</EuiSplitPanel.Inner>
39+
{exampleToggles && (
40+
<>
41+
<EuiHorizontalRule margin="none" />
42+
<EuiSplitPanel.Inner paddingSize="m" color="subdued">
43+
{exampleToggles}
44+
</EuiSplitPanel.Inner>
45+
</>
46+
)}
47+
{exampleToggles && tabs && <EuiHorizontalRule margin="none" />}
3548
{(tabs || tabContent) && (
3649
<EuiSplitPanel.Inner paddingSize="none" color="subdued">
3750
{tabs}

‎src-docs/src/views/page/components/page_demo.tsx‎

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,22 @@ import classNames from 'classnames';
44
import {
55
EuiImage,
66
EuiSwitch,
7-
EuiPanel,
87
EuiFlexGroup,
98
EuiFlexItem,
109
EuiPageProps,
10+
EuiPage,
1111
} from '../../../../../src';
1212

1313
import contentSvg from '../../../images/content.svg';
1414
import sideNavSvg from '../../../images/side_nav.svg';
1515

1616
import Page from './page';
17+
import { GuideSection } from '../../../components/guide_section/guide_section';
18+
import { GuideSectionTypes } from '../../../components/guide_section/guide_section_types';
19+
20+
const PageSource = require('!!raw-loader!./page');
21+
// @ts-ignore Importing from JS
22+
import { pageConfig } from './playground';
1723

1824
export const PageComponentDemo: FunctionComponent = () => {
1925
const [horizontal, setHorizontal] = useState(true);
@@ -32,42 +38,63 @@ export const PageComponentDemo: FunctionComponent = () => {
3238

3339
return (
3440
<>
35-
<div className={classNames('guideDemo__highlightLayout')}>
36-
<Page
37-
content={content}
38-
sideBar={sideBar}
39-
restrictWidth={restrictWidth}
40-
grow={grow}
41-
direction={horizontal ? 'row' : 'column'}
42-
/>
43-
</div>
44-
<EuiPanel style={{ borderWidth: '1px 0' }} hasBorder borderRadius="none">
45-
<EuiFlexGroup>
46-
<EuiFlexItem grow={false}>
47-
<EuiSwitch
48-
label="Grow"
49-
checked={grow}
50-
onChange={() => setGrow((g) => !g)}
51-
/>
52-
</EuiFlexItem>
53-
<EuiFlexItem grow={false}>
54-
<EuiSwitch
55-
label="Horizontal"
56-
checked={horizontal}
57-
onChange={() => setHorizontal((s) => !s)}
58-
/>
59-
</EuiFlexItem>
60-
<EuiFlexItem grow={false}>
61-
<EuiSwitch
62-
label="Restrict width"
63-
checked={!!restrictWidth}
64-
onChange={(e) =>
65-
setRestrictWidth(e.target.checked ? '75%' : false)
66-
}
41+
<GuideSection
42+
demoPanelProps={{
43+
paddingSize: 'none',
44+
style: { overflow: 'hidden' },
45+
}}
46+
demo={
47+
<div className={classNames('guideDemo__highlightLayout')}>
48+
<Page
49+
content={content}
50+
sideBar={sideBar}
51+
restrictWidth={restrictWidth}
52+
grow={grow}
53+
direction={horizontal ? 'row' : 'column'}
6754
/>
68-
</EuiFlexItem>
69-
</EuiFlexGroup>
70-
</EuiPanel>
55+
</div>
56+
}
57+
source={[
58+
{
59+
type: GuideSectionTypes.JS,
60+
code: PageSource,
61+
},
62+
]}
63+
props={{
64+
EuiPage,
65+
}}
66+
playground={pageConfig}
67+
exampleToggles={
68+
<EuiFlexGroup wrap responsive={false}>
69+
<EuiFlexItem grow={false}>
70+
<EuiSwitch
71+
label="Grow"
72+
checked={grow}
73+
onChange={() => setGrow((g) => !g)}
74+
compressed
75+
/>
76+
</EuiFlexItem>
77+
<EuiFlexItem grow={false}>
78+
<EuiSwitch
79+
label="Column"
80+
checked={!horizontal}
81+
onChange={() => setHorizontal((s) => !s)}
82+
compressed
83+
/>
84+
</EuiFlexItem>
85+
<EuiFlexItem grow={false}>
86+
<EuiSwitch
87+
label="Restrict width"
88+
checked={!!restrictWidth}
89+
onChange={(e) =>
90+
setRestrictWidth(e.target.checked ? '75%' : false)
91+
}
92+
compressed
93+
/>
94+
</EuiFlexItem>
95+
</EuiFlexGroup>
96+
}
97+
/>
7198
</>
7299
);
73100
};

‎src-docs/src/views/page/page_example.js‎

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3-
import { GuideSectionTypes } from '../../components';
43

5-
import {
6-
EuiText,
7-
EuiSpacer,
8-
EuiCallOut,
9-
EuiCode,
10-
EuiPage,
11-
} from '../../../../src';
12-
13-
import { pageConfig } from './components/playground';
4+
import { EuiText, EuiSpacer, EuiCallOut, EuiCode } from '../../../../src';
145

156
import { PageComponentDemo } from './components/page_demo';
16-
const PageSource = require('!!raw-loader!./components/page');
177

188
export const PageExample = {
199
title: 'Page components',
@@ -44,34 +34,23 @@ export const PageExample = {
4434
sections: [
4535
{
4636
title: 'Page',
37+
wrapText: false,
4738
text: (
4839
<>
49-
<p>
50-
<strong>EuiPage</strong> is simply a flex wrapper that will
51-
automatically <EuiCode>grow</EuiCode> to fill the height of a flex
52-
container. You can also control the flex{' '}
53-
<EuiCode>direction</EuiCode> and the maximum width using
54-
<EuiCode>restrictWidth</EuiCode> which centers the page when it
55-
reaches the provided value (or <EuiCode>1200px</EuiCode> if set to{' '}
56-
<EuiCode>true</EuiCode>).
57-
</p>
40+
<EuiText>
41+
<p>
42+
<strong>EuiPage</strong> is simply a flex wrapper that will
43+
automatically <EuiCode>grow</EuiCode> to fill the height of a flex
44+
container. You can also control the flex{' '}
45+
<EuiCode>direction</EuiCode> and the maximum width using
46+
<EuiCode>restrictWidth</EuiCode> which centers the page when it
47+
reaches the provided value (or <EuiCode>1200px</EuiCode> if set to{' '}
48+
<EuiCode>true</EuiCode>).
49+
</p>
50+
</EuiText>
51+
<PageComponentDemo />
5852
</>
5953
),
60-
demo: <PageComponentDemo />,
61-
demoPanelProps: {
62-
paddingSize: 'none',
63-
style: { overflow: 'hidden' },
64-
},
65-
source: [
66-
{
67-
type: GuideSectionTypes.TSX,
68-
code: PageSource,
69-
},
70-
],
71-
props: {
72-
EuiPage,
73-
},
74-
playground: pageConfig,
7554
},
7655
],
7756
};

0 commit comments

Comments
 (0)