@brightspace-ui/core 3.155.9 → 3.155.10

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.
Files changed (2) hide show
  1. package/components/table/table-wrapper.js +27 -56
  2. package/package.json +1 -1
package/components/table/table-wrapper.js CHANGED
@@ -6,7 +6,6 @@ import { getComposedParent } from '../../helpers/dom.js';
6
6
  import { getFlag } from '../../helpers/flags.js';
7
7
  import { PageableMixin } from '../paging/pageable-mixin.js';
8
8
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
9
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
9
  import { SelectionMixin } from '../selection/selection-mixin.js';
11
10
 
12
11
  const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
@@ -31,12 +30,9 @@ export const tableStyles = css`
31
30
  font-weight: inherit;
32
31
  height: var(--d2l-table-cell-height);
33
32
  padding: var(--d2l-table-cell-padding);
34
- text-align: left;
33
+ text-align: start;
35
34
  vertical-align: middle;
36
35
  }
37
- d2l-table-wrapper[dir="rtl"] .d2l-table > * > tr > * {
38
- text-align: right;
39
- }
40
36
  d2l-table-wrapper d2l-button-icon {
41
37
  --d2l-button-icon-min-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
42
38
  --d2l-button-icon-min-width: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
@@ -75,13 +71,11 @@ export const tableStyles = css`
75
71
  }
76
72
 
77
73
  /* default cells */
78
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > *,
79
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-cell-first {
80
- border-right: var(--d2l-table-border);
74
+ d2l-table-wrapper[type="default"] .d2l-table > * > tr > * {
75
+ border-inline-end: var(--d2l-table-border);
81
76
  }
82
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > * > tr > *,
83
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-cell-first {
84
- border-left: var(--d2l-table-border);
77
+ d2l-table-wrapper[type="default"] .d2l-table > * > tr > .d2l-table-cell-first {
78
+ border-inline-start: var(--d2l-table-border);
85
79
  }
86
80
  d2l-table-wrapper[type="default"] .d2l-table-row-first > * {
87
81
  border-top: var(--d2l-table-border); /* add top border to default first row */
@@ -139,34 +133,28 @@ export const tableStyles = css`
139
133
  }
140
134
 
141
135
  /* border radiuses */
142
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-first,
143
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-first > .d2l-table-cell-last {
144
- border-top-left-radius: var(--d2l-table-border-radius);
136
+ d2l-table-wrapper[type="default"] .d2l-table-row-first > .d2l-table-cell-first {
137
+ border-start-start-radius: var(--d2l-table-border-radius);
145
138
  }
146
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-last,
147
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-first > .d2l-table-cell-first {
148
- border-top-right-radius: var(--d2l-table-border-radius);
139
+ d2l-table-wrapper[type="default"] .d2l-table-row-first > .d2l-table-cell-last {
140
+ border-start-end-radius: var(--d2l-table-border-radius);
149
141
  }
150
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-last > .d2l-table-cell-first,
151
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-last > .d2l-table-cell-last {
152
- border-bottom-left-radius: var(--d2l-table-border-radius);
142
+ d2l-table-wrapper[type="default"] .d2l-table-row-last > .d2l-table-cell-first {
143
+ border-end-start-radius: var(--d2l-table-border-radius);
153
144
  }
154
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-last > .d2l-table-cell-last,
155
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-last > .d2l-table-cell-first {
156
- border-bottom-right-radius: var(--d2l-table-border-radius);
145
+ d2l-table-wrapper[type="default"] .d2l-table-row-last > .d2l-table-cell-last {
146
+ border-end-end-radius: var(--d2l-table-border-radius);
157
147
  }
158
148
 
159
149
  /* selected rows */
160
150
  .d2l-table > tbody > tr[selected] {
161
151
  background-color: var(--d2l-table-row-background-color-selected);
162
152
  }
163
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > tbody > tr[selected] > .d2l-table-cell-last,
164
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-first {
165
- border-right-color: var(--d2l-table-row-border-color-selected);
153
+ d2l-table-wrapper[type="default"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-last {
154
+ border-inline-end-color: var(--d2l-table-row-border-color-selected);
166
155
  }
167
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > tbody > tr[selected] > .d2l-table-cell-first,
168
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-last {
169
- border-left-color: var(--d2l-table-row-border-color-selected);
156
+ d2l-table-wrapper[type="default"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-first {
157
+ border-inline-start-color: var(--d2l-table-row-border-color-selected);
170
158
  }
171
159
  .d2l-table > tbody > tr[selected] > *,
172
160
  .d2l-table > * > tr.d2l-table-selected-previous > * {
@@ -178,17 +166,11 @@ export const tableStyles = css`
178
166
  }
179
167
 
180
168
  /* no-column-border */
181
- d2l-table-wrapper[type="default"][no-column-border]:not([dir="rtl"]) .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
182
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
183
- d2l-table-wrapper[type="default"][no-column-border]:not([dir="rtl"]) .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
184
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
185
- border-right: none;
186
- }
187
- d2l-table-wrapper[type="default"][no-column-border][dir="rtl"] .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
188
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
189
- d2l-table-wrapper[type="default"][no-column-border][dir="rtl"] .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
190
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
191
- border-left: none;
169
+ d2l-table-wrapper[type="default"][no-column-border] .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
170
+ d2l-table-wrapper[type="default"] .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
171
+ d2l-table-wrapper[type="default"][no-column-border] .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
172
+ d2l-table-wrapper[type="default"] .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
173
+ border-inline-end: none;
192
174
  }
193
175
 
194
176
  /* sticky-headers */
@@ -196,18 +178,11 @@ export const tableStyles = css`
196
178
  /* all sticky cells */
197
179
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
198
180
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > [sticky] {
181
+ inset-inline-start: 0;
199
182
  position: -webkit-sticky;
200
183
  position: sticky;
201
184
  z-index: 1;
202
185
  }
203
- d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
204
- d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > [sticky] {
205
- left: 0;
206
- }
207
- d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
208
- d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > [sticky] {
209
- right: 0;
210
- }
211
186
 
212
187
  /* non-header sticky cells */
213
188
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr:not([selected]) {
@@ -241,13 +216,9 @@ export const tableStyles = css`
241
216
  }
242
217
 
243
218
  /* first column that's sticky: offset by size of border-radius so top/bottom border doesn't show through (default style only) */
244
- d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
245
- d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > [sticky].d2l-table-cell-first {
246
- left: var(--d2l-table-border-radius-sticky-offset, 0);
247
- }
248
- d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
249
- d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
250
- right: var(--d2l-table-border-radius-sticky-offset, 0);
219
+ d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
220
+ d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
221
+ inset-inline-start: var(--d2l-table-border-radius-sticky-offset, 0);
251
222
  }
252
223
 
253
224
  /* sticky + scroll-wrapper */
@@ -296,7 +267,7 @@ const SELECTORS = {
296
267
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
297
268
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the table
298
269
  */
299
- export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitElement))) {
270
+ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
300
271
 
301
272
  static get properties() {
302
273
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.155.9",
3
+ "version": "3.155.10",
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",