@brightspace-ui/core 3.250.0 → 3.251.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 (8) hide show
  1. package/components/inputs/input-checkbox-styles.js +119 -0
  2. package/components/inputs/input-checkbox.js +2 -108
  3. package/components/table/table-wrapper.js +1 -1
  4. package/components/tabs/tab-mixin.js +10 -6
  5. package/components/tabs/tabs.js +3 -2
  6. package/custom-elements.json +19 -23
  7. package/helpers/internal/css.js +1 -1
  8. package/package.json +1 -1
package/components/inputs/input-checkbox-styles.js ADDED
@@ -0,0 +1,119 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import { _isValidCssSelector } from '../../helpers/internal/css.js';
3
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
4
+
5
+ registerSemanticVariableForSvgImageUrl(
6
+ '--d2l-input-checkbox-check-image',
7
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
8
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
9
+ </svg>`
10
+ );
11
+
12
+ registerSemanticVariableForSvgImageUrl(
13
+ '--d2l-input-checkbox-indeterminate-image',
14
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
16
+ </svg>`
17
+ );
18
+
19
+ export const cssSizes = {
20
+ inputBoxSize: 1.2,
21
+ checkboxMargin: 0.5,
22
+ };
23
+
24
+ /**
25
+ * A private helper method that should not be used by general consumers
26
+ */
27
+ export const _generateInputCheckboxStyles = (selector) => {
28
+ if (!_isValidCssSelector(selector)) return;
29
+
30
+ const selectorCSS = unsafeCSS(selector);
31
+ return css`
32
+ ${selectorCSS} {
33
+ --d2l-input-checkbox-background-image: none;
34
+ --d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
35
+ --d2l-input-checkbox-background-image-disabled:
36
+ linear-gradient(
37
+ var(--d2l-theme-background-color-interactive-faint-disabled),
38
+ var(--d2l-theme-background-color-interactive-faint-disabled)
39
+ ),
40
+ var(--d2l-input-checkbox-background-image);
41
+ -webkit-appearance: none;
42
+ -moz-appearance: none;
43
+ appearance: none;
44
+ background-image: var(--d2l-input-checkbox-background-image);
45
+ background-position: center center;
46
+ background-repeat: no-repeat;
47
+ background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
48
+ border-radius: 0.3rem;
49
+ border-style: solid;
50
+ box-sizing: border-box;
51
+ display: inline-block;
52
+ height: ${cssSizes.inputBoxSize}rem;
53
+ margin: 0;
54
+ padding: 0;
55
+ vertical-align: middle;
56
+ width: ${cssSizes.inputBoxSize}rem;
57
+ }
58
+ ${selectorCSS}:checked {
59
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
60
+ }
61
+ ${selectorCSS}:indeterminate {
62
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
63
+ }
64
+ ${selectorCSS},
65
+ ${selectorCSS}:hover:disabled {
66
+ background-color: var(--d2l-input-checkbox-background-color);
67
+ border-color: var(--d2l-theme-border-color-emphasized);
68
+ border-width: 1px;
69
+ }
70
+ ${selectorCSS}:hover:disabled {
71
+ border-color: var(--d2l-theme-border-color-disabled);
72
+ }
73
+ ${selectorCSS}:hover,
74
+ ${selectorCSS}:focus,
75
+ ${selectorCSS}.d2l-input-checkbox-focus,
76
+ :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
77
+ border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
78
+ border-width: 2px;
79
+ outline: none;
80
+ }
81
+ ${selectorCSS}:disabled,
82
+ ${selectorCSS}:where([aria-disabled="true"]) {
83
+ background-image: var(--d2l-input-checkbox-background-image-disabled);
84
+ border-color: var(--d2l-theme-border-color-disabled);
85
+ }
86
+ @media (forced-colors: active) {
87
+ ${selectorCSS}:checked,
88
+ ${selectorCSS}:indeterminate {
89
+ background-image: none;
90
+ position: relative;
91
+ }
92
+ ${selectorCSS}:checked::after,
93
+ ${selectorCSS}:indeterminate::after {
94
+ background-color: FieldText;
95
+ content: "";
96
+ display: block;
97
+ height: ${cssSizes.inputBoxSize}rem;
98
+ left: 50%;
99
+ position: absolute;
100
+ top: 50%;
101
+ transform: translate(-50%, -50%);
102
+ width: ${cssSizes.inputBoxSize}rem;
103
+ }
104
+
105
+ ${selectorCSS}:disabled,
106
+ ${selectorCSS}:where([aria-disabled="true"]) {
107
+ opacity: var(--d2l-theme-opacity-disabled-control);
108
+ }
109
+
110
+ ${selectorCSS}:checked::after {
111
+ mask-image: var(--d2l-input-checkbox-check-image);
112
+ }
113
+
114
+ ${selectorCSS}:indeterminate::after {
115
+ mask-image: var(--d2l-input-checkbox-indeterminate-image);
116
+ }
117
+ }
118
+ `;
119
+ };
package/components/inputs/input-checkbox.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '../expand-collapse/expand-collapse-content.js';
2
2
  import '../tooltip/tooltip.js';
