Skip to content

Commit

Permalink
feat(tooltip): add beta component (#607)
Browse files Browse the repository at this point in the history 
* feat: adding tooltip basics

* feat: adding left right bottom alignment

* feat: adding size getter

* feat: adding right tooltip

* feat: making tooltips more flexible

* feat: change styling

* feat: adding tooltip with popperJS included

* refactor: changes

* feat: basic tooltip

* feat: using design tokens

* refactor: popover and tooltip

* fix: onKeyDown event

* chore: documentation and z-index (#415)

* feat: possibility to deactivate popperJS functions

* fix: popper function disable possibility

* feat: tooltip possibility focus and hover

* Tooltips documention (#465)

* chore: tooltips eng, clean branch

* feat: docs for tooltip

* feat: tooltips visual test

* feat: hcm accessibility border

* feat: adding standard and slot story

* feat: adding disabled and placement stories

* refactor: button label and usage picture

* feat: adding trigger story

* refactor: story html

* refactor: linting

* fix: spelling, grammar

* refactor: story usage image

* refactor: story docs

* refactor: german usage text

* refactor: english usage text

* fix: spelling issues

* refactor: german usage text

* refactor: english usage text

* refactor: change slot container id to class

* refactor: change css variable naming

* refactor: naming of css variables and component events

* refactor: deleting box sizing inherit

* refactor: usage texts

* chore: make tslint happy with popover and tooltip

* test(tooltip): add proper visual test

* test(tooltip): add proper visual test

* docs(tooltip): add credit note

Co-authored-by: Calvin Schröder <[email protected]>
Co-authored-by: Daniel Beck <[email protected]>
  • Loading branch information
@marvinLaubenstein @Lalaluka @nowseemee
3 people authored Nov 8, 2021
1 parent 5991853 commit a6441fc
Show file tree
Hide file tree
Showing 15 changed files with 1,180 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/components-sketch/views/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,5 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
<p><a href="/textarea">Textarea</a></p>
<p><a href="/text-field">Text Field</a></p>
<p><a href="/text-lists">Text Lists</a></p>
<p><a href="/tooltip">Tooltip</a></p>
</div>
94 changes: 94 additions & 0 deletions packages/components-sketch/views/tooltip.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
{{!--
Scale https://github.com/telekom/scale
Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
--}}

<div data-sketch-artboard="Tooltip" class="artboard">
<h1 class="title--artboard">Tooltip</h1>

<h2 class="title--artboard-section">Tooltip Top</h2>
<div class="agent-states--grid" data-category="Top">
<div class="agent-states--item">
<p class="agent-states--label">:default</p>
<scale-tooltip content="Tooltip" placement="top" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:start</p>
<scale-tooltip content="Tooltip" placement="top-start" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:end</p>
<scale-tooltip content="Tooltip" placement="top-end" open="true">
</scale-tooltip>
</div>
</div>
<h2 class="title--artboard-section">Tooltip Right</h2>
<div class="agent-states--grid" data-category="Right">
<div class="agent-states--item">
<p class="agent-states--label">:default</p>
<scale-tooltip content="Tooltip" placement="right" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:start</p>
<scale-tooltip content="Tooltip" placement="right-start" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:end</p>
<scale-tooltip content="Tooltip" placement="right-end" open="true">
</scale-tooltip>
</div>
</div>
<h2 class="title--artboard-section">Tooltip bottom</h2>
<div class="agent-states--grid" data-category="Bottom">
<div class="agent-states--item">
<p class="agent-states--label">:default</p>
<scale-tooltip content="Tooltip" placement="bottom" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:start</p>
<scale-tooltip content="Tooltip" placement="bottom-start" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:end</p>
<scale-tooltip content="Tooltip" placement="bottom-end" open="true">
</scale-tooltip>
</div>
</div>
<h2 class="title--artboard-section">Tooltip left</h2>
<div class="agent-states--grid" data-category="Left">
<div class="agent-states--item">
<p class="agent-states--label">:default</p>
<scale-tooltip content="Tooltip" placement="left" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:start</p>
<scale-tooltip content="Tooltip" placement="left-start" open="true">
</scale-tooltip>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:end</p>
<scale-tooltip content="Tooltip" placement="left-end" open="true">
</scale-tooltip>
</div>
</div>
</div>

<script src="/symbol_names.js"></script>
<script>
Array.from(document.querySelectorAll('scale-tooltip')).forEach((btn, i) => {
btn.dataset.sketchSymbol = `Tooltip / ${order(1, getCategoryName(btn))} /
${order(2, capitalize(btn.getAttribute('placement')))}`;
});
</script>
65 changes: 65 additions & 0 deletions packages/components/src/components/tooltip/readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# scale-tooltip



<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `content` | `content` | (optional) The content of the Tooltip supporting Text only | `string` | `''` |
| `disabled` | `disabled` | (optional) Disable Tooltip | `boolean` | `false` |
| `distance` | `distance` | (optional) Distance of the Tooltip from the Target Object (related to the `placement`) | `number` | `5` |
| `flip` | `flip` | (optional) Switching the flip option of the tooltip on and off | `boolean` | `true` |
| `open` | `open` | (optional) Set the Tooltip to open per default (will still be closed on closing Events) | `boolean` | `false` |
| `placement` | `placement` | (optional) Position of the Tooltip on the Object | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
| `preventOverflow` | `prevent-overflow` | (optional) Switching the preventOverflow option of the tooltip on and off | `boolean` | `false` |
| `skidding` | `skidding` | (optional) skidding moves the tooltip of the element in dependence of its `placement` to the element either on an x-axis (at `placement` top/down) or on a y-axis (for output `placement` left/right) | `number` | `0` |
| `trigger` | `trigger` | (optional) Set custom trigger Event selection | `string` | `'hover focus'` |


## Events

| Event | Description | Type |
| ------------------- | ----------- | ------------------ |
| `scale-before-hide` | | `CustomEvent<any>` |
| `scale-before-show` | | `CustomEvent<any>` |
| `scale-hide` | | `CustomEvent<any>` |
| `scale-show` | | `CustomEvent<any>` |


## Methods

### `hideTooltip() => Promise<void>`



#### Returns

Type: `Promise<void>`



### `showTooltip() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Shadow Parts

| Part | Description |
| -------- | ----------- |
| `"base"` | |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
168 changes: 168 additions & 0 deletions packages/components/src/components/tooltip/tooltip.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
/**
* @license
* Scale https://github.com/telekom/scale
*
* Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/

:host {
/*tooltip*/
--radius: var(--scl-radius-4);
--background: var(--scl-color-grey-60);
--color: var(--scl-color-white);
--font-weight: var(--scl-font-weight-regular);
--font-size: var(--scl-font-size-16);
--line-height: 1.4;
--spacing: var(--scl-spacing-2) var(--scl-spacing-8);
/*arrow*/
--arrow-size: 5px;
--arrow-offset: var(--scl-spacing-8);
/*tooltip hide*/
--max-width: 20rem;
--transition-delay-hide: 0s;
--transition-duration-hide: var(--scl-motion-duration-immediate);
--transition-timing-function-hide: ease;
/*tooltip show*/
--transition-duration-show: var(--scl-motion-duration-immediate);
--transition-timing-function-show: ease;
--z-index: var(--scl-z-index-70);

display: contents;
position: relative;
box-sizing: border-box;
}

.tooltip-positioner {
position: absolute;
}

.slot-container {
width: max-content;
height: max-content;
}

.tooltip {
max-width: var(--max-width);
border-radius: var(--radius);
background-color: var(--background);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height);
color: var(--color);
opacity: 0;
padding: var(--spacing);
transform: scale(0.8);
transform-origin: bottom;
transition-property: opacity, transform;
transition-delay: var(--transition-delay-hide);
transition-duration: var(--transition-duration-hide);
transition-timing-function: var(--transition-timing-function-hide);
}

.tooltip::after {
content: '';
position: absolute;
width: 0;
height: 0;
}

.tooltip-positioner.popover-visible .tooltip {
opacity: 1;
transform: none;
transition-duration: var(--transition-duration-show);
transition-timing-function: var(--transition-timing-function-show);
}

.tooltip-positioner[data-popper-placement^='top'] .tooltip {
transform-origin: bottom;
}

.tooltip-positioner[data-popper-placement^='bottom'] .tooltip {
transform-origin: top;
}

.tooltip-positioner[data-popper-placement^='left'] .tooltip {
transform-origin: right;
}

.tooltip-positioner[data-popper-placement^='right'] .tooltip {
transform-origin: left;
}

.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {
bottom: 100%;
left: calc(50% - var(--arrow-size));
border-bottom: var(--arrow-size) solid var(--background);
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {
left: var(--arrow-offset);
}

.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {
right: var(--arrow-offset);
left: auto;
}

.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {
top: 100%;
left: calc(50% - var(--arrow-size));
border-top: var(--arrow-size) solid var(--background);
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {
left: var(--arrow-offset);
}

.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {
right: var(--arrow-offset);
left: auto;
}

.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {
top: calc(50% - var(--arrow-size));
left: 100%;
border-left: var(--arrow-size) solid var(--background);
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {
top: var(--arrow-offset);
}

.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {
top: auto;
bottom: var(--arrow-offset);
}

.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {
top: calc(50% - var(--arrow-size));
right: 100%;
border-right: var(--arrow-size) solid var(--background);
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {
top: var(--arrow-offset);
}

.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {
top: auto;
bottom: var(--arrow-offset);
}

@media screen and (-ms-high-contrast: active) {
.tooltip {
border: 1px solid yellow;
}
}
Loading

0 comments on commit a6441fc

Please sign in to comment.