@brightspace-ui/core 3.187.0 → 3.187.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 (5) hide show
  1. package/components/more-less/demo/more-less-test.js +67 -0
  2. package/components/more-less/demo/more-less.html +9 -0
  3. package/components/more-less/more-less.js +28 -9
  4. package/custom-elements.json +41 -0
  5. package/package.json +1 -1
package/components/more-less/demo/more-less-test.js ADDED
@@ -0,0 +1,67 @@
1
+ import '../more-less.js';
2
+ import { css, html, LitElement } from 'lit';
3
+
4
+ const text = {
5
+ short: 'Short text.',
6
+ long: 'This is a much longer piece of text that will demonstrate the more-less component functionality. It should initially be truncated and then expandable to show the full content when the user clicks "more".'
7
+ };
8
+
9
+ class MoreLessTest extends LitElement {
10
+ static get properties() {
11
+ return {
12
+ text: { type: String },
13
+ margin: { type: Boolean, reflect: true },
14
+ extraItems: { type: Number }
15
+ };
16
+ }
17
+ static get styles() {
18
+ return css`
19
+ button:last-of-type {
20
+ margin-bottom: 2em;
21
+ }
22
+ :host([margin]) .hidden-div {
23
+ margin-bottom: 500px;
24
+ }
25
+ `;
26
+ }
27
+
28
+ constructor() {
29
+ super();
30
+ this.text = text.short;
31
+ this.margin = false;
32
+ this.extraItems = 0;
33
+ }
34
+
35
+ render() {
36
+ return html`
37
+ <button @click="${this.#toggleText}">Toggle Text Length</button>
38
+ <button @click="${this.#toggleDivMargin}">Toggle Text Margin</button>
39
+ <button @click="${this.#addExtraItem}">Add Extra Item</button>
40
+ <button ?disabled="${this.extraItems === 0}" @click="${this.#removeExtraItem}">Remove Extra Item</button>
41
+ <hr>
42
+ <d2l-more-less>
43
+ ${this.text}
44
+ <div class="hidden-div"></div>
45
+ ${Array.from({ length: this.extraItems }, (_, i) => html`<div>Extra item ${i + 1}</div>`)}
46
+ </d2l-more-less>
47
+ `;
48
+ }
49
+
50
+ #addExtraItem() {
51
+ this.extraItems += 1;
52
+ }
53
+
54
+ #removeExtraItem() {
55
+ if (this.extraItems > 0) this.extraItems -= 1;
56
+ }
57
+
58
+ #toggleDivMargin() {
59
+ this.margin = !this.margin;
60
+ }
61
+
62
+ #toggleText() {
63
+ this.text = this.text === text.short ? text.long : text.short;
64
+ }
65
+
66
+ }
67
+ customElements.define('d2l-more-less-test', MoreLessTest);
package/components/more-less/demo/more-less.html CHANGED
@@ -7,6 +7,7 @@
7
7
  <script type="module">
8
8
  import '../../demo/demo-page.js';
9
9
  import '../more-less.js';
10
+ import './more-less-test.js';
10
11
  </script>
11
12
  </head>
12
13
  <body unresolved>
@@ -45,6 +46,14 @@
45
46
  </template>
46
47
  </d2l-demo-snippet>
47
48
 
49
+ <h2>More-less test</h2>
50
+
51
+ <d2l-demo-snippet>
52
+ <template>
53
+ <d2l-more-less-test></d2l-more-less-test>
54
+ </template>
55
+ </d2l-demo-snippet>
56
+
48
57
  </d2l-demo-page>
49
58
 
50
59
  <script>
package/components/more-less/more-less.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import '../button/button-subtle.js';
2
- import { css, html, LitElement } from 'lit';
2
+ import { css, html, LitElement, nothing } from 'lit';
3
3
  import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { getComposedActiveElement } from '../../helpers/focus.js';
@@ -77,6 +77,12 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
77
77
  :host([inactive]) .d2l-more-less-toggle {
78
78
  display: none;
79
79
  }
