@brightspace-ui/core 3.52.0 → 3.52.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/README.md
CHANGED
@@ -73,7 +73,6 @@ npm install @brightspace-ui/core
|
|
73
73
|
* [LabelledMixin](mixins/labelled/): label custom elements by referencing elements across DOM scopes
|
74
74
|
* [LocalizeMixin](mixins/localize/): localize text in your components
|
75
75
|
* [ProviderMixin](mixins/provider/): provide and consume data across elements in a DI-like fashion
|
76
|
-
* [RtlMixin](mixins/rtl/): enable components to define RTL styles
|
77
76
|
* [SkeletonMixin](components/skeleton/): make components skeleton-aware
|
78
77
|
* [VisibleOnAncestorMixin](mixins/visible-on-ancestor/): display element on-hover of an ancestor
|
79
78
|
* Templates
|
@@ -19,13 +19,12 @@ Groups of inputs (like checkboxes or radios) should be wrapped in a `<fieldset>`
|
|
19
19
|
|
20
20
|
### Visible labels using the `<label>` element
|
21
21
|
|
22
|
-
Import the label styles and
|
22
|
+
Import the label styles and include them in your component:
|
23
23
|
|
24
24
|
```javascript
|
25
|
-
import {inputLabelStyles} from '@brightspace-ui/core/components/inputs/input-label-styles.js';
|
26
|
-
import {RtlMixin} from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
|
25
|
+
import { inputLabelStyles } from '@brightspace-ui/core/components/inputs/input-label-styles.js';
|
27
26
|
|
28
|
-
class MyElem extends
|
27
|
+
class MyElem extends LitElement {
|
29
28
|
|
30
29
|
static get styles() {
|
31
30
|
return inputLabelStyles;
|
@@ -14,7 +14,6 @@ Unlike checkboxes, individual radio buttons cannot be placed in a custom element
|
|
14
14
|
|
15
15
|
As a result, we have to apply styles to native radio inputs.
|
16
16
|
|
17
|
-
Note: in order for RTL to function correctly, make sure your component uses the `RtlMixin`.
|
18
17
|
|
19
18
|
## Best Practices
|
20
19
|
<!-- docs: start best practices -->
|
@@ -39,10 +38,9 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
|
|
39
38
|
```html
|
40
39
|
<script type="module">
|
41
40
|
import { html, LitElement } from 'lit';
|
42
|
-
import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
|
43
41
|
import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
|
44
42
|
|
45
|
-
class MyRadioElem extends
|
43
|
+
class MyRadioElem extends LitElement {
|
46
44
|
|
47
45
|
static get styles() {
|
48
46
|
return radioStyles;
|
@@ -61,14 +61,10 @@ export const radioStyles = css`
|
|
61
61
|
line-height: 1.2rem;
|
62
62
|
margin-bottom: 0.9rem;
|
63
63
|
overflow-wrap: anywhere;
|
64
|
-
padding-
|
65
|
-
padding-
|
64
|
+
padding-inline-end: 0;
|
65
|
+
padding-inline-start: 1.7rem;
|
66
66
|
vertical-align: middle;
|
67
67
|
}
|
68
|
-
:host([dir="rtl"]) .d2l-input-radio-label {
|
69
|
-
padding-left: 0;
|
70
|
-
padding-right: 1.7rem;
|
71
|
-
}
|
72
68
|
.d2l-input-radio-label-disabled {
|
73
69
|
opacity: 0.5;
|
74
70
|
}
|
@@ -82,12 +78,7 @@ export const radioStyles = css`
|
|
82
78
|
.d2l-input-radio-label > .d2l-input-radio,
|
83
79
|
.d2l-input-radio-label > input[type="radio"] {
|
84
80
|
flex: 0 0 auto;
|
85
|
-
margin-
|
86
|
-
margin-
|
87
|
-
}
|
88
|
-
:host([dir="rtl"]) .d2l-input-radio-label > .d2l-input-radio,
|
89
|
-
:host([dir="rtl"]) .d2l-input-radio-label > input[type="radio"] {
|
90
|
-
margin-left: 0.5rem;
|
91
|
-
margin-right: -1.7rem;
|
81
|
+
margin-inline-end: 0.5rem;
|
82
|
+
margin-inline-start: -1.7rem;
|
92
83
|
}
|
93
84
|
`;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.52.
|
3
|
+
"version": "3.52.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",
|