@brightspace-ui/core 3.91.0 → 3.92.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.
Files changed (18) hide show
  1. package/components/dropdown/demo/dropdown-positioning.html +11 -21
  2. package/components/dropdown/dropdown-content-mixin.js +26 -86
  3. package/components/dropdown/dropdown-content-styles.js +5 -36
  4. package/components/dropdown/dropdown-opener-mixin.js +5 -29
  5. package/components/dropdown/dropdown-opener-styles.js +0 -3
  6. package/components/filter/demo/filter.html +0 -3
  7. package/components/filter/filter-dimension-set-date-time-range-value.js +0 -2
  8. package/components/filter/filter.js +1 -5
  9. package/components/inputs/input-date-range.js +0 -7
  10. package/components/inputs/input-date-time-range.js +0 -7
  11. package/components/inputs/input-date-time.js +0 -7
  12. package/components/inputs/input-date.js +2 -8
  13. package/components/inputs/input-time-range.js +0 -7
  14. package/components/inputs/input-time.js +2 -8
  15. package/components/popover/popover-mixin.js +0 -3
  16. package/components/table/demo/table.html +0 -3
  17. package/components/table/table-col-sort-button.js +2 -2
  18. package/package.json +1 -1
package/components/dropdown/demo/dropdown-positioning.html CHANGED
@@ -1,14 +1,9 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
-
4
3
  <head>
5
4
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script>
9
- const urlParams = new URLSearchParams(window.location.search);
10
- window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => (urlParams.get('position') === 'fixed') } } } } };
11
- </script>
12
7
  <script type="module">
13
8
  import '../../demo/demo-page.js';
14
9
  import '../../button/button.js';
@@ -19,19 +14,18 @@
19
14
  import '../../table/demo/table-test.js';
20
15
  </script>
21
16
  </head>
22
-
23
17
  <body unresolved>
24
18
 
25
- <d2l-demo-page page-title="d2l-dropdown">
19
+ <d2l-demo-page page-title="d2l-dropdown (positioning)">
26
20
 
27
21
  <h2>Dropdown (in a scrollable container)</h2>
28
22
  <d2l-demo-snippet>
29
23
  <template>
30
24
  <div style="height: 250px; overflow: scroll;">
31
25
  <p>Gabion warp American Main gunwalls cutlass gally cable gibbet jib keel. Trysail chantey swing the lead hempen halter hang the jib chase Jack Tar furl galleon scurvy. Brig splice the main brace provost pink rutters tender heave to Shiver me timbers belaying pin Brethren of the Coast.</p>
32
- <d2l-dropdown prefer-fixed-positioning>
26
+ <d2l-dropdown>
33
27
  <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
34
- <d2l-dropdown-content max-width="400" prefer-fixed-positioning>
28
+ <d2l-dropdown-content max-width="400">
35
29
  <a href="https://youtu.be/9ze87zQFSak">Google</a>
36
30
  <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
37
31
  <a href="http://www.desire2learn.com">D2L</a>
@@ -56,13 +50,13 @@
56
50
 
57
51
  <d2l-demo-snippet>
58
52
  <template>
59
- <d2l-dropdown prefer-fixed-positioning>
53
+ <d2l-dropdown>
60
54
  <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
61
- <d2l-dropdown-content max-width="400" prefer-fixed-positioning>
55
+ <d2l-dropdown-content max-width="400">
62
56
  <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign.</p>
63
- <d2l-dropdown prefer-fixed-positioning>
57
+ <d2l-dropdown>
64
58
  <d2l-button-subtle class="d2l-dropdown-opener">Open Nested!</d2l-button-subtle>
65
- <d2l-dropdown-content max-width="600" align="start" prefer-fixed-positioning>
59
+ <d2l-dropdown-content max-width="600" align="start">
66
60
  <a href="https://youtu.be/9ze87zQFSak">Google</a>
67
61
  <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
68
62
  <a href="http://www.desire2learn.com">D2L</a>
