@brightspace-ui/core 3.287.1 → 3.287.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 (6) hide show
  1. package/components/inputs/sass/radio.scss +4 -6
  2. package/components/inputs/sass/text.scss +6 -8
  3. package/components/inputs/sass/textarea.scss +0 -1
  4. package/components/page/page-divider-internal.js +16 -14
  5. package/package.json +1 -1
  6. package/components/colors/colors.scss +0 -86
package/components/inputs/sass/radio.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "../../colors/colors.scss";
2
-
3
1
  @mixin d2l-input-radio() {
4
2
  -webkit-appearance: none;
5
3
  -moz-appearance: none;
@@ -21,18 +19,18 @@
21
19
  }
22
20
  &,
23
21
  &:hover:disabled {
24
- background-color: colors.$d2l-color-regolith;
25
- border-color: colors.$d2l-color-galena;
22
+ background-color: var(--d2l-color-regolith);
23
+ border-color: var(--d2l-color-galena);
26
24
  border-width: 1px;
27
25
  }
28
26
  &:hover,
29
27
  &:focus {
30
- border-color: colors.$d2l-color-celestine;
28
+ border-color: var(--d2l-color-celestine);
31
29
  border-width: 2px;
32
30
  outline: none;
33
31
  }
34
32
  &[aria-invalid="true"] {
35
- border-color: colors.$d2l-color-cinnabar;
33
+ border-color: var(--d2l-color-cinnabar);
36
34
  }
37
35
  &:disabled {
38
36
  opacity: 0.5;
package/components/inputs/sass/text.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "../../colors/colors.scss";
2
-
3
1
  @mixin d2l-input-text(
4
2
  $include-pseudo-classes: true,
5
3
  $line-height: 1.2rem,
@@ -12,7 +10,7 @@
12
10
  border-width: 1px;
13
11
  box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
14
12
  box-sizing: border-box;
15
- color: colors.$d2l-color-ferrite;
13
+ color: var(--d2l-color-ferrite);
16
14
  display: inline-block;
17
15
  font-family: inherit;
18
16
  font-size: 0.8rem;
@@ -27,25 +25,25 @@
27
25
  width: 100%;
28
26
  &::placeholder,
29
27
  &::-ms-input-placeholder {
30
- color: colors.$d2l-color-galena;
28
+ color: var(--d2l-color-galena);
31
29
  font-size: 0.8rem;
32
30
  font-weight: 400;
33
31
  opacity: 1; /* Firefox has non-1 default */
34
32
  }
35
33
  &:hover,
36
34
  &:focus {
37
- border-color: colors.$d2l-color-celestine;
35
+ border-color: var(--d2l-color-celestine);
38
36
  border-width: 2px;
39
37
  outline: none;
40
38
  padding: $padding-focus;
41
39
  }
42
40
  &[aria-invalid="true"] {
43
- border-color: colors.$d2l-color-cinnabar;
41
+ border-color: var(--d2l-color-cinnabar);
44
42
  }
45
43
  &,
46
44
  &:hover:disabled,
47
45
  &[aria-invalid="true"]:disabled {
48
- border-color: colors.$d2l-color-galena;
46
+ border-color: var(--d2l-color-galena);
49
47
  border-width: 1px;
50
48
  padding: $padding;
51
49
  }
@@ -63,4 +61,4 @@
63
61
  width: 0;
64
62
  }
65
63
  }
66
- }
64
+ }
package/components/inputs/sass/textarea.scss CHANGED
@@ -1,4 +1,3 @@
1
- @use "../../colors/colors.scss";
2
1
  @use "./text.scss";
3
2
 
