@brightspace-ui/core 3.143.0 → 3.144.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.
- package/components/button/button-add.js +13 -7
- package/components/card/card.js +11 -15
- package/components/count-badge/count-badge-icon.js +4 -9
- package/components/count-badge/count-badge.js +4 -10
- package/components/demo/demo-snippet.js +1 -1
- package/components/scroll-wrapper/scroll-wrapper.js +6 -7
- package/components/switch/switch-mixin.js +3 -2
- package/components/table/table-col-sort-button.js +3 -7
- package/components/tabs/demo/tab-custom.js +1 -1
- package/components/tabs/tab-internal.js +4 -7
- package/components/tabs/tabs.js +2 -4
- package/components/tooltip/demo/tooltip.html +40 -1
- package/components/tooltip/tooltip.js +1378 -837
- package/custom-elements.json +5 -3
- package/helpers/demo/prism.html +17 -35
- package/helpers/focus.js +1 -1
- package/lang/ar.js +0 -1
- package/lang/cy.js +0 -1
- package/lang/da.js +0 -1
- package/lang/de.js +0 -1
- package/lang/en-gb.js +0 -1
- package/lang/en.js +0 -1
- package/lang/es-es.js +0 -1
- package/lang/es.js +0 -1
- package/lang/fr-fr.js +0 -1
- package/lang/fr.js +0 -1
- package/lang/haw.js +0 -1
- package/lang/hi.js +0 -1
- package/lang/ja.js +0 -1
- package/lang/ko.js +0 -1
- package/lang/mi.js +0 -1
- package/lang/nl.js +0 -1
- package/lang/pt.js +0 -1
- package/lang/sv.js +0 -1
- package/lang/tr.js +0 -1
- package/lang/zh-cn.js +0 -1
- package/lang/zh-tw.js +0 -1
- package/package.json +1 -1
- package/templates/primary-secondary/primary-secondary.js +2 -6
@@ -1,10 +1,10 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../tooltip/tooltip.js';
|
3
3
|
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
|
4
|
+
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
4
5
|
import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
|
5
6
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
6
7
|
import { getFlag } from '../../helpers/flags.js';
|
7
|
-
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
8
8
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
10
10
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
@@ -105,12 +105,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
105
105
|
0% { position: absolute; }
|
106
106
|
100% { position: static; }
|
107
107
|
}
|
108
|
-
|
109
|
-
button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
|
110
|
-
background-color: white;
|
111
|
-
border-radius: 0.3rem;
|
112
|
-
box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
|
113
|
-
}
|
108
|
+
${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
|
114
109
|
/* remove when GAUD-7495-add-button-white-background is cleaned up */
|
115
110
|
:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
|
116
111
|
background-color: transparent;
|
@@ -160,6 +155,15 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
160
155
|
}
|
161
156
|
}
|
162
157
|
}
|
158
|
+
@media (prefers-contrast: more) {
|
159
|
+
.line {
|
160
|
+
background-color: ButtonBorder;
|
161
|
+
}
|
162
|
+
button:hover .line,
|
163
|
+
button:focus .line {
|
164
|
+
background-color: Highlight !important;
|
165
|
+
}
|
166
|
+
}
|
163
167
|
`;
|
164
168
|
}
|
165
169
|
|
@@ -215,6 +219,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
|
|
215
219
|
static get styles() {
|
216
220
|
return [visibleOnAncestorStyles, css`
|
217
221
|
:host {
|
222
|
+
--d2l-focus-ring-offset: 0;
|
223
|
+
--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
|
218
224
|
--d2l-button-add-icon-text-color: var(--d2l-color-galena);
|
219
225
|
align-items: center;
|
220
226
|
display: flex;
|
package/components/card/card.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import { css, html, LitElement, nothing } from 'lit';
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
4
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
5
6
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
6
7
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
@@ -176,23 +177,17 @@ class Card extends LitElement {
|
|
176
177
|
|
177
178
|
:host([subtle]) {
|
178
179
|
border: none;
|
180
|
+
}
|
181
|
+
:host([subtle][href]) {
|
179
182
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
|
180
183
|
}
|
181
|
-
:host(:hover) {
|
184
|
+
:host([href]:not([_active]):hover) {
|
182
185
|
box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
|
183
186
|
}
|
184
|
-
:host([subtle]:hover) {
|
187
|
+
:host([subtle][href]:not([_active]):hover) {
|
185
188
|
box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
|
186
189
|
}
|
187
|
-
:host([_active]) {
|
188
|
-
border-color: transparent;
|
189
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
190
|
-
}
|
191
|
-
:host([_active]:hover),
|
192
|
-
:host([subtle][_active]:hover) {
|
193
|
-
border-color: transparent;
|
194
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
195
|
-
}
|
190
|
+
${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })}
|
196
191
|
/* .d2l-card-link-container-hover is used to only color/underline when
|
197
192
|
hovering the anchor; these styles are not applied when hovering actions */
|
198
193
|
:host([href]) .d2l-card-link-container-hover,
|
@@ -208,15 +203,16 @@ class Card extends LitElement {
|
|
208
203
|
:host([_dropdown-action-open]) {
|
209
204
|
z-index: 2;
|
210
205
|
}
|
211
|
-
:host(:not([href])),
|
212
|
-
:host([subtle]:not([href])) {
|
213
|
-
box-shadow: none;
|
214
|
-
}
|
215
206
|
@media (prefers-reduced-motion: no-preference) {
|
216
207
|
:host {
|
217
208
|
transition: box-shadow 0.2s;
|
218
209
|
}
|
219
210
|
}
|
211
|
+
@media (prefers-contrast: more) {
|
212
|
+
:host([subtle]) {
|
213
|
+
border: 1px solid var(--d2l-color-gypsum);
|
214
|
+
}
|
215
|
+
}
|
220
216
|
`];
|
221
217
|
}
|
222
218
|
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../icons/icon.js';
|
3
|
-
import { css, html, LitElement
|
3
|
+
import { css, html, LitElement } from 'lit';
|
4
4
|
import { CountBadgeMixin } from './count-badge-mixin.js';
|
5
5
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
6
|
-
import {
|
6
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
7
7
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
9
9
|
|
@@ -24,13 +24,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
24
24
|
|
25
25
|
static get styles() {
|
26
26
|
return [super.styles, css`
|
27
|
-
|
28
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
|
29
|
-
d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
|
30
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
31
|
-
outline: none;
|
32
|
-
}
|
33
|
-
|
27
|
+
${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
|
34
28
|
:host {
|
35
29
|
/* for long numbers, center the number on the icon */
|
36
30
|
--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
|
@@ -66,6 +60,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
66
60
|
}
|
67
61
|
|
68
62
|
d2l-icon {
|
63
|
+
--d2l-focus-ring-offset: 0;
|
69
64
|
border: 2px solid transparent;
|
70
65
|
border-radius: 6px;
|
71
66
|
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
|
-
import { css, html, LitElement
|
2
|
+
import { css, html, LitElement } from 'lit';
|
3
3
|
import { CountBadgeMixin } from './count-badge-mixin.js';
|
4
4
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
5
|
-
import {
|
5
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
6
6
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
7
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
8
8
|
|
@@ -10,24 +10,18 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
10
10
|
|
11
11
|
static get styles() {
|
12
12
|
return [super.styles, css`
|
13
|
-
|
14
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
|
15
|
-
.d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
|
16
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
17
|
-
}
|
18
|
-
|
13
|
+
${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
|
19
14
|
.d2l-count-badge-wrapper {
|
15
|
+
--d2l-focus-ring-offset: 0;
|
20
16
|
border: 2px solid transparent;
|
21
17
|
}
|
22
18
|
|
23
19
|
:host([size="small"]) .d2l-count-badge-wrapper {
|
24
20
|
border-radius: 0.65rem;
|
25
|
-
outline: none;
|
26
21
|
}
|
27
22
|
|
28
23
|
:host([size="large"]) .d2l-count-badge-wrapper {
|
29
24
|
border-radius: 0.8rem;
|
30
|
-
outline: none;
|
31
25
|
}
|
32
26
|
`];
|
33
27
|
}
|
@@ -78,7 +78,7 @@ class DemoSnippet extends LitElement {
|
|
78
78
|
d2l-dropdown.settings-dropdown {
|
79
79
|
background-color: white;
|
80
80
|
border-radius: 6px;
|
81
|
-
|
81
|
+
outline: 1px solid var(--d2l-color-celestine-minus-1);
|
82
82
|
position: fixed;
|
83
83
|
right: 1rem;
|
84
84
|
top: -0.25rem;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../icons/icon.js';
|
3
|
-
import { css, html, LitElement
|
4
|
-
import {
|
3
|
+
import { css, html, LitElement } from 'lit';
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
5
5
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
6
6
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
7
7
|
|
@@ -13,11 +13,10 @@ let focusStyleSheet;
|
|
13
13
|
function getFocusStyleSheet() {
|
14
14
|
if (!focusStyleSheet) {
|
15
15
|
focusStyleSheet = new CSSStyleSheet();
|
16
|
-
focusStyleSheet.replaceSync(
|
17
|
-
|
18
|
-
box-shadow: 0 0 0 2px #ffffff, 0
|
19
|
-
|
20
|
-
}`);
|
16
|
+
focusStyleSheet.replaceSync(getFocusRingStyles(
|
17
|
+
'.d2l-scroll-wrapper-focus',
|
18
|
+
{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
|
19
|
+
));
|
21
20
|
}
|
22
21
|
return focusStyleSheet;
|
23
22
|
}
|
@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
|
|
150
150
|
display: none;
|
151
151
|
}
|
152
152
|
.d2l-switch-inner:hover, .switch-hover {
|
153
|
-
border-color:
|
154
|
-
|
153
|
+
border-color: transparent;
|
154
|
+
outline: 2px solid var(--d2l-color-celestine);
|
155
|
+
outline-offset: -2px;
|
155
156
|
}
|
156
157
|
@media (prefers-reduced-motion: reduce) {
|
157
158
|
.d2l-switch-toggle,
|
@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
|
|
3
3
|
import '../dropdown/dropdown-menu.js';
|
4
4
|
import '../icons/icon.js';
|
5
5
|
import '../menu/menu.js';
|
6
|
-
import { css, html, LitElement, nothing
|
6
|
+
import { css, html, LitElement, nothing } from 'lit';
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
8
8
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
9
|
-
import {
|
9
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
10
10
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
11
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
12
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
|
|
116
116
|
button:hover {
|
117
117
|
background-color: var(--d2l-color-gypsum);
|
118
118
|
}
|
119
|
-
button:
|
120
|
-
button:${unsafeCSS(getFocusPseudoClass())} {
|
121
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
122
|
-
outline-style: none;
|
123
|
-
}
|
119
|
+
${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
|
124
120
|
d2l-icon {
|
125
121
|
margin-inline-start: 0.6rem;
|
126
122
|
}
|
@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
|
|
18
18
|
}
|
19
19
|
${getFocusRingStyles(
|
20
20
|
pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
|
21
|
-
{ extraStyles:
|
21
|
+
{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
|
22
22
|
)}
|
23
23
|
`];
|
24
24
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
|
-
import { css, html, LitElement
|
2
|
+
import { css, html, LitElement } from 'lit';
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
4
|
-
import {
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
5
5
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
6
6
|
|
7
7
|
const keyCodes = {
|
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
|
|
32
32
|
vertical-align: middle;
|
33
33
|
}
|
34
34
|
.d2l-tab-text {
|
35
|
+
--d2l-focus-ring-offset: 0;
|
35
36
|
margin: 0.5rem;
|
36
37
|
overflow: hidden;
|
37
38
|
padding: 0.1rem;
|
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
|
|
67
68
|
margin-inline-start: 0;
|
68
69
|
width: calc(100% - 0.6rem);
|
69
70
|
}
|
70
|
-
|
71
|
-
border-radius: 0.3rem;
|
72
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
73
|
-
color: var(--d2l-color-celestine);
|
74
|
-
}
|
71
|
+
${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
|
75
72
|
:host([aria-selected="true"]:focus) {
|
76
73
|
text-decoration: none;
|
77
74
|
}
|
package/components/tabs/tabs.js
CHANGED
@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
|
|
4
4
|
import './tab-internal.js';
|
5
5
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
6
6
|
import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
|
7
|
+
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
7
8
|
import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
|
8
9
|
import { bodyCompactStyles } from '../typography/styles.js';
|
9
10
|
import { classMap } from 'lit/directives/class-map.js';
|
10
|
-
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
11
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
12
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
13
13
|
import { repeat } from 'lit/directives/repeat.js';
|
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
159
159
|
.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
|
160
160
|
background-color: var(--d2l-color-gypsum);
|
161
161
|
}
|
162
|
-
.d2l-tabs-scroll-button
|
163
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
164
|
-
}
|
162
|
+
${getFocusRingStyles('.d2l-tabs-scroll-button')}
|
165
163
|
:host([skeleton]) .d2l-tabs-scroll-button {
|
166
164
|
visibility: hidden;
|
167
165
|
}
|
@@ -5,6 +5,11 @@
|
|
5
5
|
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
6
6
|
<meta charset="UTF-8">
|
7
7
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
8
|
+
<script type="module">
|
9
|
+
import { mockFlag } from '../../../helpers/flags.js';
|
10
|
+
const urlParams = new URLSearchParams(window.location.search);
|
11
|
+
mockFlag('GAUD-7355-tooltip-popover', urlParams.get('popover') === 'true');
|
12
|
+
</script>
|
8
13
|
<script type="module">
|
9
14
|
import '../../button/button.js';
|
10
15
|
import '../../colors/colors.js';
|
@@ -97,6 +102,40 @@
|
|
97
102
|
</template>
|
98
103
|
</d2l-demo-snippet>
|
99
104
|
|
105
|
+
<h2>Tooltip (position)</h2>
|
106
|
+
<d2l-demo-snippet>
|
107
|
+
<template>
|
108
|
+
<div>
|
109
|
+
<select id="position">
|
110
|
+
<option value="bottom" selected>bottom</option>
|
111
|
+
<option value="left">left</option>
|
112
|
+
<option value="right">right</option>
|
113
|
+
<option value="top">top</option>
|
114
|
+
</select>
|
115
|
+
<select id="align">
|
116
|
+
<option value="center" selected>center</option>
|
117
|
+
<option value="start">start</option>
|
118
|
+
<option value="end">end</option>
|
119
|
+
</select>
|
120
|
+
</div>
|
121
|
+
<div style="text-align: center;">
|
122
|
+
<d2l-button id="tooltip-position">Tooltip Position</d2l-button>
|
123
|
+
<d2l-tooltip for="tooltip-position">
|
124
|
+
This tooltip will be positioned according to the above selections for location and alignment.
|
125
|
+
</d2l-tooltip>
|
126
|
+
</div>
|
127
|
+
<script data-demo-hide>
|
128
|
+
const demo = document.currentScript.parentNode;
|
129
|
+
demo.querySelector('#position').addEventListener('change', e => {
|
130
|
+
demo.querySelector('d2l-tooltip').position = e.target.value;
|
131
|
+
});
|
132
|
+
demo.querySelector('#align').addEventListener('change', e => {
|
133
|
+
demo.querySelector('d2l-tooltip').align = (e.target.value !== 'center' ? e.target.value : undefined);
|
134
|
+
});
|
135
|
+
</script>
|
136
|
+
</template>
|
137
|
+
</d2l-demo-snippet>
|
138
|
+
|
100
139
|
<h2>Tooltip (boundary)</h2>
|
101
140
|
<d2l-demo-snippet>
|
102
141
|
<template>
|
@@ -146,7 +185,7 @@
|
|
146
185
|
<div class="bounded">
|
147
186
|
<d2l-button id="tooltip-bounded">Bounded Tooltip</d2l-button>
|
148
187
|
<d2l-tooltip for="tooltip-bounded">
|
149
|
-
A
|
188
|
+
A tooltip message inside of a container that hides overflow.
|
150
189
|
</d2l-tooltip>
|
151
190
|
</div>
|
152
191
|
</template>
|