@brightspace-ui/core 2.175.0 → 2.175.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 (4) hide show
  1. package/components/button/README.md +21 -0
  2. package/components/button/button-add.js +11 -11
  3. package/custom-elements.json +6 -6
  4. package/package.json +1 -1
package/components/button/README.md CHANGED
@@ -175,6 +175,27 @@ To make your `d2l-button-icon` accessible, use the following properties when app
175
175
  </d2l-button-icon>
176
176
  ```
177
177
 
178
+ ## Add Button [d2l-button-add]
179
+
180
+ The `d2l-button-add` element is for quickly adding new items inline (for example in a list).
181
+
182
+ <!-- docs: demo code properties name:d2l-button-add display:block autoSize:false size:xsmall -->
183
+ ```html
184
+ <script type="module">
185
+ import '@brightspace-ui/core/components/button/button-add.js';
186
+ </script>
187
+ <d2l-button-add text="Add New Item"></d2l-button-add>
188
+ ```
189
+
190
+ <!-- docs: start hidden content -->
191
+ ### Properties
192
+
193
+ | Property | Type | Description |
194
+ |--|--|--|
195
+ | `text` | String, required | The text associated with the button. When mode is "icon-and-text", this text is displayed next to the icon. Otherwise this text is in a tooltip. |
196
+ | `mode` | String | Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus). |
197
+ <!-- docs: end hidden content -->
198
+
178
199
  ## Floating Buttons [d2l-floating-buttons]
179
200
 
180
201
  See [floating buttons](https://github.com/BrightspaceUI/core/tree/main/components/button/floating-buttons.md).
package/components/button/button-add.js CHANGED
@@ -11,9 +11,9 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
11
11
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
12
12
 
13
13
  const MODE = {
14
- ICON: 'icon',
15
- ICON_AND_TEXT: 'icon-and-text',
16
- ICON_WHEN_INTERACTED: 'icon-when-interacted'
14
+ icon: 'icon',
15
+ icon_and_text: 'icon-and-text',
16
+ icon_when_interacted: 'icon-when-interacted'
17
17
  };
18
18
 
19
19
  /**
@@ -23,12 +23,12 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
23
23
  static get properties() {
24
24
  return {
25
25
  /**
26
- * Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus).
26
+ * Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).
27
27
  * @type {'icon'|'icon-and-text'|'icon-when-interacted'}
28
28
  */
29
29
  mode: { type: String, reflect: true },
30
30
  /**
31
- * When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
31
+ * The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
32
32
  * @type {string}
33
33
  */
34
34
  text: { type: String, required: true }
@@ -155,7 +155,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
155
155
  constructor() {
156
156
  super();
157
157
 
158
- this.mode = MODE.ICON;
158
+ this.mode = MODE.icon;
159
159
 
160
160
  this._buttonId = getUniqueId();
161
161
  }
@@ -166,13 +166,13 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
166
166
 
167
167
  render() {
168
168
  const text = this.text || this.localize('components.button-add.addItem');
169
- const id = !this.mode !== MODE.ICON_AND_TEXT ? this._buttonId : undefined;
170
- const offset = this.mode === MODE.ICON_WHEN_INTERACTED ? 23 : 18;
169
+ const id = !this.mode !== MODE.icon_and_text ? this._buttonId : undefined;
170
+ const offset = this.mode === MODE.icon_when_interacted ? 23 : 18;
171
171
 
172
- const content = this.mode !== MODE.ICON_AND_TEXT
173
- ? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.ICON_WHEN_INTERACTED}" animation-type="opacity"></d2l-button-add-icon-text>`
172
+ const content = this.mode !== MODE.icon_and_text
173
+ ? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.icon_when_interacted}" animation-type="opacity"></d2l-button-add-icon-text>`
174
174
  : html`<d2l-button-add-icon-text text="${text}"></d2l-button-add-icon-text>`;
175
- const tooltip = this.mode !== MODE.ICON_AND_TEXT
175
+ const tooltip = this.mode !== MODE.icon_and_text
176
176
  ? html`<d2l-tooltip class="vdiff-target" delay="100" offset="${offset}" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
177
177
  : nothing;
178
178
 
package/custom-elements.json CHANGED
@@ -350,29 +350,29 @@
350
350
  "attributes": [
351
351
  {
352
352
  "name": "text",
353
- "description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
353
+ "description": "The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.",
354
354
  "type": "string"
355
355
  },
356
356
  {
357
357
  "name": "mode",
358
- "description": "Display mode of the component. Defaults to \"icon\" (plus icon is always visible). Other options are \"icon-and-text\" (plus icon and text are always visible), and \"icon-when-interacted\" (plus icon is only visible when hover or focus).",
358
+ "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).",
359
359
  "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
360
- "default": "\"ICON\""
360
+ "default": "\"icon\""
361
361
  }
362
362
  ],
363
363
  "properties": [
364
364
  {
365
365
  "name": "text",
366
366
  "attribute": "text",
367
- "description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
367
+ "description": "The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.",
368
368
  "type": "string"
369
369
  },
370
370
  {
371
371
  "name": "mode",
372
372
  "attribute": "mode",
373
- "description": "Display mode of the component. Defaults to \"icon\" (plus icon is always visible). Other options are \"icon-and-text\" (plus icon and text are always visible), and \"icon-when-interacted\" (plus icon is only visible when hover or focus).",
373
+ "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).",
374
374
  "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
375
- "default": "\"ICON\""
375
+ "default": "\"icon\""
376
376
  },
377
377
  {
378
378
  "name": "documentLocaleSettings",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.175.0",
3
+ "version": "2.175.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",