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

package/docs/display/text-demo/demo1.md

@@ -1,85 +1,47 @@
-# Demo
+---
+order: 1
+---
 
 ```hbs template
-<EuiText @textAlign="center" @size="xl" @grow={{true}}>
-  <div>
-    <EuiTextAlign @textAlign="left">
-      <h1>
-        This is Heading One
-      </h1>
-    </EuiTextAlign>
-    <EuiTextAlign @textAlign="right">
-      <p>
-        Far out in the uncharted
-        <EuiTextColor @color="subdued">
-          backwaters
-        </EuiTextColor>
-        of the
-        <EuiTextColor @color="secondary">
-          unfashionable
-        </EuiTextColor>
-        end of the
-      western spiral arm of the Galaxy lies a small unregarded yellow sun. When
-      suddenly some wild
-        <EuiTextColor @color="warning">
-          JavaScript code appeared!
-        </EuiTextColor>
-        {' '}
-        <code>
-          const whoa = "!"
-        </code>
-      </p>
-    </EuiTextAlign>
+<div>
+  <EuiText @grow={{false}}>
+    <h1>This is Heading One</h1>
+    <p>
+      Far out in the uncharted backwaters of the
+      <a href='#'>unfashionable</a>{' '} end of the western spiral arm of the
+      Galaxy lies a small unregarded yellow sun. When suddenly some wild
+      JavaScript code appeared!{' '}
+      <code>const whoa = &quot;!&quot;</code>
+    </p>
+
     <pre>
-      <code>
-        const completelyUnexpected = "the audacity!";
-      </code>
+      <code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
     </pre>
+
+    <p>That was close.</p>
+
+    <blockquote>
+      <p>
+        I&apos;ve seen things you people wouldn&apos;t believe. Attack ships on
+        fire off the shoulder of Orion. I watched C-beams glitter in the dark
+        near the Tannhäuser Gate. All those moments will be lost in time, like
+        tears in rain. Time to die.
+      </p>
+    </blockquote>
+
     <p>
       Orbiting this at a distance of roughly ninety-two million miles is an
       utterly insignificant little blue green planet whose ape- descended life
       forms are so amazingly primitive that they still think digital watches are
       a pretty neat idea.
     </p>
-    <EuiTextAlign @textAlign="left">
-      <ul>
-        <li>
-          <EuiTextColor>
-            Default color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="subdued">
-            Subdued color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="secondary">
-            Secondary color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="accent">
-            Accent color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="danger">
-            Danger color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="warning">
-            Warning color
-          </EuiTextColor>
-        </li>
-        <li>
-          <EuiTextColor @color="ghost">
-            Ghost color
-          </EuiTextColor>
-        </li>
-      </ul>
-    </EuiTextAlign>
+
+    <ul>
+      <li>List item one</li>
+      <li>List item two</li>
+      <li>Dolphins</li>
+    </ul>
+
     <p>
       This planet has - or rather had - a problem, which was this: most of the
       people living on it were unhappy for pretty much of the time. Many
@@ -88,88 +50,75 @@
       because on the whole it was not the small green pieces of paper that were
       unhappy.
     </p>
-    <h2>
-      This is Heading Two
-    </h2>
+
+    <h2>This is Heading Two</h2>
+
     <ol>
-      <li>
-        Number one
-      </li>
-      <li>
-        Number two
-      </li>
-      <li>
-        Dolphins again
-      </li>
+      <li>Number one</li>
+      <li>Number two</li>
+      <li>Dolphins again</li>
     </ol>
+
     <p>
-      But the dog wasn’t lazy, it was just practicing mindfulness, so it
+      But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it
       had a greater sense of life-satisfaction than that fox with all its silly
       jumping.
     </p>
+
     <p>
-      And from the fox’s perspective, life was full of hoops to jump{' '}
-      <em>
-        through
-      </em>
-      , low-hanging fruit to jump
-      <em>
-        for
-      </em>
-      , and dead car
-      batteries to jump-
-      <em>
-        start
-      </em>
-      .
+      And from the fox&rsquo;s perspective, life was full of hoops to jump{' '}
+      <em>through</em>, low-hanging fruit to jump
+      <em>for</em>, and dead car batteries to jump-<em>start</em>.
     </p>
-    <h3>
-      This is Heading Three
-    </h3>
+
+    <h3>This is Heading Three</h3>
+
     <p>
       So it thought the dog was making a poor life choice by focusing so much on
       mindfulness. What if its car broke down?
     </p>
-    <h4>
-      This is Heading Four
-    </h4>
+
+    <h4>This is Heading Four</h4>
+
     <p>
       So it thought the dog was making a poor life choice by focusing so much on
       mindfulness. What if its car broke down?
     </p>
-    <h5>
-      This is Heading Five
-    </h5>
+
+    <h5>This is Heading Five</h5>
+
     <p>
       <small>
         So it thought the dog was making a poor life choice by focusing so much
         on mindfulness. What if its car broke down?
       </small>
     </p>
-    <h6>
-      This is Heading Six
-    </h6>
-    {{! <EuiHorizontalRule /> }}
+
+    <h6>This is Heading Six</h6>
+
+    <EuiHorizontalRule />
+
     <dl>
-      <dt>
-        The Elder Scrolls: Morrowind
-      </dt>
-      <dd>
-        The opening music alone evokes such strong memories.
-      </dd>
-      <dt>
-        TIE Fighter
-      </dt>
+      <dt>The Elder Scrolls: Morrowind</dt>
+      <dd>The opening music alone evokes such strong memories.</dd>
+      <dt>TIE Fighter</dt>
       <dd>
         The sequel to XWING, join the dark side and fly for the Emporer.
       </dd>
-      <dt>
-        Quake 2
-      </dt>
-      <dd>
-        The game that made me drop out of college.
-      </dd>
+      <dt>Quake 2</dt>
+      <dd>The game that made me drop out of college.</dd>
+    </dl>
+
+    <EuiHorizontalRule />
+
+    <dl className='eui-definitionListReverse'>
+      <dt>Name</dt>
+      <dd>The Elder Scrolls: Morrowind</dd>
+      <dt>Game style</dt>
+      <dd>Open-world, fantasy, action role-playing</dd>
+      <dt>Release date</dt>
+      <dd>2002</dd>
     </dl>
-  </div>
-</EuiText>
-```
+  </EuiText>
+</div>
+```

package/docs/display/text-demo/demo2.md

@@ -0,0 +1,71 @@
+---
+order: 2
+---
+
+# Coloring text
+
+<EuiText>
+  <p>
+There are two ways to color text. Either individually by applying <strong>EuiTextColor</strong> on individual text objects, or by passing the <EuiCode>color</EuiCode> prop directly on <strong>EuiText</strong> for a blanket approach across the entirety of your text.
+
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiTitle>
+    <h2>
+      <EuiTextColor @color='default'>You </EuiTextColor>
+      <EuiTextColor @color='success'>use </EuiTextColor>
+      <EuiTextColor @color='accent'>it </EuiTextColor>
+      <EuiTextColor @color='warning'>on </EuiTextColor>
+      <EuiTextColor @color='danger'>anything!</EuiTextColor>
+    </h2>
+  </EuiTitle>
+
+  <EuiSpacer @size='l' />
+
+  <EuiText>
+    <p>
+      <EuiTextColor @color='default'>Default text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='subdued'>Subdued text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='success'>Success text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='accent'>Accent text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='warning'>Warning text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='danger'>Danger text color</EuiTextColor>
+    </p>
+    <p>
+      <EuiTextColor @color='#c561dc'>Custom text color</EuiTextColor>
+    </p>
+    <p>
+      <span style='background-color:#222;'>
+        <EuiTextColor @color='ghost'>
+          Ghost text color is always white regardless of theme.
+        </EuiTextColor>
+      </span>
+    </p>
+  </EuiText>
+
+  <EuiSpacer />
+
+  <EuiText @color='danger'>
+    <h2>Works on EuiText as well.</h2>
+    <p>
+      Sometimes you need to color entire blocks of text, no matter what is in
+      them. You can always apply color directly (versus using the separated
+      component) to make it easy. Links should still{' '}
+      <a href='#'>properly color</a>.
+    </p>
+  </EuiText>
+</div>
+```

