@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.
@@ -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;
@@ -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, unsafeCSS } from 'lit';
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 { getFocusPseudoClass } from '../../helpers/focus.js';
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
- :host([focus-ring]) d2l-icon,
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, unsafeCSS } from 'lit';
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 { getFocusPseudoClass } from '../../helpers/focus.js';
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
- :host([focus-ring]) .d2l-count-badge-wrapper,
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
- box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
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, unsafeCSS } from 'lit';
4
- import { getFocusPseudoClass } from '../../helpers/focus.js';
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(css`
17
- .d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
18
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
19
- outline: none;
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: var(--d2l-color-celestine);
154
- box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
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, unsafeCSS } from 'lit';
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 { getFocusPseudoClass } from '../../helpers/focus.js';
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:focus-visible,
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: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
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, unsafeCSS } from 'lit';
2
+ import { css, html, LitElement } from 'lit';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
- import { getFocusPseudoClass } from '../../helpers/focus.js';
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
- :host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
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
  }
@@ -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:${unsafeCSS(getFocusPseudoClass())} {
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 bounded tooltip message that will wrap to more than one line.
188
+ A tooltip message inside of a container that hides overflow.
150
189
  </d2l-tooltip>
151
190
  </div>
152
191
  </template>