@ember-eui/core 5.6.0 → 5.7.0

package/docs/forms/{form-controls/combo-box → combo-box}/demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 <EuiText>
   <p>
     <strong>EuiComboBox </strong> ember's implementation uses <a href="https://ember-power-select.com">ember-power-select</a> under the hood for a rich selector, so please refer to it if needed.

package/docs/forms/{form-controls/combo-box → combo-box}/index.md

@@ -3,4 +3,5 @@ order: 1
 title: Combo box
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Combo box"/>

package/docs/forms/form-controls/checkbox/index.md

@@ -3,6 +3,7 @@ order: 1
 title: Checkbox
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Checkbox"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/checkbox-group/index.md

@@ -3,6 +3,7 @@ order: 2
 title: Checkbox group
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Checkbox group"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/file-picker/index.md

@@ -1,7 +1,7 @@
 ---
 title: File picker
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="File picker"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/form-control-layout/demo/demo1.md

@@ -1,119 +1,130 @@
-# Demo
-
 ```hbs template
-<EuiFormControlLayout @icon="search">
+<EuiFormControlLayout @icon='search'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout @isLoading={{true}}>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout @clear={{(optional)}}>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer size="m" />
+<EuiSpacer size='m' />
 <EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}}>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @icon="search">
+<EuiSpacer @size='m' />
+<EuiFormControlLayout @isLoading={{true}} @icon='search'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer size="m" />
-<EuiFormControlLayout @isLoading={{true}} @icon="arrowDown" @iconSide="right">
+<EuiSpacer size='m' />
+<EuiFormControlLayout @isLoading={{true}} @icon='arrowDown' @iconSide='right'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer size="m" />
-<EuiFormControlLayout @clear={{(optional)}} @icon="search">
+<EuiSpacer size='m' />
+<EuiFormControlLayout @clear={{(optional)}} @icon='search'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer size="m" />
-<EuiFormControlLayout @clear={{(optional)}} @icon="arrowDown" @iconSide="right">
+<EuiSpacer size='m' />
+<EuiFormControlLayout @clear={{(optional)}} @icon='arrowDown' @iconSide='right'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="search">
+<EuiSpacer @size='m' />
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon='search'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="arrowDown" @iconSide="right">
+<EuiSpacer @size='m' />
+<EuiFormControlLayout
+  @isLoading={{true}}
+  @clear={{(optional)}}
+  @icon='arrowDown'
+  @iconSide='right'
+>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="search">
+<EuiSpacer @size='m' />
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon='search'>
   <input
-    type="text"
-    class="euiFieldText"
-    aria-label="Use aria labels when no actual label is in use"
+    type='text'
+    class='euiFieldText'
+    aria-label='Use aria labels when no actual label is in use'
   />
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout>
   <:prepend as |classes|>
-    <EuiFormLabel htmlFor="textField19" class={{classes}}>
+    <EuiFormLabel htmlFor='textField19' class={{classes}}>
       Label
     </EuiFormLabel>
   </:prepend>
   <:field>
-    <input type="text" class="euiFieldText euiFieldText--inGroup" id="textField19" />
+    <input
+      type='text'
+      class='euiFieldText euiFieldText--inGroup'
+      id='textField19'
+    />
   </:field>
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout @readOnly={{true}}>
   <:prepend as |classes|>
-    <EuiFormLabel htmlFor="textField19a" class={{classes}}>
+    <EuiFormLabel htmlFor='textField19a' class={{classes}}>
       Read only
     </EuiFormLabel>
   </:prepend>
   <:field>
-    <input type="text" class="euiFieldText euiFieldText--inGroup" id="textField19a" />
+    <input
+      type='text'
+      class='euiFieldText euiFieldText--inGroup'
+      id='textField19a'
+    />
   </:field>
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout>
   <:prepend as |classes|>
-    <EuiText @size="xs" class={{classes}}>
+    <EuiText @size='xs' class={{classes}}>
       <strong>
         %
       </strong>
@@ -121,24 +132,29 @@
   </:prepend>
   <:field>
     <input
-      type="number"
-      class="euiFieldNumber euiFieldNumber--inGroup"
-      aria-label="Use aria labels when no actual label is in use"
+      type='number'
+      class='euiFieldNumber euiFieldNumber--inGroup'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:field>
 </EuiFormControlLayout>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}}>
   <:prepend as |classes|>
-    <EuiButtonEmpty @size="xs" @iconType="arrowDown" @iconSide="right" class={{classes}}>
+    <EuiButtonEmpty
+      @size='xs'
+      @iconType='arrowDown'
+      @iconSide='right'
+      class={{classes}}
+    >
       Button
     </EuiButtonEmpty>
   </:prepend>
   <:field>
     <input
-      type="text"
-      class="euiFieldText euiFieldText--inGroup"
-      aria-label="Use aria labels when no actual label is in use"
+      type='text'
+      class='euiFieldText euiFieldText--inGroup'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:field>
 </EuiFormControlLayout>

package/docs/forms/form-controls/form-control-layout/index.md

@@ -2,6 +2,7 @@
 title: Form control layout
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Form control layout"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/form-control-layout-delimited/demo/demo1.md

@@ -1,5 +1,3 @@
-# Demo
-
 ```hbs template
 <EuiFormControlLayoutDelimited @delimiter='+'>
   <:prepend as |classes|>

