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

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

@@ -2,37 +2,43 @@
 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><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
+<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>
-    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>
+    <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>
-</EuiText>
+  <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>
+
+</EuiPanel>
 ```

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

@@ -0,0 +1,52 @@
+---
+order: 3
+---
+
+# IconTip
+
+<EuiText>
+  <p>
+You can use <strong>EuiIconTip</strong> to explain options, other controls, or entire parts of the user interface. When possible, surface explanations inline within the UI, and only hide them behind a <strong>EuiIconTip</strong> as a last resort.
+
+It accepts all the same props as <strong>EuiToolTip</strong>. For convenience, you can also specify optional icon <EuiCode>size</EuiCode>, <EuiCode>type</EuiCode>, and <EuiCode>color</EuiCode> props.
+
+  </p>
+</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>
+```

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

@@ -0,0 +1,77 @@
+---
+order: 4
+---
+
+```hbs template
+<EuiTitle>
+  Attaching to
+</EuiTitle>
+<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>
+<EuiSpacer />
+<EuiButton
+  @color='primary'
+  id='attachTo2'
+  {{on 'mouseenter' this.updateAttachTo}}
+>
+  You can hover me, attach to 2
+</EuiButton>
+<EuiSpacer />
+<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>
+<EuiSpacer />
+<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.md

@@ -1 +1,15 @@
-# Tooltip
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Tooltip
+      </h1>
+    </EuiTitle>
+     <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>

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

@@ -2,35 +2,26 @@
 order: 1
 ---
 
-# Demo
+# Code block
 
-```hbs template
-<div>
-  <EuiCodeBlock
-    @language={{this.language}}
-    @isCopyable={{true}}
-    @overflowHeight='500px'
-  >
-    {{this.htmlCode}}
-  </EuiCodeBlock>
-</div>
-<EuiTextArea
-  @value={{this.htmlCode}}
-  {{on 'input' (pick 'target.value' (set this 'htmlCode'))}}
-/>
-<EuiFormRow @label='Choose a Language'>
-  <EuiSelect
-    @value={{this.language}}
-    @hasNoInitialSelection={{true}}
-    @options={{array
-      (hash value='javascript' text='javascript')
-      (hash value='html' text='html')
-      (hash value='golang' text='golang')
-    }}
-    {{on 'change' (pick 'target.value' (set this 'language'))}}
-  />
+<EuiText>
+  <p>
+    <strong>EuiCodeBlock</strong> can be used to create multi-line code blocks with configurable font and padding sizes
+  </p>
+</EuiText>
 
-</EuiFormRow>
+```hbs template
+<EuiCodeBlock @language='jsx' @fontSize='m' @paddingSize='m'>
+  {{this.jsCode}}
+</EuiCodeBlock>
+<EuiCodeBlock
+  @language='jsx'
+  @fontSize='m'
+  @paddingSize='m'
+  @transparentBackground={{true}}
+>
+  {{this.jsCode}}
+</EuiCodeBlock>
 ```
 
 ```javascript component
@@ -39,19 +30,9 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class EuiMarkdownEditor1 extends Component {
-  @tracked language = 'html';
-  @tracked value = `### hehe
-  - [ ] hola
-  - [ ] hola
-  - [x] hola
-  \`\`\`javascript
-    class Human {}
-  \`\`\`
-  `;
-  @tracked htmlCode = `<!--I'm an example of HTML-->
-<div>
-  asdf
-</div>
+  jsCode = `
+/* I'm an example of JS */ 
+import Component from '@glimmer/component';
 `;
 }
 ```

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