package/docs/display/text-demo/demo3.md

@@ -0,0 +1,39 @@
+---
+order: 3
+---
+
+# Alignment
+
+<EuiText>
+  <p>
+There are two ways to align text. Either individually by applying <strong>EuiTextAlign</strong> on individual text objects, or by passing the <EuiCode>textAlign</EuiCode> prop directly on <strong>EuiText</strong> for a blanket approach across the entirety of your text.
+
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiText>
+    <EuiTextAlign @textAlign='left'>
+      <p>Left aligned paragraph.</p>
+    </EuiTextAlign>
+    <EuiTextAlign @textAlign='center'>
+      <p>Center aligned paragraph.</p>
+    </EuiTextAlign>
+    <EuiTextAlign @textAlign='right'>
+      <p>Right aligned paragraph.</p>
+    </EuiTextAlign>
+  </EuiText>
+  <EuiSpacer />
+  <EuiText @textAlign='center'>
+    <p>
+      You can also pass alignment to
+      <strong>EuiText</strong>
+      directly with a prop
+    </p>
+  </EuiText>
+  <EuiText @textAlign='center' @color='success'>
+    <p>And in conjunction with coloring.</p>
+  </EuiText>
+</div>
+```

package/docs/display/text.md

@@ -1 +1,12 @@
-# Text
+<EuiPageHeader @pageTitle="Text"/>
+
+<EuiText>
+  <p>
+<strong>EuiText</strong> is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced style it <strong>only accepts raw XHTML</strong> and can not / should not be used to wrap React components (which would break their styling).
+
+EuiText can ensure proper line-length for readability by setting a <EuiCode>max-width</EuiCode> on the entire component. To add the max-width setting, set <EuiCode>grow=false</EuiCode>.
+
+  </p>
+</EuiText>
+
+<EuiHorizontalRule />

package/docs/display/title-demo/demo1.md

@@ -1,29 +1,53 @@
-# Demo
+<EuiText>
+  <p>
+<strong>EuiTitle</strong> styles the page, section, and content headings we use in Kibana. They can contain any markup, but usually contain a heading tag of some sort. Unlike <strong>EuiText</strong> they are margin neutral and more suitable for general layout design.
+  </p>
+</EuiText>
 
 ```hbs template
