@brightspace-ui/labs 2.54.0 → 2.55.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/package.json
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"./components/accordion.js": "./src/components/accordion/accordion.js",
|
|
9
9
|
"./components/accordion-collapse.js": "./src/components/accordion/accordion-collapse.js",
|
|
10
10
|
"./components/attribute-picker.js": "./src/components/attribute-picker/attribute-picker.js",
|
|
11
|
+
"./components/button-ai.js": "./src/components/button-ai/button-ai.js",
|
|
11
12
|
"./components/card-overlay.js": "./src/components/card-overlay/card-overlay.js",
|
|
12
13
|
"./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
|
|
13
14
|
"./components/community-button.js": "./src/components/community/community-button.js",
|
|
@@ -110,5 +111,5 @@
|
|
|
110
111
|
"parse-srt": "^1.0.0-alpha",
|
|
111
112
|
"webvtt-parser": "^2"
|
|
112
113
|
},
|
|
113
|
-
"version": "2.
|
|
114
|
+
"version": "2.55.1"
|
|
114
115
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# AI Button
|
|
2
|
+
|
|
3
|
+
This is a special button style used to draw extra attention to a new AI-powered feature; it is not an official design pattern and each usage should be carefully considered.
|
|
4
|
+
|
|
5
|
+
It has a default image, but it is also compatible with the `<d2l-icon-custom>` component via the `icon` slot.
|
|
6
|
+
|
|
7
|
+
## AI Button [d2l-labs-button-ai]
|
|
8
|
+
|
|
9
|
+
<!-- docs: demo code -->
|
|
10
|
+
```html
|
|
11
|
+
<script type="module">
|
|
12
|
+
import '@brightspace-ui/labs/components/button-ai.js';
|
|
13
|
+
</script>
|
|
14
|
+
<d2l-labs-button-ai text="New AI Feature"></d2l-labs-button-ai>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
<!-- docs: start hidden content -->
|
|
18
|
+
|
|
19
|
+
**Properties:**
|
|
20
|
+
|
|
21
|
+
| Property | Type | Description |
|
|
22
|
+
|--|--|--|
|
|
23
|
+
| `text` | String, required | Text for the button |
|
|
24
|
+
| `disabled` | Boolean | Disables the button |
|
|
25
|
+
| `disabled-tooltip` | String | Tooltip text when disabled |
|
|
26
|
+
|
|
27
|
+
<!-- docs: end hidden content -->
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import '@brightspace-ui/core/components/tooltip/tooltip.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { ButtonMixin } from '@brightspace-ui/core/components/button/button-mixin.js';
|
|
4
|
+
import { buttonStyles } from '@brightspace-ui/core/components/button/button-styles.js';
|
|
5
|
+
import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
|
|
6
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
|
+
import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
8
|
+
import { SlottedIconMixin } from '@brightspace-ui/core/components/icons/slotted-icon-mixin.js';
|
|
9
|
+
|
|
10
|
+
class ButtonAI extends SlottedIconMixin(ButtonMixin(LitElement)) {
|
|
11
|
+
static properties = {
|
|
12
|
+
/**
|
|
13
|
+
* ACCESSIBILITY: REQUIRED: Text for the button
|
|
14
|
+
* @type {string}
|
|
15
|
+
*/
|
|
16
|
+
text: { type: String, reflect: true }
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
static styles = [super.styles, labelStyles, buttonStyles,
|
|
20
|
+
css`
|
|
21
|
+
:host {
|
|
22
|
+
/* comes from --d2l-color-celestine-plus-1 + 0.5 opacity */
|
|
23
|
+
--d2l-color-celestine-plus-1-opacity-50: #29a6ff80;
|
|
24
|
+
|
|
25
|
+
/* comes from --d2l-color-fluorite-plus-1 + 0.5 opacity */
|
|
26
|
+
--d2l-color-fluorite-plus-1-opacity-50: #ce68fa80;
|
|
27
|
+
display: inline-block;
|
|
28
|
+
}
|
|
29
|
+
:host([hidden]) {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
button {
|
|
34
|
+
align-items: center;
|
|
35
|
+
background:
|
|
36
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
37
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1), var(--d2l-color-celestine-plus-1)) border-box;
|
|
38
|
+
border: 0.1rem solid transparent;
|
|
39
|
+
border-radius: 0.4rem;
|
|
40
|
+
column-gap: 0.3rem;
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
font-family: inherit;
|
|
43
|
+
padding-block: 0;
|
|
44
|
+
padding-inline: 0.6rem;
|
|
45
|
+
position: relative;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
button:hover,
|
|
49
|
+
button:focus {
|
|
50
|
+
background:
|
|
51
|
+
linear-gradient(var(--d2l-color-gypsum), var(--d2l-color-gypsum)) padding-box,
|
|
52
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1), var(--d2l-color-celestine-plus-1)) border-box;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host([disabled]) button {
|
|
56
|
+
background:
|
|
57
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
58
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1-opacity-50), var(--d2l-color-celestine-plus-1-opacity-50)) border-box;
|
|
59
|
+
cursor: default;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host([disabled]) button::before {
|
|
63
|
+
background:
|
|
64
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
65
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1-opacity-50), var(--d2l-color-celestine-plus-1-opacity-50)) border-box;
|
|
66
|
+
border-radius: inherit;
|
|
67
|
+
content: "";
|
|
68
|
+
inset: 0;
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
position: absolute;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
button,
|
|
74
|
+
.property-icon,
|
|
75
|
+
slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
76
|
+
color: var(--d2l-color-celestine);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host(:not([disabled])) button:hover,
|
|
80
|
+
:host(:not([disabled])) button:focus,
|
|
81
|
+
:host(:not([disabled])) button:hover .property-icon,
|
|
82
|
+
:host(:not([disabled])) button:focus .property-icon,
|
|
83
|
+
:host(:not([disabled])) button:hover slot[name="icon"]::slotted(d2l-icon-custom),
|
|
84
|
+
:host(:not([disabled])) button:focus slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
85
|
+
color: var(--d2l-color-celestine-minus-1);
|
|
86
|
+
}
|
|
87
|
+
`];
|
|
88
|
+
|
|
89
|
+
constructor() {
|
|
90
|
+
super();
|
|
91
|
+
this.icon = 'tier1:ai';
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
render() {
|
|
95
|
+
return html `
|
|
96
|
+
<button
|
|
97
|
+
aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
|
|
98
|
+
?disabled=${this.disabled && !this.disabledTooltip}
|
|
99
|
+
id="${this.#buttonId}"
|
|
100
|
+
class="d2l-label-text">
|
|
101
|
+
${this._renderIcon()}
|
|
102
|
+
${this.text}
|
|
103
|
+
</button>
|
|
104
|
+
${this.disabled && this.disabledTooltip ? html`<d2l-tooltip class="vdiff-target" for="${this.#buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
|
|
105
|
+
`;
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
#buttonId = getUniqueId();
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
customElements.define('d2l-labs-button-ai', ButtonAI);
|