@@ -0,0 +1,35 @@
+---
+order: 2
+---
+
+# Copy
+
+<EuiText>
+  <p>
+    Adding the <EuiCode>isCopyable</EuiCode> prop allows users to copy the text content of the code block.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock
+  @language='jsx'
+  @fontSize='m'
+  @paddingSize='m'
+  @isCopyable={{true}}
+>
+  {{this.jsCode}}
+</EuiCodeBlock>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class EuiMarkdownEditor1 extends Component {
+  jsCode = `
+/* I'm an example of JS */ 
+import Component from '@glimmer/component';
+`;
+}
+```

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

@@ -0,0 +1,43 @@
+---
+order: 3
+---
+
+# Overflow height
+
+<EuiText>
+  <p>
+    For long content, you can set an <EuiCode>overflowHeight</EuiCode> which will scroll if the text exceeds that height, and allows users to view the code in fullscreen mode.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock
+  @language='sql'
+  @fontSize='m'
+  @paddingSize='m'
+  @overflowHeight={{150}}
+>
+  {{this.sqlCode}}
+</EuiCodeBlock>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class EuiMarkdownEditor1 extends Component {
+  sqlCode = `-- I'm an example of SQL
+CREATE TABLE "topic" (
+  "id" serial NOT NULL PRIMARY KEY,
+  "forum_id" integer NOT NULL,
+  "subject" varchar(255) NOT NULL
+);
+ALTER TABLE "topic"
+ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
+REFERENCES "forum" ("id");
+
+insert into "topic" ("forum_id", "subject")
+values (2, 'D''artagnian');`;
+}
+```

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

@@ -0,0 +1,28 @@
+---
+order: 4
+---
+
+# White space
+
+<EuiText>
+  <p>
+    By default, the <EuiCode>whiteSpace</EuiCode> property is set to <EuiCode>pre-wrap</EuiCode>. This makes the text wrap when needed. You can, however, pass <EuiCode>pre</EuiCode> to the <EuiCode>whiteSpace</EuiCode> prop and the text won't wrap unless line breaks are in the content.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock
+  @language='ts'
+  @fontSize='m'
+  @paddingSize='m'
+  @overflowHeight={{300}}
+  @isCopyable={{true}}
+  @whiteSpace='pre'
+>
+  export default () => (
+  <div>In this example, the whiteSpace property is set to pre. All the
+    whitespaces will be kept as is and the text only wraps when line breaks are
+    in the content.</div>
+  );
+</EuiCodeBlock>
+```

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

@@ -0,0 +1,42 @@
+---
+order: 5
+---
+
+# Line numbers
+
+<EuiText>
+  <p>
+    To render line numbers, you can add <EuiCode>lineNumbers</EuiCode> as boolean flag.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock
+  @language='json'
+  @fontSize='m'
+  @paddingSize='m'
+  @lineNumbers={{true}}
+>
+  {{this.jsonCode}}
+</EuiCodeBlock>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+
+export default class EuiMarkdownEditor1 extends Component {
+  jsonCode = `{
+  "id": "1",
+  "rawResponse": {
+    "took": 19,
+    "timed_out": false,
+    "_shards": {
+      "total": 1,
+      "successful": 1,
+      "skipped": 0,
+      "failed": 0
+    }
+  }
+}`;
+}
+```

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

@@ -0,0 +1,42 @@
+---
+order: 6
+---
+
+# Line numbers highlighted
+
+<EuiText>
+  <p>
+    You can also optionally change the starting number and/or visually highlight certain lines by passing a configuration object: <EuiCode>lineNumbers={ start: 32, highlight: "32, 34-37, 40" }</EuiCode>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock
+  @language='json'
+  @fontSize='m'
+  @paddingSize='m'
+  @lineNumbers={{hash start=32 highlight='32, 34-37, 40'}}
+>
+  {{this.jsonCode}}
+</EuiCodeBlock>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+
+export default class EuiMarkdownEditor1 extends Component {
+  jsonCode = `{
+  "id": "1",
+  "rawResponse": {
+    "took": 19,
+    "timed_out": false,
+    "_shards": {
+      "total": 1,
+      "successful": 1,
+      "skipped": 0,
+      "failed": 0
+    }
+  }
+}`;
+}
+```