@brightspace-ui/core 2.78.3 → 2.79.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 (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 +7 -3
  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
@@ -96,10 +96,14 @@ export const htmlBlockContentStyles = css`
96
96
  cursor: pointer;
97
97
  text-decoration: none;
98
98
  }
99
- a:hover,
100
- a:focus {
99
+ a:hover {
101
100
  color: var(--d2l-color-celestine-minus-1, #004489);
102
- outline-width: 0;
101
+ text-decoration: underline;
102
+ }
103
+ a:focus {
104
+ border-radius: 3px;
105
+ outline: 2px solid var(--d2l-color-celestine, #006fbf);
106
+ outline-offset: 1px;
103
107
  text-decoration: underline;
104
108
  }
105
109
  @media print {
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.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",