package/docs/forms/form-controls/form-control-layout-delimited/index.md

@@ -2,6 +2,7 @@
 title: Form control layout delimited
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Form control layout delimited"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/number-field/index.md

@@ -2,6 +2,7 @@
 title: Number field
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Number field"/>
 
 <EuiText>

package/docs/forms/form-controls/password-field/index.md

@@ -2,6 +2,7 @@
 title: Password field
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Password field"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/radio/index.md

@@ -3,6 +3,7 @@ order: 3
 title: Radio
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Radio"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/radio-group/index.md

@@ -1,7 +1,7 @@
 ---
 title: Radio group
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Radio group"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/range/index.md

@@ -2,6 +2,7 @@
 title: Range
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Range"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/search-field/index.md

@@ -1,7 +1,7 @@
 ---
 title: Search field
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Search field"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/select/index.md

@@ -1,7 +1,7 @@
 ---
 title: Select
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Select"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/switch/index.md

@@ -2,6 +2,7 @@
 title: Switch
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Switch"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/text-field/index.md

@@ -1,7 +1,7 @@
 ---
 title: Text field
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Text field"/>
 
 <EuiSpacer />

package/docs/forms/form-controls/textarea/index.md

@@ -1,6 +1,8 @@
 ---
 title: Textarea
 ---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Textarea"/>
 
 <EuiSpacer />

package/docs/forms/form-layouts/described-form-groups.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Described form groups"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Described form groups"/>

package/docs/layout/accordion/index.md

@@ -2,22 +2,23 @@
 title: Accordion
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Accordion"/>
 <EuiSpacer @size="l" />
 
 <EuiCallOut
-  @title='Take care when including flex group content within accordions'>
-  <:body>
-    <EuiText @size='s'>
-      <strong>EuiFlexGroup's</strong>
-      negative margins can sometimes create scrollbars within
-      <strong>EuiAccordion</strong>
-      because of the overflow tricks used to hide content. If you run into this
-      issue make sure your paddingSize prop is large enough to account for the
-      <EuiCode>gutterSize</EuiCode>
-      of any nested flex groups.
-    </EuiText>
-  </:body>
+@title='Take care when including flex group content within accordions'>
+<:body>
+<EuiText @size='s'>
+<strong>EuiFlexGroup's</strong>
+negative margins can sometimes create scrollbars within
+<strong>EuiAccordion</strong>
+because of the overflow tricks used to hide content. If you run into this
+issue make sure your paddingSize prop is large enough to account for the
+<EuiCode>gutterSize</EuiCode>
+of any nested flex groups.
+</EuiText>
+</:body>
 </EuiCallOut>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/layout/bottom-bar/index.md

