@brightspace-ui/core 2.31.2 → 2.31.3

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/filter/README.md +43 -36
  2. package/components/filter/demo/filter-tags.html +9 -4
  3. package/components/filter/filter-tags.js +0 -1
  4. package/components/tag-list/tag-list.js +3 -1
  5. package/package.json +1 -1
package/components/filter/README.md CHANGED
@@ -239,47 +239,54 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
239
239
  import '@brightspace-ui/core/components/filter/filter-tags.js';
240
240
  </script>
241
241
  <style>
242
- d2l-filter-tags {
243
- max-width: calc(100% - 300px);
244
- }
245
-
246
- @media(max-width: 600px) {
247
- d2l-filter-tags {
242
+ .filter-wrapper {
243
+ display: flex;
244
+ justify-content: space-between;
245
+ }
246
+ d2l-filter-tags {
247
+ align-self: center;
248
+ position: relative;
249
+ width: 100%;
250
+ }
251
+
252
+ @media(max-width: 600px) {
253
+ .filter-wrapper {
248
254
  display: block;
249
255
  max-width: 100%;
250
256
  }
251
257
  }
252
258
  </style>
253
-
254
- <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
255
-
256
- <d2l-filter id="core-filter">
257
- <d2l-filter-dimension-set key="1" text="Dim 1">
258
- <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
259
- <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
260
- <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
261
- <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
262
- </d2l-filter-dimension-set>
263
- <d2l-filter-dimension-set key="2" text="Dim 2">
264
- <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
265
- <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
266
- <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
267
- </d2l-filter-dimension-set>
268
- </d2l-filter>
269
-
270
- <d2l-filter id="core-filter-2">
271
- <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
272
- <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
273
- <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
274
- <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
275
- <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
276
- </d2l-filter-dimension-set>
277
- <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
278
- <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
279
- <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
280
- <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
281
- </d2l-filter-dimension-set>
282
- </d2l-filter>
259
+ <div class="filter-wrapper">
260
+ <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
261
+
262
+ <d2l-filter id="core-filter">
263
+ <d2l-filter-dimension-set key="1" text="Dim 1">
264
+ <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
265
+ <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
266
+ <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
267
+ <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
268
+ </d2l-filter-dimension-set>
269
+ <d2l-filter-dimension-set key="2" text="Dim 2">
270
+ <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
271
+ <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
272
+ <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
273
+ </d2l-filter-dimension-set>
274
+ </d2l-filter>
275
+
276
+ <d2l-filter id="core-filter-2">
277
+ <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
278
+ <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
279
+ <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
280
+ <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
281
+ <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
282
+ </d2l-filter-dimension-set>
283
+ <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
284
+ <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
285
+ <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
286
+ <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
287
+ </d2l-filter-dimension-set>
288
+ </d2l-filter>
289
+ </div>
283
290
  ```
284
291
 
285
292
  <!-- docs: start hidden content -->
package/components/filter/demo/filter-tags.html CHANGED
@@ -11,6 +11,11 @@
11
11
  import '../filter-dimension-set-value.js';
12
12
  import '../filter-tags.js';
13
13
  </script>
14
+ <style>
15
+ d2l-demo-snippet {
16
+ max-width: 1400px;
17
+ }
18
+ </style>
14
19
  </head>
15
20
  <body unresolved class="d2l-typography">
16
21
 
@@ -23,14 +28,14 @@
23
28
  <d2l-filter id="core-filter">
24
29
  <d2l-filter-dimension-set key="1" text="Dim 1">
25
30
  <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
26
- <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
31
+ <d2l-filter-dimension-set-value selected text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
27
32
  <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
28
33
  <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
29
34
  </d2l-filter-dimension-set>
30
35
  <d2l-filter-dimension-set key="2" text="Dim 2">
31
- <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
32
- <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
33
- <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
36
+ <d2l-filter-dimension-set-value text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
37
+ <d2l-filter-dimension-set-value selected text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
38
+ <d2l-filter-dimension-set-value selected text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
34
39
  </d2l-filter-dimension-set>
35
40
  </d2l-filter>
36
41
 
package/components/filter/filter-tags.js CHANGED
@@ -34,7 +34,6 @@ class FilterTags extends RtlMixin(LocalizeCoreElement(LitElement)) {
34
34
  return [bodyCompactStyles, css`
35
35
  :host {
36
36
  display: inline-block;
37
- width: 100%;
38
37
  }
39
38
  :host([hidden]) {
40
39
  display: none;
package/components/tag-list/tag-list.js CHANGED
@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
3
3
  import { announce } from '../../helpers/announce.js';
4
4
  import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
+ import { getOffsetParent } from '../../helpers/dom.js';
6
7
  import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
7
8
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
8
9
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -133,7 +134,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
133
134
  });
134
135
  this._clearButtonResizeObserver.observe(clearButton);
135
136
 
136
- const container = this.shadowRoot.querySelector('.tag-list-outer-container');
137
+ let container = getOffsetParent(this);
138
+ if (!container || container.tagName === 'BODY') container = this.shadowRoot.querySelector('.tag-list-outer-container');
137
139
  this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
138
140
  this._resizeObserver.observe(container);
139
141
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.31.2",
3
+ "version": "2.31.3",
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",