3
+ import { _generateInputCheckboxStyles, cssSizes } from './input-checkbox-styles.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
5
  import { classMap } from 'lit/directives/class-map.js';
5
6
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -8,116 +9,9 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
8
9
  import { ifDefined } from 'lit/directives/if-defined.js';
9
10
  import { InputInlineHelpMixin } from './input-inline-help.js';
10
11
  import { offscreenStyles } from '../offscreen/offscreen.js';
11
- import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
12
12
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
13
13
 
14
- registerSemanticVariableForSvgImageUrl(
15
- '--d2l-input-checkbox-check-image',
16
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
17
- <path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
18
- </svg>`
19
- );
20
-
21
- registerSemanticVariableForSvgImageUrl(
22
- '--d2l-input-checkbox-indeterminate-image',
23
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
24
- <path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
25
- </svg>`
26
- );
27
-
28
- export const cssSizes = {
29
- inputBoxSize: 1.2,
30
- checkboxMargin: 0.5,
31
- };
32
-
33
- export const checkboxStyles = css`
34
- input[type="checkbox"].d2l-input-checkbox {
35
- --d2l-input-checkbox-background-image: none;
36
- --d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
37
- --d2l-input-checkbox-background-image-disabled:
38
- linear-gradient(
39
- var(--d2l-theme-background-color-interactive-faint-disabled),
40
- var(--d2l-theme-background-color-interactive-faint-disabled)
41
- ),
42
- var(--d2l-input-checkbox-background-image);
43
- -webkit-appearance: none;
44
- -moz-appearance: none;
45
- appearance: none;
46
- background-image: var(--d2l-input-checkbox-background-image);
47
- background-position: center center;
48
- background-repeat: no-repeat;
49
- background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
50
- border-radius: 0.3rem;
51
- border-style: solid;
52
- box-sizing: border-box;
53
- display: inline-block;
54
- height: ${cssSizes.inputBoxSize}rem;
55
- margin: 0;
56
- padding: 0;
57
- vertical-align: middle;
58
- width: ${cssSizes.inputBoxSize}rem;
59
- }
60
- input[type="checkbox"].d2l-input-checkbox:checked {
61
- --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
62
- }
63
- input[type="checkbox"].d2l-input-checkbox:indeterminate {
64
- --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
65
- }
66
- input[type="checkbox"].d2l-input-checkbox,
67
- input[type="checkbox"].d2l-input-checkbox:hover:disabled {
68
- background-color: var(--d2l-input-checkbox-background-color);
69
- border-color: var(--d2l-theme-border-color-emphasized);
70
- border-width: 1px;
71
- }
72
- input[type="checkbox"].d2l-input-checkbox:hover:disabled {
73
- border-color: var(--d2l-theme-border-color-disabled);
74
- }
75
- input[type="checkbox"].d2l-input-checkbox:hover,
76
- input[type="checkbox"].d2l-input-checkbox:focus,
77
- input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
78
- :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
79
- border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
80
- border-width: 2px;
81
- outline: none;
82
- }
83
- input[type="checkbox"].d2l-input-checkbox:disabled,
84
- input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
85
- background-image: var(--d2l-input-checkbox-background-image-disabled);
86
- border-color: var(--d2l-theme-border-color-disabled);
87
- }
88
- @media (forced-colors: active) {
89
- input[type="checkbox"].d2l-input-checkbox:checked,
90
- input[type="checkbox"].d2l-input-checkbox:indeterminate {
91
- background-image: none;
92
- position: relative;
93
- }
94
- input[type="checkbox"].d2l-input-checkbox:checked::after,
95
- input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
96
- background-color: FieldText;
97
- content: "";
98
- display: block;
99
- height: ${cssSizes.inputBoxSize}rem;
100
- left: 50%;
101
- position: absolute;
102
- top: 50%;
103
- transform: translate(-50%, -50%);
104
- width: ${cssSizes.inputBoxSize}rem;
105
- }
106
-
107
- input[type="checkbox"].d2l-input-checkbox:disabled,
108
- input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
109
- opacity: var(--d2l-theme-opacity-disabled-control);
110
- }
111
-
112
- input[type="checkbox"].d2l-input-checkbox:checked::after {
113
- mask-image: var(--d2l-input-checkbox-check-image);
114
- }
115
-
116
- input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
117
- mask-image: var(--d2l-input-checkbox-indeterminate-image);
118
- }
119
- }
120
- `;
14
+ export const checkboxStyles = _generateInputCheckboxStyles('input[type="checkbox"].d2l-input-checkbox');
121
15
 