@@ -2,6 +2,7 @@
 title: Bottom bar
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Bottom bar"/>
 
 <EuiSpacer/>
@@ -15,4 +16,4 @@ title: Bottom bar
   </:body>
 </EuiCallOut>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/layout/flex/index.md

@@ -2,17 +2,18 @@
 title: Flex
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Flex"/>
 
 <EuiSpacer @size="l" />
 
 <EuiCallOut
-  @title='Coloring and padding exist for examples only'>
-  <:body>
-    <EuiText @size='s'>
-      Padding and background-color are added to all the <strong>EuiFlexItem</strong> components on this documentation page for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
-    </EuiText>
-  </:body>
+@title='Coloring and padding exist for examples only'>
+<:body>
+<EuiText @size='s'>
+Padding and background-color are added to all the <strong>EuiFlexItem</strong> components on this documentation page for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
+</EuiText>
+</:body>
 </EuiCallOut>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/layout/flyout/index.md

@@ -2,6 +2,7 @@
 title: Flyout
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Flyout"/>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/layout/header/index.md

@@ -2,6 +2,7 @@
 title: Header
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Header"/>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

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

@@ -2,6 +2,7 @@
 title: Horizontal Rule
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Horizontal Rule"/>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/layout/modal/index.md

@@ -1,7 +1,7 @@
 ---
 title: Modal
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Modal"/>
 
 <EuiSpacer @size="l" />

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

@@ -2,9 +2,10 @@
 title: Page header
 ---
 
+<EuiSpacer/>
 <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>
+</EuiPageHeader>

package/docs/layout/panel/index.md

@@ -2,6 +2,7 @@
 title: Panel
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Panel"/>
 
 <EuiText>

package/docs/layout/popover/index.md

@@ -2,6 +2,7 @@
 title: Popover
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Popover"/>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

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

@@ -12,4 +12,5 @@ disabled_demos:
   - d08-collapsible-panels-with-external-control
 ---
 
-<EuiPageHeader @pageTitle="Resizable container"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Resizable container"/>

package/docs/layout/spacer/index.md

@@ -2,6 +2,7 @@
 title: Spacer
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Spacer"/>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

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

@@ -15,15 +15,13 @@ order: 1
 <EuiSpacer/>
 
 <EuiCallOut @iconType='accessibility' @color='warning'>
-  <:title>
-    For accessibility, it is highly recommended to provide a descriptive
-    <EuiCode>aria-label</EuiCode>
-    for each set of breadcrumbs.
-  </:title>
+<:title>
+For accessibility, it is highly recommended to provide a descriptive
+<EuiCode>aria-label</EuiCode>
+for each set of breadcrumbs.
+</:title>
 </EuiCallOut>
 
-# Basic
-
 ```hbs template
 <EuiPageContent role={{null}}>
   <EuiBreadcrumbs

package/docs/navigation/button/index.md

@@ -2,6 +2,7 @@
 title: Button
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Button"/>
 <EuiSpacer @size="l" />
 
@@ -10,4 +11,4 @@ title: Button
   <p>Be sure to read the full button usage guidelines.</p>
 </EuiText>
 
-<EuiHorizontalRule/>
+<EuiHorizontalRule/>

package/docs/navigation/collapsible-nav.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Collapsible nav"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Collapsible nav"/>

package/docs/navigation/key-pad-menu-demo/demo1.md

@@ -14,8 +14,6 @@ order: 1
 </EuiText>
 <EuiSpacer/>
 
-# Basic
-
 ```hbs template
 <EuiCallOut @iconType='accessibility' @color='warning'>
   <:body>

package/docs/navigation/key-pad-menu.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Key pad menu"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Key pad menu"/>

package/docs/navigation/link-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 <EuiText>
 	<p>
 		<strong>EuiLink</strong> is any anchor or button element that is designed to display nicely within a block of text. It also provides more anchor-specific styling onto links and makes sure they are accessible.