@brightspace-ui/core 2.78.3 → 2.79.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.
Files changed (13) hide show
  1. package/components/breadcrumbs/breadcrumb.js +9 -1
  2. package/components/button/button-icon.js +1 -1
  3. package/components/html-block/html-block.js +9 -9
  4. package/components/link/demo/link.html +24 -0
  5. package/components/link/link.js +23 -1
  6. package/components/link/link.scss +7 -3
  7. package/components/list/list-item-content.js +10 -8
  8. package/components/list/list-item-mixin.js +5 -0
  9. package/components/menu/menu-item-styles.js +5 -19
  10. package/components/object-property-list/object-property-list-item-link.js +6 -1
  11. package/components/tooltip/demo/tooltip.html +10 -0
  12. package/custom-elements.json +11 -0
  13. package/package.json +1 -1
package/components/breadcrumbs/breadcrumb.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import '../icons/icon.js';
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { findComposedAncestor } from '../../helpers/dom.js';
4
+ import { FocusMixin } from '../../mixins/focus-mixin.js';
4
5
  import { ifDefined } from 'lit/directives/if-defined.js';
5
6
  import { linkStyles } from '../link/link.js';
6
7
  import { RtlMixin } from '../../mixins/rtl-mixin.js';
@@ -8,7 +9,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
8
9
  /**
9
10
  * An entry within a <d2l-breadcrumbs> parent.
10
11
  */