122
16
  /**
123
17
  * A component that can be used to show a checkbox and optional visible label.
package/components/table/table-wrapper.js CHANGED
@@ -2,7 +2,7 @@ import '../colors/colors.js';
2
2
  import '../scroll-wrapper/scroll-wrapper.js';
3
3
  import '../backdrop/backdrop-loading.js';
4
4
  import { css, html, LitElement, nothing } from 'lit';
5
- import { cssSizes } from '../inputs/input-checkbox.js';
5
+ import { cssSizes } from '../inputs/input-checkbox-styles.js';
6
6
  import { getComposedParent } from '../../helpers/dom.js';
7
7
  import { getFlag } from '../../helpers/flags.js';
8
8
  import { ifDefined } from 'lit/directives/if-defined.js';
package/components/tabs/tab-mixin.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '../colors/colors.js';
2
2
  import { css, html } from 'lit';
3
+ import { getFlag } from '../../helpers/flags.js';
3
4
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
4
5
 
5
6
  const keyCodes = {
@@ -39,16 +40,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
39
40
  :host {
40
41
  box-sizing: border-box;
41
42
  display: inline-block;
42
- max-width: 10rem;
43
+ /* TODO: When removing the GAUD-9963-dropdown-tabs-not-resizing flag, Keep the min max code */
44
+ max-width: var(--d2l-gaud-9963-tab-max-width, 200px);
43
45
  outline: none;
44
46
  position: relative;
45
47
  vertical-align: middle;
46
48
  }
47
- @container tabs-container (width >= 615px) {
48
- :host {
49
- max-width: min(20rem, 40%);
50
- }
51
- }
52
49
  :host([hidden]) {
53
50
  display: none;
54
51
  }
@@ -118,6 +115,13 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
118
115
  this.addEventListener('keyup', this.#handleKeyup);
119
116
 
120
117
  this.#hasInitialized = true;
118
+ /**
119
+ * TODO: remove this whole if when removing the GAUD-9963-dropdown-tabs-not-resizing flag
120
+ * keep the min max code an place that into the styles above
121
+ */
122
+ if (getFlag('GAUD-9963-dropdown-tabs-not-resizing', false)) {
123
+ this.style.setProperty('--d2l-gaud-9963-tab-max-width', 'min(20rem, max(33%, 10rem))');
124
+ }
121
125
  }
122
126
 
123
127
  render() {
package/components/tabs/tabs.js CHANGED
@@ -61,7 +61,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
61
61
  :host {
62
62
  --d2l-tabs-background-color: var(--d2l-theme-background-color-base);
63
63
  box-sizing: border-box;
64
- container: tabs-container / inline-size;
65
64
  display: block;
66
65
  margin-bottom: 1.2rem;
67
66
  }
@@ -426,6 +425,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
426
425
  return (Object.keys(this._tabIds).length > 1 && !reduceMotion) ? this._animateTabRemoval(tab) : Promise.resolve();
427
426
  }
428
427
 
