Skip to content

Commit 0427fa5

Browse files
cchaosthompsonglsnide
authored
[Page Layouts] Adding content props to EuiPageHeader for pre-determined page layout patterns (#4451)
* Added content type props to EuiPageHeader * Replaced example usages with props * Setting up a new $`euiPageDefaultMaxWidth` sass token * Updating playground & docs * Fixin amsterdam small and reverse shadows * ‘Fixing’ paddingSize prop on EuiPageContent * Adding custom options for `restrictWidth` * Starting the switch to a new component `EuiPageHeaderContent` * middle; simulate node * Update `useIsWithinBreakpoints` to be conditional * Moving the content to a new component * Cleaning up * Playground fix * more customProps * prevent format errors * Some cleanup and fixing of logic * Added `stretch` to the align prop and fixed tests * cl & comments * Docs clarity * words * Apply suggestions from code review * Render `<header>` element in EuiPageHeader * Adding `iconProps` to optional icon * Renaming `rightSideContent` to `rightSideItems` for better clarity of what the prop type is * Replacing `rightSideResponsive` with a more generic `rightSideGroupProps` Also had to change the EuiFlexGroupProps to include ALL props (like Common) * Apply suggestions from code review Co-authored-by: Greg Thompson <[email protected]> * Set deprecation notice for `panelPaddingSize` Co-authored-by: Greg Thompson <[email protected]> Co-authored-by: Dave Snider <[email protected]>
1 parent b4947c4 commit 0427fa5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2108
-97
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
- Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480))
55
- Added `paddingSize` prop to `EuiFlyout` ([#4448](https://github.com/elastic/eui/pull/4448))
66
- Added `size='l'` prop to `EuiTabs` ([#4501](https://github.com/elastic/eui/pull/4501))
7+
- Added content-specific props (`pageTitle`, `description`, `tabs`, `rightSideItems`) to `EuiPageHeader` by creating a new `EuiPageHeaderContent` component ([#4451](https://github.com/elastic/eui/pull/4451))
8+
- Added `isActive` parameter to the `useIsWithinBreakpoints` hook ([#4451](https://github.com/elastic/eui/pull/4451))
79

810
**Bug fixes**
911

@@ -12,6 +14,11 @@
1214
- Fixed `EuiCodeBlock` focus-state if content overflows [#4463](https://github.com/elastic/eui/pull/4463)
1315
- Fixed issues in `EuiDataGrid` around unnecessary scroll bars and container heights not updating ([#4468](https://github.com/elastic/eui/pull/4468))
1416

17+
**Theme: Amsterdam**
18+
19+
- Increased `EuiPage`'s default `restrictWidth` size to `1200px` (extra large breakpoint) ([#4451](https://github.com/elastic/eui/pull/4451))
20+
- Reduced size of `euiBottomShadowSmall` by one layer ([#4451](https://github.com/elastic/eui/pull/4451))
21+
1522
## [`31.5.0`](https://github.com/elastic/eui/tree/v31.5.0)
1623

1724
- Added `isLoading` prop and added `EuiOverlayMask` directly to `EuiConfirmModal` ([#4421](https://github.com/elastic/eui/pull/4421))

‎src-docs/src/components/guide_components.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
9696
min-height: 100vh;
9797
background-color: $euiColorEmptyShade;
9898
border-left: $euiBorderThin;
99-
max-width: 1000px;
99+
max-width: $euiPageDefaultMaxWidth;
100100
margin-left: 240px;
101101
}
102102

@@ -105,11 +105,16 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
105105
min-height: 460px;
106106
}
107107

108-
div {
108+
> div,
109+
> div > div {
109110
background: transparentize($euiColorPrimary, .9);
110111
}
111112
}
112113

114+
.guideDemo__highlightLayout--single {
115+
background: transparentize($euiColorPrimary, .9);
116+
}
117+
113118
.guideDemo__highlightSpacer {
114119
.euiSpacer {
115120
background: transparentize($euiColorPrimary, .9);

‎src-docs/src/services/playground/_playground_compiler.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@
1111
@if (lightness($euiTextColor) < 50) {
1212
background: $euiColorDarkestShade;
1313
}
14-
}
14+
}

‎src-docs/src/services/playground/createOptionalEnum.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export const createOptionalEnum = (prop = { options: {} }) => {
22
const newProp = {
33
...prop,
44
options: {
5-
none: '-- No value selected --',
5+
none: '',
66
...prop.options,
77
},
88
defaultValue: 'none',

‎src-docs/src/services/playground/iconValidator.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { iconTypes } from '../../views/icon/icons';
2+
import { iconTypes as logoTypes } from '../../views/icon/logos';
23
import { mapOptions } from './mapOptions';
34
import { PropTypes } from 'react-view';
45

5-
const iconOptions = mapOptions(iconTypes);
6+
const iconOptions = mapOptions(iconTypes.concat(logoTypes));
67

78
export const iconValidator = (prop = { custom: {} }) => {
89
const newProp = {

‎src-docs/src/services/playground/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { iconValidator } from './iconValidator';
66
export { createOptionalEnum } from './createOptionalEnum';
77
export { dummyFunction } from './dummyFunction';
88
export { simulateFunction } from './simulateFunction';
9+
export { generateAst, generateCustomProps } from './utils';

‎src-docs/src/services/playground/knobs.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ const Knob = ({
214214
isInvalid={error && error.length > 0}
215215
compressed
216216
fullWidth
217+
hasNoInitialSelection={!valueKey && !defaultValue}
217218
/>
218219
</EuiFormRow>
219220
);
@@ -241,11 +242,11 @@ const Knob = ({
241242
<EuiSwitch
242243
id={name}
243244
label={custom.label || ''}
244-
checked={typeof val !== 'undefined' && val}
245+
checked={typeof val !== 'undefined' && Boolean(val)}
245246
onChange={(e) => {
246247
const value = e.target.checked;
247248

248-
set(value ? value : undefined);
249+
set(value ? custom.value ?? e.target.checked : undefined);
249250
}}
250251
compressed
251252
/>

‎src-docs/src/services/playground/playground.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,15 @@ export default ({ config, setGhostBackground, playgroundClassName }) => {
2626
newCode = newCode.replace(/(\);)$/m, '');
2727
}
2828

29-
return format(newCode.trim(), ' '.repeat(4));
29+
let formatted;
30+
// TODO: Replace `html-format` with something better.
31+
// Notably, something more jsx-friendly
32+
try {
33+
formatted = format(newCode.trim(), ' '.repeat(4));
34+
} catch {
35+
formatted = newCode.trim();
36+
}
37+
return formatted;
3038
};
3139

3240
const Playground = () => {

‎src-docs/src/services/playground/utils.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import template from '@babel/template';
2+
3+
export const generateAst = (value) => {
4+
return template.ast(String(value), { plugins: ['jsx'] }).expression;
5+
};
6+
7+
export const generateCustomProps = (props) => {
8+
return props.reduce((obj, item) => {
9+
return {
10+
...obj,
11+
[item]: {
12+
generate: generateAst,
13+
},
14+
};
15+
}, {});
16+
};

‎src-docs/src/views/icon/logos.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
EuiCopy,
2121
} from '../../../../src/components';
2222

23-
const iconTypes = [
23+
export const iconTypes = [
2424
'logoAppSearch',
2525
'logoBeats',
2626
'logoBusinessAnalytics',

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ import {
88
EuiPageContentHeader,
99
EuiPageContentHeaderSection,
1010
EuiPageHeader,
11-
EuiPageHeaderSection,
1211
EuiPageSideBar,
1312
EuiTitle,
13+
EuiButton,
1414
} from '../../../../src/components';
1515

1616
export default () => (
1717
<EuiPage>
1818
<EuiPageSideBar>SideBar nav</EuiPageSideBar>
1919
<EuiPageBody component="div">
20-
<EuiPageHeader>
21-
<EuiPageHeaderSection>
22-
<EuiTitle size="l">
23-
<h1>Page title</h1>
24-
</EuiTitle>
25-
</EuiPageHeaderSection>
26-
<EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
27-
</EuiPageHeader>
20+
<EuiPageHeader
21+
iconType="logoElastic"
22+
pageTitle="Page title"
23+
rightSideItems={[
24+
<EuiButton fill>Add something</EuiButton>,
25+
<EuiButton>Do something</EuiButton>,
26+
]}
27+
/>
2828
<EuiPageContent>
2929
<EuiPageContentHeader>
3030
<EuiPageContentHeaderSection>

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
EuiPageContentHeader,
99
EuiPageContentHeaderSection,
1010
EuiPageHeader,
11-
EuiPageHeaderSection,
1211
EuiPageSideBar,
1312
EuiTitle,
1413
} from '../../../../src/components';
@@ -18,14 +17,11 @@ export default () => (
1817
<EuiPageSideBar>SideBar nav</EuiPageSideBar>
1918
{/* The EUI docs site already has a wrapping <main> tag, so we've changed this example to a <div> for accessibility. You likely don't need to copy the `component` prop for your own usage. */}
2019
<EuiPageBody component="div">
21-
<EuiPageHeader>
22-
<EuiPageHeaderSection>
23-
<EuiTitle size="l">
24-
<h1>Page title</h1>
25-
</EuiTitle>
26-
</EuiPageHeaderSection>
27-
<EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
28-
</EuiPageHeader>
20+
<EuiPageHeader
21+
pageTitle="Page title"
22+
rightSideItems={['Page abilities']}
23+
alignItems="center"
24+
/>
2925
<EuiPageContent verticalPosition="center" horizontalPosition="center">
3026
<EuiPageContentHeader>
3127
<EuiPageContentHeaderSection>

0 commit comments

Comments
 (0)