@ember-eui/core 5.0.2 → 5.2.0

package/docs/layout/horizontal-rule/demo/d02-margins.md

@@ -0,0 +1,38 @@
+---
+order: 2
+---
+
+# Margins
+
+```hbs template
+<div class="horizontal-rule-demo">
+  <EuiCode>none</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="none" />
+  </div>
+  <EuiCode>xs</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="xs" />
+  </div>
+  <EuiCode>s</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="s" />
+  </div>
+  <EuiCode>m</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="m" />
+  </div>
+  <EuiCode>l (default)</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="l" />
+  </div>
+  <EuiCode>xl</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="xl" />
+  </div>
+  <EuiCode>xxl</EuiCode>
+  <div>
+    <EuiHorizontalRule @margin="xxl" />
+  </div>
+</div>
+```

package/docs/layout/horizontal-rule/horizontal-rule.md

@@ -0,0 +1,7 @@
+---
+title: Horizontal Rule
+---
+
+<EuiPageHeader @pageTitle="Horizontal Rule"/>
+
+<EuiHorizontalRule/>

package/docs/layout/modal/demo/d01-modal.md

@@ -0,0 +1,73 @@
+---
+order: 1
+---
+
+<!-- <EuiText>
+Each <strong>EuiModal</strong> requires a specific set of nested child components. They can be omitted if necessary, but the order cannot be changed or interrupted.
+
+Modals come a wrapping <strong>EuiOverlayMask</strong> to obscure the content beneath, but unlike flyouts, modals cannot be dismissed by clicking on the overlay mask. This is inline with our modal usage guidelines which requires there to be a primary action button, even if that button simply closes the modal.
+</EuiText> -->
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' this.activateModal}}
+>
+  Show modal
+</EuiButton>
+
+{{#if this.isActive}}
+
+  <EuiModal
+    @onClose={{this.deactivateModal}}
+  >
+    <EuiModalHeader>
+      <EuiTitle @size='m'>
+        Modal title
+      </EuiTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiText>
+        <p>
+          This modal has the following setup:
+        </p>
+        <p>
+          <EuiCodeBlock @isCopyable={{true}}>
+            some code here...
+          </EuiCodeBlock>
+        </p>
+      </EuiText>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButton
+        {{on 'click' this.deactivateModal}}
+        @color='primary'
+        @fill={{true}}
+      >
+        Close
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked isActive = false;
+
+  @action
+  activateModal(modal) {
+    this.isActive = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this.isActive = false;
+  }
+
+}
+```

package/docs/layout/modal/demo/d02-forms-in-a-modal.md

@@ -0,0 +1,107 @@
+---
+order: 2
+---
+
+# Forms in a modal
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' this.activateModal}}
+>
+  Show form modal
+</EuiButton>
+
+{{#if this.isActive}}
+
+  <EuiModal
+    @onClose={{this.deactivateModal}}
+  >
+    <EuiModalHeader>
+      <EuiTitle @size='m'>
+        Modal title
+      </EuiTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        {{#let
+          (unique-id)
+          (unique-id)
+          (unique-id)
+          (unique-id)
+        as |switchId textId rangeId selectId|}}
+          <EuiFormRow @id={{switchId}}>
+            <EuiSwitch
+              @id={{switchId}}
+              @label='Cool modal form'
+              @checked={{this.switchValue}}
+              @onChange={{pick 'target.checked' (set this 'switchValue')}}
+            />
+          </EuiFormRow>
+          <EuiFormRow @label='A text field' @id={{textId}}>
+            <EuiFieldText
+              @value={{this.textValue}}
+              @id={{textId}}
+              {{on 'input' (pick 'target.value' (set this 'textValue'))}}
+            />
+          </EuiFormRow>
+          <EuiFormRow @label='Range' @id={{textId}}>
+            <EuiRange
+              @min={{0}}
+              @max={{10}}
+              @step={{1}}
+              @value={{this.rangeValue}}
+              @onChange={{pick 'target.value' (set this 'rangeValue')}}
+              @showLabels={{false}}
+              aria-describedby={{rangeId}}
+            />
+            <EuiFormHelpText id={{rangeId}}>
+              Some help text for the range
+            </EuiFormHelpText>
+
+          </EuiFormRow>
+          <EuiFormRow @label='An EuiSuperSelect' @id={{textId}}>
+            <TodoText @text='missing eui-super-select'/>
+          </EuiFormRow>
+        {{/let}}
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButton
+        {{on 'click' this.deactivateModal}}
+        @color='primary'
+      >
+        Cancel
+      </EuiButton>
+      <EuiButton
+        {{on 'click' this.deactivateModal}}
+        @color='primary'
+        @fill={{true}}
+      >
+        Save
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked isActive = false;
+
+  @action
+  activateModal(modal) {
+    this.isActive = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this.isActive = false;
+  }
+
+}
+```

package/docs/layout/modal/demo/d03-confirm-modal.md

@@ -0,0 +1,86 @@
+---
+order: 3
+---
+
+# Confirm Modal
+
+```hbs template
+
+<!-- buttons -->
+
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton
+      @color='primary'
+      {{on 'click' (fn this.activateModal 'confirmModalActive')}}
+    >
+      Show confirm modal
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton
+      @color='primary'
+      {{on 'click' (fn this.activateModal 'dangerousConfirmModalActive')}}
+    >
+      Show dangerous confirm modal
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
+
+<!-- modals -->
+
+{{#if this.confirmModalActive}}
+  <EuiConfirmModal
+    @title='Do this thing'
+    @onConfirm={{fn this.deactivateModal 'confirmModalActive'}}
+    @buttonColor='primary'
+    @confirmButtonText='Yes, do it'
+    @cancelButtonText="No, don't do it"
+    @onCancel={{fn this.deactivateModal 'confirmModalActive'}}
+  >
+    <EuiText>
+      <p>You are about to do something</p>
+      <p>Are you sure you want to do this?</p>
+    </EuiText>
+  </EuiConfirmModal>
+{{/if}}
+
+{{#if this.dangerousConfirmModalActive}}
+  <EuiConfirmModal
+    @title='Do this destructive thing'
+    @onConfirm={{fn this.deactivateModal 'dangerousConfirmModalActive'}}
+    @buttonColor='danger'
+    @confirmButtonText='Yes, do it'
+    @cancelButtonText="No, don't do it"
+    @onCancel={{fn this.deactivateModal 'dangerousConfirmModalActive'}}
+  >
+    <EuiText>
+      <p>You’re about to destroy something.</p>
+      <p>Are you sure you want to do this?</p>
+    </EuiText>
+  </EuiConfirmModal>
+{{/if}}
+
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked confirmModalActive = false;
+  @tracked dangerousConfirmModalActive = false;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+  }
+
+}
+```

package/docs/layout/modal/demo/d04-loading-and-disabling-confirm-button.md

@@ -0,0 +1,80 @@
+---
+order: 4
+---
+
+# Loading and disabling confirm button
+
+<EuiText>
+  <strong>EuiConfirmModal</strong> supports being able to apply loading and disabled states to the confirm button with the <EuiCode>confirmButtonDisabled</EuiCode> and <EuiCode>isLoading</EuiCode> props respectively. This is helpful to indicate the fetching of data and/or to wait for a user's input before enabling the confirm action.
+</EuiText>
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'modalActive')}}
+>
+  Show loading confirm modal
+</EuiButton>
+{{#if this.modalActive}}
+  <EuiConfirmModal
+    @title='Delete the EUI repo?'
+    @onConfirm={{this.alertMessage}}
+    @buttonColor='danger'
+    @confirmButtonText='Delete'
+    @cancelButtonText='Cancel'
+    @isLoading={{this.isLoading}}
+    @confirmButtonDisabled={{(if
+      (eq this.textValue 'delete')
+      false
+      true
+    )}}
+    @onCancel={{fn this.deactivateModal 'modalActive'}}
+  >
+    <EuiText>
+      {{#let
+        (unique-id)
+      as |textId|}}
+        <EuiFormRow @label="Type the word 'delete' to confirm" @id={{textId}}>
+          <EuiFieldText
+            @value={{this.textValue}}
+            @id={{textId}}
+            @isLoading={{this.isLoading}}
+            {{on 'input' (pick 'target.value' (set this 'textValue'))}}
+          />
+          
+        </EuiFormRow>
+      {{/let}}
+    </EuiText>
+  </EuiConfirmModal>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked modalActive = false;
+  @tracked isLoading = true;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true
+    this.isLoading = true
+    setTimeout(() => {
+      this.isLoading = false
+    }, 1000);
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+  }
+
+  @action
+  alertMessage() {
+    confirm('Shame on you!')
+  }
+}
+```

package/docs/layout/{modal-demo/demo5.md → modal/demo/d05-widths.md}

@@ -15,54 +15,35 @@ order: 5
 ```hbs template
 <EuiButton
   @color='primary'