428
+ #GAUD_9963_FLAG = getFlag('GAUD-9963-dropdown-tabs-not-resizing', false);
429
429
  #checkTabPanelMatchRequested;
430
430
  #newTabsPanelStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
431
431
  #panels;
@@ -895,7 +895,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
895
895
  }
896
896
 
897
897
  if (selectedTab) {
898
- Promise.all(animPromises).then(() => {
898
+ Promise.all(animPromises).then(async() => {
899
+ if (this.#GAUD_9963_FLAG) await new Promise(resolve => requestAnimationFrame(resolve)); /* TODO: when removing the GAUD-9963-dropdown-tabs-not-resizing flag, keep the Promise */
899
900
  this._updateMeasures();
900
901
  this._updateScrollPosition(selectedTab);
901
902
  });
package/custom-elements.json CHANGED
@@ -12269,13 +12269,13 @@
12269
12269
  "properties": [
12270
12270
  {
12271
12271
  "name": "properties",
12272
- "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
12273
- "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
12272
+ "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasImmersiveHeaderActions: { ...; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
12273
+ "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasImmersiveHeaderActions\":{\"type\":\"Boolean\",\"attribute\":\"has-immersive-header-actions\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"header\":{\"type\":\"String\",\"attribute\":\"header\"},\"immersiveHeaderTitleType\":{\"type\":\"String\",\"attribute\":\"immersive-header-title-type\"},\"layout\":{\"type\":\"String\",\"attribute\":\"layout\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_demoDialogOpened\":{\"state\":true}}"
12274
12274
  },
12275
12275
  {
12276
12276
  "name": "styles",
12277
12277
  "type": "CSSResult[]",
12278
- "default": "[\"selectStyles\",\"tableStyles\",null]"
12278
+ "default": "[\"inputLabelStyles\",\"selectStyles\",\"tableStyles\",null]"
12279
12279
  },
12280
12280
  {
12281
12281
  "name": "demoMode",
@@ -12284,43 +12284,39 @@
12284
12284
  },
12285
12285
  {
12286
12286
  "name": "hasFooter",
12287
- "type": "boolean",
12288
- "default": "false"
12287
+ "type": "boolean"
12288
+ },
12289
+ {
12290
+ "name": "hasImmersiveHeaderActions",
12291
+ "type": "boolean"
12289
12292
  },
12290
12293
  {
12291
12294
  "name": "hasMainHeader",
12292
- "type": "boolean",
12293
- "default": "false"
12295
+ "type": "boolean"
12294
12296
  },
12295
12297
  {
12296
12298
  "name": "hasSideNavHeader",
12297
- "type": "boolean",
12298
- "default": "false"
12299
+ "type": "boolean"
12299
12300
  },
12300
12301
  {
12301
- "name": "hasSideNavPanel",
12302
- "type": "boolean",
12303
- "default": "false"
12302
+ "name": "hasSupportingHeader",
12303
+ "type": "boolean"
12304
12304
  },
12305
12305
  {
12306
- "name": "hasSupportingHeader",
12307
- "type": "boolean",
12308
- "default": "false"
12306
+ "name": "header",
12307
+ "type": "string"
12309
12308
  },
12310
12309
  {
12311
- "name": "hasSupportingPanel",
12312
- "type": "boolean",
12313
- "default": "false"
12310
+ "name": "immersiveHeaderTitleType",
12311
+ "type": "string"
12314
12312
  },
12315
12313
  {
12316
- "name": "navType",
12317
- "type": "string",
12318
- "default": "\"full\""
12314
+ "name": "layout",
12315
+ "type": "string"
12319
12316
  },
12320
12317
  {
12321
12318
  "name": "widthType",
12322
- "type": "'normal'|'wide'|'fullscreen'",
12323
- "default": "\"normal\""
12319
+ "type": "string"
12324
12320
  }
12325
12321
  ]
12326
12322
  },
package/helpers/internal/css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export function _isValidCssSelector(selector) {
2
2
  const partIsValid = (part) => {
3
- const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
3
+ const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
4
4
  if (part === ':host') return true;
5
5
  const match = part.match(re);
6
6
  const isValid = !!match && match.length === 1 && match[0].length === part.length;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.250.0",
3
+ "version": "3.251.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",