@brightspace-ui/core 2.143.0 → 2.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/README.md +18 -0
- package/components/button/button-icon.js +13 -3
- package/components/button/demo/button-icon.html +16 -0
- package/components/list/demo/list-color.html +100 -11
- package/components/list/list-controls.js +3 -0
- package/components/list/list-item-mixin.js +20 -2
- package/custom-elements.json +6 -0
- package/package.json +1 -1
|
@@ -139,6 +139,24 @@ To make your `d2l-button-icon` accessible, use the following properties when app
|
|
|
139
139
|
| `aria-label` | Acts as a primary label. If `text` AND `aria-label` are provided, `aria-label` is used as the primary label, `text` is used as the tooltip. |
|
|
140
140
|
| `description` | Use when text on button does not provide enough context. |
|
|
141
141
|
|
|
142
|
+
### Icon Button with Custom Icon
|
|
143
|
+
|
|
144
|
+
<!-- docs: demo code -->
|
|
145
|
+
```html
|
|
146
|
+
<script type="module">
|
|
147
|
+
import '@brightspace-ui/core/components/button/button-icon.js';
|
|
148
|
+
import '@brightspace-ui/core/components/icons/icon-custom.js';
|
|
149
|
+
</script>
|
|
150
|
+
<d2l-button-icon text="Custom Icon Button">
|
|
151
|
+
<d2l-icon-custom slot="icon">
|
|
152
|
+
<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
|
|
153
|
+
<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
|
|
154
|
+
<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
|
|
155
|
+
</svg>
|
|
156
|
+
</d2l-icon-custom>
|
|
157
|
+
</d2l-button-icon>
|
|
158
|
+
```
|
|
159
|
+
|
|
142
160
|
## Floating Buttons [d2l-floating-buttons]
|
|
143
161
|
|
|
144
162
|
See [floating buttons](https://github.com/BrightspaceUI/core/tree/main/components/button/floating-buttons.md).
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import '../icons/icon.js';
|
|
3
3
|
import '../tooltip/tooltip.js';
|
|
4
|
-
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
|
+
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
|
|
5
5
|
import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
|
|
6
6
|
import { ButtonMixin } from './button-mixin.js';
|
|
7
7
|
import { buttonStyles } from './button-styles.js';
|
|
@@ -13,6 +13,7 @@ import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
|
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* A button component that can be used just like the native button for instances where only an icon is displayed.
|
|
16
|
+
* @slot icon - Optional slot for a custom icon
|
|
16
17
|
*/
|
|
17
18
|
class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(LitElement)))) {
|
|
18
19
|
|
|
@@ -117,7 +118,15 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
|
|
|
117
118
|
box-shadow: var(--d2l-button-icon-focus-box-shadow);
|
|
118
119
|
}
|
|
119
120
|
|
|
120
|
-
|
|
121
|
+
slot[name="icon"]::slotted(*) {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
125
|
+
display: inline-flex;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
d2l-icon,
|
|
129
|
+
slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
121
130
|
height: 0.9rem;
|
|
122
131
|
width: 0.9rem;
|
|
123
132
|
}
|
|
@@ -155,6 +164,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
|
|
|
155
164
|
}
|
|
156
165
|
|
|
157
166
|
render() {
|
|
167
|
+
const icon = this.icon ? html`<d2l-icon icon="${this.icon}"></d2l-icon>` : nothing;
|
|
158
168
|
return html`
|
|
159
169
|
<button
|
|
160
170
|
aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
|
|
@@ -174,7 +184,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
|
|
|
174
184
|
name="${ifDefined(this.name)}"
|
|
175
185
|
title="${ifDefined(this.text)}"
|
|
176
186
|
type="${this._getType()}">
|
|
177
|
-
<
|
|
187
|
+
<slot name="icon">${icon}</slot>
|
|
178
188
|
</button>
|
|
179
189
|
${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
|
|
180
190
|
${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../icons/icon-custom.js';
|
|
9
10
|
import '../button-icon.js';
|
|
10
11
|
</script>
|
|
11
12
|
<style>
|
|
@@ -137,6 +138,21 @@
|
|
|
137
138
|
<d2l-button-icon icon="tier1:search" text="Search" class="custom"></d2l-button-icon>
|
|
138
139
|
</template>
|
|
139
140
|
</d2l-demo-snippet>
|
|
141
|
+
|
|
142
|
+
<h2>Icon Button with Custom Icon</h2>
|
|
143
|
+
|
|
144
|
+
<d2l-demo-snippet>
|
|
145
|
+
<template>
|
|
146
|
+
<d2l-button-icon text="Custom Icon Button">
|
|
147
|
+
<d2l-icon-custom slot="icon">
|
|
148
|
+
<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
|
|
149
|
+
<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
|
|
150
|
+
<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
|
|
151
|
+
</svg>
|
|
152
|
+
</d2l-icon-custom>
|
|
153
|
+
</d2l-button-icon>
|
|
154
|
+
</template>
|
|
155
|
+
</d2l-demo-snippet>
|
|
140
156
|
</d2l-demo-page>
|
|
141
157
|
|
|
142
158
|
<script>
|
|
@@ -72,6 +72,10 @@
|
|
|
72
72
|
<d2l-demo-snippet>
|
|
73
73
|
<template>
|
|
74
74
|
<d2l-list extend-separators>
|
|
75
|
+
<d2l-list-controls slot="controls">
|
|
76
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
77
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
78
|
+
</d2l-list-controls>
|
|
75
79
|
<d2l-list-item key="L4-1" label="Label for L4-1" color="#ffba59" selectable>
|
|
76
80
|
<d2l-list-item-content>
|
|
77
81
|
<div>Ice Sheets (L4)</div>
|
|
@@ -264,34 +268,122 @@
|
|
|
264
268
|
</template>
|
|
265
269
|
</d2l-demo-snippet>
|
|
266
270
|
|
|
267
|
-
|
|
271
|
+
|
|
272
|
+
<h2>Nested - Extend Separators</h2>
|
|
268
273
|
|
|
269
274
|
<d2l-demo-snippet code-view-hidden>
|
|
270
275
|
<template>
|
|
271
|
-
<d2l-list>
|
|
276
|
+
<d2l-list extend-separators>
|
|
277
|
+
<d2l-list-item key="L1-2" label="Label for L1-2">
|
|
278
|
+
<d2l-list-item-content>
|
|
279
|
+
<div>Biology (L1)</div>
|
|
280
|
+
</d2l-list-item-content>
|
|
281
|
+
</d2l-list-item>
|
|
282
|
+
<d2l-list-item key="L1-1" label="Label for L1-1" color="#00ff00ab">
|
|
283
|
+
<d2l-list-item-content>
|
|
284
|
+
<div>Earth Sciences (L1)</div>
|
|
285
|
+
<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>
|
|
286
|
+
</d2l-list-item-content>
|
|
287
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
288
|
+
<d2l-list-item key="L2-1" label="Label for L2-1" color="#ffba59" >
|
|
289
|
+
<d2l-list-item-content>
|
|
290
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
291
|
+
<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>
|
|
292
|
+
</d2l-list-item-content>
|
|
293
|
+
</d2l-list-item>
|
|
294
|
+
</d2l-list>
|
|
295
|
+
<div slot="actions">
|
|
296
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
297
|
+
<d2l-dropdown-more text="Open!">
|
|
298
|
+
<d2l-dropdown-menu>
|
|
299
|
+
<d2l-menu label="Astronomy">
|
|
300
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
301
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
302
|
+
</d2l-menu>
|
|
303
|
+
</d2l-dropdown-menu>
|
|
304
|
+
</d2l-dropdown-more>
|
|
305
|
+
</div>
|
|
306
|
+
</d2l-list-item>
|
|
307
|
+
</d2l-list>
|
|
308
|
+
</template>
|
|
309
|
+
</d2l-demo-snippet>
|
|
310
|
+
|
|
311
|
+
<h2>Nested - Extend Separators, Selectable</h2>
|
|
312
|
+
|
|
313
|
+
<d2l-demo-snippet code-view-hidden>
|
|
314
|
+
<template>
|
|
315
|
+
<d2l-list extend-separators>
|
|
272
316
|
<d2l-list-controls slot="controls">
|
|
273
317
|
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
274
318
|
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
275
319
|
</d2l-list-controls>
|
|
276
|
-
<d2l-list-item selectable key="L1-
|
|
320
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
321
|
+
<d2l-list-item-content>
|
|
322
|
+
<div>Biology (L1)</div>
|
|
323
|
+
</d2l-list-item-content>
|
|
324
|
+
</d2l-list-item>
|
|
325
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1" color="#00ff00ab">
|
|
277
326
|
<d2l-list-item-content>
|
|
278
327
|
<div>Earth Sciences (L1)</div>
|
|
279
328
|
<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>
|
|
280
329
|
</d2l-list-item-content>
|
|
281
|
-
<d2l-list slot="nested" grid separators="all">
|
|
282
|
-
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59"
|
|
330
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
331
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59" >
|
|
332
|
+
<d2l-list-item-content>
|
|
333
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
334
|
+
<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>
|
|
335
|
+
</d2l-list-item-content>
|
|
336
|
+
</d2l-list-item>
|
|
337
|
+
</d2l-list>
|
|
338
|
+
<div slot="actions">
|
|
339
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
340
|
+
<d2l-dropdown-more text="Open!">
|
|
341
|
+
<d2l-dropdown-menu>
|
|
342
|
+
<d2l-menu label="Astronomy">
|
|
343
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
344
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
345
|
+
</d2l-menu>
|
|
346
|
+
</d2l-dropdown-menu>
|
|
347
|
+
</d2l-dropdown-more>
|
|
348
|
+
</div>
|
|
349
|
+
</d2l-list-item>
|
|
350
|
+
</d2l-list>
|
|
351
|
+
</template>
|
|
352
|
+
</d2l-demo-snippet>
|
|
353
|
+
|
|
354
|
+
<h2>Nested - Extend Separators, Expandable, Selectable</h2>
|
|
355
|
+
|
|
356
|
+
<d2l-demo-snippet code-view-hidden>
|
|
357
|
+
<template>
|
|
358
|
+
<d2l-list extend-separators>
|
|
359
|
+
<d2l-list-controls slot="controls">
|
|
360
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
361
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
362
|
+
</d2l-list-controls>
|
|
363
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1">
|
|
364
|
+
<d2l-list-item-content>
|
|
365
|
+
<div>Biology (L1)</div>
|
|
366
|
+
</d2l-list-item-content>
|
|
367
|
+
</d2l-list-item>
|
|
368
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2" expandable expanded color="#00ff00ab">
|
|
369
|
+
<d2l-list-item-content>
|
|
370
|
+
<div>Earth Sciences (L1)</div>
|
|
371
|
+
<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>
|
|
372
|
+
</d2l-list-item-content>
|
|
373
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
374
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59" expandable>
|
|
283
375
|
<d2l-list-item-content>
|
|
284
376
|
<div>Introductory Earth Sciences (L2)</div>
|
|
285
377
|
<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>
|
|
286
378
|
</d2l-list-item-content>
|
|
287
379
|
<d2l-list slot="nested" grid separators="all">
|
|
288
|
-
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59" expandable
|
|
380
|
+
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59" expandable>
|
|
289
381
|
<d2l-list-item-content>
|
|
290
382
|
<div>Glaciation (L3)</div>
|
|
291
383
|
<div slot="supporting-info">Supporting Info</div>
|
|
292
384
|
</d2l-list-item-content>
|
|
293
|
-
<d2l-list slot="nested" grid separators="all">
|
|
294
|
-
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59"
|
|
385
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
386
|
+
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59">
|
|
295
387
|
<d2l-list-item-content>
|
|
296
388
|
<div>Ice Sheets (L4)</div>
|
|
297
389
|
<div slot="supporting-info">Supporting Info</div>
|
|
@@ -320,9 +412,6 @@
|
|
|
320
412
|
</d2l-dropdown-more>
|
|
321
413
|
</div>
|
|
322
414
|
</d2l-list-item>
|
|
323
|
-
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
324
|
-
<div>Biology (L1)</div>
|
|
325
|
-
</d2l-list-item>
|
|
326
415
|
</d2l-list>
|
|
327
416
|
</template>
|
|
328
417
|
</d2l-demo-snippet>
|
|
@@ -167,8 +167,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
167
167
|
.d2l-list-item-content-extend-separators > [slot="control"] {
|
|
168
168
|
width: 3rem;
|
|
169
169
|
}
|
|
170
|
-
.d2l-list-item-content-extend-separators > [slot="content"],
|
|
171
|
-
:host([dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
|
|
170
|
+
:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators > [slot="content"],
|
|
171
|
+
:host(:not([_has-color-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
|
|
172
172
|
padding-left: 0.9rem;
|
|
173
173
|
padding-right: 0.9rem;
|
|
174
174
|
}
|
|
@@ -320,6 +320,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
320
320
|
margin: 0;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
+
:host([_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"],
|
|
324
|
+
:host([dir="rtl"][_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
|
|
325
|
+
margin: 0 !important;
|
|
326
|
+
}
|
|
327
|
+
|
|
323
328
|
:host(:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
|
|
324
329
|
margin-left: -6px;
|
|
325
330
|
}
|
|
@@ -396,6 +401,19 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
396
401
|
padding-left: 12px;
|
|
397
402
|
padding-right: 0;
|
|
398
403
|
}
|
|
404
|
+
:host(:not([_nested])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
405
|
+
padding-left: 3px;
|
|
406
|
+
}
|
|
407
|
+
:host(:not([_nested])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
408
|
+
padding-left: 12px;
|
|
409
|
+
padding-right: 3px;
|
|
410
|
+
}
|
|
411
|
+
:host([selectable]:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
412
|
+
padding-right: 0;
|
|
413
|
+
}
|
|
414
|
+
:host([selectable]:not([_render-expand-collapse-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
415
|
+
padding-left: 0;
|
|
416
|
+
}
|
|
399
417
|
.d2l-list-item-color-outer + .d2l-list-expand-collapse {
|
|
400
418
|
margin-left: -6px;
|
|
401
419
|
}
|
package/custom-elements.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.144.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",
|