@@ -82,9 +76,9 @@
82
76
  <d2l-dialog id="dialog1" title-text="Dialog Title">
83
77
  <div>
84
78
  <p>Bilge tack furl dance the hempen jig fathom weigh anchor mizzen Blimey Jack Ketch flogging. Lee galleon avast schooner long clothes scuppers pinnace bucko deadlights gibbet. Nipper brigantine Buccaneer Gold Road matey gangway booty tender killick Brethren of the Coast.</p>
85
- <d2l-dropdown prefer-fixed-positioning>
79
+ <d2l-dropdown>
86
80
  <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
87
- <d2l-dropdown-content max-width="400" prefer-fixed-positioning>
81
+ <d2l-dropdown-content max-width="400">
88
82
  <a href="https://youtu.be/9ze87zQFSak">Google</a>
89
83
  <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
90
84
  <a href="http://www.desire2learn.com">D2L</a>
@@ -111,9 +105,9 @@
111
105
  <template>
112
106
  <div>
113
107
  <div id="mutations-above"></div>
114
- <d2l-dropdown prefer-fixed-positioning>
108
+ <d2l-dropdown>
115
109
  <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
116
- <d2l-dropdown-content max-width="400" prefer-fixed-positioning>
110
+ <d2l-dropdown-content max-width="400">
117
111
  <d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
118
112
  </d2l-dropdown-content>
119
113
  </d2l-dropdown>
@@ -129,9 +123,5 @@
129
123
  </template>
130
124
  </d2l-demo-snippet>
131
125
 
132
- <script>
133
- document.querySelector('d2l-demo-page').pageTitle = `d2l-dropdown (${ window.D2L.LP.Web.UI.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) ? 'fixed' : 'relative' })`;
134
- </script>
135
126
  </body>
136
-
137
127
  </html>
package/components/dropdown/dropdown-content-mixin.js CHANGED
@@ -189,14 +189,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
189
189
  reflect: true,
190
190
  attribute: 'opened-above'
191
191
  },
192
- /**
193
- * Temporary.
194
- * @ignore
195
- */
196
- preferFixedPositioning: {
197
- type: Boolean,
198
- attribute: 'prefer-fixed-positioning'
199
- },
200
192
  /**
201
193
  * Optionally render a d2l-focus-trap around the dropdown content
202
194
  * @type {boolean}
@@ -225,11 +217,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
225
217
  attribute: 'dropdown-content',
226
218
  reflect: true
227
219
  },
228
- _fixedPositioning: {
229
- type: Boolean,
230
- attribute: '_fixed-positioning',
231
- reflect: true
232
- },
233
220
  _useMobileStyling: {
234
221
  type: Boolean,
235
222
  attribute: 'data-mobile',
@@ -370,12 +357,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
370
357
  });
371
358
  }
372
359
 
373
- willUpdate(changedProperties) {
374
- if (this._fixedPositioning === undefined || changedProperties.has('preferFixedPositioning')) {
375
- this._fixedPositioning = (window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) && this.preferFixedPositioning);
376
- }
377
- }
378
-
379
360
  close() {
380
361
  const hide = () => {
381
362
  this._closing = false;
@@ -460,7 +441,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
460
441
  }
461
442
 
462
443
  __addRepositionHandlers() {
463
- if (!this._fixedPositioning) return;
464
444
 
465
445
  const isScrollable = (node, prop) => {
466
446
  const value = window.getComputedStyle(node, null).getPropertyValue(prop);
@@ -722,16 +702,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
722
702
  /* don't let dropdown content horizontally overflow viewport */
723
703
  this._width = null;
724
704
 
725
- const openerPosition = window.getComputedStyle(opener, null).getPropertyValue('position'); // todo: cleanup when switched to fixed positioning
726
705
  const boundingContainer = getBoundingAncestor(target.parentNode);
727
- const boundingContainerRect = boundingContainer.getBoundingClientRect(); // todo: cleanup when switched to fixed positioning
728
706
  const scrollHeight = boundingContainer.scrollHeight;
