@brightspace-ui/core 2.25.0 → 2.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,22 +25,6 @@ Tooltips display additional information when users focus or hover on a point of
|
|
|
25
25
|
</d2l-tooltip>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
## Best Practices
|
|
29
|
-
|
|
30
|
-
<!-- docs: start best practices -->
|
|
31
|
-
<!-- docs: start dos -->
|
|
32
|
-
* Use to show error messages during form validation
|
|
33
|
-
* Use to give the name or purpose of an icon button
|
|
34
|
-
* Use to provide the “full text” for a truncated value in a tight datagrid or list
|
|
35
|
-
<!-- docs: end dos -->
|
|
36
|
-
|
|
37
|
-
<!-- docs: start donts -->
|
|
38
|
-
* Don’t use tooltips for long paragraphs of text
|
|
39
|
-
* Don’t use tooltips to repeat text that is already shown
|
|
40
|
-
* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
|
|
41
|
-
<!-- docs: end donts -->
|
|
42
|
-
<!-- docs: end best practices -->
|
|
43
|
-
|
|
44
28
|
## Accessibility
|
|
45
29
|
|
|
46
30
|
**Interactive Target Elements:**
|
|
@@ -67,6 +51,22 @@ If you are unable to add a semantically aligned ARIA role or attach the tooltip
|
|
|
67
51
|
|
|
68
52
|
The `d2l-tooltip` component is used to display additional information when users focus or hover on a point of interest.
|
|
69
53
|
|
|
54
|
+
## Best Practices
|
|
55
|
+
|
|
56
|
+
<!-- docs: start best practices -->
|
|
57
|
+
<!-- docs: start dos -->
|
|
58
|
+
* Use to show error messages during form validation
|
|
59
|
+
* Use to give the name or purpose of an icon button
|
|
60
|
+
* Use to provide the “full text” for a truncated value in a tight datagrid or list
|
|
61
|
+
<!-- docs: end dos -->
|
|
62
|
+
|
|
63
|
+
<!-- docs: start donts -->
|
|
64
|
+
* Don’t use tooltips for long paragraphs of text
|
|
65
|
+
* Don’t use tooltips to repeat text that is already shown
|
|
66
|
+
* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
|
|
67
|
+
<!-- docs: end donts -->
|
|
68
|
+
<!-- docs: end best practices -->
|
|
69
|
+
|
|
70
70
|
<!-- docs: demo live name:d2l-tooltip autoSize:false size:small -->
|
|
71
71
|
```html
|
|
72
72
|
<script type="module">
|
|
@@ -151,3 +151,59 @@ In the following example to constrain the tooltip to the dashed boundary we can
|
|
|
151
151
|
</d2l-tooltip>
|
|
152
152
|
</div>
|
|
153
153
|
```
|
|
154
|
+
|
|
155
|
+
## Help Tooltip [d2l-tooltip-help]
|
|
156
|
+
|
|
157
|
+
The `d2l-tooltip-help` component is used to display additional information when users focus or hover over some text.
|
|
158
|
+
|
|
159
|
+
### Best Practices
|
|
160
|
+
|
|
161
|
+
<!-- docs: start best practices -->
|
|
162
|
+
<!-- docs: start dos -->
|
|
163
|
+
* Use a helpful label that provides value on its own
|
|
164
|
+
* The contents of the tooltip should elaborate on the label
|
|
165
|
+
* Keep help text short and concise (full sentences are not necessary)
|
|
166
|
+
* Use a help tooltip when there are space limitations, such as in a table, list, or narrow sidebar
|
|
167
|
+
<!-- docs: end dos -->
|
|
168
|
+
|
|
169
|
+
<!-- docs: start donts -->
|
|
170
|
+
* Don’t overuse help tooltips (users end up hunting for information and even experts feel obligated to check their contents)
|
|
171
|
+
* Don't use help tooltips when you are able to use inline help text instead
|
|
172
|
+
<!-- docs: end donts -->
|
|
173
|
+
<!-- docs: end best practices -->
|
|
174
|
+
|
|
175
|
+
<!-- docs: demo code name:d2l-tooltip-help autoSize:false size:small -->
|
|
176
|
+
```html
|
|
177
|
+
<script type="module">
|
|
178
|
+
import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
|
|
179
|
+
</script>
|
|
180
|
+
|
|
181
|
+
<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
182
|
+
<p class="d2l-body-small">
|
|
183
|
+
This is some sample text.
|
|
184
|
+
<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
185
|
+
</p>
|
|
186
|
+
<p class="d2l-body-compact">
|
|
187
|
+
This is some sample text.
|
|
188
|
+
<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
189
|
+
</p>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
<!-- docs: start hidden content -->
|
|
193
|
+
### Properties
|
|
194
|
+
|
|
195
|
+
| Property | Type | Description |
|
|
196
|
+
|--|--|--|
|
|
197
|
+
| `text` | String, required | Text for the Help Tooltip opener |
|
|
198
|
+
| `inherit-font-style` | Boolean, default: `false` | Allows the opener text to inherit font properties such as size and color |
|
|
199
|
+
<!-- docs: end hidden content -->
|
|
200
|
+
|
|
201
|
+
### Using in a Sentence or Paragraph
|
|
202
|
+
|
|
203
|
+
When placing a help tooltip next to other text as part of a sentence or a paragraph, use `inherit-font-style` to align its style with the adjacent text
|
|
204
|
+
(see 2nd and 3rd examples above).
|
|
205
|
+
|
|
206
|
+
Note that the help tooltip does not support being used *within* a language term, due to challenges with translation.
|
|
207
|
+
Instead, your opener text will need to be a separate language term appearing before or after the other text and making sense on its own.
|
|
208
|
+
|
|
209
|
+
See the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example.
|
|
@@ -11,8 +11,17 @@
|
|
|
11
11
|
import '../../demo/demo-page.js';
|
|
12
12
|
import '../../inputs/input-text.js';
|
|
13
13
|
import '../tooltip.js';
|
|
14
|
+
import '../tooltip-help.js';
|
|
14
15
|
</script>
|
|
15
16
|
<style>
|
|
17
|
+
p {
|
|
18
|
+
padding-top: 1rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
p:nth-child(3) {
|
|
22
|
+
padding-top: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
16
25
|
.boundary {
|
|
17
26
|
background-color: var(--d2l-color-citrine);
|
|
18
27
|
box-sizing: border-box;
|
|
@@ -150,6 +159,21 @@
|
|
|
150
159
|
</template>
|
|
151
160
|
</d2l-demo-snippet>
|
|
152
161
|
|
|
162
|
+
<h2>Help Tooltip</h2>
|
|
163
|
+
<d2l-demo-snippet>
|
|
164
|
+
<template>
|
|
165
|
+
<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
166
|
+
<p class="d2l-body-small">
|
|
167
|
+
This is some sample text.
|
|
168
|
+
<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
169
|
+
</p>
|
|
170
|
+
<p class="d2l-body-compact">
|
|
171
|
+
This is some sample text.
|
|
172
|
+
<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
173
|
+
</p>
|
|
174
|
+
</template>
|
|
175
|
+
</d2l-demo-snippet>
|
|
176
|
+
|
|
153
177
|
</d2l-demo-page>
|
|
154
178
|
|
|
155
179
|
</body>
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import '../tooltip/tooltip.js';
|
|
3
|
+
import { css, html, LitElement } from 'lit';
|
|
4
|
+
import { bodySmallStyles } from '../typography/styles.js';
|
|
5
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
6
|
+
import { FocusMixin } from '../../mixins/focus-mixin.js';
|
|
7
|
+
import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* A component used to display additional information when users focus or hover over some text.
|
|
11
|
+
* @slot - Default content placed inside of the tooltip
|
|
12
|
+
*/
|
|
13
|
+
class HelpTooltip extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
|
|
14
|
+
|
|
15
|
+
static get properties() {
|
|
16
|
+
return {
|
|
17
|
+
/**
|
|
18
|
+
* Allows this component to inherit certain font properties
|
|
19
|
+
* @type {boolean}
|
|
20
|
+
*/
|
|
21
|
+
inheritFontStyle: { type: Boolean, attribute: 'inherit-font-style' },
|
|
22
|
+
/**
|
|
23
|
+
* REQUIRED: Text that will render as the Help Tooltip opener
|
|
24
|
+
* @type {string}
|
|
25
|
+
*/
|
|
26
|
+
text: { type: String }
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
static get styles() {
|
|
31
|
+
return [bodySmallStyles, css`
|
|
32
|
+
:host {
|
|
33
|
+
display: inline;
|
|
34
|
+
}
|
|
35
|
+
:host([hidden]) {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
#d2l-tooltip-help-text {
|
|
39
|
+
background: none;
|
|
40
|
+
border: none;
|
|
41
|
+
padding: 0;
|
|
42
|
+
text-decoration-color: var(--d2l-color-galena);
|
|
43
|
+
text-decoration-line: underline;
|
|
44
|
+
text-decoration-style: dashed;
|
|
45
|
+
text-decoration-thickness: 1px;
|
|
46
|
+
text-underline-offset: 0.1rem;
|
|
47
|
+
}
|
|
48
|
+
#d2l-tooltip-help-text:focus {
|
|
49
|
+
outline-style: none;
|
|
50
|
+
}
|
|
51
|
+
#d2l-tooltip-help-text.focus-visible {
|
|
52
|
+
border-radius: 0.05rem;
|
|
53
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
54
|
+
outline-offset: 0.05rem;
|
|
55
|
+
text-underline-offset: 0.1rem;
|
|
56
|
+
}
|
|
57
|
+
:host([inherit-font-style]) #d2l-tooltip-help-text {
|
|
58
|
+
color: inherit;
|
|
59
|
+
font-size: inherit;
|
|
60
|
+
font-weight: inherit;
|
|
61
|
+
letter-spacing: inherit;
|
|
62
|
+
line-height: inherit;
|
|
63
|
+
margin: inherit;
|
|
64
|
+
}
|
|
65
|
+
`];
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
constructor() {
|
|
69
|
+
super();
|
|
70
|
+
|
|
71
|
+
this.inheritFontStyle = false;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
static get focusElementSelector() {
|
|
75
|
+
return 'button';
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
firstUpdated(changedProperties) {
|
|
79
|
+
super.firstUpdated(changedProperties);
|
|
80
|
+
|
|
81
|
+
if (!this.text || this.text.length === 0) {
|
|
82
|
+
console.warn('Help Tooltip component requires text.');
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
render() {
|
|
87
|
+
const classes = {
|
|
88
|
+
'd2l-body-small': !this.inheritFontStyle
|
|
89
|
+
};
|
|
90
|
+
return html`
|
|
91
|
+
<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
|
|
92
|
+
${this.text}
|
|
93
|
+
</button>
|
|
94
|
+
<d2l-tooltip for="d2l-tooltip-help-text" delay=0 offset=13>
|
|
95
|
+
<slot></slot>
|
|
96
|
+
</d2l-tooltip>
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
}
|
|
101
|
+
customElements.define('d2l-tooltip-help', HelpTooltip);
|
|
@@ -144,7 +144,7 @@ class Tooltip extends RtlMixin(LitElement) {
|
|
|
144
144
|
*/
|
|
145
145
|
forType: { type: String, attribute: 'for-type' },
|
|
146
146
|
/**
|
|
147
|
-
* Adjust the size of the gap between the tooltip and its target
|
|
147
|
+
* Adjust the size of the gap between the tooltip and its target (px)
|
|
148
148
|
* @type {number}
|
|
149
149
|
*/
|
|
150
150
|
offset: { type: Number }, /* tooltipOffset */
|
|
@@ -340,6 +340,17 @@ class Tooltip extends RtlMixin(LitElement) {
|
|
|
340
340
|
animation: d2l-tooltip-right-animation 200ms ease;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
+
::slotted(ul),
|
|
344
|
+
::slotted(ol) {
|
|
345
|
+
padding-left: 1rem;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
:host([dir="rtl"]) ::slotted(ul),
|
|
349
|
+
:host([dir="rtl"]) ::slotted(ol) {
|
|
350
|
+
padding-left: 0;
|
|
351
|
+
padding-right: 1rem;
|
|
352
|
+
}
|
|
353
|
+
|
|
343
354
|
@media (prefers-reduced-motion: reduce) {
|
|
344
355
|
:host([_open-dir="bottom"]) .d2l-tooltip-container,
|
|
345
356
|
:host([_open-dir="top"]) .d2l-tooltip-container,
|
package/custom-elements.json
CHANGED
|
@@ -10008,6 +10008,45 @@
|
|
|
10008
10008
|
}
|
|
10009
10009
|
]
|
|
10010
10010
|
},
|
|
10011
|
+
{
|
|
10012
|
+
"name": "d2l-tooltip-help",
|
|
10013
|
+
"path": "./components/tooltip/tooltip-help.js",
|
|
10014
|
+
"description": "A component used to display additional information when users focus or hover over some text.",
|
|
10015
|
+
"attributes": [
|
|
10016
|
+
{
|
|
10017
|
+
"name": "text",
|
|
10018
|
+
"description": "REQUIRED: Text that will render as the Help Tooltip opener",
|
|
10019
|
+
"type": "string"
|
|
10020
|
+
},
|
|
10021
|
+
{
|
|
10022
|
+
"name": "inherit-font-style",
|
|
10023
|
+
"description": "Allows this component to inherit certain font properties",
|
|
10024
|
+
"type": "boolean",
|
|
10025
|
+
"default": "false"
|
|
10026
|
+
}
|
|
10027
|
+
],
|
|
10028
|
+
"properties": [
|
|
10029
|
+
{
|
|
10030
|
+
"name": "text",
|
|
10031
|
+
"attribute": "text",
|
|
10032
|
+
"description": "REQUIRED: Text that will render as the Help Tooltip opener",
|
|
10033
|
+
"type": "string"
|
|
10034
|
+
},
|
|
10035
|
+
{
|
|
10036
|
+
"name": "inheritFontStyle",
|
|
10037
|
+
"attribute": "inherit-font-style",
|
|
10038
|
+
"description": "Allows this component to inherit certain font properties",
|
|
10039
|
+
"type": "boolean",
|
|
10040
|
+
"default": "false"
|
|
10041
|
+
}
|
|
10042
|
+
],
|
|
10043
|
+
"slots": [
|
|
10044
|
+
{
|
|
10045
|
+
"name": "",
|
|
10046
|
+
"description": "Default content placed inside of the tooltip"
|
|
10047
|
+
}
|
|
10048
|
+
]
|
|
10049
|
+
},
|
|
10011
10050
|
{
|
|
10012
10051
|
"name": "d2l-tooltip",
|
|
10013
10052
|
"path": "./components/tooltip/tooltip.js",
|
|
@@ -10066,7 +10105,7 @@
|
|
|
10066
10105
|
},
|
|
10067
10106
|
{
|
|
10068
10107
|
"name": "offset",
|
|
10069
|
-
"description": "Adjust the size of the gap between the tooltip and its target",
|
|
10108
|
+
"description": "Adjust the size of the gap between the tooltip and its target (px)",
|
|
10070
10109
|
"type": "number"
|
|
10071
10110
|
},
|
|
10072
10111
|
{
|
|
@@ -10149,7 +10188,7 @@
|
|
|
10149
10188
|
{
|
|
10150
10189
|
"name": "offset",
|
|
10151
10190
|
"attribute": "offset",
|
|
10152
|
-
"description": "Adjust the size of the gap between the tooltip and its target",
|
|
10191
|
+
"description": "Adjust the size of the gap between the tooltip and its target (px)",
|
|
10153
10192
|
"type": "number"
|
|
10154
10193
|
},
|
|
10155
10194
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.26.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|