@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 `RtlMixin` and include them in your component:
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 RtlMixin(LitElement) {
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 RtlMixin(LitElement) {
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-left: 1.7rem;
65
- padding-right: 0;
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-left: -1.7rem;
86
- margin-right: 0.5rem;
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.0",
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",