-  {{on 'click' (fn this.activateModal 'widthModalActive')}}
+  {{on 'click' (fn this.activateModal 'modalActive')}}
 >
-  Show Width Modal
+  Show modal with custom width
 </EuiButton>
-{{#if this.widthModalActive}}
+{{#if this.modalActive}}
 
   <EuiModal
-    @onClose={{fn this.deactivateModal 'widthModalActive'}}
-    @initialFocus='#focusee'
-    style='width: 800px'
+    @onClose={{fn this.deactivateModal 'modalActive'}}
+    style='width: {{this.width}}px'
   >
     <EuiModalHeader>
-      <EuiTitle @size='m'>
-        Basic Modal width 800 px width
+      <EuiTitle>
+        Modal title
       </EuiTitle>
     </EuiModalHeader>
     <EuiModalBody>
-      <EuiText>
-        <p>
-          Hello there!
-        </p>
-        <p>
-          This modal has many
-          <a id='focusee' href='#'>
-            different
-          </a>
-          <a href='#'>
-            focusable
-          </a>
-          <a href='#'>
-            items
-          </a>
-          .
-        </p>
-      </EuiText>
+      This modal has the following setup:
+      <EuiSpacer/>
+      <EuiCodeBlock @isCopyable={{true}}>
+        {{this.code}}
+      </EuiCodeBlock>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
-        {{on 'click' (fn this.deactivateModal 'widthModalActive')}}
-      >
-        Cancel
-      </EuiButtonEmpty>
       <EuiButton
-        {{on 'click' (fn this.deactivateModal 'widthModalActive')}}
+        {{on 'click' (fn this.deactivateModal 'modalActive')}}
         @color='primary'
         @fill={{true}}
       >
-        Submit
+        close
       </EuiButton>
     </EuiModalFooter>
   </EuiModal>
@@ -76,7 +57,12 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoModalComponent extends Component {
-  @tracked widthModalActive = false;
+  @tracked modalActive = false;
+  width = 800
+
+  code = `
+    <EuiModal style='width: ${this.width}'>...</EuiModal>
+  `
 
   @action
   activateModal(modal) {
@@ -87,10 +73,5 @@ export default class DemoModalComponent extends Component {
   deactivateModal(modal) {
     this[modal] = false;
   }
-
-  @action
-  reloadPage() {
-    location.reload();
-  }
 }
 ```

package/docs/layout/modal/index.md

@@ -0,0 +1,13 @@
+---
+title: Modal
+---
+
+<EuiPageHeader @pageTitle="Modal"/>
+
+<EuiSpacer @size="l" />
+
+<EuiText>
+  A modal works best for focusing users' attention on a <strong>short</strong> amount of content and getting them to make a decision. Use it to temporarily interrupt a user’s current task and block interactions to the content below it. If your modal content is more complex, or requires considerable time to complete, consider using an EuiFlyout instead.
+</EuiText>
+
+<EuiHorizontalRule/>

package/docs/layout/page-header/demo/{demo1.md → d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 ```hbs template
 <EuiPageHeader
   @bottomBorder={{true}}

package/docs/layout/page-header/demo/{demo2.md → d02-tabs-in-the-page-header.md}

@@ -2,13 +2,12 @@
 order: 2
 ---
 
-# Tabs
+# Tabs in the page header
 
 ```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>

package/docs/layout/page-header/demo/{demo3.md → d03-tabs-in-the-page-header.md}

@@ -2,12 +2,11 @@
 order: 3
 ---
 
-# Tabs
-
 ```hbs template
+<!-- example 2 -->
 <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.'
+  @description='This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length.'
 	@dumb={{true}}
 	@tabs={{array (hash label="Tab 1" isSelected=true) (hash label="Tab 2")}}
 />

package/docs/layout/page-header/demo/{demo4.md → d04-breadcrumbs-in-the-page-header.md}

@@ -9,11 +9,12 @@ order: 4
 </EuiText>
 
 ```hbs template
+<!-- example 1 -->
 <EuiPageHeader
   @bottomBorder={{true}}
   @pageTitle='Page title'
   @description='Example of a description.'
-  @breadcrumbs={{this.breadcrumbs}}
+  @breadcrumbs={{this.breadcrumbsExample1}}
 >
   <:rightSideItems>
     <EuiFlexItem>
@@ -31,7 +32,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 export default class AccordionDemo1Component extends Component {
-  breadcrumbs = [
+  breadcrumbsExample1 = [
     {
       text: 'Breadcrumb 1',
       href: '#',

package/docs/layout/page-header/demo/{demo5.md → d05-breadcrumbs-in-the-page-header.md}

@@ -2,8 +2,6 @@
 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>
@@ -36,29 +34,4 @@ order: 5
     </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/index.md

@@ -1,6 +1,5 @@
 ---
-order: 1
-title: Page Header
+title: Page header
 ---
 
 <EuiPageHeader @pageTitle="Page Header" @bottomBorder={{true}}>

package/docs/layout/{panel-demo/demo2.md → panel/demo/d02-shadow-and-border.md}

@@ -13,10 +13,10 @@ order: 2
 ```hbs template
 <EuiSpacer @size='l' />
 <EuiPanel @hasShadow={{false}}>
-  @hasShadow={{false}}
+  <EuiCode>@hasShadow={{false}}</EuiCode>
 </EuiPanel>
 <EuiSpacer @size='l' />
 <EuiPanel @hasBorder={{true}}>
-  @hasBorder={{true}}
+  <EuiCode>@hasBorder={{true}}</EuiCode>
 </EuiPanel>
 ```

package/docs/layout/{panel-demo/demo5.md → panel/demo/d05-split-panels.md}

@@ -2,7 +2,7 @@
 order: 4
 ---
 
-# Split panel
+# Split panels
 
 <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>

package/docs/layout/{panel.md → panel/index.md}

@@ -1,3 +1,7 @@
+---
+title: Panel
+---
+
 <EuiPageHeader @pageTitle="Panel"/>
 
 <EuiText>

package/docs/layout/{popover-demo/demo1.md → popover/demo/d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 <EuiText>
   <p>
     Use the
@@ -30,7 +28,7 @@ order: 1
   <EuiPopover
     @ownFocus={{true}}
     @isOpen={{this.popover}}
-    @anchorPosition='downLeft'
+    @anchorPosition='downCenter'
     @closePopover={{set this 'popover' false}}
   >
     <:button>
@@ -43,7 +41,11 @@ order: 1
       </EuiButton>
     </:button>
     <:content>
-      Popover content that’s wider than the default width
+      <EuiText @size="m" style="width: 300px;">
+        <p>
+          Popover content that’s wider than the default width
+        </p>
+      </EuiText>
     </:content>
   </EuiPopover>
 </div>