@brightspace-ui/core 3.111.0 → 3.112.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 (11) hide show
  1. package/components/dialog/dialog-fullscreen.js +1 -1
  2. package/components/form/form-mixin.js +9 -1
  3. package/components/form/form.js +3 -0
  4. package/components/icons/icon-custom.js +1 -2
  5. package/components/icons/icon-styles.js +3 -4
  6. package/components/icons/icon.js +1 -2
  7. package/components/inputs/demo/input-group.html +58 -0
  8. package/components/inputs/input-group.js +27 -0
  9. package/components/typography/typography.js +2 -0
  10. package/custom-elements.json +13 -2
  11. package/package.json +1 -1
package/components/dialog/dialog-fullscreen.js CHANGED
@@ -39,7 +39,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
39
39
  */
40
40
  titleText: { type: String, attribute: 'title-text', required: true },
41
41
  /**
42
- * The preferred width (unit-less) for the dialog. Maximum 1170.
42
+ * The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).
43
43
  */
44
44
  width: { type: Number },
45
45
  _autoSize: { state: true }, /* DE52039 This is only redefined here to suppress a lit-analyzer linting issue */
package/components/form/form-mixin.js CHANGED
@@ -16,7 +16,8 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
16
16
  * @type {boolean}
17
17
  */
18
18
  trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
19
- _errors: { type: Object }
19
+ _errors: { type: Object },
20
+ _hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
20
21
  };
21
22
  }
22
23
 
@@ -57,6 +58,13 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
57
58
  this._firstUpdateResolve();
58
59
  }
59
60
 
61
+ willUpdate(changedProperties) {
62
+ super.willUpdate(changedProperties);
63
+ if (changedProperties.has('_errors')) {
64
+ this._hasErrors = this._errors.size > 0;
65
+ }
66
+ }
67
+
60
68
  // eslint-disable-next-line no-unused-vars
