@ember-eui/core 5.0.0-alpha.1 → 5.0.0-alpha.3

package/docs/display/tool-tip-demo/demo1.md

@@ -1,6 +1,7 @@
 ---
 order: 1
 ---
+
 <EuiText>
   Generally, tooltips should provide short, <strong>non-essential</strong>, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using <strong>EuiPopover</strong> instead.
 </EuiText>
@@ -20,52 +21,49 @@ Wrap <strong>EuiToolTip</strong> around any item that you need a tooltip for and
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiText>
-    <p>
-      This tooltip appears on the
-      <EuiToolTip @position='top' @content='Here is some tooltip text'>
-        <EuiButtonEmpty>
-          Top
-        </EuiButtonEmpty>
-      </EuiToolTip>
-      <p>
-        This tooltip appears on the
-        <EuiToolTip
-          @position='left'
-          @title='Tooltip titles are optional'
-          @content='Here is some tooltip text. Lets add some more content to see how it wraps.'
-        >
-          <EuiButtonEmpty>
-            Left
-          </EuiButtonEmpty>
-        </EuiToolTip>
-        and includes the optional title.
-      </p>
-    </p>
+<EuiText>
+  <p>
+    This tooltip appears on the
+    <EuiToolTip @position='top' @content='Here is some tooltip text'>
+      <EuiButtonEmpty>
+        Top
+      </EuiButtonEmpty>
+    </EuiToolTip>
     <p>
       This tooltip appears on the
-      <EuiToolTip @position='right' @content='Here is some tooltip text'>
+      <EuiToolTip
+        @position='left'
+        @title='Tooltip titles are optional'
+        @content='Here is some tooltip text. Lets add some more content to see how it wraps.'
+      >
         <EuiButtonEmpty>
-          Right
+          Left
         </EuiButtonEmpty>
       </EuiToolTip>
+      and includes the optional title.
     </p>
-    <p>
-      This tooltip has a long delay because it might be in a repeatable
-      component
-      <EuiToolTip @delay='long' @content='Here is some tooltip text'>
-        <EuiButtonEmpty>
-          Wink
-        </EuiButtonEmpty>
-      </EuiToolTip>
-    </p>
-    <p>
-      This tooltip appears on the bottom of this icon:
-      <EuiToolTip @position='bottom' @content='Here is some tooltip text'>
-        <EuiIcon tabindex='0' @type='alert' @title='Icon with tooltip' />
-      </EuiToolTip>
-    </p>
-  </EuiText>
-</EuiPanel>
+  </p>
+  <p>
+    This tooltip appears on the
+    <EuiToolTip @position='right' @content='Here is some tooltip text'>
+      <EuiButtonEmpty>
+        Right
+      </EuiButtonEmpty>
+    </EuiToolTip>
+  </p>
+  <p>
+    This tooltip has a long delay because it might be in a repeatable component
+    <EuiToolTip @delay='long' @content='Here is some tooltip text'>
+      <EuiButtonEmpty>
+        Wink
+      </EuiButtonEmpty>
+    </EuiToolTip>
+  </p>
+  <p>
+    This tooltip appears on the bottom of this icon:
+    <EuiToolTip @position='bottom' @content='Here is some tooltip text'>
+      <EuiIcon tabindex='0' @type='alert' @title='Icon with tooltip' />
+    </EuiToolTip>
+  </p>
+</EuiText>
 ```

package/docs/display/tool-tip-demo/demo2.md

@@ -10,35 +10,32 @@ order: 2
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiToolTip
-    @position='top'
-    @content='Works on any kind of element &mdash; buttons, inputs, you name it!'
-  >
-    <EuiButton>Hover me</EuiButton>
-    <EuiSpacer />
-  </EuiToolTip>
-  <p>
-    <EuiToolTip
-      @position='top'
-      @content='Here is some tooltip text'
-      @display='block'
-    >
-      <EuiButton @fullWidth={{true}}>
-        I am a block level tooltip, applied to a button with fullWidth
-      </EuiButton>
-    </EuiToolTip>
-  </p>
+<EuiToolTip
+  @position='top'
+  @content='Works on any kind of element &mdash; buttons, inputs, you name it!'
+>
+  <EuiButton>Hover me</EuiButton>
   <EuiSpacer />
+</EuiToolTip>
+<p>
   <EuiToolTip
-    @position='right'
-    @content='Tooltip remains visible when the child is focused'
+    @position='top'
+    @content='Here is some tooltip text'
+    @display='block'
   >
-    <EuiFieldText
-      placeholder='Hover over me'
-      aria-label='ToolTip appears on hover'
-    />
+    <EuiButton @fullWidth={{true}}>
+      I am a block level tooltip, applied to a button with fullWidth
+    </EuiButton>
   </EuiToolTip>
-
-</EuiPanel>
+</p>
+<EuiSpacer />
+<EuiToolTip
+  @position='right'
+  @content='Tooltip remains visible when the child is focused'
+>
+  <EuiFieldText
+    placeholder='Hover over me'
+    aria-label='ToolTip appears on hover'
+  />
+</EuiToolTip>
 ```

package/docs/display/tool-tip-demo/demo3.md

