@brightspace-ui/core 3.159.2 → 3.159.4

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.
Files changed (4) hide show
  1. package/components/button/button-add.js +2 -21
  2. package/components/list/demo/list-item-actions.html +33 -35
  3. package/components/list/list-item-mixin.js +28 -39
  4. package/package.json +1 -1
package/components/button/button-add.js CHANGED
@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
4
4
  import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
5
5
  import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
6
6
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
7
- import { getFlag } from '../../helpers/flags.js';
8
7
  import { getUniqueId } from '../../helpers/uniqueId.js';
9
8
  import { ifDefined } from 'lit/directives/if-defined.js';
10
9
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -15,7 +14,6 @@ const MODE = {
15
14
  icon_and_text: 'icon-and-text',
16
15
  icon_when_interacted: 'icon-when-interacted'
17
16
  };
18
- const whiteAddButtonBackgroundFlag = getFlag('GAUD-7495-add-button-white-background', true);
19
17
 
20
18
  /**
21
19
  * A component for quickly adding items to a specific locaiton.
@@ -32,8 +30,7 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
32
30
  * ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
33
31
  * @type {string}
34
32
  */
35
- text: { type: String, required: true },
36
- _whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true }
33
+ text: { type: String, required: true }
37
34
  };
38
35
  }
39
36
 
@@ -105,10 +102,6 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
105
102
  100% { position: static; }
106
103
  }
107
104
  ${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
108
- /* remove when GAUD-7495-add-button-white-background is cleaned up */
109
- :host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
110
- background-color: transparent;
111
- }
112
105
  :host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
113
106
  :host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
114
107
  border-radius: 0.2rem;
@@ -165,7 +158,6 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
165
158
  this.mode = MODE.icon;
166
159
 
167
160
  this._buttonId = getUniqueId();
168
- this._whiteBackgroundAddButton = whiteAddButtonBackgroundFlag;
169
161
  }
170
162
 
171
163
  static get focusElementSelector() {
@@ -246,7 +238,7 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
246
238
  }
247
239
 
