@ember-eui/core 5.0.0-alpha.5 → 5.0.1

package/addon/components/eui-page-template/index.ts

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { EuiButtomBarArgs } from '../eui-bottom-bar';
+import { tracked } from '@glimmer/tracking';
 // import { action } from '@ember/object';
 // import { tracked } from '@glimmer/tracking';
 // import {
@@ -28,8 +29,16 @@ export const TEMPLATES = [
   'empty'
 ] as const;
 
+interface NormalProps {
+  className?: string;
+}
+
 export type EuiPageTemplateProps = {
   template?: typeof TEMPLATES[number];
+
+  pageBodyProps: NormalProps;
+  pageContentProps: NormalProps;
+  pageContentBodyProps: NormalProps;
   /**
   //  * Gets passed along to the #EuiBottomBar component if `bottomBar` has contents
   //  */
@@ -44,17 +53,39 @@ export type EuiPageTemplateProps = {
    * Minimum height in which to enforce scrolling
    */
   minHeight?: number;
+
+  restrictWidth?: boolean | number | string;
 };
 
 export default class EuiPageTemplate extends Component<EuiPageTemplateProps> {
   // Defaults
-  @argOrDefault(460) minHeight!: number;
   @argOrDefault(false) fullHeight!: boolean;
-  @argOrDefault('l') paddingSize!: string;
   @argOrDefault('default') template!: typeof TEMPLATES[number];
 
+  @tracked isWithinBreakpoints = false;
+
+  setIsWithinBreakpoints = (value: boolean) => {
+    this.isWithinBreakpoints = value;
+  };
+
+  get minHeight() {
+    const minHeight = this.args.minHeight ?? 460;
+    if (typeof this.args.minHeight === 'number') {
+      return `${minHeight}px`;
+    }
+    return minHeight;
+  }
+
+  get restrictWidth() {
+    const width = this.args.restrictWidth ?? true;
+    if (typeof this.args.restrictWidth === 'number') {
+      return `${width}px`;
+    }
+    return width;
+  }
+
   get classes() {
-    return 'euiPageTemplate '.concat(this.fullHeightClass);
+    return `euiPageTemplate ${this.fullHeightClass}`;
   }
 
   get fullHeightClass() {
@@ -66,24 +97,21 @@ export default class EuiPageTemplate extends Component<EuiPageTemplateProps> {
   }
 
   get canFullHeight() {
-    return this.template === 'default' || this.template === 'empty';
+    return (
+      this.isWithinBreakpoints &&
+      (this.template === 'default' || this.template === 'empty')
+    );
   }
 
-  get pageBodyProps() {
-    return this.fullHeightClass;
-    // ...pageBodyProps,
-    // className: classNames(fullHeightClass, pageBodyProps?.className),
+  get pageBodyPropsClass() {
+    return `${this.fullHeightClass} ${this.args.pageBodyProps?.className}`;
   }
 
-  get pageContentProps() {
-    return this.yScrollClass;
-    // ...pageContentProps,
-    // className: classNames(yScrollClass, pageContentProps?.className),
+  get pageContentPropsClass() {
+    return `${this.yScrollClass} ${this.args.pageContentProps?.className}`;
   }
 
-  get pageContentBodyProps() {
-    return this.fullHeightClass;
-    // ...pageContentBodyProps,
-    //className: classNames(fullHeightClass, pageContentBodyProps?.className),
+  get pageContentBodyPropsClass() {
+    return `${this.fullHeightClass} ${this.args.pageContentBodyProps?.className}`;
   }
 }

package/addon/components/eui-split-panel/outer/index.hbs

@@ -1,13 +1,14 @@
 {{#let
   (arg-or-default @direction "column")
   (arg-or-default @responsive (array "xs" "s"))
-  as |direction responsive|
+  (use-state false)
+  as |direction responsive isResponsive|
 }}
   <EuiPanel
     class={{class-names
       "euiSplitPanel"
       (if (eq direction "row") "euiSplitPanel--row")
-      (if this.isResponsive "euiSplitPanel-isResponsive")
+      (if isResponsive.value "euiSplitPanel-isResponsive")
     }}
     @grow={{arg-or-default @grow false}}
     @paddingSize={{arg-or-default @paddingSize "none"}}
@@ -15,10 +16,10 @@
     @color={{@color}}
     @borderRadius={{@borderRadius}}
     @hasBorder={{@hasBorder}}
-    {{this.isWithinBreakpointsModifier
+    {{use-is-within-breakpoints
       sizes=responsive
       isActive=(not (not responsive))
-      setIsWithinBreakpointsValue=(set this "isResponsive")
+      setIsWithinBreakpointsValue=isResponsive.setState
     }}
     ...attributes
   >

package/addon/helpers/eui-page-restrict-width.ts

@@ -0,0 +1,37 @@
+import { helper } from '@ember/component/helper';
+export type _EuiPageRestrictWidth = {
+  /**
+   * Sets the max-width of the page,
+   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width in px,
+   * set to a string for a custom width in custom measurement.
+   */
+  restrictWidth?: boolean | number | string;
+};
+
+export function restrictWidth(
+  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],
+  style?: Record<string, unknown>
+) {
+  let widthClassName;
+  let newStyle = {
+    ...(style || {})
+  };
+
+  if (restrictWidth === true) {
+    widthClassName = 'restrictWidth-default';
+  } else if (restrictWidth !== false) {
+    widthClassName = 'restrictWidth-custom';
+    newStyle = { ...newStyle, maxWidth: restrictWidth };
+  }
+
+  return { widthClassName, newStyle };
+}
+
+export default helper(function ([restrict, style]: [
+  _EuiPageRestrictWidth['restrictWidth'],
+  Record<string, unknown> | undefined
+]) {
+  return restrictWidth(restrict, style);
+});

package/addon/{components/eui-split-panel/outer/index.ts → modifiers/use-is-within-breakpoints.ts}

@@ -1,12 +1,7 @@
-import Component from '@glimmer/component';
-import {
-  EuiBreakpointSize,
-  isWithinBreakpoints
-} from '../../../utils/breakpoint';
+import { EuiBreakpointSize, isWithinBreakpoints } from '../utils/breakpoint';
 import { modifier } from 'ember-modifier';
-import { tracked } from '@glimmer/tracking';
 
-const isWithinBreakpointsModifier = modifier(function (
+export default modifier(function (
   _element: Element,
   _pos: unknown[],
   {
@@ -31,7 +26,3 @@ const isWithinBreakpointsModifier = modifier(function (
 
   return () => window.removeEventListener('resize', handleResize);
 });
-export default class EuiSplitPanelOuterComponent extends Component {
-  isWithinBreakpointsModifier = isWithinBreakpointsModifier;
-  @tracked isResponsive = false;
-}

package/addon/styles/ember-eui.css

@@ -21,3 +21,7 @@
 .ember-basic-dropdown-content {
   z-index: 99999
 }
+
+.euiBadge__iconButton svg {
+  pointer-events: none;
+}

package/addon/utils/css-mappings/eui-page.ts

@@ -1,5 +1,17 @@
 export const baseClass = 'euiPage';
 
+export const sizeMapping = {
+  s: `${baseClass}--s`,
+  m: `${baseClass}--m`,
+  l: `${baseClass}--l`,
+  xl: `${baseClass}--xl`
+};
+
+export const typeMapping = {
+  space: `${baseClass}--space`,
+  user: `${baseClass}--user`
+};
+
 export const paddingSizeMapping = {
   none: '',
   s: `${baseClass}--paddingSmall`,
@@ -7,10 +19,16 @@ export const paddingSizeMapping = {
   l: `${baseClass}--paddingLarge`
 };
 
+export const directionMapping = {
+  row: '',
+  column: `${baseClass}--column`
+};
+
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    paddingSize: paddingSizeMapping
+    paddingSize: paddingSizeMapping,
+    direction: directionMapping
   }
 };
 

package/addon/utils/css-mappings/eui-tabs.ts

@@ -9,7 +9,7 @@ export const sizeMapping = {
   s: `${baseClass}--small`,
   m: '',
   l: `${baseClass}--large`,
-  xl: `${baseClass}--xLarge`
+  xl: `${baseClass}--xlarge`
 };
 
 const mapping: ComponentMapping = {

package/app/helpers/eui-page-restrict-width.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  restrictWidth
+} from '@ember-eui/core/helpers/eui-page-restrict-width';

package/app/modifiers/use-is-within-breakpoints.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/modifiers/use-is-within-breakpoints';

package/docs/layout/page-header/demo/demo1.md

@@ -0,0 +1,23 @@
+---
+order: 1
+---
+
+# Basic
+
+```hbs template
+<EuiPageHeader
+  @bottomBorder={{true}}
+  @pageTitle="Page Title"
+  @iconType='logoKibana'
+  @description='This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.'
+>
+  <:rightSideItems>
+    <EuiFlexItem>
+      <EuiButton @fill={{true}}>Add something</EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiButton>Do something</EuiButton>
+    </EuiFlexItem>
+  </:rightSideItems>
+</EuiPageHeader>
+```

package/docs/layout/page-header/demo/demo2.md

@@ -0,0 +1,23 @@
+---
+order: 2
+---
+
+# Tabs
+
+```hbs template
+<EuiPageHeader
+  @bottomBorder={{true}}
+	@pageTitle="Page title"
+  @description='This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.'
+	@tabs={{array (hash label="Tab 1" isSelected=true) (hash label="Tab 2")}}
+>
+  <:rightSideItems>
+    <EuiFlexItem>
+      <EuiButton @fill={{true}}>Add something</EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiButton>Do something</EuiButton>
+    </EuiFlexItem>
+  </:rightSideItems>
+</EuiPageHeader>
+```

package/docs/layout/page-header/demo/demo3.md

@@ -0,0 +1,14 @@
+---
+order: 3
+---
+
+# Tabs
+
+```hbs template
+<EuiPageHeader
+  @bottomBorder={{true}}
+  @description='This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.'
+	@dumb={{true}}
+	@tabs={{array (hash label="Tab 1" isSelected=true) (hash label="Tab 2")}}
+/>
+```

package/docs/layout/page-header/demo/demo4.md

@@ -0,0 +1,52 @@
+---
+order: 4
+---
+
+# Breadcrumbs in the page header
+
+<EuiText>
+	<a href="#">Breadcrumbs</a> are useful for tracking in-page flows that <strong>are not part of the entire application architecture</strong>. To make this easy <strong>EuiPageHeader</strong> provides a <EuiCode>breadcrumbs</EuiCode> prop that accepts the same configuration as <EuiCode>EuiBreadrumbs.breadcrumbs</EuiCode>.
+</EuiText>
+
+```hbs template
+<EuiPageHeader
+  @bottomBorder={{true}}
+  @pageTitle='Page title'
+  @description='Example of a description.'
+  @breadcrumbs={{this.breadcrumbs}}
+>
+  <:rightSideItems>
+    <EuiFlexItem>
+      <EuiButton @fill={{true}}>Add something</EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiButton>Do something</EuiButton>
+    </EuiFlexItem>
+  </:rightSideItems>
+</EuiPageHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  breadcrumbs = [
+    {
+      text: 'Breadcrumb 1',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    },
+    {
+      text: 'Breadcrumb 2',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    },
+    {
+      text: 'Current',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    }
+  ];
+}
+```

package/docs/layout/page-header/demo/demo5.md

@@ -0,0 +1,64 @@
+---
+order: 5
+---
+
+# Common pattern
+
+<EuiText>
+	A common pattern is to use a single breadcrumb to return the user to a listing page from which the current page was navigated to
+</EuiText>
+
+```hbs template
+<EuiPageHeader
+  @bottomBorder={{true}}
+  @pageTitle='Page title'
+  @description='Example of a description.'
+  @breadcrumbs={{array
+    (hash
+      text=(component
+        'eui-button-title'
+        title='Return'
+        iconType='arrowLeft'
+        color='primary'
+        size='s'
+				buttonEmpty=true
+      )
+      href='http://www.elastic.co'
+    )
+  }}
+>
+  <:rightSideItems>
+    <EuiFlexItem>
+      <EuiButton @fill={{true}}>Add something</EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiButton>Do something</EuiButton>
+    </EuiFlexItem>
+  </:rightSideItems>
+</EuiPageHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  breadcrumbs = [
+    {
+      text: 'Breadcrumb 1',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    },
+    {
+      text: 'Breadcrumb 2',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    },
+    {
+      text: 'Current',
+      href: '#',
+      onClick: (e) => e.preventDefault()
+    }
+  ];
+}
+```

package/docs/layout/page-header/demo/demo6.md

@@ -0,0 +1,21 @@
+---
+order: 6
+---
+
+# Customizing the page header
+
+<EuiText>
+	The page header content props are helpful props to push content into established Elastic page layout patterns. They are completely optional and by design, inflexible. If you need a layout that does not match these patterns you can pass in your own <EuiCode>{{"<:default>"}}</EuiCode> block utilizing the <strong>EuiPageHeaderSection</strong> components.
+
+</EuiText>
+
+```hbs template
+<EuiPageHeader @alignItems='center' @bottomBorder={{true}}>
+  <EuiPageHeaderSection>
+    <EuiTitle @size='l'>
+      Page title
+    </EuiTitle>
+  </EuiPageHeaderSection>
+  <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
+</EuiPageHeader>
+```

package/docs/layout/page-header/index.md

@@ -0,0 +1,11 @@
+---
+order: 1
+title: Page Header
+---
+
+<EuiPageHeader @pageTitle="Page Header" @bottomBorder={{true}}>
+	<:description>
+	<EuiText>While the <strong>EuiPageHeader</strong> component can be placed anywhere within your page layout, we recommend using it within the <a href="#"><strong>EuiPageTemplate</strong></a> component by passing the configuration props as its <EuiCode>pageHeader</EuiCode>.</EuiText>
+	</:description>
+	
+</EuiPageHeader>

package/docs/layout/{page-demo → page-template/demo}/demo1.md

@@ -66,33 +66,55 @@ order: 1
   @pageHeader={{hash
     iconType='logoElastic'
     pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
     tabs=this.tabs
   }}
-  @pageSideBar={{component 'eui-loading-content' lines=8}}
+  @hasBottomBarBlock={{this.showing}}
 >
-  <EuiLoadingContent @lines={{16}} />
+  <:pageSideBar>
+    <EuiLoadingContent @lines={{8}} />
+  </:pageSideBar>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton>
+        Go Full Screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiLoadingContent @lines={{16}} />
+  </:default>
+  <:bottomBar>
+    Bottom bar
+  </:bottomBar>
 </EuiPageTemplate>
 ```
 
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoIconComponent extends Component {
-  tabs = [
-    { label: 'Tab 1', isSelected: true },
-    {
-      label: 'Tab 2',
-      onClick: this.setShowBottomBar
-    }
-  ];
+  @tracked selectedTab = true;
   @tracked showing = false;
 
-  @action
-  setSHowBottomBar() {
-    this.showing = !this.showing;
+  get tabs() {
+    return [
+      {
+        label: 'Tab 1',
+        isSelected: this.selectedTab,
+        onClick: this.setShowBottomBar.bind(this, true)
+      },
+      {
+        label: 'Tab 2',
+        isSelected: !this.selectedTab,
+        onClick: this.setShowBottomBar.bind(this, false)
+      }
+    ];
   }
+
+  setShowBottomBar = (val) => {
+    this.selectedTab = val;
+    this.showing = !val;
+  };
 }
 ```

package/docs/layout/page-template/demo/demo10.md

@@ -0,0 +1,58 @@
+---
+order: 10
+---
+
+# A simple page layout with custom content
+
+<EuiText>
+ You can replace the inner parts of <strong>EuiPageBody</strong> with your own content, with or without a page header. This allows you to create dashboard style layouts with lots of panels. It is not recommended, however, to use this setup when you also have side bar.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:body>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="empty"</EuiCode>.
+  </:body>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @restrictWidth={{false}}
+  @template='empty'
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    bottomBorder=true
+  }}
+>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton @color='warning'>
+        Go to full screen
+      </EuiButton>
+    </Item>
+    <Item>
+      <EuiButton>
+        Do something
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiFlexGrid @columns={{2}}>
+      <EuiFlexItem>
+        <EuiPanel style='height: 200px' />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPanel style='height: 200px' />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPanel style='height: 200px' />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPanel style='height: 200px' />
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  </:default>
+
+</EuiPageTemplate>
+```

package/docs/layout/{page-demo → page-template/demo}/demo2.md

@@ -35,12 +35,22 @@ order: 2
   @pageHeader={{hash
     iconType='logoElastic'
     pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
     tabs=this.tabs
-    description= 'Restricting the width to 75%.'
+    description='Restricting the width to 75%.'
   }}
-  @pageSideBar={{component 'eui-loading-content' lines=8}}
 >
-  <EuiLoadingContent @lines={{16}} />
+  <:pageSideBar>
+    <EuiLoadingContent @lines={{8}} />
+  </:pageSideBar>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton>
+        Go to full screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiLoadingContent @lines={{16}} />
+  </:default>
 </EuiPageTemplate>
 ```

package/docs/layout/{page-demo → page-template/demo}/demo3.md

@@ -37,14 +37,25 @@ order: 3
 ```hbs template
 <EuiPageTemplate
   @grow={{true}}
-  @pageHeader={{hash
-    iconType='logoElastic'
-    pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
-  }}
-  @pageSideBar={{component 'eui-loading-content' lines=8}}
-  @bottomBar={{component "eui-button-title" title="Save"}}
+  @pageHeader={{hash iconType='logoElastic' pageTitle='Page Title'}}
 >
-  <EuiLoadingContent @lines={{16}} />
+  <:pageSideBar>
+    <EuiLoadingContent @lines={{8}} />
+  </:pageSideBar>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton>
+        Go to full screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiLoadingContent @lines={{16}} />
+  </:default>
+  <:bottomBar>
+    <EuiButton>
+      Save
+    </EuiButton>
+  </:bottomBar>
 </EuiPageTemplate>
 ```