@ember-eui/core 5.0.1 → 5.1.0

package/docs/layout/resizable-container/demo/d08-collapsible-panels-with-external-control.md

@@ -0,0 +1,10 @@
+---
+order: 8
+---
+
+# Collapsible panels with external control
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/index.md

@@ -0,0 +1,15 @@
+---
+title: Resizable container
+disabled: true
+disabled_demos:
+  - d01-horizontal-resizing
+  - d02-resizable-panel-options
+  - d03-horizontal-resizing-with-controlled-widths
+  - d04-vertical-resizing
+  - d05-collapsible-resizable-panels
+  - d06-responsive-layout
+  - d07-collapsible-panels-options
+  - d08-collapsible-panels-with-external-control
+---
+
+<EuiPageHeader @pageTitle="Resizable container"/>

package/docs/layout/spacer/demo/d01-basic.md

@@ -0,0 +1,44 @@
+---
+order: 1
+---
+
+<EuiText>
+  The <EuiCode>EuiSpacer</EuiCode> component is for adding vertical space between items and should be used in place of the <EuiCode><br/></EuiCode> tag. There are many different heights you can specify via the size prop which align to the EUI vertical grid sizing.
+</EuiText>
+
+
+```hbs template
+<div class="guideDemo__highlightSpacer">
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiCode>xs</EuiCode>
+      <EuiSpacer @size="xs" />
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiCode>s</EuiCode>
+      <EuiSpacer @size="s" />
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiCode>m</EuiCode>
+      <EuiSpacer @size="m" />
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiCode>l (default)</EuiCode>
+      <EuiSpacer />
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiCode>xl</EuiCode>
+      <EuiSpacer @size="xl" />
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiCode>xxl</EuiCode>
+      <EuiSpacer @size="xxl" />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/layout/spacer/index.md

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

package/docs/navigation/{breadcrumbs-demo/demo1.md → breadcrumbs/demo/d01-basic.md}

@@ -31,13 +31,16 @@ order: 1
     @truncate={{false}}
     aria-label='An example of EuiBreadcrumbs'
   />
-  <EuiSpacer size='xs' />
+  <EuiSpacer @size='xs' />
   <EuiPageHeader>
-    <EuiPageHeaderSection>
-      <EuiTitle>
-        Boa constrictor
-      </EuiTitle>
-    </EuiPageHeaderSection>
+    <:pageTitle>
+      Boa constrictor
+    </:pageTitle>
+    <:rightSideItems as |Item|>
+      <Item>
+        <EuiButton>Cancel</EuiButton>
+      </Item>
+    </:rightSideItems>
   </EuiPageHeader>
 </EuiPageContent>
 ```

package/docs/navigation/{breadcrumbs-demo/demo5.md → breadcrumbs/demo/d05-responsive.md}

@@ -18,6 +18,20 @@ order: 5
   @responsive={{false}}
   aria-label='An example of non-responsive EuiBreadcrumbs'
 />
+
+<EuiText>
+	<p>
+		Alternatively, you can change number of breadcrumbs that show per breakpoint by passing a custom responsive object.
+  </p>
+</EuiText>
+
+
+<EuiBreadcrumbs
+  @breadcrumbs={{this.breadcrumbs}}
+  @responsive={{hash xs=1 s=3 m=5 xl=6}}
+	@max={{null}}
+  aria-label='An example of custom responsive EuiBreadcrumbs'
+/>
 ```
 
 ```js component

package/docs/navigation/{breadcrumbs-demo/demo6.md → breadcrumbs/demo/d06-color-for-emphasis.md}

@@ -2,7 +2,7 @@
 order: 6
 ---
 
-# Custom responsive hash
+# Color for emphasis
 
 <EuiText>
 	<p>
