@brightspace-ui/core 2.79.2 → 2.80.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 (10) hide show
  1. package/components/inputs/input-checkbox.js +1 -1
  2. package/components/list/list-item-mixin.js +2 -2
  3. package/components/object-property-list/README.md +39 -5
  4. package/components/object-property-list/demo/object-property-list.html +11 -1
  5. package/components/object-property-list/object-property-list-item.js +13 -14
  6. package/components/object-property-list/object-property-list.js +16 -3
  7. package/components/offscreen/README.md +21 -1
  8. package/components/offscreen/screen-reader-pause.js +15 -0
  9. package/custom-elements.json +4 -0
  10. package/package.json +1 -1
package/components/inputs/input-checkbox.js CHANGED
@@ -42,7 +42,7 @@ export const checkboxStyles = css`
42
42
  input[type="checkbox"].d2l-input-checkbox:hover,
43
43
  input[type="checkbox"].d2l-input-checkbox:focus,
44
44
  input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
45
- :host(.d2l-hovering) input[type="checkbox"].d2l-input-checkbox {
45
+ :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
46
46
  border-color: var(--d2l-color-celestine);
47
47
  border-width: 2px;
48
48
  outline-width: 0;
package/components/list/list-item-mixin.js CHANGED
@@ -147,8 +147,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
147
147
  :host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
148
148
  :host([_separators="none"]) [slot="control-container"]::before,
149
149
  :host([_separators="none"]) [slot="control-container"]::after,
150
- :host([selectable][_hovering]) [slot="control-container"]::before,
151
- :host([selectable][_hovering]) [slot="control-container"]::after,
150
+ :host([selectable][_hovering]:not([disabled])) [slot="control-container"]::before,
151
+ :host([selectable][_hovering]:not([disabled])) [slot="control-container"]::after,
152
152
  :host([selectable][_focusing]) [slot="control-container"]::before,
153
153
  :host([selectable][_focusing]) [slot="control-container"]::after,
154
154
  :host([selected]) [slot="control-container"]::before,
package/components/object-property-list/README.md CHANGED
@@ -8,9 +8,11 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
8
8
  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
9
9
  import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
10
10
  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
11
+ import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
11
12
  </script>
12
13
 
13
14
  <d2l-object-property-list>
15
+ <d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
14
16
  <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
15
17
  <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
16
18
  <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
@@ -18,11 +20,23 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
18
20
  </d2l-object-property-list>
19
21
  ```
20
22
 
23
+ ## Best Practices
24
+ <!-- docs: start best practices -->
25
+ <!-- docs: start dos -->
26
+ * Use object property lists to represent properties and/or metadata related to an object
27
+ <!-- docs: end dos -->
28
+
29
+ <!-- docs: start donts -->
30
+ * Don't use this pattern to display more than 3-4 items
31
+ * Don't put unsupported elements inside an object property list
32
+ <!-- docs: end donts -->
33
+ <!-- docs: end best practices -->
34
+
21
35
  ## List [d2l-object-property-list]
22
36
 
23
37
  An object property list can be defined using `d2l-object-property-list` and a combination of items (e.g., `d2l-object-property-list-item`, `d2l-object-property-list-item-link`).
24
38
 
25
- <!-- docs: demo code -->
39
+ <!-- docs: demo live name:d2l-object-property-list -->
26
40
  ```html
27
41
  <script type="module">
28
42
  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -36,17 +50,19 @@ An object property list can be defined using `d2l-object-property-list` and a co
36
50
  </d2l-object-property-list>
37
51
  ```
38
52
 
53
+ <!-- docs: start hidden content -->
39
54
  ### Properties
40
55
 
41
56
  | Property | Type | Description |
42
57
  |--|--|--|
43
58
  | `skeleton-count` | Number | Number of skeleton items to insert if in skeleton mode |
59
+ <!-- docs: end hidden content -->
44
60
 
45
61
  ### Word wrap
46
62
 
47
63
  The object property list is designed to wrap in an inline manner if the items are wider than the container.
48
64
 
49
- <!-- docs: demo code -->
65
+ <!-- docs: demo -->
50
66
  ```html
51
67
  <script type="module">
52
68
  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -63,8 +79,7 @@ The object property list is designed to wrap in an inline manner if the items ar
63
79
 
64
80
  The `d2l-object-property-list-item` component is the basic type of item for an object property list, displaying text and an optional leading icon.
65
81
 
66
-
67
- <!-- docs: demo code -->
82
+ <!-- docs: demo live name:d2l-object-property-list-item -->
68
83
  ```html
69
84
  <script type="module">
70
85
  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -90,7 +105,7 @@ The `d2l-object-property-list-item` component is the basic type of item for an o
90
105
 
