@ember-eui/core 4.4.0 → 5.0.0-alpha.4

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

@@ -0,0 +1,51 @@
+---
+order: 6
+---
+
+# A simple page with tabs
+
+<EuiText>
+  When leaving off the <strong>EuiPageSideBar</strong>, we recommend a slightly different configuration by pulling the page header out of the <strong>EuiPageContent</strong> and removing the shadow from <strong>EuiPageContent</strong>.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    This layout will automatically be achieved through <strong>EuiPageTemplate</strong> by leaving <EuiCode>pageSideBar</EuiCode> as <EuiCode>undefined</EuiCode>.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+    tabs=this.tabs
+  }}
+>
+  <EuiLoadingContent @lines={{16}} />
+</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 showing = false;
+
+  @action
+  setSHowBottomBar() {
+    this.showing = !this.showing;
+  }
+}
+```

package/docs/layout/page-demo/demo7.md

@@ -0,0 +1,59 @@
+---
+order: 7
+---
+
+# Full height layout
+
+<EuiText>
+  Though it is not recomended for most layouts, some require the control of scrolling to be handled through child components. You can achieve this through nested flex groups and overflow properties; adding certain combinations of CSS overflow utility classes to these children. There are a few <strong>caveats</strong> to understand when trying to achieve full height layouts with <strong>EuiPageTemplate</strong>.
+
+  <ol>
+    <li>Using the <EuiCode>fullHeight</EuiCode> prop adds an extra layer of <strong>EuiFlexGroup</strong> and <strong>EuiFlexItem</strong> around the template children to negate the negative margins.</li>
+    <li>Using <EuiCode>fullHeight=true</EuiCode> will automatically add scrolling behavior to the <strong>EuiFlexItem</strong> that wraps the children.</li>
+    <li>Using <EuiCode>fullHeight="noscroll"</EuiCode> removes all scrolling behavior and your layouts will break if you do not manually add them.</li>
+    <li>When using either values for <EuiCode>fullHeight</EuiCode>, there will always be a minimum height of <EuiCode>460px</EuiCode> to the page contents.</li>
+    <li>Full height layouts are restricted to <strong>medium breakpoints</strong> and above. We recommend retaining any responsive behavior and allowing normal page scroll on smaller screens.</li>
+  </ol>
+</EuiText>
+<EuiSpacer />
+<EuiCallOut @iconType="accessibility" @color="warning">
+  <:title>
+   When applying the <EuiCode>.eui-yScroll</EuiCode> class, it is recommended to also apply <EuiCode>tabindex=0</EuiCode> to ensure keyboard users can scroll these containers.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate @grow={{true}} @fullHeight={{true}} @template='empty'>
+  <EuiFlexGroup
+    class='eui-fullHeight'
+    @gutterSize='none'
+    @direction='column'
+    @responsive={{false}}
+  >
+    <EuiFlexItem class='eui-yScroll'>
+      <EuiFlexItem @grow={{false}}>
+        <EuiPanel @color='danger' />
+      </EuiFlexItem>
+      <EuiSpacer @size='l' />
+      <EuiFlexItem class='eui-fullHeight'>
+        <EuiFlexGroup class='eui-fullHeight' @gutterSize='l'>
+          <EuiFlexItem @grow={{2}}>
+            <EuiPanel tabindex={{0}} class='eui-yScroll' @hasShadow={{false}}>
+              <EuiLoadingContent @lines={{8}} />
+              <EuiSpacer />
+              <EuiLoadingContent @lines={{8}} />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel @hasShadow={{false}} />
+            <EuiSpacer />
+            <EuiButton>
+              Go full screen
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiPageTemplate>
+```

package/docs/layout/page-demo/demo8.md

@@ -0,0 +1,19 @@
+---
+order: 8
+---
+
+# Simple layout with centered body
+
+<EuiText>
+ Similar to the version with a side bar, when the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
+</EuiText>
+
+```hbs template
+<EuiPageTemplate @grow={{true}} @template='centeredBody'>
+  <EuiEmptyPrompt
+    @title='No spice'
+    @paddingSize='l'
+    @body={{component 'eui-loading-content' lines=4}}
+  />
+</EuiPageTemplate>
+```

package/docs/layout/page-demo/demo9.md

