@ember-eui/core 4.4.0 → 5.0.0-alpha.4

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

@@ -0,0 +1,50 @@
+---
+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
+<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

@@ -0,0 +1,74 @@
+---
+order: 4
+---
+
+# 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>
+
+```hbs template
+<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,11 @@
-# Tooltip
+<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>
+
+<EuiHorizontalRule />

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
+    }
+  }
+}`;
+}
+```