@brightspace-ui/core 2.114.2 → 2.115.1

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 (7) hide show
  1. package/components/filter/filter-dimension-set.js +5 -5
  2. package/components/list/demo/list-nested.html +97 -5
  3. package/components/list/list-item-mixin.js +2 -1
  4. package/components/tabs/tab-internal.js +24 -5
  5. package/components/tabs/tabs.js +8 -2
  6. package/custom-elements.json +34 -0
  7. package/package.json +3 -3
package/components/filter/filter-dimension-set.js CHANGED
@@ -11,6 +11,11 @@ class FilterDimensionSet extends LitElement {
11
11
 
12
12
  static get properties() {
13
13
  return {
14
+ /**
15
+ * The introductory text to display at the top of the filter dropdown
16
+ * @type {string}
17
+ */
18
+ introductoryText: { type: String, attribute: 'introductory-text' },
14
19
  /**
15
20
  * REQUIRED: Unique key to represent this dimension in the filter
16
21
  * @type {string}
@@ -36,11 +41,6 @@ class FilterDimensionSet extends LitElement {
36
41
  * @type {boolean}
37
42
  */
38
43
  selectionSingle: { type: Boolean, attribute: 'selection-single' },
39
- /**
40
- * The introductory text to display at the top of the filter dropdown
41
- * @type {string}
42
- */
43
- introductoryText: { type: String, attribute: 'introductory-text' },
44
44
  /**
45
45
  * REQUIRED: The text that is displayed for the dimension title
46
46
  * @type {string}
package/components/list/demo/list-nested.html CHANGED
@@ -28,6 +28,94 @@
28
28
 
29
29
  <h2>Nested</h2>
30
30
 
31
+ <d2l-demo-snippet>
32
+ <template>
33
+ <d2l-list grid>
34
+ <d2l-list-item key="L1-1" label="Label for L1-1">
35
+ <d2l-list-item-content>
36
+ <div>Earth Sciences (L1)</div>
37
+ <div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
38
+ </d2l-list-item-content>
39
+ <d2l-list slot="nested" grid separators="all">
40
+ <d2l-list-item key="L2-1" label="Label for L2-1">
41
+ <d2l-list-item-content>
42
+ <div>Introductory Earth Sciences (L2)</div>
43
+ <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
44
+ </d2l-list-item-content>
45
+ <d2l-list slot="nested" grid separators="all">
46
+ <d2l-list-item key="L3-1" label="Label for L3-1">
47
+ <d2l-list-item-content>
48
+ <div>Glaciation (L3)</div>
49
+ <div slot="supporting-info">Supporting Info</div>
50
+ </d2l-list-item-content>
51
+ <d2l-list slot="nested" grid separators="all">
52
+ <d2l-list-item key="L4-1" label="Label for L4-1">
53
+ <d2l-list-item-content>
54
+ <div>Ice Sheets (L4)</div>
55
+ <div slot="supporting-info">Supporting Info</div>
56
+ </d2l-list-item-content>
57
+ </d2l-list-item>
58
+ <d2l-list-item key="L4-2" label="Label for L4-2">
59
+ <d2l-list-item-content>
60
+ <div>Alpine Glaciers (L4)</div>
61
+ <div slot="supporting-info">Supporting Info</div>
62
+ </d2l-list-item-content>
63
+ </d2l-list-item>
64
+ </d2l-list>
65
+ </d2l-list-item>
66
+ <d2l-list-item key="L3-2" label="Label for L3-2">
67
+ <d2l-list-item-content>
68
+ <div>Weathering (L3)</div>
69
+ <div slot="supporting-info">Supporting Info</div>
70
+ </d2l-list-item-content>
71
+ </d2l-list-item>
72
+ <d2l-list-item key="L3-3" label="Label for L3-3">
73
+ <d2l-list-item-content>
74
+ <div>Volcanism (L3)</div>
75
+ <div slot="supporting-info">Supporting Info</div>
76
+ </d2l-list-item-content>
77
+ </d2l-list-item>
78
+ </d2l-list>
79
+ </d2l-list-item>
80
+ <d2l-list-item key="L2-2" label="Label for L2-2">
81
+ <d2l-list-item-content>
82
+ <div>Flow and Transport Through Fractured Rocks (L2)</div>
83
+ <div slot="supporting-info">Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas. Despite the importance of fractures, its characterization and predictions of groundwater flow and contaminant transport are fraught with significant difficulties. Students are taught to deal with fractures in hydrogeology, to conceptualize them, and to build reliable models for predicting groundwater flow and contaminant transport.</div>
84
+ </d2l-list-item-content>
85
+ </d2l-list-item>
86
+ <d2l-list-item key="L2-3" label="Label for L2-3">
87
+ <d2l-list-item-content>
88
+ <div>Applied Wetland Science (L2)</div>
89
+ <div slot="supporting-info">Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology. Current issues in Canada and abroad will be examined.</div>
90
+ </d2l-list-item-content>
91
+ </d2l-list-item>
92
+ </d2l-list>
93
+ <div slot="actions">
94
+ <d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
95
+ <d2l-dropdown-more text="Open!">
96
+ <d2l-dropdown-menu>
97
+ <d2l-menu label="Astronomy">
98
+ <d2l-menu-item text="Introduction"></d2l-menu-item>
99
+ <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
100
+ </d2l-menu>
101
+ </d2l-dropdown-menu>
102
+ </d2l-dropdown-more>
103
+ </div>
104
+ </d2l-list-item>
105
+ <d2l-list-item key="L1-2" label="Label for L1-2">
106
+ <div>Biology (L1)</div>
107
+ </d2l-list-item>
108
+ <d2l-list-item key="L1-3" label="Label for L1-3">
109
+ <div>Computer Science (L1)</div>
110
+ </d2l-list-item>
111
+ <d2l-pager-load-more slot="pager" has-more page-size="5">
112
+ </d2l-pager-load-more>
113
+ </d2l-list>
114
+ </template>
115
+ </d2l-demo-snippet>
116
+
117
+ <h2>Nested - Selectable</h2>
118
+
31
119
  <d2l-demo-snippet>
32
120
  <template>
33
121
  <d2l-list grid>
@@ -138,13 +226,17 @@
138
226
 
139
227
  <script>
140
228
  setTimeout(() => {
141
- document.querySelector('d2l-list').addEventListener('d2l-list-selection-changes', (e) => {
142
- console.log('d2l-list-selection-changes', e.detail);
229
+ document.querySelectorAll('d2l-list').forEach(list => {
230
+ list.addEventListener('d2l-list-selection-changes', (e) => {
231
+ console.log('d2l-list-selection-changes', e.detail);
232
+ });
143
233
  });
144
234
 
145
- document.querySelector('d2l-pager-load-more').addEventListener('d2l-pager-load-more', (e) => {
146
- console.log('Load more requested!');
147
- setTimeout(() => e.detail.complete(), 2000);
235
+ document.querySelectorAll('d2l-pager-load-more').forEach(pager => {
236
+ pager.addEventListener('d2l-pager-load-more', (e) => {
237
+ console.log('Load more requested!');
238
+ setTimeout(() => e.detail.complete(), 2000);
239
+ });
148
240
  });
149
241
  }, 1000);
150
242
  </script>
package/components/list/list-item-mixin.js CHANGED
@@ -169,7 +169,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
169
169
  .d2l-list-item-content-extend-separators > [slot="control"] {
170
170
  width: 3rem;
171
171
  }
172
- .d2l-list-item-content-extend-separators > [slot="content"] {
172
+ .d2l-list-item-content-extend-separators > [slot="content"],
173
+ :host([dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
173
174
  padding-left: 0.9rem;
174
175
  padding-right: 0.9rem;
175
176
  }
package/components/tabs/tab-internal.js CHANGED
@@ -1,14 +1,16 @@
1
1
  import '../colors/colors.js';
2
2
  import { css, html, LitElement, unsafeCSS } from 'lit';
3
+ import { classMap } from 'lit/directives/class-map.js';
3
4
  import { getFocusPseudoClass } from '../../helpers/focus.js';
4
5
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
6
+ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
5
7
 
6
8
  const keyCodes = {
7
9
  ENTER: 13,
8
10
  SPACE: 32
9
11
  };
10
12
 
11
- class Tab extends RtlMixin(LitElement) {
13
+ class Tab extends SkeletonMixin(RtlMixin(LitElement)) {
12
14
 
13
15
  static get properties() {
14
16
  return {
@@ -20,7 +22,7 @@ class Tab extends RtlMixin(LitElement) {
20
22
  }
21
23
 
22
24
  static get styles() {
23
- return css`
25
+ return [super.styles, css`
24
26
  :host {
25
27
  box-sizing: border-box;
26
28
  display: inline-block;
@@ -36,6 +38,10 @@ class Tab extends RtlMixin(LitElement) {
36
38
  text-overflow: ellipsis;
37
39
  white-space: nowrap;
38
40
  }
41
+ :host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
42
+ bottom: 0.15rem;
43
+ top: 0.15rem;
44
+ }
39
45
  :host(:first-child) .d2l-tab-text {
40
46
  margin-left: 0;
41
47
  }
@@ -55,6 +61,12 @@ class Tab extends RtlMixin(LitElement) {
55
61
  transition: box-shadow 0.2s;
56
62
  width: calc(100% - 1.2rem);
57
63
  }
64
+ :host([skeleton]) .d2l-tab-selected-indicator {
65
+ position: absolute; /* make sure skeleton styles do not override this */
66
+ }
67
+ .d2l-tab-text-skeletize-override {
68
+ min-width: 50px;
69
+ }
58
70
  :host(:first-child) .d2l-tab-selected-indicator {
59
71
  margin-left: 0;
60
72
  width: calc(100% - 0.6rem);
@@ -89,7 +101,7 @@ class Tab extends RtlMixin(LitElement) {
89
101
  transition: none;
90
102
  }
91
103
  }
92
- `;
104
+ `];
93
105
  }