91
106
  The `d2l-object-property-list-item-link` component is a link item for the object property list. It displays text as a hyperlink, with an optional leading icon.
92
107
 
93
- <!-- docs: demo code -->
108
+ <!-- docs: demo live name:d2l-object-property-list-item-link -->
94
109
  ```html
95
110
  <script type="module">
96
111
  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -115,6 +130,25 @@ The `d2l-object-property-list-item-link` component is a link item for the object
115
130
  | `target` | String | Where to display the linked URL |
116
131
  <!-- docs: end hidden content -->
117
132
 
133
+ ## Status Slot
134
+
135
+ Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.
136
+
137
+ <!-- docs: demo live name:d2l-status-indicator -->
138
+ ```html
139
+ <script type="module">
140
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
141
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
142
+ import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
143
+ </script>
144
+
145
+ <d2l-object-property-list>
146
+ <d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
147
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
148
+ <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
149
+ </d2l-object-property-list>
150
+ ```
151
+
118
152
  <!-- docs: start hidden content -->
119
153
  ## Future Improvements
120
154
 
package/components/object-property-list/demo/object-property-list.html CHANGED
@@ -10,6 +10,7 @@
10
10
  import '../object-property-list.js';
11
11
  import '../object-property-list-item.js';
12
12
  import '../object-property-list-item-link.js';
13
+ import '../../status-indicator/status-indicator.js';
13
14
  </script>
14
15
  </head>
15
16
  <body unresolved>
@@ -30,6 +31,7 @@
30
31
  <d2l-demo-snippet overflow-hidden>
31
32
  <template>
32
33
  <d2l-object-property-list>
34
+ <d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
33
35
  <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
34
36
  <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
35
37
  <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
@@ -53,7 +55,15 @@
53
55
 
54
56
  <d2l-demo-snippet overflow-hidden>
55
57
  <template>
56
- <d2l-object-property-list skeleton-count=3></d2l-object-property-list>
58
+ <d2l-object-property-list skeleton-count="3"></d2l-object-property-list>
59
+ </template>
60
+ </d2l-demo-snippet>
61
+
62
+ <h2>Object Property List: No external whitespace (still contains internal whitespace in the component renderers)</h2>
63
+
64
+ <d2l-demo-snippet overflow-hidden>
65
+ <template>
66
+ <d2l-object-property-list><d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator><d2l-object-property-list-item text="Example item"></d2l-object-property-list-item><d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item><d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link><d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link></d2l-object-property-list>
57
67
  </template>
58
68
  </d2l-demo-snippet>
59
69
 
package/components/object-property-list/object-property-list-item.js CHANGED
@@ -1,16 +1,14 @@
1
+ import '../offscreen/screen-reader-pause.js';
1
2
  import '../colors/colors.js';
2
3
  import '../icons/icon.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
- import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
5
- import { offscreenStyles } from '../offscreen/offscreen.js';
6
- import { RtlMixin } from '../../mixins/rtl-mixin.js';
7
5
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
8
6
 
9
7
  /**
10
8
  * A single object property, to be used within an object-property-list,
11
9
  * with an optional icon.
12
10
  */
13
- export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement)) {
11
+ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
14
12
  static get properties() {
15
13
  return {
16
14
  /**
@@ -27,23 +25,24 @@ export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement))
27
25
  }
28
26
 
29
27
  static get styles() {
30
- return [super.styles, offscreenStyles, css`
28
+ return [super.styles, css`
29
+ :host {
30
+ vertical-align: middle;
31
+ }
31
32
  d2l-icon {
32
- height: 0.9rem;
33
- width: 0.9rem;
33
+ height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
34
+ width: 1.2857em;
34
35
  }
35
36
  .separator {
36
37
  display: var(--d2l-object-property-list-item-separator-display, inline);
37
- margin: 0 0.05rem;
38
+ margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
38
39
  }
39
40
  .separator d2l-icon {
40
41
  color: var(--d2l-color-galena);
41
42
  }
42
43
  .item-icon {
43
- margin: -0.1rem 0.3rem 0 0;
44
- }
45
- :host([dir="rtl"]) .item-icon {
46
- margin: -0.1rem 0 0 0.3rem;
44
+ margin-inline-end: 0.05rem; /* 6px desired margin, subtract 5px arbitrary whitespace. */
45
+ margin-top: -0.1rem;
47
46
  }
48
47
  :host([skeleton]) d2l-icon {
49
48
  color: var(--d2l-color-sylvite);
@@ -73,8 +72,8 @@ export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement))
73
72
  _renderSeparator() {
74
73
  return html`
75
74
  <span class="separator">
76
- <span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
77
- <d2l-icon icon="tier1:bullet" aria-hidden="true"></d2l-icon>
75
+ <d2l-screen-reader-pause></d2l-screen-reader-pause>
76
+ <d2l-icon icon="tier1:bullet"></d2l-icon>
78
77
  </span>
79
78
  `;
80
79
  }
package/components/object-property-list/object-property-list.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import './object-property-list-item.js';
2
+ import '../offscreen/screen-reader-pause.js';
2
3
  import { css, html, LitElement, nothing } from 'lit';
3
4
  import { bodySmallStyles } from '../typography/styles.js';
4
5
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -21,7 +22,7 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
21
22
 
22
23
  static get styles() {
23
24
  return [super.styles, bodySmallStyles, css`
24
- :host, slot {
25
+ :host {
25
26
  display: block;
26
27
  }
27
28
  :host([hidden]) {
@@ -30,16 +31,28 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
30
31
  ::slotted(:last-child), slot :last-child {
31
32
  --d2l-object-property-list-item-separator-display: none;
32
33
  }
34
+ ::slotted([slot="status"]) {
35
+ display: none;
36
+ }
37
+ ::slotted(d2l-status-indicator[slot="status"]:first-of-type) {
38
+ display: inline-block;
39
+ margin-inline-end: 0.25rem; /* 10px desired margin, subtract 5px arbitrary whitespace. */
40
+ }
33
41
  `];
34
42
  }
35
43
 
36
44
  render() {
37
-
38
45
  const slotContents = this.skeleton && this.skeletonCount > 0 ? [...Array(this.skeletonCount)].map(() => html`
39
46
  <d2l-object-property-list-item text="${this.localize('components.object-property-list.item-placeholder-text')}" skeleton></d2l-object-property-list-item>
40
47
  `) : nothing;
41
48
 
42
- return html`<slot class="d2l-body-small">${slotContents}</slot>`;
49
+ return html`
50
+ <div class="d2l-body-small">
51
+ <slot name="status"></slot>
52
+ <d2l-screen-reader-pause></d2l-screen-reader-pause>
53
+ <slot>${slotContents}</slot>
54
+ </div>
55
+ `;
43
56
  }
44
57
  }
45
58
 
package/components/offscreen/README.md CHANGED
@@ -25,7 +25,7 @@ Import the `<d2l-offscreen>` web component and place your content within the def
25
25
  <d2l-offscreen>Off-screen content for screen readers only</d2l-offscreen>
26
26
  ```
27
27
 
28
- ## Applying off-screen styles to arbitrary elements
28
+ ### Applying off-screen styles to arbitrary elements
29
29
 
30
30
  Alternately, you can apply off-screen styles to any element by importing the styles into your element and placing the `d2l-offscreen` CSS class on it.
31
31
 
@@ -44,3 +44,23 @@ class MyElement extends LitElement {
44
44
  }
45
45
  }
46
46
  ```
47
+
48
+ ## Screen Reader Pause [d2l-screen-reader-pause]
49
+
50
+ This component simply renders an off-screen separator character and space (e.g. `, ` in English), which will cause screen-readers to pause the same as if there was a visible comma.
51
+
52
+ This can be useful in cases where a non-semantic element like `d2l-icon` is visually used to separate text:
53
+
54
+ <!-- docs: demo code -->
55
+ ```html
56
+ <script type="module">
57
+ import '@brightspace-ui/core/components/icons/icon.js';
58
+ import '@brightspace-ui/core/components/offscreen/screen-reader-pause.js';
59
+ </script>
60
+ <p>
61
+ Item 1
62
+ <d2l-screen-reader-pause></d2l-screen-reader-pause>
63
+ <d2l-icon icon="tier1:bullet"></d2l-icon>
64
+ Item 2
65
+ </p>
66
+ ```
package/components/offscreen/screen-reader-pause.js ADDED
@@ -0,0 +1,15 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
3
+ import { offscreenStyles } from './offscreen.js';
4
+
5
+ export class ScreenReaderPause extends LitElement {
6
+ static get styles() {
7
+ return offscreenStyles;
8
+ }
9
+
10
+ render() {
11
+ return html`<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>`;
12
+ }
13
+ }
14
+
15
+ customElements.define('d2l-screen-reader-pause', ScreenReaderPause);
package/custom-elements.json CHANGED
@@ -9602,6 +9602,10 @@
9602
9602
  }
9603
9603
  ]
9604
9604
  },
9605
+ {
9606
+ "name": "d2l-screen-reader-pause",
9607
+ "path": "./components/offscreen/screen-reader-pause.js"
9608
+ },
9605
9609
  {
9606
9610
  "name": "d2l-overflow-group",
9607
9611
  "path": "./components/overflow-group/overflow-group.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.79.2",
3
+ "version": "2.80.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",