@brightspace-ui/core 3.306.0 → 3.307.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.
- package/components/button/README.md +30 -0
- package/components/button/button-iterator.js +174 -0
- package/custom-elements.json +102 -0
- package/package.json +1 -1
|
@@ -174,6 +174,36 @@ Use icon buttons for compact, supplementary actions where space is limited and t
|
|
|
174
174
|
</d2l-button-icon>
|
|
175
175
|
```
|
|
176
176
|
|
|
177
|
+
## Button Iterator [d2l-button-iterator]
|
|
178
|
+
|
|
179
|
+
A navigation control for moving sequentially through a set of items.
|
|
180
|
+
|
|
181
|
+
<!-- docs: demo code properties name:d2l-button-iterator sandboxTitle:'Iterator Button' -->
|
|
182
|
+
```html
|
|
183
|
+
<script type="module">
|
|
184
|
+
import '@brightspace-ui/core/components/button/button-iterator.js';
|
|
185
|
+
</script>
|
|
186
|
+
<d2l-button-iterator></d2l-button-iterator>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
<!-- docs: start hidden content -->
|
|
190
|
+
### Properties
|
|
191
|
+
|
|
192
|
+
| Property | Type | Description |
|
|
193
|
+
|--|--|--|
|
|
194
|
+
| `description` | String | An optional description, typically for indicating the current position within the set of items |
|
|
195
|
+
| `previous-disabled` | Boolean | Disables the previous button |
|
|
196
|
+
| `previous-text` | String | Overrides the default text for the previous button |
|
|
197
|
+
| `next-disabled` | Boolean | Disables the next button |
|
|
198
|
+
| `next-only` | Boolean | Renders only the next button |
|
|
199
|
+
| `next-text` | String | Overrides the default text for the next button |
|
|
200
|
+
|
|
201
|
+
### Events
|
|
202
|
+
|
|
203
|
+
- `d2l-button-iterator-previous-click`: dispatched when the previous button is clicked
|
|
204
|
+
- `d2l-button-iterator-next-click`: dispatched when the next button is clicked
|
|
205
|
+
<!-- docs: end hidden content -->
|
|
206
|
+
|
|
177
207
|
## Toggle Button [d2l-button-toggle]
|
|
178
208
|
|
|
179
209
|
Use toggle buttons when users need to easily flip between two opposing states, such as when subscribing or unsubscribing.
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import '../icons/icon.js';
|
|
3
|
+
import '../tooltip/tooltip.js';
|
|
4
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
5
|
+
import { buttonStyles } from './button-styles.js';
|
|
6
|
+
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
7
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
import { labelStyles } from '../typography/styles.js';
|
|
10
|
+
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
11
|
+
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* A navigation control for moving sequentially through a set of items.
|
|
15
|
+
*/
|
|
16
|
+
class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(LitElement))) {
|
|
17
|
+
|
|
18
|
+
static properties = {
|
|
19
|
+
/**
|
|
20
|
+
* ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items
|
|
21
|
+
* @type {string}
|
|
22
|
+
*/
|
|
23
|
+
description: { type: String },
|
|
24
|
+
/**
|
|
25
|
+
* Disables the previous button
|
|
26
|
+
* @type {boolean}
|
|
27
|
+
*/
|
|
28
|
+
previousDisabled: { attribute: 'previous-disabled', type: Boolean },
|
|
29
|
+
/**
|
|
30
|
+
* Overrides the default text for the previous button
|
|
31
|
+
* @type {string}
|
|
32
|
+
*/
|
|
33
|
+
previousText: { attribute: 'previous-text', type: String },
|
|
34
|
+
/**
|
|
35
|
+
* Disables the next button
|
|
36
|
+
* @type {boolean}
|
|
37
|
+
*/
|
|
38
|
+
nextDisabled: { attribute: 'next-disabled', type: Boolean },
|
|
39
|
+
/**
|
|
40
|
+
* Renders only the next button
|
|
41
|
+
* @type {boolean}
|
|
42
|
+
*/
|
|
43
|
+
nextOnly: { attribute: 'next-only', type: Boolean },
|
|
44
|
+
/**
|
|
45
|
+
* Overrides the default text for the next button
|
|
46
|
+
* @type {string}
|
|
47
|
+
*/
|
|
48
|
+
nextText: { attribute: 'next-text', type: String }
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
static styles = [buttonStyles, labelStyles, css`
|
|
52
|
+
:host {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
line-height: 0;
|
|
55
|
+
}
|
|
56
|
+
:host([hidden]) {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
.container {
|
|
60
|
+
align-items: center;
|
|
61
|
+
display: flex;
|
|
62
|
+
gap: 6px;
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
}
|
|
65
|
+
.description {
|
|
66
|
+
margin-inline: 6px;
|
|
67
|
+
}
|
|
68
|
+
@media (max-width: 556px) {
|
|
69
|
+
.description {
|
|
70
|
+
display: none;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.next {
|
|
74
|
+
--d2l-button-end-start-radius: 0;
|
|
75
|
+
--d2l-button-start-start-radius: 0;
|
|
76
|
+
}
|
|
77
|
+
.previous {
|
|
78
|
+
--d2l-button-end-end-radius: 0;
|
|
79
|
+
--d2l-button-start-end-radius: 0;
|
|
80
|
+
}
|
|
81
|
+
button {
|
|
82
|
+
background-color: var(--d2l-theme-background-color-interactive-secondary-default);
|
|
83
|
+
min-width: calc(2rem + 2px);
|
|
84
|
+
padding: 0;
|
|
85
|
+
}
|
|
86
|
+
button:not([disabled]):hover,
|
|
87
|
+
button:not([disabled]):focus {
|
|
88
|
+
background-color: var(--d2l-theme-background-color-interactive-secondary-hover);
|
|
89
|
+
}
|
|
90
|
+
button[disabled] {
|
|
91
|
+
cursor: default;
|
|
92
|
+
opacity: var(--d2l-theme-opacity-disabled-control);
|
|
93
|
+
}
|
|
94
|
+
`];
|
|
95
|
+
|
|
96
|
+
constructor() {
|
|
97
|
+
super();
|
|
98
|
+
this.description = undefined;
|
|
99
|
+
this.nextDisabled = false;
|
|
100
|
+
this.nextOnly = false;
|
|
101
|
+
this.nextText = undefined;
|
|
102
|
+
this.previousDisabled = false;
|
|
103
|
+
this.previousText = undefined;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
static get focusElementSelector() {
|
|
107
|
+
return 'button:not([disabled])';
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
render() {
|
|
111
|
+
const nextText = this.nextText ? this.nextText : this.localizeCommon('navigation:next:title');
|
|
112
|
+
if (this.nextOnly) {
|
|
113
|
+
return this.#renderButton(this.#nextId, 'next-only', 'tier1:chevron-right', nextText, undefined, this.nextDisabled);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const hasDescription = (this.description !== undefined && this.description !== '' && !this.nextOnly);
|
|
117
|
+
const description = hasDescription ? html`<div id="${this.#descriptionId}" class="description d2l-label-text">${this.description}</div>` : nothing;
|
|
118
|
+
const descriptionId = hasDescription ? this.#descriptionId : undefined;
|
|
119
|
+
|
|
120
|
+
const previousText = this.previousText ? this.previousText : this.localizeCommon('navigation:previous:title');
|
|
121
|
+
|
|
122
|
+
return html`
|
|
123
|
+
<div class="container">
|
|
124
|
+
${this.#renderButton(this.#previousId, 'previous', 'tier1:chevron-left', previousText, descriptionId, this.previousDisabled)}
|
|
125
|
+
${description}
|
|
126
|
+
${this.#renderButton(this.#nextId, 'next', 'tier1:chevron-right', nextText, descriptionId, this.nextDisabled)}
|
|
127
|
+
</div>
|
|
128
|
+
`;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
#descriptionId = getUniqueId();
|
|
132
|
+
#previousId = getUniqueId();
|
|
133
|
+
#nextId = getUniqueId();
|
|
134
|
+
|
|
135
|
+
#handleButtonClick(e) {
|
|
136
|
+
const button = e.currentTarget;
|
|
137
|
+
if (button.disabled) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
e.stopPropagation();
|
|
141
|
+
if (button.id === this.#nextId) {
|
|
142
|
+
/** Dispatched when the next button is clicked. */
|
|
143
|
+
this.dispatchEvent(new CustomEvent('d2l-button-iterator-next-click'));
|
|
144
|
+
} else if (button.id === this.#previousId) {
|
|
145
|
+
/** Dispatched when the previous button is clicked. */
|
|
146
|
+
this.dispatchEvent(new CustomEvent('d2l-button-iterator-previous-click'));
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
#renderButton(id, className, icon, text, descriptionId, disabled) {
|
|
151
|
+
const ariaLabel = disabled ? text : undefined;
|
|
152
|
+
const tooltip = !disabled ? html`
|
|
153
|
+
<d2l-tooltip
|
|
154
|
+
class="vdiff-target"
|
|
155
|
+
for="${id}"
|
|
156
|
+
for-type="label"
|
|
157
|
+
position="bottom">${text}</d2l-tooltip>` : nothing;
|
|
158
|
+
return html`
|
|
159
|
+
<button
|
|
160
|
+
aria-describedby="${ifDefined(descriptionId)}"
|
|
161
|
+
aria-label="${ifDefined(ariaLabel)}"
|
|
162
|
+
class="${className}"
|
|
163
|
+
@click="${this.#handleButtonClick}"
|
|
164
|
+
?disabled="${disabled}"
|
|
165
|
+
id="${id}"
|
|
166
|
+
type="button">
|
|
167
|
+
<d2l-icon icon="${icon}"></d2l-icon>
|
|
168
|
+
</button>
|
|
169
|
+
${tooltip}
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
window.customElements.define('d2l-button-iterator', ButtonIterator);
|
package/custom-elements.json
CHANGED
|
@@ -702,6 +702,108 @@
|
|
|
702
702
|
}
|
|
703
703
|
]
|
|
704
704
|
},
|
|
705
|
+
{
|
|
706
|
+
"name": "d2l-button-iterator",
|
|
707
|
+
"path": "./components/button/button-iterator.js",
|
|
708
|
+
"description": "A navigation control for moving sequentially through a set of items.",
|
|
709
|
+
"attributes": [
|
|
710
|
+
{
|
|
711
|
+
"name": "description",
|
|
712
|
+
"description": "ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items",
|
|
713
|
+
"type": "string",
|
|
714
|
+
"default": "\"undefined\""
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
"name": "next-disabled",
|
|
718
|
+
"description": "Disables the next button",
|
|
719
|
+
"type": "boolean",
|
|
720
|
+
"default": "false"
|
|
721
|
+
},
|
|
722
|
+
{
|
|
723
|
+
"name": "next-only",
|
|
724
|
+
"description": "Renders only the next button",
|
|
725
|
+
"type": "boolean",
|
|
726
|
+
"default": "false"
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
"name": "next-text",
|
|
730
|
+
"description": "Overrides the default text for the next button",
|
|
731
|
+
"type": "string",
|
|
732
|
+
"default": "\"undefined\""
|
|
733
|
+
},
|
|
734
|
+
{
|
|
735
|
+
"name": "previous-disabled",
|
|
736
|
+
"description": "Disables the previous button",
|
|
737
|
+
"type": "boolean",
|
|
738
|
+
"default": "false"
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"name": "previous-text",
|
|
742
|
+
"description": "Overrides the default text for the previous button",
|
|
743
|
+
"type": "string",
|
|
744
|
+
"default": "\"undefined\""
|
|
745
|
+
}
|
|
746
|
+
],
|
|
747
|
+
"properties": [
|
|
748
|
+
{
|
|
749
|
+
"name": "styles",
|
|
750
|
+
"type": "array",
|
|
751
|
+
"default": "[\"buttonStyles\",\"labelStyles\",null]"
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"name": "description",
|
|
755
|
+
"attribute": "description",
|
|
756
|
+
"description": "ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items",
|
|
757
|
+
"type": "string",
|
|
758
|
+
"default": "\"undefined\""
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "nextDisabled",
|
|
762
|
+
"attribute": "next-disabled",
|
|
763
|
+
"description": "Disables the next button",
|
|
764
|
+
"type": "boolean",
|
|
765
|
+
"default": "false"
|
|
766
|
+
},
|
|
767
|
+
{
|
|
768
|
+
"name": "nextOnly",
|
|
769
|
+
"attribute": "next-only",
|
|
770
|
+
"description": "Renders only the next button",
|
|
771
|
+
"type": "boolean",
|
|
772
|
+
"default": "false"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"name": "nextText",
|
|
776
|
+
"attribute": "next-text",
|
|
777
|
+
"description": "Overrides the default text for the next button",
|
|
778
|
+
"type": "string",
|
|
779
|
+
"default": "\"undefined\""
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "previousDisabled",
|
|
783
|
+
"attribute": "previous-disabled",
|
|
784
|
+
"description": "Disables the previous button",
|
|
785
|
+
"type": "boolean",
|
|
786
|
+
"default": "false"
|
|
787
|
+
},
|
|
788
|
+
{
|
|
789
|
+
"name": "previousText",
|
|
790
|
+
"attribute": "previous-text",
|
|
791
|
+
"description": "Overrides the default text for the previous button",
|
|
792
|
+
"type": "string",
|
|
793
|
+
"default": "\"undefined\""
|
|
794
|
+
}
|
|
795
|
+
],
|
|
796
|
+
"events": [
|
|
797
|
+
{
|
|
798
|
+
"name": "d2l-button-iterator-next-click",
|
|
799
|
+
"description": "Dispatched when the next button is clicked."
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
"name": "d2l-button-iterator-previous-click",
|
|
803
|
+
"description": "Dispatched when the previous button is clicked."
|
|
804
|
+
}
|
|
805
|
+
]
|
|
806
|
+
},
|
|
705
807
|
{
|
|
706
808
|
"name": "d2l-button-move",
|
|
707
809
|
"path": "./components/button/button-move.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.307.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",
|