94
106
 
95
107
  constructor() {
@@ -116,9 +128,16 @@ class Tab extends RtlMixin(LitElement) {
116
128
  }
117
129
 
118
130
  render() {
131
+ const overrideSkeletonText = this.skeleton && (!this.text || this.text.length === 0);
132
+ const textClasses = {
133
+ 'd2l-tab-text': true,
134
+ 'd2l-skeletize': true,
135
+ 'd2l-tab-text-skeletize-override': overrideSkeletonText
136
+ };
137
+
119
138
  return html`
120
- <div class="d2l-tab-text">${this.text}</div>
121
- <div class="d2l-tab-selected-indicator"></div>
139
+ <div class="${classMap(textClasses)}">${overrideSkeletonText ? html`&nbsp;` : this.text}</div>
140
+ <div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
122
141
  `;
123
142
  }
124
143
 
package/components/tabs/tabs.js CHANGED
@@ -12,6 +12,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
12
12
  import { repeat } from 'lit/directives/repeat.js';
13
13
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
14
14
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
15
+ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
15
16
  import { styleMap } from 'lit/directives/style-map.js';
16
17
 
17
18
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -52,7 +53,7 @@ if (!Array.prototype.findIndex) {
52
53
  * @slot ext - Additional content (e.g., a button) positioned at right
53
54
  * @fires d2l-tabs-initialized - Dispatched when the component is initialized
54
55
  */
55
- class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
56
+ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(LitElement)))) {
56
57
 
57
58
  static get properties() {
58
59
  return {
@@ -72,7 +73,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
72
73
  }
73
74
 
74
75
  static get styles() {
75
- return [bodyCompactStyles, css`
76
+ return [super.styles, bodyCompactStyles, css`
76
77
  :host {
77
78
  --d2l-tabs-background-color: white;
78
79
  box-sizing: border-box;
@@ -192,6 +193,9 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
192
193
  .d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
193
194
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
194
195
  }
196
+ :host([skeleton]) .d2l-tabs-scroll-button {
197
+ visibility: hidden;
198
+ }
195
199
  .d2l-panels-container-no-whitespace ::slotted(*) {
196
200
  margin-top: 0;
197
201
  -webkit-transition: margin-top 200ms ease-out;
@@ -310,6 +314,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
310
314
  const tabsLayoutClasses = {
311
315
  'd2l-tabs-layout': true,
312
316
  'd2l-body-compact': true,
317
+ 'd2l-skeletize-container': true,
313
318
  'd2l-tabs-layout-anim': this._state === 'anim',
314
319
  'd2l-tabs-layout-shown': this._state === 'shown'
315
320
  };
@@ -348,6 +353,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
348
353
  <d2l-tab-internal aria-selected="${tabInfo.selected ? 'true' : 'false'}"
349
354
  .controlsPanel="${tabInfo.id}"
350
355
  data-state="${tabInfo.state}"
356
+ ?skeleton="${this.skeleton}"
351
357
  tabindex="${tabInfo.activeFocusable ? 0 : -1}"
352
358
  text="${tabInfo.text}">
353
359
  </d2l-tab-internal>
package/custom-elements.json CHANGED
@@ -8964,6 +8964,14 @@
8964
8964
  }
8965
8965
  ]
8966
8966
  },
8967
+ {
8968
+ "name": "d2l-nested-list-iterations-separate",
8969
+ "path": "./components/list/test/nested-list-iterations-helper.js"
8970
+ },
8971
+ {
8972
+ "name": "d2l-nested-list-iterations-combined",
8973
+ "path": "./components/list/test/nested-list-iterations-helper.js"
8974
+ },
8967
8975
  {
8968
8976
  "name": "d2l-loading-spinner-demo-override",
8969
8977
  "path": "./components/loading-spinner/demo/loading-spinner-override.js",
@@ -11940,6 +11948,12 @@
11940
11948
  "name": "role",
11941
11949
  "type": "string",
11942
11950
  "default": "\"tab\""
11951
+ },
11952
+ {
11953
+ "name": "skeleton",
11954
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
11955
+ "type": "boolean",
11956
+ "default": "false"
11943
11957
  }
11944
11958
  ],
11945
11959
  "properties": [
@@ -11969,6 +11983,13 @@
11969
11983
  "name": "tabIndex",
11970
11984
  "type": "number",
11971
11985
  "default": "-1"
11986
+ },
11987
+ {
11988
+ "name": "skeleton",
11989
+ "attribute": "skeleton",
11990
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
11991
+ "type": "boolean",
11992
+ "default": "false"
11972
11993
  }
11973
11994
  ],
