@brightspace-ui/core 2.99.0 → 2.99.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.
|
@@ -135,7 +135,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
|
|
|
135
135
|
box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
|
|
136
136
|
position: sticky;
|
|
137
137
|
top: 0;
|
|
138
|
-
z-index:
|
|
138
|
+
z-index: 12; /* must be greater greater than list-items with open dropdowns or tooltips */
|
|
139
139
|
}
|
|
140
140
|
.d2l-collapsible-panel.focused.scrolled .d2l-collapsible-panel-header {
|
|
141
141
|
top: 2px;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
## Expand Collapse Content [d2l-expand-collapse-content]
|
|
1
|
+
# Expand Collapse Content
|
|
4
2
|
|
|
5
3
|
The `d2l-expand-collapse-content` element can be used to create expandable and collapsible content. This component only provides the logic to expand and collapse the content; controlling when and how it expands or collapses is the responsibility of the user.
|
|
6
4
|
|
|
5
|
+
## Expand Collapse Content [d2l-expand-collapse-content]
|
|
6
|
+
|
|
7
7
|
<!-- docs: demo live name:d2l-expand-collapse-content autoSize:false display:block size:small -->
|
|
8
8
|
```html
|
|
9
9
|
<script type="module">
|
|
@@ -40,29 +40,3 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
|
|
|
40
40
|
|
|
41
41
|
To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
|
|
42
42
|
|
|
43
|
-
## More-Less [d2l-more-less]
|
|
44
|
-
|
|
45
|
-
The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
|
|
46
|
-
|
|
47
|
-
<!-- docs: demo live name:d2l-more-less -->
|
|
48
|
-
```html
|
|
49
|
-
<script type="module">
|
|
50
|
-
import '@brightspace-ui/core/components/more-less/more-less.js';
|
|
51
|
-
</script>
|
|
52
|
-
<d2l-more-less>
|
|
53
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
54
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
55
|
-
</d2l-more-less>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
<!-- docs: start hidden content -->
|
|
59
|
-
### Properties
|
|
60
|
-
|
|
61
|
-
| Property | Type | Description |
|
|
62
|
-
|---|---|---|
|
|
63
|
-
| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
|
|
64
|
-
| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
|
|
65
|
-
| `h-align` | String | A value of `text` aligns the leading edge of text |
|
|
66
|
-
| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
|
|
67
|
-
| `inactive` | Boolean | Whether the component is active or inactive |
|
|
68
|
-
<!-- docs: end hidden content -->
|
|
@@ -108,10 +108,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
108
108
|
display: none;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
:host([
|
|
112
|
-
:host([
|
|
111
|
+
:host([_dropdown-open]),
|
|
112
|
+
:host([_focusing]) {
|
|
113
113
|
z-index: 10; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
|
|
114
114
|
}
|
|
115
|
+
:host([_tooltip-showing]) {
|
|
116
|
+
z-index: 11; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
|
|
117
|
+
}
|
|
115
118
|
:host([_fullscreen-within]) {
|
|
116
119
|
position: fixed; /* required for Safari */
|
|
117
120
|
z-index: 1000; /* must be greater than floating workflow buttons */
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
-
# More
|
|
1
|
+
# More/Less
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
|
|
4
|
+
|
|
5
|
+
## More-Less [d2l-more-less]
|
|
6
|
+
|
|
7
|
+
<!-- docs: demo live name:d2l-more-less -->
|
|
8
|
+
```html
|
|
9
|
+
<script type="module">
|
|
10
|
+
import '@brightspace-ui/core/components/more-less/more-less.js';
|
|
11
|
+
</script>
|
|
12
|
+
<d2l-more-less>
|
|
13
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
14
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
15
|
+
</d2l-more-less>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
<!-- docs: start hidden content -->
|
|
19
|
+
### Properties
|
|
20
|
+
|
|
21
|
+
| Property | Type | Description |
|
|
22
|
+
|---|---|---|
|
|
23
|
+
| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
|
|
24
|
+
| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
|
|
25
|
+
| `h-align` | String | A value of `text` aligns the leading edge of text |
|
|
26
|
+
| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
|
|
27
|
+
| `inactive` | Boolean | Whether the component is active or inactive |
|
|
28
|
+
<!-- docs: end hidden content -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.99.
|
|
3
|
+
"version": "2.99.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",
|