@brightspace-ui/core 3.35.0 → 3.35.2

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.
@@ -36,7 +36,13 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
36
36
  * REQUIRED: Preset icon key (e.g. "tier1:gear")
37
37
  * @type {string}
38
38
  */
39
- icon: { type: String, reflect: true, required: true },
39
+ icon: {
40
+ type: String,
41
+ reflect: true,
42
+ required: {
43
+ validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon
44
+ }
45
+ },
40
46
 
41
47
  /**
42
48
  * ACCESSIBILITY: REQUIRED: Accessible text for the button
@@ -162,6 +168,8 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
162
168
  this._buttonId = getUniqueId();
163
169
  /** @internal */
164
170
  this._describedById = getUniqueId();
171
+ /** @internal */
172
+ this._hasCustomIcon = false;
165
173
  }
166
174
 
167
175
  render() {
@@ -185,13 +193,19 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
185
193
  name="${ifDefined(this.name)}"
186
194
  title="${ifDefined(this.text)}"
187
195
  type="${this._getType()}">
188
- <slot name="icon">${icon}</slot>
196
+ <slot name="icon" @slotchange="${this._handleSlotChange}">${icon}</slot>
189
197
  </button>
190
198
  ${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
191
199
  ${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
192
200
  `;
193
201
  }
194
202
 
203
+ _handleSlotChange(e) {
204
+ this._hasCustomIcon = e.target.assignedNodes().find(
205
+ node => node.nodeType === 1 && node.tagName.toLowerCase() === 'd2l-icon-custom'
206
+ ) !== undefined;
207
+ }
208
+
195
209
  }
196
210
 
197
211
  customElements.define('d2l-button-icon', ButtonIcon);
@@ -19,6 +19,12 @@
19
19
  <d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
20
20
  </d2l-demo-snippet>
21
21
 
22
+ <h2>Demo Snippet (custom width)</h2>
23
+
24
+ <d2l-demo-snippet style="max-width: 80%;">
25
+ <d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
26
+ </d2l-demo-snippet>
27
+
22
28
  <h2>Demo Snippet (using template)</h2>
23
29
 
24
30
  <d2l-demo-snippet>
@@ -101,7 +101,7 @@ class DemoSnippet extends LitElement {
101
101
  border-top-left-radius: 0;
102
102
  border-top-right-radius: 0;
103
103
  margin: 0;
104
- max-width: inherit;
104
+ max-width: 100%;
105
105
  }
106
106
  :host([code-view-hidden]) d2l-code-view {
107
107
  display: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.35.0",
3
+ "version": "3.35.2",
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",