11974
11995
  "events": [
@@ -12049,6 +12070,12 @@
12049
12070
  "description": "Limit the number of tabs to initially display",
12050
12071
  "type": "number",
12051
12072
  "default": "-1"
12073
+ },
12074
+ {
12075
+ "name": "skeleton",
12076
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
12077
+ "type": "boolean",
12078
+ "default": "false"
12052
12079
  }
12053
12080
  ],
12054
12081
  "properties": [
@@ -12072,6 +12099,13 @@
12072
12099
  "name": "arrowKeysNoWrap",
12073
12100
  "type": "boolean",
12074
12101
  "default": "false"
12102
+ },
12103
+ {
12104
+ "name": "skeleton",
12105
+ "attribute": "skeleton",
12106
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
12107
+ "type": "boolean",
12108
+ "default": "false"
12075
12109
  }
12076
12110
  ],
12077
12111
  "events": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.114.2",
3
+ "version": "2.115.1",
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",
@@ -45,7 +45,7 @@
45
45
  "license": "Apache-2.0",
46
46
  "devDependencies": {
47
47
  "@babel/eslint-parser": "^7",
48
- "@brightspace-ui/stylelint-config": "^0.7",
48
+ "@brightspace-ui/stylelint-config": "^0.8",
49
49
  "@open-wc/semantic-dom-diff": "^0.19.9",
50
50
  "@open-wc/testing": "^3",
51
51
  "@rollup/plugin-dynamic-import-vars": "^2",
@@ -57,7 +57,7 @@
57
57
  "axe-core": "^4",
58
58
  "chalk": "^5",
59
59
  "eslint": "^8",
60
- "eslint-config-brightspace": "^0.21",
60
+ "eslint-config-brightspace": "^0.23",
61
61
  "glob-all": "^3",
62
62
  "lit-analyzer": "^1",
63
63
  "messageformat-validator": "^2",