11
- class Breadcrumb extends RtlMixin(LitElement) {
12
+ class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
12
13
 
13
14
  static get properties() {
14
15
  return {
@@ -55,6 +56,9 @@ class Breadcrumb extends RtlMixin(LitElement) {
55
56
  :host([data-compact]) {
56
57
  flex-direction: row-reverse;
57
58
  }
59
+ .d2l-link:focus {
60
+ outline-offset: -2px;
61
+ }
58
62
 
59
63
  d2l-icon {
60
64
  height: 8px;
@@ -88,6 +92,10 @@ class Breadcrumb extends RtlMixin(LitElement) {
88
92
  this.text = '';
89
93
  }
90
94
 
95
+ static get focusElementSelector() {
96
+ return 'a';
97
+ }
98
+
91
99
  connectedCallback() {
92
100
  super.connectedCallback();
93
101
  findComposedAncestor(this, (node) => {
package/components/button/button-icon.js CHANGED
@@ -70,7 +70,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
70
70
  :host([translucent]) {
71
71
  --d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
72
72
  --d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
73
- --d2l-button-icon-focus-box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), inset 0 0 0 3px white;
73
+ --d2l-button-icon-focus-box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), inset 0 0 0 4px white;
74
74
  --d2l-icon-fill-color: white;
75
75
  --d2l-button-icon-fill-color-hover: white;
76
76
  }
package/components/html-block/html-block.js CHANGED
@@ -5,7 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
5
5
  import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
6
6
  import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
7
7
  import { requestInstance } from '../../mixins/provider-mixin.js';
8
- import { RtlMixin } from '../../mixins/rtl-mixin.js';
9
8
 
10
9
  export const htmlBlockContentStyles = css`
11
10
  .d2l-html-block-rendered {
@@ -96,10 +95,14 @@ export const htmlBlockContentStyles = css`
96
95
  cursor: pointer;
97
96
  text-decoration: none;
98
97
  }
99
- a:hover,
100
- a:focus {
98
+ a:hover {
101
99
  color: var(--d2l-color-celestine-minus-1, #004489);
102
- outline-width: 0;
100
+ text-decoration: underline;
101
+ }
102
+ a:focus {
103
+ border-radius: 3px;
104
+ outline: 2px solid var(--d2l-color-celestine, #006fbf);
105
+ outline-offset: 1px;
103
106
  text-decoration: underline;
104
107
  }
105
108
  @media print {
@@ -131,7 +134,7 @@ const getRenderers = async() => {
131
134
  * A component for displaying user-authored HTML.
132
135
  * @slot - Provide your user-authored HTML
133
136
  */
134
- class HtmlBlock extends RtlMixin(LitElement) {
137
+ class HtmlBlock extends LitElement {
135
138
 
136
139
  static get properties() {
137
140
  return {
@@ -164,7 +167,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
164
167
  :host {
165
168
  display: block;
166
169
  overflow-wrap: break-word;
167
- text-align: left;
170
+ text-align: start;
168
171
  }
169
172
  :host([inline]),
170
173
  :host([inline]) .d2l-html-block-rendered {
@@ -178,9 +181,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
178
181
  :host([no-deferred-rendering]) slot {
179
182
  display: contents;
180
183
  }
181
- :host([dir="rtl"]) {
182
- text-align: right;
183
- }
184
184
  `];
185
185
  }
186
186
 
package/components/link/demo/link.html CHANGED
@@ -8,6 +8,14 @@
8
8
  import '../../demo/demo-page.js';
9
9
  import '../link.js';
10
10
  </script>
11
+ <style>
12
+ .truncate-container {
13
+ border: 1px solid var(--d2l-color-mica);
14
+ border-radius: 6px;
15
+ max-width: 400px;
16
+ padding: 0.6rem;
17
+ }
18
+ </style>
11
19
  </head>
12
20
  <body unresolved>
13
21
  <d2l-demo-page page-title="d2l-link">
@@ -33,6 +41,22 @@
33
41
  </template>
34
42
  </d2l-demo-snippet>
35
43
 
44
+ <h2>Inline</h2>
45
+ <d2l-demo-snippet>
46
+ <template>
47
+ <p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. <d2l-link href="https://www.d2l.com">Standard Link</d2l-link> Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
48
+ </template>
49
+ </d2l-demo-snippet>
50
+
51
+ <h2>Overflow-Ellipsis</h2>
52
+ <d2l-demo-snippet>
53
+ <template>
54
+ <div class="truncate-container">
55
+ <d2l-link href="https://www.d2l.com" overflow-ellipsis>A really long link that will overflow its container.</d2l-link>
56
+ </div>
57
+ </template>
58
+ </d2l-demo-snippet>
59
+
36
60
  </d2l-demo-page>
37
61
  </body>
38
62
  </html>
package/components/link/link.js CHANGED
@@ -15,10 +15,16 @@ export const linkStyles = css`
15
15
  bottom: 0.2rem;
16
16
  top: 0.2rem;
17
17
  }
18
- .d2l-link:hover, .d2l-link:focus {
18
+ .d2l-link:hover {
19
19
  color: var(--d2l-color-celestine-minus-1);
20
20
  text-decoration: underline;
21
21
  }
22
+ .d2l-link:focus {
23
+ border-radius: 3px;
24
+ outline: 2px solid var(--d2l-color-celestine);
25
+ outline-offset: 1px;
26
+ text-decoration: underline;
27
+ }
22
28
  .d2l-link.d2l-link-main {
23
29
  font-weight: 700;
24
30
  }
@@ -66,6 +72,11 @@ class Link extends FocusMixin(LitElement) {
66
72
  * @type {boolean}
67
73
  */
68
74
  main: { type: Boolean, reflect: true },
75
+ /**
76
+ * Whether to truncate the link with ellipsis
77
+ * @type {boolean}
78
+ */
79
+ overflowEllipsis: { type: Boolean, attribute: 'overflow-ellipsis', reflect: true },
69
80
  /**
70
81
  * Whether to apply the "small" link style
71
82
  * @type {boolean}
@@ -93,6 +104,17 @@ class Link extends FocusMixin(LitElement) {
93
104
  font-size: 0.7rem;
94
105
  line-height: 1.05rem;
95
106
  }
107
+ :host([overflow-ellipsis]) {
108
+ display: inline-block;
109
+ max-width: 100%;
110
+ }
111
+ :host([overflow-ellipsis]) .d2l-link {
112
+ display: inline-block;
113
+ max-width: 100%;
114
+ overflow: hidden;
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ }
96
118
  `
97
119
  ];
98
120
  }
package/components/link/link.scss CHANGED
@@ -5,16 +5,20 @@
5
5
  &:visited,
6
6
  &:link,
7
7
  &:active {
8
+ border-radius: 3px;
8
9
  color: $d2l-color-celestine;
9
10
  text-decoration: none;
10
11
  cursor: pointer;
11
12
  }
12
- &:hover,
13
+ &:hover {
14
+ color: $d2l-color-celestine-minus-1;
15
+ text-decoration: underline;
16
+ }
13
17
  &:focus,
14
18
  &.d2l-link-focus {
15
- color: $d2l-color-celestine-minus-1;
19
+ outline: 2px solid $d2l-color-celestine;
20
+ outline-offset: 1px;
16
21
  text-decoration: underline;
17
- outline-width: 0;
18
22
  }
19
23
  &[main] {
20
24
  font-weight: 700;
package/components/list/list-item-content.js CHANGED
@@ -12,13 +12,17 @@ class ListItemContent extends LitElement {
12
12
 
13
13
  static get styles() {
14
14
  return [ bodySmallStyles, bodyCompactStyles, css`
15
- :host {
16
- overflow-x: hidden;
17
- }
18
15
  .d2l-list-item-content-text {
19
- color: var(--d2l-list-item-content-text-color);
20
16
  margin: 0;
21
- overflow: hidden;
17
+ }
18
+
19
+ .d2l-list-item-content-text > div {
20
+ border-radius: var(--d2l-list-item-content-text-border-radius);
21
+ color: var(--d2l-list-item-content-text-color);
22
+ display: inline-block;
23
+ outline: var(--d2l-list-item-content-text-outline, none);
24
+ outline-offset: var(--d2l-list-item-content-text-outline-offset);
25
+ overflow-wrap: anywhere;
22
26
  text-decoration: var(--d2l-list-item-content-text-decoration, none);
23
27
  }
24
28
 
@@ -38,14 +42,12 @@ class ListItemContent extends LitElement {
38
42
  .d2l-list-item-content-text-supporting-info ::slotted(*) {
39
43
  margin-top: 0.15rem;
40
44
  }
41
-
42
-
43
45
  `];
44
46
  }
45
47
 
46
48
  render() {
47
49
  return html`
48
- <div class="d2l-list-item-content-text d2l-body-compact"><slot></slot></div>
50
+ <div class="d2l-list-item-content-text d2l-body-compact"><div><slot></slot></div></div>
49
51
  <div class="d2l-list-item-content-text-secondary d2l-body-small"><slot name="secondary"></slot></div>
50
52
  <div class="d2l-list-item-content-text-supporting-info d2l-body-small"><slot name="supporting-info"></slot></div>
51
53
  `;
package/components/list/list-item-mixin.js CHANGED
@@ -182,6 +182,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
182
182
  --d2l-list-item-content-text-color: var(--d2l-color-celestine);
183
183
  --d2l-list-item-content-text-decoration: underline;
184
184
  }
185
+ :host([_focusing-primary-action]) .d2l-list-item-content {
186
+ --d2l-list-item-content-text-border-radius: 3px;
187
+ --d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
188
+ --d2l-list-item-content-text-outline-offset: 1px;
189
+ }
185
190
  [slot="content-action"] {
186
191
  height: 100%;
187
192
  }
package/components/menu/menu-item-styles.js CHANGED
@@ -4,34 +4,29 @@ import { css } from 'lit';
4
4
  export const menuItemStyles = css`
5
5
  :host {
6
6
  background-color: var(--d2l-menu-background-color);
7
- border: 1px solid transparent;
8
- border-top-color: var(--d2l-menu-border-color);
7
+ border-top: 1px solid var(--d2l-menu-border-color);
9
8
  box-sizing: border-box;
10
9
  color: var(--d2l-menu-foreground-color);
11
10
  cursor: pointer;
12
11
  display: block;
13
12
  font-size: 0.8rem;
14
13
  margin-top: -1px;
15
- outline: none;
16
14
  width: 100%;
17
15
  }
18
16
 
19
17
  :host(:hover),
20
18
  :host([first]:hover) {
21
19
  background-color: var(--d2l-menu-background-color-hover);
22
- border-bottom: 1px solid var(--d2l-menu-border-color-hover);
23
- border-top: 1px solid var(--d2l-menu-border-color-hover);
24
20
  color: var(--d2l-menu-foreground-color-hover);
25
- z-index: 2;
26
21
  }
27
22
 
28
- /** separated because Safari <15.4 is having trouble parsing these */
23
+ /** separated from hover selectors because Safari <15.4 is having trouble parsing these */
29
24
  :host(:focus-visible),
30
25
  :host([first]:focus-visible) {
31
- background-color: var(--d2l-menu-background-color-hover);
32
- border-bottom: 1px solid var(--d2l-menu-border-color-hover);
33
- border-top: 1px solid var(--d2l-menu-border-color-hover);
26
+ border-top-color: transparent;
34
27
  color: var(--d2l-menu-foreground-color-hover);
28
+ outline: 2px solid var(--d2l-menu-border-color-hover);
29
+ outline-offset: -3px;
35
30
  z-index: 2;
36
31
  }
37
32
 
@@ -54,15 +49,6 @@ export const menuItemStyles = css`
54
49
  border-top-color: transparent;
55
50
  }
56
51
 
57
- :host([last]:hover) {
58
- border-bottom-color: var(--d2l-menu-border-color-hover);
59
- }
60
-
61
- /** separated because Safari <15.4 is having trouble parsing these */
62
- :host([last]:focus-visible) {
63
- border-bottom-color: var(--d2l-menu-border-color-hover);
64
- }
65
-
66
52
  .d2l-menu-item-text {
67
53
  flex: auto;
68
54
  line-height: 1rem;
package/components/object-property-list/object-property-list-item-link.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { FocusMixin } from '../../mixins/focus-mixin.js';
1
2
  import { html } from 'lit';
2
3
  import { ifDefined } from 'lit/directives/if-defined.js';
3
4
  import { linkStyles } from '../link/link.js';
@@ -7,7 +8,7 @@ import { ObjectPropertyListItem } from './object-property-list-item.js';
7
8
  * A single object property, to be used within an object-property-list,
8
9
  * rendered as a link and with an optional icon.
9
10
  */
10
- class ObjectPropertyListItemLink extends ObjectPropertyListItem {
11
+ class ObjectPropertyListItemLink extends FocusMixin(ObjectPropertyListItem) {
11
12
  static get properties() {
12
13
  return {
13
14
  /**
@@ -35,6 +36,10 @@ class ObjectPropertyListItemLink extends ObjectPropertyListItem {
35
36
  ];
36
37
  }
37
38
 
39
+ static get focusElementSelector() {
40
+ return '.d2l-link';
41
+ }
42
+
38
43
  render() {
39
44
  return html`
40
45
  ${this._renderIcon()}
package/components/tooltip/demo/tooltip.html CHANGED
@@ -10,6 +10,7 @@
10
10
  import '../../colors/colors.js';
11
11
  import '../../demo/demo-page.js';
12
12
  import '../../inputs/input-text.js';
13
+ import '../../link/link.js';
13
14
  import '../tooltip.js';
14
15
  import '../tooltip-help.js';
15
16
  </script>
@@ -154,6 +155,15 @@
154
155
  <d2l-tooltip for="tooltip-long" show-truncated-only>
155
156
  Very Very Very Very Long Tooltip - this tooltip will show because the text is truncating.
156
157
  </d2l-tooltip>
158
+ <d2l-link id="link-short" href="https://www.d2l.com" overflow-ellipsis>Short Text</d2l-link>
159
+ <d2l-tooltip for="link-short" show-truncated-only>
160
+ This tooltip will not show.
161
+ </d2l-tooltip>
162
+ <d2l-link id="link-long" href="https://www.d2l.com" overflow-ellipsis>Very Very Very Very Long Text</d2l-link>
163
+ <d2l-tooltip for="link-long" show-truncated-only>
164
+ Very Very Very Very Long Text - this tooltip will show because the text is truncating.
165
+ </d2l-tooltip>
166
+
157
167
  </div>
158
168
  </template>
159
169
  </d2l-demo-snippet>
package/custom-elements.json CHANGED
@@ -7152,6 +7152,11 @@
7152
7152
  "description": "REQUIRED: URL or URL fragment of the link",
7153
7153
  "type": "string"
7154
7154
  },
7155
+ {
7156
+ "name": "overflow-ellipsis",
7157
+ "description": "Whether to truncate the link with ellipsis",
7158
+ "type": "boolean"
7159
+ },
7155
7160
  {
7156
7161
  "name": "target",
7157
7162
  "description": "Where to display the linked URL",
@@ -7189,6 +7194,12 @@
7189
7194
  "description": "REQUIRED: URL or URL fragment of the link",
7190
7195
  "type": "string"
7191
7196
  },
7197
+ {
7198
+ "name": "overflowEllipsis",
7199
+ "attribute": "overflow-ellipsis",
7200
+ "description": "Whether to truncate the link with ellipsis",
7201
+ "type": "boolean"
7202
+ },
7192
7203
  {
7193
7204
  "name": "target",
7194
7205
  "attribute": "target",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.78.3",
3
+ "version": "2.79.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",