@@ -0,0 +1,29 @@
+---
+order: 9
+---
+
+# Simple layout with centered content
+
+<EuiText>
+ Also similar to the previous examples, you can create a centered panel to emphasis incompleteness even with a page header. For this setup, You will need to use nested <strong>EuiPageContent</strong> components in order for the centering to work.
+</EuiText>
+
+```hbs template
+<EuiPageTemplate
+  @template='centeredContent'
+  @pageContentProps={{hash
+    paddingSize='none'
+  }}
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+  }}
+>
+  <EuiEmptyPrompt
+    @title='No spice'
+    @paddingSize="l"
+    @body={{component 'eui-loading-content' lines=4}}
+  />
+</EuiPageTemplate>
+```

package/docs/layout/page.md

@@ -1 +1 @@
-# Page
+<EuiPageHeader @pageTitle="Page"/>

package/docs/layout/panel-demo/demo1.md

@@ -1,21 +1,30 @@
-# Demo
+---
+order: 1
+---
+
+# Padding
+
+<EuiText>
+  <p>
+The most basic use is to simply add padding around your content.
+  </p>
+</EuiText>
 
 ```hbs template
-<EuiFlexGroup @direction="column" @gutterSize="xl">
-  <EuiFlexItem>
-    <EuiPanel @color="danger">
-      This is panel without borders
-    </EuiPanel>
-  </EuiFlexItem>
-  <EuiFlexItem>
-    <EuiPanel @borderRadius="none" @color="danger">
-      This is panel without border radius
-    </EuiPanel>
-  </EuiFlexItem>
-  <EuiFlexItem>
-    <EuiPanel @borderRadius="none" @paddingSize="none" @color="danger">
-      This is panel without padding and without border-radius
-    </EuiPanel>
-  </EuiFlexItem>
-</EuiFlexGroup>
-```
+<EuiSpacer @size='l' />
+<EuiPanel @paddingSize='none'>
+  <EuiCode>paddingSize=&quot;none&quot;</EuiCode>
+</EuiPanel>
+<EuiSpacer @size='l' />
+<EuiPanel @paddingSize='s'>
+  <EuiCode>paddingSize=&quot;s&quot;</EuiCode>
+</EuiPanel>
+<EuiSpacer @size='l' />
+<EuiPanel @paddingSize='m'>
+  <EuiCode>paddingSize=&quot;m&quot; (default)</EuiCode>
+</EuiPanel>
+<EuiSpacer @size='l' />
+<EuiPanel @paddingSize='l'>
+  <EuiCode>paddingSize=&quot;l&quot;</EuiCode>
+</EuiPanel>
+```

package/docs/layout/panel-demo/demo2.md

@@ -0,0 +1,22 @@
+---
+order: 2
+---
+
+# Shadow and border
+
+<EuiText>
+  <p>
+<strong>EuiPanel</strong> can give depth to your container with <EuiCode>hasShadow</EuiCode> while <EuiCode>hasBorder</EuiCode> can add containment. Just be sure not to include too many nested panels with these settings.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiSpacer @size='l' />
+<EuiPanel @hasShadow={{false}}>
+  @hasShadow={{false}}
+</EuiPanel>
+<EuiSpacer @size='l' />
+<EuiPanel @hasBorder={{true}}>
+  @hasBorder={{true}}
+</EuiPanel>
+```

package/docs/layout/panel-demo/demo3.md