729
707
 
730
708
  await this.updateComplete;
731
709
 
732
- // position check in case consuming app (LMS) has overriden position to make content absolute wrt document
733
- const bounded = (!this._fixedPositioning && openerPosition === 'relative' && boundingContainer !== document.documentElement);
734
-
735
710
  const adjustPosition = async() => {
736
711
 
737
712
  const targetRect = target.getBoundingClientRect();
@@ -745,45 +720,21 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
745
720
  width: contentRect.width
746
721
  };
747
722
 
748
- let spaceAround;
749
- let spaceAroundScroll;
750
- if (bounded) {
751
-
752
- spaceAround = this._constrainSpaceAround({
753
- // allow for target offset + outer margin
754
- above: targetRect.top - boundingContainerRect.top - this._verticalOffset - outerMarginTopBottom,
755
- // allow for target offset + outer margin
756
- below: boundingContainerRect.bottom - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
757
- // allow for outer margin
758
- left: targetRect.left - boundingContainerRect.left - 20,
759
- // allow for outer margin
760
- right: boundingContainerRect.right - targetRect.right - 20
761
- }, spaceRequired, targetRect);
762
-
763
- spaceAroundScroll = this._constrainSpaceAround({
764
- above: targetRect.top - boundingContainerRect.top + boundingContainer.scrollTop,
765
- below: scrollHeight - targetRect.bottom + boundingContainerRect.top - boundingContainer.scrollTop
766
- }, spaceRequired, targetRect);
767
-
768
- } else {
769
-
770
- spaceAround = this._constrainSpaceAround({
771
- // allow for target offset + outer margin
772
- above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
773
- // allow for target offset + outer margin
774
- below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
775
- // allow for outer margin
776
- left: targetRect.left - 20,
777
- // allow for outer margin
778
- right: document.documentElement.clientWidth - targetRect.right - 15
779
- }, spaceRequired, targetRect);
780
-
781
- spaceAroundScroll = this._constrainSpaceAround({
782
- above: targetRect.top + document.documentElement.scrollTop,
783
- below: scrollHeight - targetRect.bottom - document.documentElement.scrollTop
784
- }, spaceRequired, targetRect);
785
-
786
- }
723
+ const spaceAround = this._constrainSpaceAround({
724
+ // allow for target offset + outer margin
725
+ above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
726
+ // allow for target offset + outer margin
727
+ below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
728
+ // allow for outer margin
729
+ left: targetRect.left - 20,
730
+ // allow for outer margin
731
+ right: document.documentElement.clientWidth - targetRect.right - 15
732
+ }, spaceRequired, targetRect);
733
+
734
+ const spaceAroundScroll = this._constrainSpaceAround({
735
+ above: targetRect.top + document.documentElement.scrollTop,
736
+ below: scrollHeight - targetRect.bottom - document.documentElement.scrollTop
737
+ }, spaceRequired, targetRect);
787
738
 
788
739
  if (options.updateAboveBelow) {
789
740
  this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
@@ -813,7 +764,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
813
764
  };
814
765
 
815
766
  const scrollWidth = Math.max(header.scrollWidth, content.scrollWidth, footer.scrollWidth);
816
- const availableWidth = (bounded ? boundingContainerRect.width - 60 : window.innerWidth - 40);
767
+ const availableWidth = window.innerWidth - 40;
817
768
  this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth) ;
818
769
 
819
770
  await this.updateComplete;
@@ -822,8 +773,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
822
773
  }
823
774
 