80
+
81
+ .force-margin-scroll {
82
+ height: 1px;
83
+ margin-top: -1px;
84
+ }
85
+
80
86
  @media (prefers-reduced-motion: reduce) {
81
87
  .d2l-more-less-transition {
82
88
  transition: none;
@@ -97,13 +103,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
97
103
 
98
104
  this.__baseHeight = 0;
99
105
  this.__contentId = getUniqueId();
100
- this.__content = null;
101
106
  this.__contentSlot = null;
107
+ this.__content = null;
102
108
  this.__autoExpanded = false;
103
109
  this.__shift = false;
104
110
  this.__bound_transitionEvents = null;
105
111
 
106
- this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
112
+ this._observeContentOnly = getFlag('GAUD-8725-more-less-refactor-resizing', true);
113
+ if (!this._observeContentOnly) this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
107
114
  this._resizeObserver = new ResizeObserver(this.__reactToChanges.bind(this));
108
115
  }
109
116
 
@@ -111,7 +118,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
111
118
  super.disconnectedCallback();
112
119
 
113
120
  this._resizeObserver.disconnect();
114
- this._mutationObserver.disconnect();
121
+ if (!this._observeContentOnly) this._mutationObserver.disconnect();
115
122
 
116
123
  this.shadowRoot.removeEventListener('transitionstart', this.__bound_transitionEvents);
117
124
  this.shadowRoot.removeEventListener('transitionend', this.__bound_transitionEvents);
@@ -123,8 +130,13 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
123
130
  super.firstUpdated();
124
131
 
125
132
  this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
126
- this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
127
- this.__startObserving();
133
+ if (this._observeContentOnly) {
134
+ this.__reactToChanges();
135
+ this._resizeObserver.observe(this.__content);
136
+ } else {
137
+ this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
138
+ this.__startObserving();
139
+ }
128
140
 
129
141
  this.__bound_transitionEvents = this.__transitionEvents.bind(this);
130
142
  this.shadowRoot.addEventListener('transitionstart', this.__bound_transitionEvents);
@@ -138,6 +150,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
138
150
  'd2l-more-less-content': true,
139
151
  'd2l-more-less-transition': this.__transitionAdded
140
152
  };
153
+
154
+ // The .force-margin-scroll div is used to force content bottom margin to be included in scrollHeight calculations.
155
+ // The load and slotchange events can be removed when GAUD-8725-more-less-refactor-resizing is removed
141
156
  return html`
142
157
  <div
143
158
  id="${this.__contentId}"
@@ -145,9 +160,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
145
160
  style=${styleMap({ maxHeight: `${this.__maxHeight}` })}
146
161
  @focusin="${this.__focusIn}"
147
162
  @focusout="${this.__focusOut}"
148
- @load=${this.__reactToChanges}
149
- @slotchange=${this.#handleSlotChange}>
150
- <slot></slot>
163
+ @load=${this._observeContentOnly ? undefined : this.__reactToChanges}>
164
+ <slot @slotchange=${this._observeContentOnly ? undefined : this.#handleSlotChange}></slot>
165
+ ${this._observeContentOnly ? html`<div class="force-margin-scroll"></div>` : nothing}
151
166
  </div>
152
167
  <d2l-button-subtle
153
168
  class="d2l-more-less-toggle"
@@ -289,6 +304,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
289
304
  });
290
305
  }
291
306
 
307
+ // Remove when GAUD-8725-more-less-refactor-resizing is removed
292
308
  __isOwnMutation(mutation) {
293
309
  return mutation.target === this.__content
294
310
  && (mutation.type === 'style' || mutation.type === 'attributes');
@@ -299,6 +315,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
299
315
  this.__adjustToContent();
300
316
  }
301
317
 
318
+ // Remove when GAUD-8725-more-less-refactor-resizing is removed
302
319
  __reactToMutationChanges(mutations) {
303
320
  if (mutations
304
321
  && Array.isArray(mutations)
@@ -317,6 +334,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
317
334
  this.__content.scrollTo({ top: 0, behavior: 'instant' });
318
335
  }
319
336
 
337
+ // Remove when GAUD-8725-more-less-refactor-resizing is removed
320
338
  __startObserving() {
321
339
  this._resizeObserver.disconnect();
322
340
  this._mutationObserver.disconnect();
@@ -356,6 +374,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
356
374
  this.dispatchEvent(new CustomEvent(e.type, { bubbles: true, composed: true, detail: e.detail }));
357
375
  }
358
376
 
377
+ // Remove when GAUD-8725-more-less-refactor-resizing is removed
359
378
  #handleSlotChange() {
360
379
  this.__reactToChanges();
361
380
  this.__startObserving();
package/custom-elements.json CHANGED
@@ -11352,6 +11352,47 @@
11352
11352
  }
11353
11353
  ]
11354
11354
  },
11355
+ {
11356
+ "name": "d2l-more-less-test",
11357
+ "path": "./components/more-less/demo/more-less-test.js",
11358
+ "attributes": [
11359
+ {
11360
+ "name": "text",
11361
+ "type": "string",
11362
+ "default": "\"short\""
11363
+ },
11364
+ {
11365
+ "name": "margin",
11366
+ "type": "boolean",
11367
+ "default": "false"
11368
+ },
11369
+ {
11370
+ "name": "extraItems",
11371
+ "type": "number",
11372
+ "default": "0"
11373
+ }
11374
+ ],
11375
+ "properties": [
11376
+ {
11377
+ "name": "text",
11378
+ "attribute": "text",
11379
+ "type": "string",
11380
+ "default": "\"short\""
11381
+ },
11382
+ {
11383
+ "name": "margin",
11384
+ "attribute": "margin",
11385
+ "type": "boolean",
11386
+ "default": "false"
11387
+ },
11388
+ {
11389
+ "name": "extraItems",
11390
+ "attribute": "extraItems",
11391
+ "type": "number",
11392
+ "default": "0"
11393
+ }
11394
+ ]
11395
+ },
11355
11396
  {
11356
11397
  "name": "d2l-more-less",
11357
11398
  "path": "./components/more-less/more-less.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.187.0",
3
+ "version": "3.187.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",