61
69
  async requestSubmit(submitter) {
62
70
  throw new Error('FormMixin.requestSubmit must be overridden');
package/components/form/form.js CHANGED
@@ -31,6 +31,9 @@ class Form extends FormMixin(LitElement) {
31
31
  :host([hidden]) {
32
32
  display: none;
33
33
  }
34
+ :host([_has-errors]) ::slotted(d2l-input-group) {
35
+ margin-block-start: 1rem;
36
+ }
34
37
  `;
35
38
  }
36
39
 
package/components/icons/icon-custom.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { css, html, LitElement } from 'lit';
2
2
  import { fixSvg } from './fix-svg.js';
3
3
  import { iconStyles } from './icon-styles.js';
4
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
5
4
 
6
- class IconCustom extends RtlMixin(LitElement) {
5
+ class IconCustom extends LitElement {
7
6
 
8
7
  static get properties() {
9
8
  return {
package/components/icons/icon-styles.js CHANGED
@@ -28,10 +28,9 @@ export const iconStyles = css`
28
28
  pointer-events: none;
29
29
  width: 100%;
30
30
  }
31
- :host([dir="rtl"]) svg[mirror-in-rtl],
32
- :host([dir="rtl"]) ::slotted(svg[mirror-in-rtl]) {
33
- -webkit-transform: scale(-1, 1);
34
- transform: scale(-1, 1);
31
+ svg[mirror-in-rtl],
32
+ ::slotted(svg[mirror-in-rtl]) {
33
+ transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
35
34
  transform-origin: center;
36
35
  }
37
36
  `;
package/components/icons/icon.js CHANGED
@@ -4,11 +4,10 @@ import { fixSvg } from './fix-svg.js';
4
4
  import { guard } from 'lit/directives/guard.js';
5
5
  import { iconStyles } from './icon-styles.js';
6
6
  import { loadSvg } from '../../generated/icons/presetIconLoader.js';
7
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
8
7
  import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
9
8
  import { until } from 'lit/directives/until.js';
10
9
 
11
- class Icon extends RtlMixin(LitElement) {
10
+ class Icon extends LitElement {
12
11
 
13
12
  static get properties() {
14
13
  return {
package/components/inputs/demo/input-group.html ADDED
@@ -0,0 +1,58 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta charset="UTF-8">
6
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script type="module">
8
+ import '../../demo/demo-page.js';
9
+ import '../../button/button.js';
10
+ import '../../button/floating-buttons.js';
11
+ import '../../form/form.js';
12
+ import '../input-checkbox.js';
13
+ import '../input-checkbox-group.js';
14
+ import '../input-fieldset.js';
15
+ import '../input-group.js';
16
+ import '../input-text.js';
17
+ import '../input-textarea.js';
18
+ </script>
19
+ </head>
20
+ <body unresolved>
21
+ <d2l-demo-page page-title="Input Groups">
22
+
23
+ <h2>Simple</h2>
24
+ <d2l-demo-snippet>
25
+ <template>
26
+ <d2l-form>
27
+ <d2l-input-group>
28
+ <d2l-input-text label="Name" required></d2l-input-text>
29
+ <d2l-input-fieldset label="Options">
30
+ <d2l-input-checkbox-group>
31
+ <d2l-input-checkbox>Option 1</d2l-input-checkbox>
32
+ <d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
33
+ <d2l-input-checkbox>Option 3</d2l-input-checkbox>
34
+ </d2l-input-checkbox-group>
35
+ </d2l-input-fieldset>
36
+ <d2l-input-fieldset label="Address" label-hidden>
37
+ <d2l-input-group>
38
+ <d2l-input-text label="Street" required></d2l-input-text>
39
+ <d2l-input-text label="City" required></d2l-input-text>
40
+ </d2l-input-group>
41
+ </d2l-input-fieldset>
42
+ <d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
43
+ </d2l-input-group>
44
+ </d2l-form>
45
+ <d2l-floating-buttons>
46
+ <d2l-button primary>Save</d2l-button>
47
+ </d2l-floating-buttons>
48
+ <script>
49
+ document
50
+ .querySelector('d2l-button')
51
+ .addEventListener('click', () => document.querySelector('d2l-form').submit());
52
+ </script>
53
+ </template>
54
+ </d2l-demo-snippet>
55
+
56
+ </d2l-demo-page>
57
+ </body>
58
+ </html>
package/components/inputs/input-group.js ADDED
@@ -0,0 +1,27 @@
1
+ import { css, html, LitElement } from 'lit';
2
+
3
+ /**
4
+ * Wraps a collection of input components, providing vertical spacing between them.
5
+ * @slot - Input components
6
+ */
7
+ class InputGroup extends LitElement {
8
+
9
+ static get styles() {
10
+ return css`
11
+ :host {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: 1rem;
15
+ }
16
+ :host([hidden]) {
17
+ display: none;
18
+ }
19
+ `;
20
+ }
21
+
22
+ render() {
23
+ return html`<slot></slot>`;
24
+ }
25
+
26
+ }
27
+ customElements.define('d2l-input-group', InputGroup);
package/components/typography/typography.js CHANGED
@@ -7,10 +7,12 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
7
7
  style.textContent = `
8
8
  * {
9
9
  --d2l-document-direction: ltr;
10
+ --d2l-mirror-transform: none;
10
11
  }
11
12
 
12
13
  html[dir="rtl"] * {
13
14
  --d2l-document-direction: rtl;
15
+ --d2l-mirror-transform: scale(-1, 1);
14
16
  }
15
17
 
16
18
  ${fontFacesCss}
package/custom-elements.json CHANGED
@@ -2210,7 +2210,7 @@
2210
2210
  },
2211
2211
  {
2212
2212
  "name": "width",
2213
- "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
2213
+ "description": "The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).",
2214
2214
  "type": "number",
2215
2215
  "default": "1170"
2216
2216
  },
@@ -2250,7 +2250,7 @@
2250
2250
  {
2251
2251
  "name": "width",
2252
2252
  "attribute": "width",
2253
- "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
2253
+ "description": "The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).",
2254
2254
  "type": "number",
2255
2255
  "default": "1170"
2256
2256
  },
@@ -6368,6 +6368,17 @@
6368
6368
  }
6369
6369
  ]
6370
6370
  },
6371
+ {
6372
+ "name": "d2l-input-group",
6373
+ "path": "./components/inputs/input-group.js",
6374
+ "description": "Wraps a collection of input components, providing vertical spacing between them.",
6375
+ "slots": [
6376
+ {
6377
+ "name": "",
6378
+ "description": "Input components"
6379
+ }
6380
+ ]
6381
+ },
6371
6382
  {
6372
6383
  "name": "d2l-input-number",
6373
6384
  "path": "./components/inputs/input-number.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.111.0",
3
+ "version": "3.112.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",