@brightspace-ui/core 3.163.0 → 3.164.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.
@@ -28,7 +28,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
28
28
|
[slot="outside-control-container"] {
|
29
29
|
margin: 0 -12px;
|
30
30
|
}
|
31
|
-
|
31
|
+
button {
|
32
32
|
background-color: transparent;
|
33
33
|
border: none;
|
34
34
|
color: unset;
|
@@ -45,22 +45,6 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
45
45
|
text-align: start;
|
46
46
|
width: 100%;
|
47
47
|
}
|
48
|
-
/** clean up with flag GAUD-7495-list-interactive-content */
|
49
|
-
:host(:not([_list-item-interactive-enabled])) button {
|
50
|
-
background-color: transparent;
|
51
|
-
border: none;
|
52
|
-
cursor: pointer;
|
53
|
-
display: block;
|
54
|
-
height: 100%;
|
55
|
-
outline: none;
|
56
|
-
width: 100%;
|
57
|
-
}
|
58
|
-
/** clean up with flag GAUD-7495-list-interactive-content */
|
59
|
-
:host(:not([_list-item-interactive-enabled]):not([button-disabled]):not([no-primary-action])) [slot="content"],
|
60
|
-
:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
|
61
|
-
:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
|
62
|
-
pointer-events: none;
|
63
|
-
}
|
64
48
|
:host(:not([button-disabled])) [slot="control-action"],
|
65
49
|
:host(:not([button-disabled])) [slot="outside-control-action"] {
|
66
50
|
grid-column-end: control-end;
|
@@ -100,8 +84,6 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
100
84
|
/** Dispatched when the item's primary button action is clicked */
|
101
85
|
this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
|
102
86
|
|
103
|
-
if (!this._listItemInteractiveEnabled) return; // clean up with flag GAUD-7495-list-interactive-content
|
104
|
-
|
105
87
|
e.stopPropagation();
|
106
88
|
|
107
89
|
// Dispatches click event from the list item to maintain existing functionality in consumers that listen for the click event
|
@@ -121,11 +103,11 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
121
103
|
}
|
122
104
|
|
123
105
|
_renderPrimaryAction(labelledBy, content) {
|
124
|
-
return html`<button
|
125
|
-
id="${this._primaryActionId}"
|
106
|
+
return html`<button
|
107
|
+
id="${this._primaryActionId}"
|
126
108
|
aria-current="${ifDefined(this._ariaCurrent)}"
|
127
|
-
aria-labelledby="${labelledBy}"
|
128
|
-
@click="${this._onButtonClick}"
|
109
|
+
aria-labelledby="${labelledBy}"
|
110
|
+
@click="${this._onButtonClick}"
|
129
111
|
@focusin="${this._onButtonFocus}"
|
130
112
|
?disabled="${this.buttonDisabled}">
|
131
113
|
${content || nothing}
|
@@ -23,7 +23,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
|
|
23
23
|
:host([action-href]:not([action-href=""])) {
|
24
24
|
--d2l-list-item-content-text-color: var(--d2l-color-celestine);
|
25
25
|
}
|
26
|
-
|
26
|
+
a[href] {
|
27
27
|
color: unset;
|
28
28
|
display: block;
|
29
29
|
height: 100%;
|
@@ -31,19 +31,6 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
|
|
31
31
|
text-decoration: none;
|
32
32
|
width: 100%;
|
33
33
|
}
|
34
|
-
/** clean up with flag GAUD-7495-list-interactive-content */
|
35
|
-
:host(:not([_list-item-interactive-enabled])) a[href] {
|
36
|
-
display: block;
|
37
|
-
height: 100%;
|
38
|
-
outline: none;
|
39
|
-
width: 100%;
|
40
|
-
}
|
41
|
-
/** clean up with flag GAUD-7495-list-interactive-content */
|
42
|
-
:host(:not([_list-item-interactive-enabled])[action-href]:not([action-href=""])) [slot="content"],
|
43
|
-
:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
|
44
|
-
:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
|
45
|
-
pointer-events: none;
|
46
|
-
}
|
47
34
|
:host([action-href]:not([action-href=""])) [slot="control-action"],
|
48
35
|
:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
|
49
36
|
grid-column-end: control-end;
|
@@ -77,8 +64,6 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
|
|
77
64
|
/** Dispatched when the item's primary link action is clicked */
|
78
65
|
this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
|
79
66
|
|
80
|
-
if (!this._listItemInteractiveEnabled) return; // clean up with flag GAUD-7495-list-interactive-content
|
81
|
-
|
82
67
|
e.stopPropagation();
|
83
68
|
|
84
69
|
// Dispatches click event from the list item to maintain existing functionality in consumers that listen for the click event
|
@@ -41,13 +41,11 @@ function addTabListener() {
|
|
41
41
|
});
|
42
42
|
}
|
43
43
|
|
44
|
-
const listItemInteractiveFlag = getFlag('GAUD-7495-list-interactive-content', true);
|
45
44
|
const useNewStylesFlag = getFlag('GAUD-7495-list-item-new-styles', true);
|
46
45
|
|
47
46
|
let hasDisplayedKeyboardTooltip = false;
|
48
47
|
|
49
48
|
export function isInteractiveInListItemComposedPath(e, isPrimaryAction) {
|
50
|
-
if (!listItemInteractiveFlag) return false;
|
51
49
|
const listInteractiveElems = {
|
52
50
|
...interactiveElements,
|
53
51
|
'd2l-button': true,
|
@@ -118,7 +116,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
118
116
|
_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
|
119
117
|
_highlight: { type: Boolean, reflect: true },
|
120
118
|
_highlighting: { type: Boolean, reflect: true },
|
121
|
-
_listItemInteractiveEnabled: { type: Boolean, reflect: true, attribute: '_list-item-interactive-enabled' },
|
122
119
|
_listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
|
123
120
|
_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
|
124
121
|
_siblingHasColor: { state: true },
|
@@ -474,7 +471,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
474
471
|
this._hasColorSlot = false;
|
475
472
|
this._hasListItemContent = true;
|
476
473
|
this._hasNestedList = false;
|
477
|
-
this._listItemInteractiveEnabled = listItemInteractiveFlag;
|
478
474
|
this._listItemNewStyles = useNewStylesFlag;
|
479
475
|
this._siblingHasColor = false;
|
480
476
|
}
|
@@ -725,7 +721,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
725
721
|
'd2l-list-item-content-none': !this._hasListItemContent
|
726
722
|
};
|
727
723
|
|
728
|
-
const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.
|
724
|
+
const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
|
729
725
|
const contentAreaContent = html`
|
730
726
|
<div slot="content"
|
731
727
|
class="${classMap(contentClasses)}"
|
@@ -737,9 +733,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
737
733
|
</div>
|
738
734
|
`;
|
739
735
|
|
740
|
-
const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId,
|
741
|
-
const renderExpandableActionContent =
|
742
|
-
const renderCheckboxActionContent =
|
736
|
+
const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, contentAreaContent) : null);
|
737
|
+
const renderExpandableActionContent = !primaryAction && !this.selectable && this.expandable && !this.noPrimaryAction;
|
738
|
+
const renderCheckboxActionContent = !primaryAction && this.selectable && !this.noPrimaryAction;
|
743
739
|
|
744
740
|
let tooltipForId = null;
|
745
741
|
if (this._showAddButton) {
|
@@ -804,7 +800,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
804
800
|
@mouseleave="${this._onMouseLeavePrimaryAction}">
|
805
801
|
${primaryAction}
|
806
802
|
</div>` : nothing}
|
807
|
-
${
|
803
|
+
${(!primaryAction && !renderExpandableActionContent && !renderCheckboxActionContent) ? contentAreaContent : nothing}
|
808
804
|
<div slot="actions"
|
809
805
|
@mouseenter="${this._onMouseEnter}"
|
810
806
|
@mouseleave="${this._onMouseLeave}"
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.164.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",
|