@@ -23,38 +23,27 @@ order: 6
 ```js component
 import Component from '@glimmer/component';
 
-export default class DemoSideNavComponent extends Component {
+export default class DemoComponent extends Component {
   breadcrumbs = [
     {
       text: 'Animals',
-      href: '#'
-    },
-    {
-      text: 'Metazoans',
-      href: '#'
-    },
-    {
-      text: 'Chordates',
-      href: '#'
-    },
-    {
-      text: 'Vertebrates',
-      href: '#'
-    },
-    {
-      text: 'Tetrapods',
-      href: '#'
+      href: '#',
+      color: 'primary',
+      onClick: (e) => e.preventDefault(),
     },
     {
       text: 'Reptiles',
-      href: '#'
+      color: 'primary',
     },
     {
-      text: 'Boa constrictor',
-      href: '#'
+      text: 'Boa constrictor', // todo support icon
+      title: 'Boa constrictor has an error',
+      href: '#',
+      color: 'danger',
+      onClick: (e) => e.preventDefault(),
     },
     {
-      text: 'Nebulosa subspecies'
+      text: 'Edit',
     }
   ];
 }

package/docs/navigation/breadcrumbs/index.md

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

package/docs/navigation/button/demo/d01-basic.md

@@ -0,0 +1,85 @@
+---
+order: 1
+---
+
+```hbs template
+
+{{#each this.buttons as |type|}}
+  {{#let
+    (if (eq type 'disabled') undefined type)
+    (eq type 'disabled')
+  as |color isDisabled|}}
+    <EuiFlexGroup
+      @gutterSize='s'
+      @alignItems="center"
+      @wrap={{true}}
+    >
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+        >
+          {{type}}
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @fill={{true}}
+        >
+          Filled
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @size='s'
+        >
+          Small
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @fill={{true}}
+          @size='s'
+        >
+          Small and filled
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{true}}>
+        <EuiButton
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @fullWidth={{true}}
+        >
+          Full width
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  {{/let}}
+{{/each}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  
+  buttons = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'text',
+    'accent',
+    'disabled',
+  ];
+
+}
+```

package/docs/navigation/button/demo/d02-empty-button.md

@@ -0,0 +1,68 @@
+---
+order: 2
+---
+
+# Empty button
+
+```hbs template
+
+{{#each this.buttons as |type|}}
+  {{#let
+    (if (eq type 'disabled') undefined type)
+    (eq type 'disabled')
+  as |color isDisabled|}}
+    <EuiFlexGroup
+      @gutterSize='s'
+      @alignItems="center"
+      @wrap={{true}}
+    >
+      <EuiFlexItem @grow={{false}}>
+        <EuiButtonEmpty
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+        >
+          {{type}}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButtonEmpty
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @size='s'
+        >
+          Small
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButtonEmpty
+          @color={{color}}
+          @isDisabled={{isDisabled}}
+          @size='xs'
+        >
+          Extra small
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  {{/let}}
+{{/each}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  
+  buttons = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'text',
+    'accent',
+    'disabled',
+  ];
+
+}
+```

package/docs/navigation/button/demo/d03-flush-empty-button.md

@@ -0,0 +1,32 @@
+---
+order: 3
+---
+
+# Flush empty button
+
+
+```hbs template
+  <EuiFlexGroup
+    @responsive={{false}}
+    @gutterSize="s"
+    @alignItems="center"
+  >
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @flush="left">
+        Flush left
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @flush="right">
+        Flush right
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @flush="both">
+        Flush both
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+```

package/docs/navigation/button/demo/d04-buttons-with-icons.md

@@ -0,0 +1,213 @@
+---
+order: 4
+---
+
+# Buttons with icons
+
+
+```hbs template
+<div>
+
+  <EuiFlexGroup
+    @responsive={{false}}
+    @wrap={{true}}
+    @gutterSize="s"
+    @alignItems="center"
+  >
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconType="heart">
+        Primary
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton
+        @fill={{true}}
+        @iconType="lensApp"
+      >
+        Filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconType="heart" @size="s">
+        Small
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconType="lensApp" @size="s" @fill={{true}}>
+        Small and filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{true}}>
+      <EuiButton fullWidth @iconType="lensApp">
+        Full width
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @iconType="lensApp">
+        Empty button
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @iconType="lensApp" @size="s">
+        Small empty
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty @iconType="lensApp" @size="xs">
+        Extra small empty
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconSide="right" @iconType="arrowDown">
+        Icon right
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton
+        @iconSide="right"
+        @fill={{true}}
+        @iconType="arrowDown"
+      >
+        Filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton
+        @iconSide="right"
+        @iconType="arrowDown"
+        @size="s"
+      >
+        Small
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton
+        @iconSide="right"
+        @iconType="arrowDown"
+        @size="s"
+        @fill={{true}}
+      >
+        Small and filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{true}}>
+      <EuiButton
+        fullWidth
+        @iconSide="right"
+        @iconType="arrowDown"
+      >
+        Full width
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty
+        @iconSide="right"
+        @iconType="arrowDown"
+      >
+        Icon right
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty
+        @iconSide="right"
+        @iconType="arrowDown"
+        @size="s"
+      >
+        Small empty
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty
+        @iconSide="right"
+        @iconType="arrowDown"
+        @size="xs"
+      >
+        Extra small empty
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconType="heart" @isDisabled={{true}}>
+        Disabled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @fill={{true}} @iconType="lensApp" @isDisabled={{true}}>
+        Filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton @iconType="heart" @size="s" @isDisabled={{true}}>
+        Small
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButton
+        @iconType="lensApp"
+        @size="s"
+        @fill={{true}}
+        @isDisabled={{true}}
+      >
+        Small and filled
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{true}}>
+      <EuiButton fullWidth @iconType="lensApp" @isDisabled={{true}}>
+        Full width
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty
+        @isDisabled={{true}}
+        @color="text"
+        @iconType="dashboardApp"
+      >
+        Disabled app icon
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+
+    <EuiFlexItem @grow={{false}}>
+      <EuiButtonEmpty
+        @isDisabled={{true}}
+        @color="text"
+        @iconType="arrowDown"
+        @iconSide="right"
+        @size="xs"
+      >
+        Disabled icon right
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+</div>
+```