Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eui tooltip #91

Merged
merged 5 commits into from
Mar 14, 2022
Merged

Eui tooltip #91

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
687840d
refactor: add hasFocused property so tooltip stay visibible while foc…
diegozubieta95 Mar 2, 2022
e1d05b2
fix: add eui title component
diegozubieta95 Mar 14, 2022
c3c8f30
Merge branch 'feature/update-eui-styles' into eui-tooltip
betocantu93 Mar 14, 2022
ed5694c
Merge branch 'eui-tooltip' of https://github.com/prysmex/ember-eui in…
betocantu93 Mar 14, 2022
5b8d1dd
Merge branch 'feature/update-eui-styles' into eui-tooltip
betocantu93 Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@embroider/util": "^1.0.0"
},
"volta": {
"node": "16.14.0"
"node": "16.14.0",
"yarn": "1.22.17"
}
}
13 changes: 6 additions & 7 deletions packages/core/addon/components/eui-tool-tip/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<span
{{did-insert this.updateAttachTo}}
{{did-update this.updateAttachTo @attachTo}}
{{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
{{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
{{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
{{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
></span>
{{else}}
<span
Expand All @@ -20,12 +20,11 @@
}}
{{did-insert this.didInsertAnchor}}
{{on "mouseover" this.showToolTip}}
{{on "keyup" this.onKeyUp}}
{{on "focusin" this.showToolTip}}
{{on "focusout" this.hideToolTip}}
{{on "focusin" this.onFocus}}
{{on "focusout" this.onBlur}}
{{on "mouseout" this.onMouseOut}}
{{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
{{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
{{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
{{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
>
{{#if hasAnchorBlock}}
{{yield this.id to="anchor"}}
Expand Down
38 changes: 27 additions & 11 deletions packages/core/addon/components/eui-tool-tip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface ToolTipStyles {
right?: string | 'auto';
opacity?: string;
visibility?: 'hidden';
display?: 'inlineBlock';
}

const displayToClassNameMap = {
Expand All @@ -39,7 +40,8 @@ const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
// the tooltip before it is positioned
opacity: '0',
// prevent accidental mouse interaction while positioning
visibility: 'hidden'
visibility: 'hidden',
display: 'inlineBlock'
};

type EuiTooltipArgs = {
Expand Down Expand Up @@ -85,6 +87,8 @@ type EuiTooltipArgs = {
* hidden.
*/
onMouseOut?: (event: MouseEvent) => void;
onFocus?: () => void;
onBlur?: () => void;
};

export default class EuiToolTip extends Component<EuiTooltipArgs> {
Expand All @@ -96,6 +100,7 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {

//STATE
@tracked visible = false;
@tracked hasFocus = false;
@tracked calculatedPosition: ToolTipPositions = this.position;
@tracked toolTipStyles: ToolTipStyles = DEFAULT_TOOLTIP_STYLES;
@tracked arrowStyles: undefined | { left: string; top: string };
Expand All @@ -121,24 +126,22 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {

@action
setupAttachToHandlers(): void {
if (this.attachTo) {
if (this._attachTo) {
this.attachTo?.addEventListener('mousemove', this.showToolTip);
this.attachTo?.addEventListener('keyup', this.onKeyUp);
this.attachTo?.addEventListener('focusin', this.showToolTip);
this.attachTo?.addEventListener('focusin', this.onFocus);
this.attachTo?.addEventListener('mouseout', this.onMouseOut);
this.attachTo?.addEventListener('focusout', this.hideToolTip);
this.attachTo?.addEventListener('focusout', this.onBlur);
this.positionToolTip();
}
}

@action
removeAttachToHandlers(): void {
if (this.attachTo) {
if (this._attachTo) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this necessary? AFAIK the this.attachTo should work the same?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason this.attachTo doesn't do what expected but this._attachTo works

this.attachTo?.removeEventListener('mousemove', this.showToolTip);
this.attachTo?.removeEventListener('keyup', this.onKeyUp);
this.attachTo?.removeEventListener('focusin', this.showToolTip);
this.attachTo?.removeEventListener('focusin', this.onFocus);
this.attachTo?.removeEventListener('mouseout', this.onMouseOut);
this.attachTo?.removeEventListener('focusout', this.hideToolTip);
this.attachTo?.removeEventListener('focusout', this.onBlur);
}
}

Expand All @@ -161,7 +164,6 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
super.willDestroy();
this.clearAnimationTimeout();
this.removeAttachToHandlers();
window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
}

@action
Expand Down Expand Up @@ -293,6 +295,18 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
}
}

@action
onFocus(): void {
this.hasFocus = true;
this.showToolTip();
}

@action
onBlur(): void {
this.hasFocus = false;
this.hideToolTip();
}

@action
onMouseOut(event: MouseEvent): void {
// Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
Expand All @@ -301,7 +315,9 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
this._anchor === event.relatedTarget ||
(this._anchor != null && !this._anchor.contains(event.relatedTarget as Node))
) {
this.hideToolTip();
if (!this.hasFocus) {
this.hideToolTip();
}
}

if (this.args.onMouseOut) {
Expand Down
53 changes: 40 additions & 13 deletions packages/core/docs/display/tool-tip-demo/demo1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ order: 1
</EuiToolTip>
</p>
<p>
This tooltip has a long delay because it might be in a repeatable
component
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
Expand All @@ -53,40 +52,68 @@ order: 1
</EuiText>
<EuiSpacer @size="xl" />
<p>
<EuiToolTip @position="top" @content="Here is some tooltip text" @display="block">
<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
@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
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"/>
<EuiSpacer @size="xl" />

<EuiButton @color="danger" id="attachTo1" {{on "mouseenter" this.updateAttachTo}}>
<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}}>
<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}}>
<EuiButton
@color="warning"
id="attachTo3"
{{on "mouseenter" this.updateAttachTo}}
>
You can hover me, attach to 3
</EuiButton>

<EuiSpacer @size="xl"/>
<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}}>
<EuiToolTip
@position="top"
@attachTo={{this.attachTo}}
@isShown={{this.isShown}}
>
<:content>
<p>
Works on any kind of element — buttons, inputs, you name it!
Expand Down
11 changes: 7 additions & 4 deletions packages/core/docs/display/tool-tip-demo/demo2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ order: 2

```hbs template
<EuiFlexGroup @alignItems="center" @gutterSize="s" @responsive={{false}}>
<EuiFlexItem @grow={{false}}>
<EuiFlexItem @grow={{false}}>
<EuiIconTip
@content="Source maps allow browser dev tools to map minified code to the original source code"
@position="right"
Expand All @@ -24,9 +24,12 @@ order: 2
<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"}}>
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
Expand Down