824
775
  __removeRepositionHandlers() {
825
- if (!this._fixedPositioning) return;
826
-
827
776
  this._scrollablesObserved?.forEach(node => {
828
777
  node.removeEventListener('scroll', this.__reposition);
829
778
  });
@@ -1112,7 +1061,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
1112
1061
 
1113
1062
  _getPointerPosition(targetRect) {
1114
1063
  const position = {};
1115
- if (!this._fixedPositioning) return position;
1116
1064
 
1117
1065
  const pointer = this.__getPointer();
1118
1066
  if (!pointer) return position;
@@ -1146,28 +1094,20 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
1146
1094
  const position = {};
1147
1095
  const isRTL = this.getAttribute('dir') === 'rtl';
1148
1096
  const positionXAdjustment = this._getPositionXAdjustment(spaceAround, targetRect, contentRect);
1149
- if (this._fixedPositioning) {
1150
- if (positionXAdjustment !== null) {
1151
- if (!isRTL) {
1152
- position.left = targetRect.left + positionXAdjustment;
1153
- } else {
1154
- position.right = window.innerWidth - targetRect.left - targetRect.width + positionXAdjustment;
1155
- }
1156
- }
1157
- if (this.openedAbove) {
1158
- position.bottom = window.innerHeight - targetRect.top + this._verticalOffset;
1097
+
1098
+ if (positionXAdjustment !== null) {
1099
+ if (!isRTL) {
1100
+ position.left = targetRect.left + positionXAdjustment;
1159
1101
  } else {
1160
- position.top = targetRect.top + targetRect.height + this._verticalOffset;
1102
+ position.right = window.innerWidth - targetRect.left - targetRect.width + positionXAdjustment;
1161
1103
  }
1104
+ }
1105
+ if (this.openedAbove) {
1106
+ position.bottom = window.innerHeight - targetRect.top + this._verticalOffset;
1162
1107
  } else {
1163
- if (positionXAdjustment !== null) {
1164
- if (!isRTL) {
1165
- position.left = positionXAdjustment;
1166
- } else {
1167
- position.right = positionXAdjustment;
1168
- }
1169
- }
1108
+ position.top = targetRect.top + targetRect.height + this._verticalOffset;
1170
1109
  }
1110
+
1171
1111
  return position;
1172
1112
  }
1173
1113
 
package/components/dropdown/dropdown-content-styles.js CHANGED
@@ -3,7 +3,6 @@ import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
3
3
  import { css } from 'lit';
4
4
 
5
5
  const pointerLength = 16;
6
- const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
7
6
 
8
7
  export const dropdownContentStyles = css`
9
8
 
@@ -18,16 +17,12 @@ export const dropdownContentStyles = css`
18
17
  color: var(--d2l-dropdown-foreground-color);
19
18
  display: none;
20
19
  left: 0;
21
- position: absolute;
20
+ position: fixed;
22
21
  text-align: left;
23
- top: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
22
+ top: 0;
24
23
  width: 100%;
25
24
  z-index: 998; /* position on top of floating buttons */
26
25
  }
27
- :host([_fixed-positioning]) {
28
- position: fixed;
29
- top: 0;
30
- }
31
26
 
32
27
  :host([theme="dark"]) {
33
28
  --d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
@@ -46,7 +41,7 @@ export const dropdownContentStyles = css`
46
41
 
47
42
  :host([opened-above]) {
48
43
  animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
49
- bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
44
+ bottom: 0;
50
45
  top: auto;
51
46
  }
52
47
 
@@ -57,39 +52,16 @@ export const dropdownContentStyles = css`
57
52
 
58
53
  :host([data-mobile][opened-above]:not([mobile-tray])) {
59
54
  animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
60
- bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
61
- top: auto;
62
- }
63
-
64
- :host([_fixed-positioning][opened-above]),
65
- :host([_fixed-positioning][data-mobile][opened-above]:not([mobile-tray])) {
66
55
  bottom: 0;
56
+ top: auto;
67
57
  }
68
58
 
69
59
  .d2l-dropdown-content-pointer {
70
60
  clip: rect(-5px, 21px, 8px, -7px);
71
61
  display: inline-block;
72
- left: calc(50% - 7px); /* todo: cleanup when switched to fixed positioning */
73
62
  position: absolute;
74
- top: -7px; /* todo: cleanup when switched to fixed positioning */
75
63
  z-index: 1;
76
64
  }
77
- :host([_fixed-positioning][dir="rtl"]) .d2l-dropdown-content-pointer {
78
- left: auto;
79
- }
80
-
81
- :host([align="start"]) .d2l-dropdown-content-pointer,
82
- :host([align="end"][dir="rtl"]) .d2l-dropdown-content-pointer {
83
- /* todo: cleanup when switched to fixed positioning */
84
- left: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
85
- right: auto;
86
- }
87
- :host([align="end"]) .d2l-dropdown-content-pointer,
88
- :host([align="start"][dir="rtl"]) .d2l-dropdown-content-pointer {
89
- /* todo: cleanup when switched to fixed positioning */
90
- left: auto;
91
- right: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
92
- }
93
65
 
94
66
  .d2l-dropdown-content-pointer > div {
95
67
  background-color: var(--d2l-dropdown-background-color);
@@ -103,13 +75,10 @@ export const dropdownContentStyles = css`
103
75
  }
104
76
 
105
77
  :host([opened-above]) .d2l-dropdown-content-pointer {
106
- bottom: -8px;
78
+ bottom: auto;
107
79
  clip: rect(9px, 21px, 22px, -3px);
108
80
  top: auto;
109
81
  }
110
- :host([_fixed-positioning][opened-above]) .d2l-dropdown-content-pointer {
111
- bottom: auto;
112
- }
113
82
 
114
83
  :host([opened-above]) .d2l-dropdown-content-pointer > div {
115
84
  box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
package/components/dropdown/dropdown-opener-mixin.js CHANGED
@@ -51,19 +51,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
51
51
  type: Boolean,
52
52
  attribute: 'open-on-hover'
53
53
  },
54
- /**
55
- * Temporary.
56
- * @ignore
57
- */
58
- preferFixedPositioning: {
59
- type: Boolean,
60
- attribute: 'prefer-fixed-positioning'
61
- },
62
- _fixedPositioning: {
63
- type: Boolean,
64
- attribute: '_fixed-positioning',
65
- reflect: true,
66
- },
67
54
  _isHovering: { type: Boolean },
68
55
  _isOpenedViaClick: { type: Boolean },
69
56
  _isFading: { type: Boolean }
@@ -98,7 +85,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
98
85
  this.addEventListener('mouseenter', this.__onMouseEnter);
99
86
  this.addEventListener('mouseleave', this.__onMouseLeave);
100
87
 
101
- if (this._fixedPositioning && this.dropdownOpened) {
88
+ if (this.dropdownOpened) {
102
89
  intersectionObserver.observe(this);
103
90
  }
104
91
  if (this.openOnHover) {
@@ -114,9 +101,8 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
114
101
  this.removeEventListener('mouseenter', this.__onMouseEnter);
115
102
  this.removeEventListener('mouseleave', this.__onMouseLeave);
116
103
 
117
- if (this._fixedPositioning) {
118
- intersectionObserver.unobserve(this);
119
- }
104
+ intersectionObserver.unobserve(this);
105
+
120
106
  if (this.openOnHover) {
121
107
  document.body.removeEventListener('mouseup', this._onOutsideClick);
122
108
  }
@@ -148,12 +134,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
148
134
  }
149
135
  }
150
136
 
151
- willUpdate(changedProperties) {
152
- if (this._fixedPositioning === undefined || changedProperties.has('preferFixedPositioning')) {
153
- this._fixedPositioning = (window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) && this.preferFixedPositioning);
154
- }
155
- }
156
-
157
137
  /* used by open-on-hover option */
158
138
  async closeDropdown(fadeOut) {
159
139
  this.dropdownOpened = false;
@@ -219,9 +199,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
219
199
  }
220
200
 
221
201
  __onClosed() {
222
- if (this._fixedPositioning) {
223
- intersectionObserver.unobserve(this);
224
- }
202
+ intersectionObserver.unobserve(this);
225
203
 
226
204
  const opener = this.getOpenerElement();
227
205
  if (!opener) {
@@ -303,9 +281,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
303
281
  opener.setAttribute('active', 'true');
304
282
  this._isFading = false;
305
283
 
306
- if (this._fixedPositioning) {
307
- intersectionObserver.observe(this);
308
- }
284
+ intersectionObserver.observe(this);
309
285
  }
310
286
 
311
287
  __onOpenerMouseUp(e) {
package/components/dropdown/dropdown-opener-styles.js CHANGED
@@ -5,9 +5,6 @@ export const dropdownOpenerStyles = css`
5
5
  display: inline-block;
6
6
  outline: none;
7
7
  overflow: visible;
8
- position: relative;
9
- }
10
- :host([_fixed-positioning]) {
11
8
  position: static;
12
9
  }
13
10
  :host([hidden]) {
package/components/filter/demo/filter.html CHANGED
@@ -15,9 +15,6 @@
15
15
  import './filter-search-demo.js';
16
16
  import './filter-load-more-demo.js';
17
17
  </script>
18
- <script>
19
- window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
20
- </script>
21
18
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
22
19
  <meta charset="UTF-8">
23
20
  </head>
package/components/filter/filter-dimension-set-date-time-range-value.js CHANGED
@@ -144,7 +144,6 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
144
144
  inclusive-date-range
145
145
  label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
146
146
  label-hidden
147
- prefer-fixed-positioning
148
147
  start-value="${ifDefined(this.startValue ? getLocalDateTimeFromUTCDateTime(this.startValue) : undefined)}"
149
148
  ></d2l-input-date-range>`
150
149
  : html`<d2l-input-date-time-range
@@ -153,7 +152,6 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
153
152
  end-value="${ifDefined(this.endValue)}"
154
153
  label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
155
154
  label-hidden
156
- prefer-fixed-positioning
157
155
  start-value="${ifDefined(this.startValue)}"
158
156
  ></d2l-input-date-time-range>
159
157
  `;
package/components/filter/filter.js CHANGED
@@ -219,7 +219,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
219
219
  /* Needed to "undo" the menu-item style for multiple dimensions */
220
220
  d2l-hierarchical-view {
221
221
  cursor: auto;
222
- overflow: auto; /* remove with GAUD-131-dropdown-fixed-positioning flag clean up */
223
222
  }
224
223
 
225
224
  d2l-loading-spinner {
@@ -287,7 +286,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
287
286
  no-padding-header
288
287
  no-padding
289
288
  ?opened="${this.opened}"
290
- prefer-fixed-positioning
291
289
  ?trap-focus="${!this._isDimensionEmpty(this._dimensions[0])}">
292
290
  ${header}
293
291
  ${dimensions}
@@ -301,7 +299,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
301
299
  mobile-breakpoint="768"
302
300
  no-padding-header
303
301
  ?opened="${this.opened}"
304
- prefer-fixed-positioning
305
302
  trap-focus>
306
303
  ${header}
307
304
  <d2l-menu label="${this.localize('components.filter.filters')}">
@@ -326,8 +323,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
326
323
  @d2l-dropdown-open="${this._handleDropdownOpen}"
327
324
  @d2l-dropdown-position="${this._stopPropagation}"
328
325
  class="vdiff-target"
329
- ?disabled="${this.disabled}"
330
- prefer-fixed-positioning>
326
+ ?disabled="${this.disabled}">
331
327
  <d2l-button-subtle
332
328
  class="d2l-dropdown-opener"
333
329
  description="${description}"
package/components/inputs/input-date-range.js CHANGED
@@ -93,11 +93,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
93
93
  * @type {string}
94
94
  */
95
95
  minValue: { attribute: 'min-value', reflect: true, type: String },
96
- /**
97
- * Temporary.
98
- * @ignore
99
- */
100
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
101
96
  /**
102
97
  * Indicates that values are required
103
98
  * @type {boolean}
@@ -203,7 +198,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
203
198
  max-value="${ifDefined(this.maxValue)}"
204
199
  min-value="${ifDefined(this.minValue)}"
205
200
  ?opened="${this.startOpened}"
206
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
207
201
  ?required="${this.required}"
208
202
  ?skeleton="${this.skeleton}"
209
203
  slot="left"
@@ -222,7 +216,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
222
216
  max-value="${ifDefined(this.maxValue)}"
223
217
  min-value="${ifDefined(this.minValue)}"
224
218
  ?opened="${this.endOpened}"
225
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
226
219
  ?required="${this.required}"
227
220
  ?skeleton="${this.skeleton}"
228
221
  slot="right"
package/components/inputs/input-date-time-range.js CHANGED
@@ -131,11 +131,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
131
131
  * @type {string}
132
132
  */
133
133
  minValue: { attribute: 'min-value', reflect: true, type: String },
134
- /**
135
- * Temporary.
136
- * @ignore
137
- */
138
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
139
134
  /**
140
135
  * Indicates that values are required
141
136
  * @type {boolean}
@@ -254,7 +249,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
254
249
  max-value="${ifDefined(this.maxValue)}"
255
250
  min-value="${ifDefined(this.minValue)}"
256
251
  ?opened="${this.startOpened}"
257
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
258
252
  ?required="${this.required}"
259
253
  ?skeleton="${this.skeleton}"
260
254
  time-default-value="startOfDay"
@@ -277,7 +271,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
277
271
  max-value="${ifDefined(this.maxValue)}"
278
272
  min-value="${ifDefined(this.minValue)}"
279
273
  ?opened="${this.endOpened}"
280
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
281
274
  ?required="${this.required}"
282
275
  ?skeleton="${this.skeleton}"
283
276
  time-default-value="endOfDay"
package/components/inputs/input-date-time.js CHANGED
@@ -76,11 +76,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
76
76
  * @type {boolean}
77
77
  */
78
78
  opened: { type: Boolean },
79
- /**
80
- * Temporary.
81
- * @ignore
82
- */
83
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
84
79
  /**
85
80
  * Indicates that a value is required
86
81
  * @type {boolean}
@@ -253,7 +248,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
253
248
  label-hidden
254
249
  .labelRequired="${false}"
255
250
  max-height="430"
256
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
257
251
  ?required="${this.required}"
258
252
  ?skeleton="${this.skeleton}"
259
253
  .value="${parsedValue}">
@@ -283,7 +277,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
283
277
  max-value="${ifDefined(this._maxValueLocalized)}"
284
278
  min-value="${ifDefined(this._minValueLocalized)}"
285
279
  ?opened="${dateOpened}"
286
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
287
280
  ?required="${this.required}"
288
281
  ?skeleton="${this.skeleton}"
289
282
  style="${styleMap(dateStyle)}"
package/components/inputs/input-date.js CHANGED
@@ -68,11 +68,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
68
68
  * @type {boolean}
69
69
  */
70
70
  opened: { type: Boolean, reflect: true },
71
- /**
72
- * Temporary.
73
- * @ignore
74
- */
75
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
76
71
  /**
77
72
  * Indicates that a value is required
78
73
  * @type {boolean}
@@ -264,8 +259,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
264
259
  trap-focus
265
260
  no-auto-focus
266
261
  mobile-tray="bottom"
267
- no-padding
268
- ?prefer-fixed-positioning="${this.preferFixedPositioning}">
262
+ no-padding>
269
263
  <d2l-calendar
270
264
  @d2l-calendar-selected="${this._handleDateSelected}"
271
265
  label="${ifDefined(this.label)}"
@@ -285,7 +279,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
285
279
  <div>${shortDateFormat}</div>
286
280
  </div>
287
281
  ${tooltip}
288
- <d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
282
+ <d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open>
289
283
  <d2l-input-text
290
284
  ?novalidate="${this.noValidate}"
291
285
  aria-invalid="${this.invalid ? 'true' : 'false'}"
package/components/inputs/input-time-range.js CHANGED
@@ -95,11 +95,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
95
95
  * @type {boolean}
96
96
  */
97
97
  labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
98
- /**
99
- * Temporary.
100
- * @ignore
101
- */
102
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
103
98
  /**
104
99
  * Indicates that values are required
105
100
  * @type {boolean}
@@ -253,7 +248,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
253
248
  label="${startLabel}"
254
249
  ?label-hidden="${this.childLabelsHidden}"
255
250
  ?opened="${this.startOpened}"
256
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
257
251
  ?required="${this.required}"
258
252
  ?skeleton="${this.skeleton}"
259
253
  slot="left"
@@ -272,7 +266,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
272
266
  label="${endLabel}"
273
267
  ?label-hidden="${this.childLabelsHidden}"
274
268
  ?opened="${this.endOpened}"
275
- ?prefer-fixed-positioning="${this.preferFixedPositioning}"
276
269
  ?required="${this.required}"
277
270
  ?skeleton="${this.skeleton}"
278
271
  slot="right"
package/components/inputs/input-time.js CHANGED
@@ -154,11 +154,6 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
154
154
  * @type {boolean}
155
155
  */
156
156
  opened: { type: Boolean },
157
- /**
158
- * Temporary.
159
- * @ignore
160
- */
161
- preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
162
157
  /**
163
158
  * Indicates that a value is required
164
159
  * @type {boolean}
@@ -342,7 +337,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
342
337
  class="${this.label && !this.labelHidden && !this.labelledBy ? 'd2l-input-label d2l-skeletize' : 'd2l-offscreen'}"
343
338
  for="${this._dropdownId}-input"
344
339
  id="${this._dropdownId}-label">${this.label}</label>
345
- <d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}" ?prefer-fixed-positioning="${this.preferFixedPositioning}">
340
+ <d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}">
346
341
  <input
347
342
  aria-invalid="${this.invalid ? 'true' : 'false'}"
348
343
  aria-controls="${this._dropdownId}"
@@ -366,8 +361,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
366
361
  no-padding-footer
367
362
  max-height="${ifDefined(this.maxHeight)}"
368
363
  min-width="195"
369
- ?opened="${opened}"
370
- ?prefer-fixed-positioning="${this.preferFixedPositioning}">
364
+ ?opened="${opened}">
371
365
  <d2l-menu
372
366
  aria-labelledby="${this._dropdownId}-label"
373
367
  class="d2l-input-time-menu"
package/components/popover/popover-mixin.js CHANGED
@@ -20,9 +20,6 @@ const pointerLength = 16;
20
20
  const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
21
21
  const isSupported = ('popover' in HTMLElement.prototype);
22
22
 
23
- // eslint-disable-next-line no-console
24
- console.log('Popover', isSupported);
25
-
26
23
  export const PopoverMixin = superclass => class extends superclass {
27
24
 
28
25
  static get properties() {
package/components/table/demo/table.html CHANGED
@@ -8,9 +8,6 @@
8
8
  import '../../demo/demo-page.js';
9
9
  import './table-test.js';
10
10
  </script>
11
- <script>
12
- window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
13
- </script>
14
11
  </head>
15
12
  <body unresolved>
16
13
 
package/components/table/table-col-sort-button.js CHANGED
@@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
184
184
  <slot></slot>${iconView}
185
185
  </button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
186
186
  if (this._hasDropdownItems) {
187
- return html`<d2l-dropdown prefer-fixed-positioning>
187
+ return html`<d2l-dropdown>
188
188
  ${button}
189
- <d2l-dropdown-menu no-pointer align="start" vertical-offset="0" prefer-fixed-positioning>
189
+ <d2l-dropdown-menu no-pointer align="start" vertical-offset="4">
190
190
  <d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
191
191
  <slot name="items" @slotchange="${this._handleSlotChange}"></slot>
192
192
  </d2l-menu>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.91.0",
3
+ "version": "3.92.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",