248
240
  render() {
249
- const whiteBackgroundAddButton = html`
241
+ return html`
250
242
  <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
251
243
  <g>
252
244
  <circle cx="9" cy="9" r="9" fill="#fff"/>
@@ -254,17 +246,6 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
254
246
  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5a1 1 0 0 0-2 0v3H5a1 1 0 0 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2h-3V5Z"/>
255
247
  </g>
256
248
  </svg>
257
- `;
258
- const translucentBackgroundAddButton = html`
259
- <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
260
- <g>
261
- <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C10.3845 2 11.7378 2.41054 12.889 3.17971C14.0401 3.94888 14.9373 5.04213 15.4672 6.32122C15.997 7.6003 16.1356 9.00777 15.8655 10.3656C15.5954 11.7235 14.9287 12.9708 13.9497 13.9497C12.9708 14.9287 11.7235 15.5954 10.3656 15.8655C9.00777 16.1356 7.6003 15.997 6.32122 15.4672C5.04213 14.9373 3.94888 14.0401 3.17971 12.889C2.41054 11.7378 2 10.3845 2 9C2.00212 7.14413 2.7403 5.36489 4.05259 4.05259C5.36489 2.7403 7.14413 2.00212 9 2V2ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0Z" />
262
- <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5V8H5C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H8V13C8 13.5523 8.44772 14 9 14C9.55228 14 10 13.5523 10 13V10H13C13.5523 10 14 9.55228 14 9C14 8.44772 13.5523 8 13 8H10V5Z" />
263
- </g>
264
- </svg>
265
- `;
266
- return html`
267
- ${whiteAddButtonBackgroundFlag ? whiteBackgroundAddButton : translucentBackgroundAddButton}
268
249
  ${this.text ? html`<span class="d2l-label-text">${this.text}</span>` : nothing}
269
250
  `;
270
251
  }
package/components/list/demo/list-item-actions.html CHANGED
@@ -44,32 +44,30 @@
44
44
 
45
45
  <h2>Navigation (href) Primary Action</h2>
46
46
 
47
- <d2l-demo-snippet id="link-demo">
47
+ <d2l-demo-snippet>
48
48
  <template>
49
49
  <d2l-list add-button>
50
- <d2l-list>
51
- <d2l-list-item href="http://www.d2l.com">
52
- <d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
53
- </d2l-list-item>
54
- <d2l-list-item href="http://www.d2l.com">
55
- <d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
56
- </d2l-list-item>
57
- <d2l-list-item href="http://www.d2l.com">
58
- <d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
59
- </d2l-list-item>
60
- </d2l-list>
50
+ <d2l-list-item href="http://www.d2l.com">
51
+ <d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
52
+ </d2l-list-item>
53
+ <d2l-list-item href="http://www.d2l.com">
54
+ <d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
55
+ </d2l-list-item>
56
+ <d2l-list-item href="http://www.d2l.com">
57
+ <d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
58
+ </d2l-list-item>
61
59
  </d2l-list>
62
60
  <script>
63
- document.querySelector('#link-demo').addEventListener('d2l-list-item-link-click', (e) => {
64
- console.log('d2l-list-item-link clicked!', e);
65
- });
61
+ (demo => {
62
+ demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
63
+ })(document.currentScript.parentNode);
66
64
  </script>
67
65
  </template>
68
66
  </d2l-demo-snippet>
69
67
 
70
68
  <h2>Button Primary Action</h2>
71
69
 
72
- <d2l-demo-snippet id="button-demo">
70
+ <d2l-demo-snippet>
73
71
  <template>
74
72
  <d2l-list>
75
73
  <d2l-list-item-button>
@@ -83,9 +81,9 @@
83
81
  </d2l-list-item-button>
84
82
  </d2l-list>
85
83
  <script>
86
- document.querySelector('#button-demo').addEventListener('d2l-list-item-button-click', (e) => {
87
- console.log('d2l-list-item-button clicked!', e);
88
- });
84
+ (demo => {
85
+ demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
86
+ })(document.currentScript.parentNode);
89
87
  </script>
90
88
  </template>
91
89
  </d2l-demo-snippet>
@@ -240,7 +238,7 @@
240
238
 
241
239
  <h2>Selection & Navigation (href) Primary Action</h2>
242
240
 
243
- <d2l-demo-snippet id="selection-link-demo">
241
+ <d2l-demo-snippet>
244
242
  <template>
245
243
  <d2l-list>
246
244
  <d2l-list-controls slot="controls">
@@ -258,16 +256,16 @@
258
256
  </d2l-list-item>
259
257
  </d2l-list>
260
258
  <script>
261
- document.querySelector('#selection-link-demo').addEventListener('d2l-list-item-link-click', (e) => {
262
- console.log('d2l-list-item-link clicked!', e);
263
- });
259
+ (demo => {
260
+ demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
261
+ })(document.currentScript.parentNode);
264
262
  </script>
265
263
  </template>
266
264
  </d2l-demo-snippet>
267
265
 
268
266
  <h2>Selection & Button Primary Action</h2>
269
267
 
270
- <d2l-demo-snippet id="selection-button-demo">
268
+ <d2l-demo-snippet>
271
269
  <template>
272
270
  <d2l-list>
273
271
  <d2l-list-controls slot="controls">
@@ -285,16 +283,16 @@
285
283
  </d2l-list-item-button>
286
284
  </d2l-list>
287
285
  <script>
288
- document.querySelector('#selection-button-demo').addEventListener('d2l-list-item-button-click', (e) => {
289
- console.log('d2l-list-item-button clicked!', e);
290
- });
286
+ (demo => {
287
+ demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
288
+ })(document.currentScript.parentNode);
291
289
  </script>
292
290
  </template>
293
291
  </d2l-demo-snippet>
294
292
 
295
293
  <h2>Grid Actions with Navigation (href) Primary Action</h2>
296
294
 
297
- <d2l-demo-snippet id="grid-link-demo">
295
+ <d2l-demo-snippet>
298
296
  <template>
299
297
  <d2l-list grid add-button>
300
298
  <d2l-list-controls slot="controls">
@@ -321,16 +319,16 @@
321
319
  </d2l-list-item>
322
320
  </d2l-list>
323
321
  <script>
324
- document.querySelector('#grid-link-demo').addEventListener('d2l-list-item-link-click', (e) => {
325
- console.log('d2l-list-item-link clicked!', e);
326
- });
322
+ (demo => {
323
+ demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
324
+ })(document.currentScript.parentNode);
327
325
  </script>
328
326
  </template>
329
327
  </d2l-demo-snippet>
330
328
 
331
329
  <h2>Grid Actions with Button Primary Action</h2>
332
330
 
333
- <d2l-demo-snippet id="grid-button-demo">
331
+ <d2l-demo-snippet>
334
332
  <template>
335
333
  <d2l-list grid>
336
334
  <d2l-list-controls slot="controls">
@@ -357,9 +355,9 @@
357
355
  </d2l-list-item-button>
358
356
  </d2l-list>
359
357
  <script>
360
- document.querySelector('#grid-button-demo').addEventListener('d2l-list-item-button-click', (e) => {
361
- console.log('d2l-list-item-button clicked!', e);
362
- });
358
+ (demo => {
359
+ demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
360
+ })(document.currentScript.parentNode);
363
361
  </script>
364
362
  </template>
365
363
  </d2l-demo-snippet>
package/components/list/list-item-mixin.js CHANGED
@@ -108,6 +108,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
108
108
  _addButtonText: { state: true },
109
109
  _displayKeyboardTooltip: { type: Boolean },
110
110
  _hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
111
+ _hasListItemContent: { state: true },
111
112
  _hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
112
113
  _hasNestedListAddButton: { type: Boolean, reflect: true, attribute: '_has-nested-list-add-button' },
113
114
  _hovering: { type: Boolean, reflect: true },
@@ -121,7 +122,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
121
122
  _listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
122
123
  _showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
123
124
  _siblingHasColor: { state: true },
124
- _whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true },
125
125
  };
126
126
  }
127
127
 
@@ -163,13 +163,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
163
163
  inset-inline-start: 1.5rem; /* left and right margins of 0.3rem + drag handle width of 0.9rem */
164
164
  width: calc(100% - 1.5rem);
165
165
  }
166
- :host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="before-content"] {
167
- border-bottom: 1px solid var(--d2l-color-mica);
168
- margin-bottom: -1px;
169
- }
170
- :host(:not([_white-background-add-button])[_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
171
- border-bottom-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
172
- }
173
166
  :host(:first-of-type) [slot="control-container"]::before {
174
167
  top: 0;
175
168
  }
@@ -191,9 +184,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
191
184
  :host([_focusing-primary-action]) [slot="control-container"]::after,
192
185
  :host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
193
186
  :host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
194
- :host(:not([_white-background-add-button])[_show-add-button]) [slot="control-container"]::before,
195
- .hide-bottom-border[slot="control-container"]::after,
196
- :host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="control-container"]::after,
197
187
  :host(:first-of-type[_nested]) [slot="control-container"]::before {
198
188
  border-top-color: transparent;
199
189
  }
@@ -227,6 +217,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
227
217
  --d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
228
218
  --d2l-list-item-content-text-outline-offset: 1px;
229
219
  }
220
+ :host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
221
+ border-radius: 6px;
222
+ outline: var(--d2l-list-item-content-text-outline);
223
+ outline-offset: -4px;
224
+ }
230
225
  @supports selector(:has(a, b)) {
231
226
  :host([_list-item-new-styles][_focusing-primary-action]) .d2l-list-item-content {
232
227
  --d2l-list-item-content-text-border-radius: initial;
@@ -238,7 +233,18 @@ export const ListItemMixin = superclass => class extends composeMixins(
238
233
  --d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
239
234
  --d2l-list-item-content-text-outline-offset: 1px;
240
235
  }
236
+ :host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
237
+ border-radius: initial;
238
+ outline: initial;
239
+ outline-offset: initial;
240
+ }
241
+ :host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
242
+ border-radius: 8px;
243
+ outline: var(--d2l-list-item-content-text-outline);
244
+ outline-offset: -4px;
245
+ }
241
246
  }
247
+
242
248
  [slot="content-action"] {
243
249
  height: 100%;
244
250
  }
@@ -358,29 +364,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
358
364
  border-color: var(--d2l-color-mica);
359
365
  margin-bottom: -1px;
360
366
  }
361
- /* below hides the border under the d2l-button-add; clean up with GAUD-7495-add-button-white-background */
362
- :host([_hovering-control]) [slot="outside-control-container"].hide-bottom-border,
363
- :host([_hovering-primary-action]) [slot="outside-control-container"].hide-bottom-border,
364
- :host([_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
365
- :host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
366
- :host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
367
- :host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
368
- :host(:not([_list-item-new-styles]):not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
369
- :host([_list-item-new-styles]:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"].hide-bottom-border {
370
- background-clip: content-box, border-box;
371
- background-image: linear-gradient(white, white), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
372
- background-origin: border-box;
373
- border: double 1px transparent;
374
- border-radius: 6px;
375
- }
376
367
  /* clean up with GAUD-7495-list-item-new-styles flag */
377
- :host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]) [slot="outside-control-container"].hide-bottom-border {
378
- background-clip: content-box, border-box;
379
- background-image: linear-gradient(white, white), linear-gradient(to right, var(--d2l-color-mica) 20%, transparent 20%, transparent 80%, var(--d2l-color-mica) 80%);
380
- background-origin: border-box;
381
- border: double 1px transparent;
382
- border-radius: 6px;
383
- }
384
368
  :host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
385
369
  background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
386
370
  }
@@ -488,11 +472,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
488
472
  this._contentId = getUniqueId();
489
473
  this._displayKeyboardTooltip = false;
490
474
  this._hasColorSlot = false;
475
+ this._hasListItemContent = true;
491
476
  this._hasNestedList = false;
492
477
  this._listItemInteractiveEnabled = listItemInteractiveFlag;
493
478
  this._listItemNewStyles = useNewStylesFlag;
494
479
  this._siblingHasColor = false;
495
- this._whiteBackgroundAddButton = getFlag('GAUD-7495-add-button-white-background', true);
496
480
  }
497
481
 
498
482
  get color() {
@@ -521,6 +505,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
521
505
  if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
522
506
  this._hasColorSlot = this.color || this._siblingHasColor;
523
507
  }
508
+ if (this._focusingPrimaryAction && changedProperties.has('_focusingPrimaryAction')) {
509
+ this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
510
+ .find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
511
+ }
524
512
  }
525
513
 
526
514
  focus() {
@@ -732,14 +720,15 @@ export const ListItemMixin = superclass => class extends composeMixins(
732
720
  'd2l-list-item-color-inner': true,
733
721
  'd2l-skeletize': this.color
734
722
  };
735
- const bottomBorderClasses = {
736
- 'hide-bottom-border': !this._whiteBackgroundAddButton && (this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton))
723
+ const contentClasses = {
724
+ 'd2l-list-item-content': true,
725
+ 'd2l-list-item-content-none': !this._hasListItemContent
737
726
  };
738
727
 
739
728
  const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? 'control' : undefined;
740
729
  const contentAreaContent = html`
741
730
  <div slot="content"
742
- class="d2l-list-item-content"
731
+ class="${classMap(contentClasses)}"
743
732
  id="${this._contentId}"
744
733
  @mouseenter="${this._onMouseEnter}"
745
734
  @mouseleave="${this._onMouseLeave}">
@@ -782,12 +771,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
782
771
  </d2l-button-add>
783
772
  </div>
784
773
  ` : nothing}
785
- <div slot="outside-control-container" class="${classMap(bottomBorderClasses)}"></div>
774
+ <div slot="outside-control-container"></div>
786
775
  <div slot="before-content"></div>
787
776
  ${this._renderDropTarget()}
788
777
  ${this._renderDragHandle(this._renderOutsideControl)}
789
778
  ${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
790
- <div slot="control-container" class="${classMap(bottomBorderClasses)}"></div>
779
+ <div slot="control-container"></div>
791
780
  ${this._hasColorSlot ? html`
792
781
  <div slot="color-indicator" class="d2l-list-item-color-outer">
793
782
  <div class="${classMap(colorClasses)}" style="${styleMap(colorStyles)}"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.159.2",
3
+ "version": "3.159.4",
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",