@brightspace-ui/core 3.109.0 → 3.110.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 (5) hide show
  1. package/components/inputs/demo/input-checkbox.html +9 -4
  2. package/components/inputs/docs/input-checkbox.md +43 -9
  3. package/components/inputs/input-checkbox-group.js +30 -0
  4. package/custom-elements.json +11 -0
  5. package/package.json +1 -1
package/components/inputs/demo/input-checkbox.html CHANGED
@@ -7,6 +7,7 @@
7
7
  <script type="module">
8
8
  import '../../demo/demo-page.js';
9
9
  import '../input-checkbox.js';
10
+ import '../input-checkbox-group.js';
10
11
  </script>
11
12
  </head>
12
13
  <body unresolved>
@@ -15,16 +16,20 @@
15
16
  <h2>Simple checkbox with label</h2>
16
17
  <d2l-demo-snippet>
17
18
  <template>
18
- <d2l-input-checkbox label="Checked item" checked></d2l-input-checkbox>
19
- <d2l-input-checkbox label="Unchecked item"></d2l-input-checkbox>
19
+ <d2l-input-checkbox-group>
20
+ <d2l-input-checkbox label="Checked item" checked></d2l-input-checkbox>
21
+ <d2l-input-checkbox label="Unchecked item"></d2l-input-checkbox>
22
+ </d2l-input-checkbox-group>
20
23
  </template>
21
24
  </d2l-demo-snippet>
22
25
 
23
26
  <h2>Checkbox with multi-line label</h2>
24
27
  <d2l-demo-snippet>
25
28
  <template>
26
- <d2l-input-checkbox style="overflow: hidden; width: 200px;" label="Label for checkbox that wraps nicely onto multiple lines and stays aligned"></d2l-input-checkbox>
27
- <d2l-input-checkbox style="overflow: hidden; width: 200px;" label="https://en.wikipedia.org/wiki/Dark_matter"></d2l-input-checkbox>
29
+ <d2l-input-checkbox-group>
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
+ <d2l-input-checkbox style="overflow: hidden; width: 200px;" label="https://en.wikipedia.org/wiki/Dark_matter"></d2l-input-checkbox>
32
+ </d2l-input-checkbox-group>
28
33
  </template>
29
34
  </d2l-demo-snippet>
30
35
 
package/components/inputs/docs/input-checkbox.md CHANGED
@@ -36,16 +36,15 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
36
36
  <script type="module">
37
37
  import '@brightspace-ui/core/components/inputs/input-checkbox.js';
38
38
 
39
- window.addEventListener('load', function () {
40
- var input = document.querySelector('#checkbox');
41
- input.addEventListener('change', (e) => {
42
- console.log('checked value: ', input.checked);
43
- });
39
+ window.addEventListener('load', () => {
40
+ document.querySelector('d2l-input-checkbox')
41
+ .addEventListener('change', e => {
42
+ console.log('checked value: ', e.target.checked);
43
+ });
44
44
  });
45
45
  </script>
46
46
  <div>
47
- <d2l-input-checkbox id="checkbox" label="Label for checkbox"></d2l-input-checkbox>
48
- <d2l-input-checkbox label="Label for second checkbox"></d2l-input-checkbox>
47
+ <d2l-input-checkbox label="Label for checkbox"></d2l-input-checkbox>
49
48
  </div>
50
49
  ```
51
50
 
@@ -69,8 +68,8 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
69
68
  When the checkbox's state changes, it dispatches the `change` event:
70
69
 
71
70
  ```javascript
72
- checkbox.addEventListener('change', (e) => {
73
- console.log(checkbox.checked);
71
+ checkbox.addEventListener('change', e => {
72
+ console.log(e.target.checked);
74
73
  });
75
74
  ```
76
75
 
@@ -80,6 +79,41 @@ checkbox.addEventListener('change', (e) => {
80
79
  * `supporting`: Supporting information which will appear below and be aligned with the checkbox.
81
80
  <!-- docs: end hidden content -->
82
81
 
82
+ ### Groups of Checkboxes
83
+
84
+ If multiple checkboxes are displayed together, wrapping them in a `<d2l-input-checkbox-group>` provides consistent spacing between each checkbox.
85
+
86
+ <!-- docs: demo code -->
87
+ ```html
88
+ <script type="module">
89
+ import '@brightspace-ui/core/components/inputs/input-checkbox.js';
90
+ import '@brightspace-ui/core/components/inputs/input-checkbox-group.js';
91
+ </script>
92
+ <d2l-input-checkbox-group>
93
+ <d2l-input-checkbox label="Option 1"></d2l-input-checkbox>
94
+ <d2l-input-checkbox label="Option 2"></d2l-input-checkbox>
95
+ <d2l-input-checkbox label="Option 3"></d2l-input-checkbox>
96
+ </d2l-input-checkbox-group>
97
+ ```
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
+
83
117
  ## Applying styles to native checkboxes
84
118
 
85
119
  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:
package/components/inputs/input-checkbox-group.js ADDED
@@ -0,0 +1,30 @@
1
+ import { css, html, LitElement } from 'lit';
2
+
3
+ /**
4
+ * A wrapper for <d2l-input-checkbox> components which provides spacing between the items.
5
+ * @slot - Checkbox components
6
+ */
7
+ class InputCheckboxGroup extends LitElement {
8
+
9
+ static get styles() {
10
+ return css`
11
+ :host {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: 0.6rem;
15
+ }
16
+ :host([hidden]) {
17
+ display: none;
18
+ }
19
+ ::slotted(d2l-input-checkbox) {
20
+ margin-bottom: 0;
21
+ }
22
+ `;
23
+ }
24
+
25
+ render() {
26
+ return html`<slot></slot>`;
27
+ }
28
+
29
+ }
30
+ customElements.define('d2l-input-checkbox-group', InputCheckboxGroup);
package/custom-elements.json CHANGED
@@ -5113,6 +5113,17 @@
5113
5113
  }
5114
5114
  ]
5115
5115
  },
5116
+ {
5117
+ "name": "d2l-input-checkbox-group",
5118
+ "path": "./components/inputs/input-checkbox-group.js",
5119
+ "description": "A wrapper for <d2l-input-checkbox> components which provides spacing between the items.",
5120
+ "slots": [
5121
+ {
5122
+ "name": "",
5123
+ "description": "Checkbox components"
5124
+ }
5125
+ ]
5126
+ },
5116
5127
  {
5117
5128
  "name": "d2l-input-checkbox",
5118
5129
  "path": "./components/inputs/input-checkbox.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.109.0",
3
+ "version": "3.110.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",