@brightspace-ui/core 3.95.1 → 3.96.0

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 (12) hide show
  1. package/components/button/README.md +2 -2
  2. package/components/button/button-icon.js +5 -2
  3. package/components/button/button-subtle.js +5 -2
  4. package/components/button/demo/button-icon.html +10 -3
  5. package/components/button/demo/button-subtle.html +22 -9
  6. package/components/dropdown/README.md +1 -1
  7. package/components/dropdown/dropdown-button-subtle.js +2 -2
  8. package/components/more-less/README.md +1 -1
  9. package/components/more-less/more-less.js +2 -2
  10. package/components/table/demo/table-test.js +4 -2
  11. package/custom-elements.json +16 -16
  12. package/package.json +1 -1
package/components/button/README.md CHANGED
@@ -76,7 +76,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
76
76
  | `description` | String | A description to be added to the `button` for accessibility for additional context |
77
77
  | `disabled` | Boolean | Disables the button |
78
78
  | `disabledTooltip` | String | Tooltip text when disabled |
79
- | `h-align` | String | Possible values are undefined (default) or `text`. If `text`, aligns the button content to the leading edge of text. |
79
+ | `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
80
80
  | `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
81
81
  | `icon-right` | Boolean | Render the icon on the right of the button |
82
82
  <!-- docs: end hidden content -->
@@ -121,7 +121,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
121
121
  | `text` | String, required | Accessible text for the button |
122
122
  | `disabled` | Boolean | Disables the button |
123
123
  | `disabledTooltip` | String | Tooltip text when disabled |
124
- | `h-align` | String | Possible values are undefined (default) or `text`. If `text`, aligns the button content to the leading edge of text. |
124
+ | `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
125
125
  | `translucent` | Boolean | Indicates to display translucent (ex. on rich backgrounds) |
126
126
  <!-- docs: end hidden content -->
127
127
 
package/components/button/button-icon.js CHANGED
@@ -26,8 +26,8 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
26
26
  description: { type: String },
27
27
 
28
28
  /**
29
- * Aligns the leading edge of text if value is set to "text"
30
- * @type {'text'|''}
29
+ * Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
30
+ * @type {'text'|'text-end'|''}
31
31
  */
32
32
  hAlign: { type: String, reflect: true, attribute: 'h-align' },
33
33
 
@@ -104,6 +104,9 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
104
104
  :host([h-align="text"]) button {
105
105
  inset-inline-start: var(--d2l-button-icon-h-align);
106
106
  }
107
+ :host([h-align="text-end"]) button {
108
+ inset-inline-end: var(--d2l-button-icon-h-align);
109
+ }
107
110
 
108
111
  /* Firefox includes a hidden border which messes up button dimensions */
109
112
  button::-moz-focus-inner {
package/components/button/button-subtle.js CHANGED
@@ -24,8 +24,8 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
24
24
  description: { type: String },
25
25
 
26
26
  /**
27
- * Aligns the leading edge of text if value is set to "text"
28
- * @type {'text'|''}
27
+ * Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
28
+ * @type {'text'|'text-end'|''}
29
29
  */
30
30
  hAlign: { type: String, reflect: true, attribute: 'h-align' },
31
31
 
@@ -101,6 +101,9 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
101
101
  :host([h-align="text"]) button {
102
102
  inset-inline-start: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
103
103
  }
104
+ :host([h-align="text-end"]) button {
105
+ inset-inline-end: calc(var(--d2l-button-subtle-padding-inline-end) * -1);
106
+ }
104
107
 
105
108
  /* Firefox includes a hidden border which messes up button dimensions */
106
109
  button::-moz-focus-inner {
package/components/button/demo/button-icon.html CHANGED
@@ -102,9 +102,16 @@
102
102
 
103
103
  <d2l-demo-snippet>
104
104
  <template>
105
- <d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
106
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
107
- <d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-icon>
105
+ <div style="border: 1px dashed #999999; text-align: start;">
106
+ <d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
107
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
108
+ <d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-icon>
109
+ </div>
110
+ <div style="border: 1px dashed #999999; text-align: end;">
111
+ <d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
112
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
113
+ <d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-icon>
114
+ </div>
108
115
  </template>
109
116
  </d2l-demo-snippet>
110
117
 
package/components/button/demo/button-subtle.html CHANGED
@@ -62,15 +62,28 @@
62
62
 
63
63
  <d2l-demo-snippet>
64
64
  <template>
65
- <d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
66
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
67
- <d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
68
- <br>
69
- <d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
70
- <br>
71
- <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
72
- <br>
73
- <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
65
+ <div style="border: 1px dashed #999999; text-align: start;">
66
+ <d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
67
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
68
+ <d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
69
+ <br>
70
+ <d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
71
+ <br>
72
+ <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
73
+ <br>
74
+ <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
75
+ </div>
76
+ <div style="border: 1px dashed #999999; text-align: end;">
77
+ <d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
78
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
79
+ <d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-subtle>
80
+ <br>
81
+ <d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text-end"></d2l-button-subtle>
82
+ <br>
83
+ <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
84
+ <br>
85
+ <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
86
+ </div>
74
87
  </template>
75
88
  </d2l-demo-snippet>
76
89
 
package/components/dropdown/README.md CHANGED
@@ -109,7 +109,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
109
109
  | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
110
110
  | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
111
111
  | `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
