[Page Layouts] Adding content props to EuiPageHeader for pre-determined page layout patterns

CHANGELOG.md

@@ -4,6 +4,8 @@
 - Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480))
 - Added `paddingSize` prop to `EuiFlyout` ([#4448](https://github.com/elastic/eui/pull/4448))
 - Added `size='l'` prop to `EuiTabs` ([#4501](https://github.com/elastic/eui/pull/4501))
+- Added content-specific props (`pageTitle`, `description`, `tabs`, `rightSideItems`) to `EuiPageHeader` by creating a new `EuiPageHeaderContent` component ([#4451](https://github.com/elastic/eui/pull/4451))
+- Added `isActive` parameter to the `useIsWithinBreakpoints` hook ([#4451](https://github.com/elastic/eui/pull/4451))
 
 **Bug fixes**
 
@@ -12,6 +14,11 @@
 - Fixed `EuiCodeBlock` focus-state if content overflows [#4463](https://github.com/elastic/eui/pull/4463)
 - Fixed issues in `EuiDataGrid` around unnecessary scroll bars and container heights not updating ([#4468](https://github.com/elastic/eui/pull/4468))
 
+**Theme: Amsterdam**
+
+- Increased `EuiPage`'s default `restrictWidth` size to `1200px` (extra large breakpoint) ([#4451](https://github.com/elastic/eui/pull/4451))
+- Reduced size of `euiBottomShadowSmall` by one layer ([#4451](https://github.com/elastic/eui/pull/4451))
+
 ## [`31.5.0`](https://github.com/elastic/eui/tree/v31.5.0)
 
 - Added `isLoading` prop and added `EuiOverlayMask` directly to `EuiConfirmModal` ([#4421](https://github.com/elastic/eui/pull/4421))

src-docs/src/components/guide_components.scss

@@ -96,7 +96,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;
   border-left: $euiBorderThin;
-  max-width: 1000px;
+  max-width: $euiPageDefaultMaxWidth;
   margin-left: 240px;
 }
 
@@ -105,11 +105,16 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     min-height: 460px;
   }
 
-  div {
+  > div,
+  > div > div {
     background: transparentize($euiColorPrimary, .9);
   }
 }
 
+.guideDemo__highlightLayout--single {
+  background: transparentize($euiColorPrimary, .9);
+}
+
 .guideDemo__highlightSpacer {
   .euiSpacer {
     background: transparentize($euiColorPrimary, .9);

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

@@ -11,4 +11,4 @@
   @if (lightness($euiTextColor) < 50) {
     background: $euiColorDarkestShade;
   }
-}
+}

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

@@ -2,7 +2,7 @@ export const createOptionalEnum = (prop = { options: {} }) => {
   const newProp = {
     ...prop,
     options: {
-      none: '-- No value selected --',
+      none: '',
       ...prop.options,
     },
     defaultValue: 'none',

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

@@ -1,8 +1,9 @@
 import { iconTypes } from '../../views/icon/icons';
+import { iconTypes as logoTypes } from '../../views/icon/logos';
 import { mapOptions } from './mapOptions';
 import { PropTypes } from 'react-view';
 
-const iconOptions = mapOptions(iconTypes);
+const iconOptions = mapOptions(iconTypes.concat(logoTypes));
 
 export const iconValidator = (prop = { custom: {} }) => {
   const newProp = {

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

@@ -6,3 +6,4 @@ export { iconValidator } from './iconValidator';
 export { createOptionalEnum } from './createOptionalEnum';
 export { dummyFunction } from './dummyFunction';
 export { simulateFunction } from './simulateFunction';
+export { generateAst, generateCustomProps } from './utils';

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

@@ -214,6 +214,7 @@ const Knob = ({
               isInvalid={error && error.length > 0}
               compressed
               fullWidth
+              hasNoInitialSelection={!valueKey && !defaultValue}
             />
           </EuiFormRow>
         );
@@ -241,11 +242,11 @@ const Knob = ({
                 <EuiSwitch
                   id={name}
                   label={custom.label || ''}
-                  checked={typeof val !== 'undefined' && val}
+                  checked={typeof val !== 'undefined' && Boolean(val)}
                   onChange={(e) => {
                     const value = e.target.checked;
 
-                    set(value ? value : undefined);
+                    set(value ? custom.value ?? e.target.checked : undefined);
                   }}
                   compressed
                 />

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

@@ -26,7 +26,15 @@ export default ({ config, setGhostBackground, playgroundClassName }) => {
       newCode = newCode.replace(/(\);)$/m, '');
     }
 
-    return format(newCode.trim(), ' '.repeat(4));
+    let formatted;
+    // TODO: Replace `html-format` with something better.
+    // Notably, something more jsx-friendly
+    try {
+      formatted = format(newCode.trim(), ' '.repeat(4));
+    } catch {
+      formatted = newCode.trim();
+    }
+    return formatted;
   };
 
   const Playground = () => {

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

@@ -0,0 +1,16 @@
+import template from '@babel/template';
+
+export const generateAst = (value) => {
+  return template.ast(String(value), { plugins: ['jsx'] }).expression;
+};
+
+export const generateCustomProps = (props) => {
+  return props.reduce((obj, item) => {
+    return {
+      ...obj,
+      [item]: {
+        generate: generateAst,
+      },
+    };
+  }, {});
+};

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

@@ -20,7 +20,7 @@ import {
   EuiCopy,
 } from '../../../../src/components';
 
-const iconTypes = [
+export const iconTypes = [
   'logoAppSearch',
   'logoBeats',
   'logoBusinessAnalytics',

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

@@ -8,23 +8,23 @@ import {
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiPageSideBar,
   EuiTitle,
+  EuiButton,
 } from '../../../../src/components';
 
 export default () => (
   <EuiPage>
     <EuiPageSideBar>SideBar nav</EuiPageSideBar>
     <EuiPageBody component="div">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader
+        iconType="logoElastic"
+        pageTitle="Page title"
+        rightSideItems={[
+          <EuiButton fill>Add something</EuiButton>,
+          <EuiButton>Do something</EuiButton>,
+        ]}
+      />
       <EuiPageContent>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

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

@@ -8,7 +8,6 @@ import {
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiPageSideBar,
   EuiTitle,
 } from '../../../../src/components';
@@ -18,14 +17,11 @@ export default () => (
     <EuiPageSideBar>SideBar nav</EuiPageSideBar>
     {/* 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. */}
     <EuiPageBody component="div">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader
+        pageTitle="Page title"
+        rightSideItems={['Page abilities']}
+        alignItems="center"
+      />
       <EuiPageContent verticalPosition="center" horizontalPosition="center">
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>