@brightspace-ui/core 3.112.0 → 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.
|
@@ -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>
|
|
@@ -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
|
}
|
package/custom-elements.json
CHANGED
|
@@ -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": "",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.112.
|
|
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",
|