4
3
  @mixin d2l-input-textarea() {
package/components/page/page-divider-internal.js CHANGED
@@ -241,12 +241,13 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
241
241
  `;
242
242
  }
243
243
 
244
+ #clickedArrow;
244
245
  #clickedHandle = false;
245
246
 
246
247
  #getArrowVisibility() {
247
- if (this.panelType !== 'panel') return { showStartArrow: false, showEndArrow: false };
248
- const canShrink = !this.collapsed && this.currentSize > this.minSize;
249
- const canGrow = this.collapsed || this.currentSize < this.maxSize;
248
+ if (this.panelType !== 'panel' || this.collapsed) return { showStartArrow: false, showEndArrow: false };
249
+ const canShrink = this.currentSize > this.minSize;
250
+ const canGrow = this.currentSize < this.maxSize;
250
251
  const showStartArrow = this.panelPosition === 'start' ? canShrink : canGrow;
251
252
  const showEndArrow = this.panelPosition === 'start' ? canGrow : canShrink;
252
253
  return { showStartArrow, showEndArrow };
@@ -265,10 +266,18 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
265
266
  }
266
267
 
267
268
  #handleClick(e) {
268
- // Do not toggle until click event is received, to avoid clicking on elements under the handle in drawer mode
269
+ // Do not toggle/resize until click event is received,
270
+ // to avoid clicking on elements under the arrows in overlay mode or under the handle in drawer mode
269
271
  e.stopPropagation();
270
272
  if (this.collapsed || this.#clickedHandle) {
271
273
  this.#sendToggleEvent();
274
+ } else if (this.#clickedArrow) {
275
+ const endArrowClicked = this.#clickedArrow.dataset.position === 'end';
276
+ const shouldGrow = endArrowClicked === (this.panelPosition === 'start');
277
+
278
+ const step = (shouldGrow ? 1 : -1) * KEYBOARD_STEP;
279
+ const requestedSize = this.currentSize + step;
280
+ this.#sendResizeEvent(requestedSize);
272
281
  }
273
282
  }
274
283
 
@@ -313,17 +322,10 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
313
322
 
314
323
  const path = e.composedPath();
315
324
  this.#clickedHandle = path.some(el => el.classList?.contains('divider-handle'));
325
+ this.#clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
326
+ if (this.#clickedArrow) return; // Arrows don't support dragging
316
327
 
317
- const clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
318
- if (clickedArrow) {
319
- const endArrowClicked = clickedArrow.dataset.position === 'end';
320
- const shouldGrow = endArrowClicked === (this.panelPosition === 'start');
321
-
322
- const step = (shouldGrow ? 1 : -1) * KEYBOARD_STEP;
323
- const requestedSize = this.currentSize + step;
324
- this.#sendResizeEvent(requestedSize);
325
- return;
326
- }
328
+ // TO DO: Dragging
327
329
  }
328
330
 
329
331
  #sendResizeEvent(requestedSize) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.287.1",
3
+ "version": "3.287.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",
package/components/colors/colors.scss DELETED
@@ -1,86 +0,0 @@
1
- // basic grays (lightest to darkest)
2
- $d2l-color-regolith: #f9fbff !default;
3
- $d2l-color-sylvite: #f1f5fb !default;
4
- $d2l-color-gypsum: #e3e9f1 !default;
5
- $d2l-color-mica: #cdd5dc !default;
6
- $d2l-color-corundum: #b1b9be !default;
7
- $d2l-color-chromite: #90989d !default;
8
- $d2l-color-galena: #6e7477 !default;
9
- $d2l-color-tungsten: #494c4e !default;
10
- $d2l-color-ferrite: #202122 !default;
11
-
12
- // zircon
13
- $d2l-color-zircon-plus-2: #e0feff !default;
14
- $d2l-color-zircon-plus-1: #00d2ed !default;
15
- $d2l-color-zircon: #008eab !default;
16
- $d2l-color-zircon-minus-1: #035670 !default;
17
-
18
- // celestine
19
- $d2l-color-celestine-plus-2: #e8f8ff !default;
20
- $d2l-color-celestine-plus-1: #29a6ff !default;
21
- $d2l-color-celestine: #006fbf !default;
22
- $d2l-color-celestine-minus-1: #004489 !default;
23
-
24
- // amethyst
25
- $d2l-color-amethyst-plus-2: #f2f0ff !default;
26
- $d2l-color-amethyst-plus-1: #8982ff !default;
27
- $d2l-color-amethyst: #6038ff !default;
28
- $d2l-color-amethyst-minus-1: #4500db !default;
29
-
30
- // fluorite
31
- $d2l-color-fluorite-plus-2: #f9ebff !default;
32
- $d2l-color-fluorite-plus-1: #ce68fa !default;
33
- $d2l-color-fluorite: #9d1fd4 !default;
34
- $d2l-color-fluorite-minus-1: #6900a0 !default;
35
-
36
- // tourmaline
37
- $d2l-color-tourmaline-plus-2: #ffebf6 !default;
38
- $d2l-color-tourmaline-plus-1: #fd4e9d !default;
39
- $d2l-color-tourmaline: #d40067 !default;
40
- $d2l-color-tourmaline-minus-1: #990056 !default;
41
-
42
- // cinnabar
43
- $d2l-color-cinnabar-plus-2: #ffede8 !default;
44
- $d2l-color-cinnabar-plus-1: #ff575a !default;
45
- $d2l-color-cinnabar: #cd2026 !default;
46
- $d2l-color-cinnabar-minus-1: #990006 !default;
47
-
48
- // carnelian
49
- $d2l-color-carnelian-plus-1: #fff3e0 !default;
50
- $d2l-color-carnelian: #e87511 !default;
51
- $d2l-color-carnelian-minus-1: #ba4700 !default;
52
- $d2l-color-carnelian-minus-2: #7d2600 !default;
53
-
54
- // citrine
55
- $d2l-color-citrine-plus-1: #fff9d6 !default;
56
- $d2l-color-citrine: #ffba59 !default;
57
- $d2l-color-citrine-minus-1: #c47400 !default;
58
- $d2l-color-citrine-minus-2: #7a4300 !default;
59
-
60
- // peridot
61
- $d2l-color-peridot-plus-1: #efffd9 !default;
62
- $d2l-color-peridot: #8ad934 !default;
63
- $d2l-color-peridot-minus-1: #4a8f00 !default;
64
- $d2l-color-peridot-minus-2: #2f5e00 !default;
65
-
66
- // olivine
67
- $d2l-color-olivine-plus-1: #e7ffe3 !default;
68
- $d2l-color-olivine: #46a661 !default;
69
- $d2l-color-olivine-minus-1: #027a21 !default;
70
- $d2l-color-olivine-minus-2: #005614 !default;
71
-
72
- // malachite
73
- $d2l-color-malachite-plus-1: #e3fff5 !default;
74
- $d2l-color-malachite: #2de2c0 !default;
75
- $d2l-color-malachite-minus-1: #00a490 !default;
76
- $d2l-color-malachite-minus-2: #00635e !default;
77
-
78
- // primary accent
79
- $d2l-color-primary-accent-action: $d2l-color-celestine !default;
80
- $d2l-color-primary-accent-indicator: $d2l-color-carnelian !default;
81
-
82
- // feedback
83
- $d2l-color-feedback-error: $d2l-color-cinnabar !default;
84
- $d2l-color-feedback-warning: $d2l-color-carnelian !default;
85
- $d2l-color-feedback-success: $d2l-color-olivine !default;
86
- $d2l-color-feedback-action: $d2l-color-celestine !default;