-<EuiTitle @size="l">
-  Title size="l"
-</EuiTitle>
-<EuiTitle @size="m">
-  Title size="m"
-</EuiTitle>
-<EuiTitle @size="s">
-  Title size="s"
-</EuiTitle>
-<EuiTitle @size="xs">
-  Title size="xs"
-</EuiTitle>
-<EuiTitle @size="xxs">
-  Title size="xxs"
-</EuiTitle>
-<EuiTitle @size="xxxs">
-  Title size="xxxs"
-</EuiTitle>
-
-<EuiSpacer />
-
-You could also change the title tag using `@tagName`
-<EuiTitle @tagName="h6">
-  This is an h6
-</EuiTitle>
+<div>
+  <EuiTitle @size='l'>
+    <h1>This is a large title, only one should exist per page</h1>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;l&quot;</EuiCode>
+
+  <EuiSpacer />
+  <EuiTitle>
+    <h2>This is the default size for title</h2>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;m&quot;</EuiCode>
+
+  <EuiSpacer />
+  <EuiTitle @size='s'>
+    <h3>This is a small title</h3>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;s&quot;</EuiCode>
+
+  <EuiSpacer />
+  <EuiTitle @size='xs'>
+    <h4>This is an extra small title</h4>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;xs&quot;</EuiCode>
+
+  <EuiSpacer />
+  <EuiTitle @size='xxs'>
+    <h5>This is an extra extra small title</h5>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;xxs&quot;</EuiCode>
+
+  <EuiSpacer />
+  <EuiTitle @size='xxxs'>
+    <h6>
+      This is an extra extra extra small title and should only be used when the
+      title is inconsequential (like a label)
+    </h6>
+  </EuiTitle>
+  <EuiCode @language='js'>size=&quot;xxxs&quot;</EuiCode>
+
+  <EuiHorizontalRule />
+
+  <EuiTitle @size='l'>
+    <span>Titles are markup agnostic, they only confer style</span>
+  </EuiTitle>
+</div>
 ```

package/docs/display/title.md

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

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

@@ -2,13 +2,29 @@
 order: 1
 ---
 
-# Demo
+<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>
+<EuiSpacer />
+<EuiCallOut @color="warning" @size="s" @iconType="accessibility" @title="Putting anything other than plain text in a tooltip is lost on screen readers." />
+<EuiSpacer />
+<EuiText>
+  Wrap <strong>EuiToolTip</strong> around any item that you need a tooltip for and provide the <EuiCode>content</EuiCode> and optionally the <EuiCode>title</EuiCode>. The <EuiCode>position</EuiCode> prop will take a suggested position, but will change it if the tooltip gets too close to the edge of the screen.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut @color="warning"  @size="s" @iconType="accessibility" @title="Anchoring a tooltip to a non-interactive element makes it difficult for keyboard-only and screen reader users to read." />
+<EuiSpacer />
+<EuiText>
+  <p>
+Wrap <strong>EuiToolTip</strong> around any item that you need a tooltip for and provide the content and optionally the title. The position prop will take a suggested position, but will change it if the tooltip gets too close to the edge of the screen.
+  </p>
+</EuiText>
 
 ```hbs template
 <EuiText>
   <p>
     This tooltip appears on the
