@brightspace-ui/core 3.111.1 → 3.112.1
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.
- package/components/dialog/dialog-fullscreen.js +1 -1
- package/components/form/form-mixin.js +9 -1
- package/components/form/form.js +3 -0
- package/components/inputs/demo/input-checkbox.html +2 -2
- package/components/inputs/demo/input-group.html +58 -0
- package/components/inputs/docs/input-checkbox.md +4 -22
- package/components/inputs/input-checkbox-group.js +43 -7
- package/components/inputs/input-group.js +27 -0
- package/custom-elements.json +41 -2
- package/package.json +1 -1
|
@@ -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.
|
|
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 */
|
|
@@ -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
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<h2>Simple checkbox with label</h2>
|
|
17
17
|
<d2l-demo-snippet>
|
|
18
18
|
<template>
|
|
19
|
-
<d2l-input-checkbox-group>
|
|
19
|
+
<d2l-input-checkbox-group label="Labelled checkboxes">
|
|
20
20
|
<d2l-input-checkbox label="Checked item" checked></d2l-input-checkbox>
|
|
21
21
|
<d2l-input-checkbox label="Unchecked item"></d2l-input-checkbox>
|
|
22
22
|
</d2l-input-checkbox-group>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<h2>Checkbox with multi-line label</h2>
|
|
27
27
|
<d2l-demo-snippet>
|
|
28
28
|
<template>
|
|
29
|
-
<d2l-input-checkbox-group>
|
|
29
|
+
<d2l-input-checkbox-group label="Multi-line checkboxes">
|
|
30
30
|
<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="Label for checkbox that wraps nicely onto multiple lines and stays aligned"></d2l-input-checkbox>
|
|
31
31
|
<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="https://en.wikipedia.org/wiki/Dark_matter"></d2l-input-checkbox>
|
|
32
32
|
</d2l-input-checkbox-group>
|
|
@@ -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>
|
|
@@ -89,31 +89,13 @@ If multiple checkboxes are displayed together, wrapping them in a `<d2l-input-ch
|
|
|
89
89
|
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
90
90
|
import '@brightspace-ui/core/components/inputs/input-checkbox-group.js';
|
|
91
91
|
</script>
|
|
92
|
-
<d2l-input-checkbox-group>
|
|
93
|
-
<d2l-input-checkbox label="
|
|
94
|
-
<d2l-input-checkbox label="
|
|
95
|
-
<d2l-input-checkbox label="
|
|
92
|
+
<d2l-input-checkbox-group label="Toppings">
|
|
93
|
+
<d2l-input-checkbox label="Ketchup"></d2l-input-checkbox>
|
|
94
|
+
<d2l-input-checkbox label="Mustard"></d2l-input-checkbox>
|
|
95
|
+
<d2l-input-checkbox label="Relish"></d2l-input-checkbox>
|
|
96
96
|
</d2l-input-checkbox-group>
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
-
Often, the checkboxes in the group are related to each other and may have a label for the whole group. In this case, a `<d2l-input-fieldset>` should be used.
|
|
100
|
-
|
|
101
|
-
<!-- docs: demo code -->
|
|
102
|
-
```html
|
|
103
|
-
<script type="module">
|
|
104
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
105
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox-group.js';
|
|
106
|
-
import '@brightspace-ui/core/components/inputs/input-fieldset.js';
|
|
107
|
-
</script>
|
|
108
|
-
<d2l-input-fieldset label="Toppings">
|
|
109
|
-
<d2l-input-checkbox-group>
|
|
110
|
-
<d2l-input-checkbox label="Ketchup"></d2l-input-checkbox>
|
|
111
|
-
<d2l-input-checkbox label="Mustard"></d2l-input-checkbox>
|
|
112
|
-
<d2l-input-checkbox label="Relish"></d2l-input-checkbox>
|
|
113
|
-
</d2l-input-checkbox-group>
|
|
114
|
-
</d2l-input-fieldset>
|
|
115
|
-
```
|
|
116
|
-
|
|
117
99
|
## Applying styles to native checkboxes
|
|
118
100
|
|
|
119
101
|
As an alternative to using the `<d2l-input-checkbox>` custom element, you can style a native checkbox inside your own element. Import `input-checkbox-styles.js` and apply the `d2l-input-checkbox` CSS class to the input:
|
|
@@ -1,29 +1,65 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
|
+
import { inputLabelStyles } from './input-label-styles.js';
|
|
3
|
+
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
2
4
|
|
|
3
5
|
/**
|
|
4
6
|
* A wrapper for <d2l-input-checkbox> components which provides spacing between the items.
|
|
5
7
|
* @slot - Checkbox components
|
|
6
8
|
*/
|
|
7
|
-
class InputCheckboxGroup extends LitElement {
|
|
9
|
+
class InputCheckboxGroup extends PropertyRequiredMixin(LitElement) {
|
|
10
|
+
|
|
11
|
+
static get properties() {
|
|
12
|
+
return {
|
|
13
|
+
/**
|
|
14
|
+
* REQUIRED: Label for the group of checkboxes
|
|
15
|
+
* @type {string}
|
|
16
|
+
*/
|
|
17
|
+
label: { required: true, type: String },
|
|
18
|
+
/**
|
|
19
|
+
* Hides the label visually
|
|
20
|
+
* @type {boolean}
|
|
21
|
+
*/
|
|
22
|
+
labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean }
|
|
23
|
+
};
|
|
24
|
+
}
|
|
8
25
|
|
|
9
26
|
static get styles() {
|
|
10
|
-
return css`
|
|
27
|
+
return [inputLabelStyles, css`
|
|
11
28
|
:host {
|
|
12
|
-
display:
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
gap: 0.6rem;
|
|
29
|
+
display: block;
|
|
15
30
|
}
|
|
16
31
|
:host([hidden]) {
|
|
17
32
|
display: none;
|
|
18
33
|
}
|
|
34
|
+
.wrapper {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
gap: 0.6rem;
|
|
38
|
+
}
|
|
19
39
|
::slotted(d2l-input-checkbox) {
|
|
20
40
|
margin-bottom: 0;
|
|
21
41
|
}
|
|
22
|
-
|
|
42
|
+
.d2l-input-label {
|
|
43
|
+
margin-block-end: 0.6rem;
|
|
44
|
+
}
|
|
45
|
+
.d2l-input-label[hidden] {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
`];
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
constructor() {
|
|
52
|
+
super();
|
|
53
|
+
this.labelHidden = false;
|
|
23
54
|
}
|
|
24
55
|
|
|
25
56
|
render() {
|
|
26
|
-
return html
|
|
57
|
+
return html`
|
|
58
|
+
<fieldset class="d2l-input-label-fieldset">
|
|
59
|
+
<legend class="d2l-input-label" ?hidden="${this.labelHidden}">${this.label}</legend>
|
|
60
|
+
<div class="wrapper"><slot></slot></div>
|
|
61
|
+
</fieldset>
|
|
62
|
+
`;
|
|
27
63
|
}
|
|
28
64
|
|
|
29
65
|
}
|
|
@@ -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/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.
|
|
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.
|
|
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
|
},
|
|
@@ -5117,6 +5117,34 @@
|
|
|
5117
5117
|
"name": "d2l-input-checkbox-group",
|
|
5118
5118
|
"path": "./components/inputs/input-checkbox-group.js",
|
|
5119
5119
|
"description": "A wrapper for <d2l-input-checkbox> components which provides spacing between the items.",
|
|
5120
|
+
"attributes": [
|
|
5121
|
+
{
|
|
5122
|
+
"name": "label",
|
|
5123
|
+
"description": "REQUIRED: Label for the group of checkboxes",
|
|
5124
|
+
"type": "string"
|
|
5125
|
+
},
|
|
5126
|
+
{
|
|
5127
|
+
"name": "label-hidden",
|
|
5128
|
+
"description": "Hides the label visually",
|
|
5129
|
+
"type": "boolean",
|
|
5130
|
+
"default": "false"
|
|
5131
|
+
}
|
|
5132
|
+
],
|
|
5133
|
+
"properties": [
|
|
5134
|
+
{
|
|
5135
|
+
"name": "label",
|
|
5136
|
+
"attribute": "label",
|
|
5137
|
+
"description": "REQUIRED: Label for the group of checkboxes",
|
|
5138
|
+
"type": "string"
|
|
5139
|
+
},
|
|
5140
|
+
{
|
|
5141
|
+
"name": "labelHidden",
|
|
5142
|
+
"attribute": "label-hidden",
|
|
5143
|
+
"description": "Hides the label visually",
|
|
5144
|
+
"type": "boolean",
|
|
5145
|
+
"default": "false"
|
|
5146
|
+
}
|
|
5147
|
+
],
|
|
5120
5148
|
"slots": [
|
|
5121
5149
|
{
|
|
5122
5150
|
"name": "",
|
|
@@ -6368,6 +6396,17 @@
|
|
|
6368
6396
|
}
|
|
6369
6397
|
]
|
|
6370
6398
|
},
|
|
6399
|
+
{
|
|
6400
|
+
"name": "d2l-input-group",
|
|
6401
|
+
"path": "./components/inputs/input-group.js",
|
|
6402
|
+
"description": "Wraps a collection of input components, providing vertical spacing between them.",
|
|
6403
|
+
"slots": [
|
|
6404
|
+
{
|
|
6405
|
+
"name": "",
|
|
6406
|
+
"description": "Input components"
|
|
6407
|
+
}
|
|
6408
|
+
]
|
|
6409
|
+
},
|
|
6371
6410
|
{
|
|
6372
6411
|
"name": "d2l-input-number",
|
|
6373
6412
|
"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.
|
|
3
|
+
"version": "3.112.1",
|
|
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",
|