112
- | `h-align` | String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text |
112
+ | `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text |
113
113
  <!-- docs: end hidden content -->
114
114
 
115
115
  ### Accessibility Properties
package/components/dropdown/dropdown-button-subtle.js CHANGED
@@ -19,8 +19,8 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
19
19
  description: { type: String },
20
20
 
21
21
  /**
22
- * Aligns the leading edge of text if value is set to "text"
23
- * @type {'text'|''}
22
+ * Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
23
+ * @type {'text'|'text-end'|''}
24
24
  */
25
25
  hAlign: { type: String, reflect: true, attribute: 'h-align' },
26
26
 
package/components/more-less/README.md CHANGED
@@ -21,7 +21,7 @@ The `d2l-more-less` element can be used to minimize the display of long content,
21
21
  | Property | Type | Description |
22
22
  |---|---|---|
23
23
  | `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
24
- | `h-align` | String | A value of `text` aligns the leading edge of text |
24
+ | `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
25
25
  | `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. |
26
26
  | `inactive` | Boolean | Whether the component is active or inactive |
27
27
  <!-- docs: end hidden content -->
package/components/more-less/more-less.js CHANGED
@@ -27,8 +27,8 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
27
27
  expanded: { type: Boolean, reflect: true },
28
28
 
29
29
  /**
30
- * The h-align property of the more-less button
31
- * @type {'text'|''}
30
+ * Aligns the leading edge of more/less button text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
31
+ * @type {'text'|'text-end'|''}
32
32
  */
33
33
  hAlign: { type: String, attribute: 'h-align' },
34
34
 
package/components/table/demo/table-test.js CHANGED
@@ -162,9 +162,11 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
162
162
  `;
163
163
  }
164
164
 
165
- _handlePagerLoadMore(e) {
165
+ async _handlePagerLoadMore(e) {
166
+ const pageSize = e.target.pageSize;
167
+ await new Promise(resolve => setTimeout(resolve, 1000));
166
168
  const startIndex = this._data.length + 1;
167
- for (let i = 0; i < e.target.pageSize; i++) {
169
+ for (let i = 0; i < pageSize; i++) {
168
170
  this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4, 'latitude': 3, 'longitude': 3 }, selected: false });
169
171
  }
170
172
  this.requestUpdate();
package/custom-elements.json CHANGED
@@ -407,8 +407,8 @@
407
407
  },
408
408
  {
409
409
  "name": "h-align",
410
- "description": "Aligns the leading edge of text if value is set to \"text\"",
411
- "type": "'text'|''"
410
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
411
+ "type": "'text'|'text-end'|''"
412
412
  },
413
413
  {
414
414
  "name": "icon",
@@ -448,8 +448,8 @@
448
448
  {
449
449
  "name": "hAlign",
450
450
  "attribute": "h-align",
451
- "description": "Aligns the leading edge of text if value is set to \"text\"",
452
- "type": "'text'|''"
451
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
452
+ "type": "'text'|'text-end'|''"
453
453
  },
454
454
  {
455
455
  "name": "icon",
@@ -616,8 +616,8 @@
616
616
  },
617
617
  {
618
618
  "name": "h-align",
619
- "description": "Aligns the leading edge of text if value is set to \"text\"",
620
- "type": "'text'|''"
619
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
620
+ "type": "'text'|'text-end'|''"
621
621
  },
622
622
  {
623
623
  "name": "icon",
@@ -663,8 +663,8 @@
663
663
  {
664
664
  "name": "hAlign",
665
665
  "attribute": "h-align",
666
- "description": "Aligns the leading edge of text if value is set to \"text\"",
667
- "type": "'text'|''"
666
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
667
+ "type": "'text'|'text-end'|''"
668
668
  },
669
669
  {
670
670
  "name": "icon",
@@ -2366,8 +2366,8 @@
2366
2366
  },
2367
2367
  {
2368
2368
  "name": "h-align",
2369
- "description": "Aligns the leading edge of text if value is set to \"text\"",
2370
- "type": "'text'|''"
2369
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
2370
+ "type": "'text'|'text-end'|''"
2371
2371
  },
2372
2372
  {
2373
2373
  "name": "text",
@@ -2403,8 +2403,8 @@
2403
2403
  {
2404
2404
  "name": "hAlign",
2405
2405
  "attribute": "h-align",
2406
- "description": "Aligns the leading edge of text if value is set to \"text\"",
2407
- "type": "'text'|''"
2406
+ "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
2407
+ "type": "'text'|'text-end'|''"
2408
2408
  },
2409
2409
  {
2410
2410
  "name": "text",
@@ -10210,8 +10210,8 @@
10210
10210
  "attributes": [
10211
10211
  {
10212
10212
  "name": "h-align",
10213
- "description": "The h-align property of the more-less button",
10214
- "type": "'text'|''"
10213
+ "description": "Aligns the leading edge of more/less button text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
10214
+ "type": "'text'|'text-end'|''"
10215
10215
  },
10216
10216
  {
10217
10217
  "name": "expanded",
@@ -10236,8 +10236,8 @@
10236
10236
  {
10237
10237
  "name": "hAlign",
10238
10238
  "attribute": "h-align",
10239
- "description": "The h-align property of the more-less button",
10240
- "type": "'text'|''"
10239
+ "description": "Aligns the leading edge of more/less button text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
10240
+ "type": "'text'|'text-end'|''"
10241
10241
  },
10242
10242
  {
10243
10243
  "name": "expanded",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.95.1",
3
+ "version": "3.96.0",
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",