Skip to content

Commit

Permalink
Merge branch 'feature/update-eui-styles' of https://github.com/prysme…
Browse files Browse the repository at this point in the history
…x/ember-eui into feature/update-eui-styles
  • Loading branch information
betocantu93 committed Mar 30, 2022
2 parents 34b37c9 + 6672d8e commit 7d4b745
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 158 deletions.
4 changes: 3 additions & 1 deletion packages/core/addon/components/eui-field-text/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
class={{classes}}
disabled={{@disabled}}
type="text"
placeholder={{@placeholder}}
...attributes
{{validatable-control @isInvalid}}
{{did-insert (optional @inputRef)}}
Expand All @@ -45,6 +46,7 @@
class={{classes}}
disabled={{@disabled}}
type="text"
placeholder={{@placeholder}}
...attributes
{{validatable-control @isInvalid}}
/>
Expand All @@ -55,4 +57,4 @@
</EuiFormControlLayout>
{{/if}}
{{/let}}
{{/let}}
{{/let}}
171 changes: 45 additions & 126 deletions packages/core/docs/display/tool-tip-demo/demo1.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,140 +2,59 @@
order: 1
---

# Demo

```hbs template
<EuiText>
<p>
This tooltip appears on the
<EuiToolTip @position="top" @content="Here is some tooltip text">
<EuiButtonEmpty>
Top
</EuiButtonEmpty>
</EuiToolTip>
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
<EuiPanel @hasShadow={{false}}>
<EuiText>
<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."
>
<EuiToolTip @position='top' @content='Here is some tooltip text'>
<EuiButtonEmpty>
Left
Top
</EuiButtonEmpty>
</EuiToolTip>
and includes the optional title.
<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>
</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>
<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="Tooltip remains visible when the child is focused"
>
<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!
This tooltip appears on the
<EuiToolTip @position='right' @content='Here is some tooltip text'>
<EuiButtonEmpty>
Right
</EuiButtonEmpty>
</EuiToolTip>
</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;
}
}
}
<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>
```
65 changes: 34 additions & 31 deletions packages/core/docs/display/tool-tip-demo/demo2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +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"}}
<EuiToolTip
@position='top'
@content='Here is some tooltip text'
@display='block'
>
<:content>
<span>
This was passed .eui-alignTop
</span>
</:content>
</EuiIconTip>
<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>
```
52 changes: 52 additions & 0 deletions packages/core/docs/display/tool-tip-demo/demo3.md
Original file line number Diff line number Diff line change
@@ -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>
```
6 changes: 6 additions & 0 deletions packages/core/docs/display/tool-tip.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,11 @@
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>

0 comments on commit 7d4b745

Please sign in to comment.