@@ -14,39 +14,37 @@ It accepts all the same props as <strong>EuiToolTip</strong>. For convenience, y
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiFlexGroup @alignItems='center' @gutterSize='s' @responsive={{false}}>
-    <EuiFlexItem @grow={{false}}>
-      <EuiIconTip
-        @content='Source maps allow browser dev tools to map minified code to the original source code'
-        @position='right'
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
-  <EuiIconTip
-    @ariaLabel='Warning'
-    @size='xl'
-    @type='alert'
-    @color='warning'
-    @content='I do not think it means what you think it means'
-  />
-  <EuiSpacer />
-  <EuiText>
-    <p>
-      Pass a position utility class via iconProps to shift for better alignment.
-      <EuiIconTip
-        @type='iInCircle'
-        @color='subdued'
-        @iconProps={{hash className='eui-alignTop'}}
-      >
-        <:content>
-          <span>
-            This was passed .eui-alignTop
-          </span>
-        </:content>
-      </EuiIconTip>
-    </p>
-  </EuiText>
-</EuiPanel>
+<EuiFlexGroup @alignItems='center' @gutterSize='s' @responsive={{false}}>
+  <EuiFlexItem @grow={{false}}>
+    <EuiIconTip
+      @content='Source maps allow browser dev tools to map minified code to the original source code'
+      @position='right'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiIconTip
+  @ariaLabel='Warning'
+  @size='xl'
+  @type='alert'
+  @color='warning'
+  @content='I do not think it means what you think it means'
+/>
+<EuiSpacer />
+<EuiText>
+  <p>
+    Pass a position utility class via iconProps to shift for better alignment.
+    <EuiIconTip
+      @type='iInCircle'
+      @color='subdued'
+      @iconProps={{hash className='eui-alignTop'}}
+    >
+      <:content>
+        <span>
+          This was passed .eui-alignTop
+        </span>
+      </:content>
+    </EuiIconTip>
+  </p>
+</EuiText>
 ```

package/docs/display/tool-tip-demo/demo4.md

@@ -2,21 +2,18 @@
 order: 4
 ---
 
-```hbs template
-<EuiTitle>
-  Attaching to
-</EuiTitle>
-<EuiSpacer />
+# Attaching to
 
 <EuiText>
+<p>
   If you want to attach and control the ToolTip to something programatically you
   can optionally pass an attachTo string or element and use the content named
   block, also you can pass isShown as true to show the tooltip without user
   interaction
+  </p>
 </EuiText>
 
-<EuiSpacer @size='xl' />
-
+```hbs template
 <EuiButton
   @color='danger'
   id='attachTo1'

package/docs/display/tool-tip.md

@@ -1,15 +1,11 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Tooltip
-      </h1>
-    </EuiTitle>
-     <EuiSpacer @size='l' />
+<EuiPageHeader @pageTitle="Tooltip"/>
+
+<EuiSpacer @size='l' />
 <EuiText>
+
   <p>
 Generally, tooltips should provide short, <strong>non-essential</strong>, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using EuiPopover instead.
   </p>
 </EuiText>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+
+<EuiHorizontalRule />

package/docs/editors/code/code-block.md

@@ -1,12 +1,4 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Code
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Code"/>
 
 <EuiSpacer />
 <EuiCallOut>
@@ -25,3 +17,5 @@
   JSX code (often React) has distinct language syntaxes from the base JavaScript and TypeScript languages. For these instances, use <EuiCode @language="jsx">language="jsx"</EuiCode> or <EuiCode @language="tsx">language="tsx"</EuiCode>.
 </p>
 </EuiText>
+
+<EuiHorizontalRule />

package/docs/editors/code/inline.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Inline
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Inline"/>

package/docs/editors/markdown-editor/base-editor.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Base editor
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Base editor"/>

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

@@ -3,15 +3,7 @@ order: 1
 title: Checkbox
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Checkbox
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Checkbox"/>
 
 <EuiSpacer />
 

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

@@ -3,15 +3,7 @@ order: 2
 title: Checkbox group
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Checkbox group
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Checkbox group"/>
 
 <EuiSpacer />
 

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

@@ -3,12 +3,4 @@ order: 1
 title: Combo box
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Combo box
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Combo box"/>

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

@@ -2,15 +2,7 @@
 title: File picker
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        File picker
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="File picker"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Form control layout
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Form control layout
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Form control layout"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Form control layout delimited
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Form control layout delimited
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Form control layout delimited"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Number field
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Number field
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Number field"/>
 
 <EuiText>
   <p>

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

@@ -2,15 +2,7 @@
 title: Password field
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Password field
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Password field"/>
 
 <EuiSpacer />
 

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

@@ -3,15 +3,7 @@ order: 3
 title: Radio
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Radio
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Radio"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Radio group
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Radio group
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Radio group"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Range
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Range
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Range"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Search field
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Search field
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Search field"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Select
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Select
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Select"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Switch
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Switch
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Switch"/>
 
 <EuiSpacer />
 

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

@@ -2,15 +2,7 @@
 title: Text field
 ---
 
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Text field
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Text field"/>
 
 <EuiSpacer />
 

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

@@ -1,16 +1,7 @@
 ---
 title: Textarea
 ---
-
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Textarea
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Textarea"/>
 
 <EuiSpacer />
 

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

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Described form groups
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Described form groups"/>

package/docs/layout/accordion.md

@@ -1,13 +1,4 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Accordion
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
-
+<EuiPageHeader @pageTitle="Accordion"/>
 <EuiCallOut>
   <:body>
     <EuiText>

package/docs/layout/bottom-bar.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Bottom bar
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Bottom bar"/>

package/docs/layout/flex.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Flex
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Flex"/>