-    <EuiToolTip @position="top" @content="Here is some tooltip text">
+    <EuiToolTip @position='top' @content='Here is some tooltip text'>
       <EuiButtonEmpty>
         Top
       </EuiButtonEmpty>
@@ -16,9 +32,9 @@ order: 1
     <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."
+        @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
@@ -29,16 +45,15 @@ order: 1
   </p>
   <p>
     This tooltip appears on the
-    <EuiToolTip @position="right" @content="Here is some tooltip text">
+    <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">
+    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>
@@ -46,69 +61,9 @@ order: 1
   </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 @position='bottom' @content='Here is some tooltip text'>
+      <EuiIcon tabindex='0' @type='alert' @title='Icon with tooltip' />
     </EuiToolTip>
   </p>
 </EuiText>
-<EuiSpacer @size="xl" />
-<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>
-<EuiSpacer />
-<EuiToolTip @position="right" @content="Works on anything">
-  <EuiFieldText placeholder="Hover over me" aria-label="ToolTip appears on hover" />
-</EuiToolTip>
-<EuiSpacer />
-
-<EuiText>
-  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
-</EuiText>
-
-<EuiSpacer @size="xl"/>
-
-<EuiButton @color="danger" id="attachTo1" {{on "mouseenter" this.updateAttachTo}}>
-  You can hover me, attach to 1
-</EuiButton>
-<EuiButton @color="primary" id="attachTo2" {{on "mouseenter" this.updateAttachTo}}>
-  You can hover me, attach to 2
-</EuiButton>
-<EuiButton @color="warning" id="attachTo3" {{on "mouseenter" this.updateAttachTo}}>
-  You can hover me, attach to 3
-</EuiButton>
-
-<EuiSpacer @size="xl"/>
-<EuiButton {{on "click" (set this "isShown" (not this.isShown))}}>
-  {{if this.isShown "isShown true" "isShown false"}}
-</EuiButton>
-<EuiToolTip @position="top" @attachTo={{this.attachTo}} @isShown={{this.isShown}}>
-  <:content>
-    <p>
-      Works on any kind of element — buttons, inputs, you name it!
-    </p>
-  </:content>
-</EuiToolTip>
-```
-
-```javascript component
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class ToolTipDemo1 extends Component {
-  @tracked attachTo = '#attachTo1';
-  @tracked isShown = false;
-
-  @action
-  updateAttachTo(ele) {
-    if (ele.target !== this.attachTo) {
-      this.attachTo = ele.target;
-    }
-  }
-}
 ```

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

@@ -2,37 +2,40 @@
 order: 2
 ---
 
-# Demo
+# Wrapping components
 
-```hbs template
-<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>
+  <p><strong>EuiToolTip</strong> wraps its children in a <EuiCode>&lt;span&gt;</EuiCode> element that is <<EuiCode>display: inline-block</EuiCode> If you are wrapping a block-level child (e.g. a <EuiCode>&lt;div&gt;</EuiCode>), you may need to change this by passing <EuiCode>display="block"</EuiCode> but the resulting DOM may be in violation of the HTML5 spec.</p>
+  <p>It also applies <EuiCode>onFocus</EuiCode> and <EuiCode>onBlur</EuiCode> props the the cloned <EuiCode>children</EuiCode>. If you pass in a custom component, then you’ll need to make sure these props are applied to the root element rendered by your component.</p>
 </EuiText>
+
+```hbs template
+<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>
+<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>
 ```