@brightspace-ui/core 2.145.0 → 2.145.2

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 (5) hide show
  1. package/components/button/button-subtle.js +6 -4
  2. package/components/card/README.md +47 -12
  3. package/components/description-list/description-list-wrapper.js +1 -1
  4. package/components/empty-state/empty-state-illustrated.js +4 -2
  5. package/package.json +1 -1
package/components/button/button-subtle.js CHANGED
@@ -122,10 +122,10 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
122
122
  :host([active]:not([disabled])) button .d2l-button-subtle-content {
123
123
  color: var(--d2l-color-celestine-minus-1);
124
124
  }
125
- .d2l-button-subtle-has-icon .d2l-button-subtle-content {
125
+ .d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
126
126
  padding-inline: 1.2rem 0;
127
127
  }
128
- :host([icon-right]) .d2l-button-subtle-has-icon .d2l-button-subtle-content {
128
+ :host([icon-right]) .d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
129
129
  padding-inline: 0 1.2rem;
130
130
  }
131
131
 
@@ -202,8 +202,10 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
202
202
  name="${ifDefined(this.name)}"
203
203
  type="${this._getType()}">
204
204
  <slot name="icon" @slotchange="${this._handleIconSlotChange}">${icon}</slot>
205
- <span class="d2l-button-subtle-content">${this.text}</span>
206
- <slot></slot>
205
+ <span class="d2l-button-subtle-content-wrapper">
206
+ <span class="d2l-button-subtle-content">${this.text}</span>
207
+ <slot></slot>
208
+ </span>
207
209
  </button>
208
210
  ${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
209
211
  ${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
package/components/card/README.md CHANGED
@@ -9,14 +9,21 @@ Used to surface pertinent information, cards make it easy for users to browse in
9
9
  <script type="module">
10
10
  import '@brightspace-ui/core/components/card/card.js';
11
11
  import '@brightspace-ui/core/components/card/card-footer-link.js';
12
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
13
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
12
14
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
13
15
  </script>
14
16
 
15
- <d2l-card align-center text="Biology" align-center style="height: 320px; width: 245px;">
17
+ <d2l-card align-center text="Biology" align-center style="width: 245px;">
16
18
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
17
19
  <div slot="content">
18
20
  <div>Biology</div>
19
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
21
+ <d2l-card-content-meta>
22
+ <d2l-object-property-list>
23
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
24
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
25
+ </d2l-object-property-list>
26
+ </d2l-card-content-meta>
20
27
  </div>
21
28
  <div slot="footer">
22
29
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -56,6 +63,8 @@ Cards are composed of 3 sections. Each card will have a content section but is n
56
63
  <script type="module">
57
64
  import '@brightspace-ui/core/components/card/card.js';
58
65
  import '@brightspace-ui/core/components/card/card-footer-link.js';
66
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
67
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
59
68
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
60
69
  </script>
61
70
 
@@ -78,18 +87,23 @@ Cards are composed of 3 sections. Each card will have a content section but is n
78
87
  <div id="header" class="active" style="height: 155px;">
79
88
  Header (optional)
80
89
  </div>
81
- <div id="content" style="height: 115px;">
90
+ <div id="content" style="height: 105px;">
82
91
  Content (required)
83
92
  </div>
84
93
  <div id="footer">
85
94
  Footer (optional)
86
95
  </div>
87
96
  </div>
88
- <d2l-card align-center text="Biology" align-center style="height: 320px; width: 245px;">
97
+ <d2l-card align-center text="Biology" align-center style="width: 245px;">
89
98
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
90
99
  <div slot="content">
91
100
  <div>Biology</div>
92
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
101
+ <d2l-card-content-meta>
102
+ <d2l-object-property-list>
103
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
104
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
105
+ </d2l-object-property-list>
106
+ </d2l-card-content-meta>
93
107
  </div>
94
108
  <div slot="footer">
95
109
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -112,14 +126,21 @@ The `d2l-card` element is a container that provides specific layout using severa
112
126
  <script type="module">
113
127
  import '@brightspace-ui/core/components/card/card.js';
114
128
  import '@brightspace-ui/core/components/card/card-footer-link.js';
129
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
130
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
115
131
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
116
132
  </script>
117
133
 
118
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
134
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
119
135
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
120
136
  <div slot="content">
121
137
  <div>Biology</div>
122
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
138
+ <d2l-card-content-meta>
139
+ <d2l-object-property-list>
140
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
141
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
142
+ </d2l-object-property-list>
143
+ </d2l-card-content-meta>
123
144
  </div>
124
145
  <div slot="footer">
125
146
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -171,7 +192,7 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
171
192
  import '@brightspace-ui/core/components/card/card-content-title.js';
172
193
  </script>
173
194
 
174
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
195
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
175
196
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
176
197
  <div slot="content">
177
198
  <d2l-card-content-title>Biology</d2l-card-content-title>
@@ -197,13 +218,20 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
197
218
  import '@brightspace-ui/core/components/card/card.js';
198
219
  import '@brightspace-ui/core/components/card/card-content-meta.js';
199
220
  import '@brightspace-ui/core/components/card/card-footer-link.js';
221
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
222
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
200
223
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
201
224
  </script>
202
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
225
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
203
226
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
204
227
  <div slot="content">
205
228
  <div>Biology</div>
206
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
229
+ <d2l-card-content-meta>
230
+ <d2l-object-property-list>
231
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
232
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
233
+ </d2l-object-property-list>
234
+ </d2l-card-content-meta>
207
235
  </div>
208
236
  <div slot="footer">
209
237
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -225,14 +253,21 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
225
253
  <script type="module">
226
254
  import '@brightspace-ui/core/components/card/card.js';
227
255
  import '@brightspace-ui/core/components/card/card-footer-link.js';
256
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
257
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
228
258
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
229
259
  </script>
230
260
 
231
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
261
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
232
262
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
233
263
  <div slot="content">
234
264
  <div>Biology</div>
235
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
265
+ <d2l-card-content-meta>
266
+ <d2l-object-property-list>
267
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
268
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
269
+ </d2l-object-property-list>
270
+ </d2l-card-content-meta>
236
271
  </div>
237
272
  <div slot="footer">
238
273
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
package/components/description-list/description-list-wrapper.js CHANGED
@@ -108,7 +108,7 @@ class DescriptionListWrapper extends LitElement {
108
108
  if (!entries || entries.length === 0) return;
109
109
  const entry = entries[0];
110
110
 
111
- this._stacked = entry.contentRect.width < this.breakpoint;
111
+ requestAnimationFrame(() => this._stacked = entry.contentRect.width < this.breakpoint);
112
112
  }
113
113
  }
114
114
 
package/components/empty-state/empty-state-illustrated.js CHANGED
@@ -120,8 +120,10 @@ class EmptyStateIllustrated extends LitElement {
120
120
  _onResize(entries) {
121
121
  if (!entries || entries.length === 0) return;
122
122
  const entry = entries[0];
123
- this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
124
- this._titleSmall = entry.contentRect.right <= 615;
123
+ requestAnimationFrame(() => {
124
+ this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
125
+ this._titleSmall = entry.contentRect.right <= 615;
126
+ });
125
127
  }
126
128
 
127
129
  _validateAttributes() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.145.0",
3
+ "version": "2.145.2",
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",