@@ -0,0 +1,27 @@
+---
+order: 3
+---
+
+# Colors and corners
+
+<EuiText>
+  <p>
+Use <EuiCode>color</EuiCode> to add background shading to your panel and provide an additional helpful aesthetic to your container in context. Be mindful to use color sparingly. You can also remove the rounded corners depending on the placement of your panel with <EuiCode>borderRadius="none"</EuiCode>
+
+Passing <EuiCode>color="transparent"</EuiCode> can give you a quick empty box simply for adding padding to all sides.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiSpacer @size='l' />
+<EuiPanel @color='subdued' @borderRadius='none' @hasShadow={{false}}>
+  <p>I am a simple shaded box</p>
+</EuiPanel>
+
+<EuiSpacer />
+
+<EuiPanel @color='transparent' @hasBorder={{false}}>
+  <p>I am a transparent box simply for padding</p>
+</EuiPanel>
+```

package/docs/layout/panel-demo/demo4.md

@@ -0,0 +1,46 @@
+---
+order: 4
+---
+
+# Growing height
+
+<EuiText>
+  <p>
+Using <strong>EuiPanel</strong> in an <strong>EuiFlexItems</strong> will always grow its height to match. This is great for rows of panels. However, you can also turn this feature off by setting <EuiCode>grow={false}</EuiCode>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiSpacer @size='l' />
+<EuiFlexGroup @gutterSize='l'>
+  <EuiFlexItem>
+    <EuiPanel>
+      <EuiText>
+        <p>
+          I am some panel content...
+          <br />
+          ...
+          <br />
+          ...
+          <br />
+          whose content is tall
+        </p>
+      </EuiText>
+    </EuiPanel>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiPanel @grow={{true}}>
+      <EuiText>
+        <p>I am some panel content... whose content will grow</p>
+      </EuiText>
+    </EuiPanel>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiPanel @grow={{false}}>
+      <EuiText>
+        <p>I am some panel content... whose content did not grow</p>
+      </EuiText>
+    </EuiPanel>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/panel-demo/demo5.md

@@ -0,0 +1,81 @@
+---
+order: 4
+---
+
+# Split panel
+
+<EuiText>
+ <p><strong>EuiSplitPanel</strong> is a composition of an outer and multiple inner <strong>EuiPanels</strong>. It is a namespaced component that you consume using <EuiCode>EuiSplitPanel.Outer</EuiCode> and <EuiCode>EuiSplitPanel.Inner</EuiCode> respectively. You can supply the same panel props to both components with the exception of a few to ensure the visual layout is correct. It also has two directions, <EuiCode>column</EuiCode> (default) and <EuiCode>row</EuiCode>.</p><p>For custom responsiveness, you can adjust at which breakpoints a <EuiCode>row</EuiCode> layout will stack by passing a new array of breakpoint names <EuiCode>['xs', 's']</EuiCode> to the <EuiCode>responsive</EuiCode> prop, or completely turn it off with <EuiCode>false</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+  <EuiFlexItem>
+    <EuiSplitPanel::Outer @grow={{true}}>
+      <EuiSplitPanel::Inner>
+        <EuiText>
+          <p>Top panel</p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+      <EuiSplitPanel::Inner @grow={{false}} @color='subdued'>
+        <EuiText>
+          <p>
+            Bottom panel has
+            <EuiCode>{'grow={false}'}</EuiCode>
+          </p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+    </EuiSplitPanel::Outer>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiSplitPanel::Outer @grow={{false}}>
+      <EuiSplitPanel::Inner>
+        <EuiText>
+          <p>
+            Outer panel has
+            <EuiCode>{'grow={false}'}</EuiCode>
+          </p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+      <EuiSplitPanel::Inner @grow={{false}} @color='subdued'>
+        <EuiText>
+          <p>Bottom panel</p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+    </EuiSplitPanel::Outer>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiSplitPanel::Outer>
+      <EuiSplitPanel::Inner>
+        <EuiText>
+          <p>Top panel</p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+      <EuiSplitPanel::Inner @color='subdued'>
+        <EuiText>
+          <p>Middle panel</p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+      <EuiSplitPanel::Inner @color='danger'>
+        <EuiText>
+          <p>Danger panel</p>
+        </EuiText>
+      </EuiSplitPanel::Inner>
+    </EuiSplitPanel::Outer>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiSplitPanel::Outer @direction='row'>
+  <EuiSplitPanel::Inner>
+    <EuiText>
+      <p>Left panel</p>
+      <p>Has more content</p>
+    </EuiText>
+  </EuiSplitPanel::Inner>
+  <EuiSplitPanel::Inner @color='subdued'>
+    <EuiText>
+      <p>Right panel</p>
+    </EuiText>
+  </EuiSplitPanel::Inner>
+</EuiSplitPanel::Outer>
+```

package/docs/layout/panel.md

@@ -1 +1,7 @@
-# Panel
+<EuiPageHeader @pageTitle="Panel"/>
+
+<EuiText>
+  <p>
+<strong>EuiPanel</strong> is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like <strong>EuiPage</strong>, <strong>EuiPopover</strong> and <strong>EuiCard</strong>.
+  </p>
+</EuiText>