@brightspace-ui/core 2.169.0 → 2.170.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 (4) hide show
  1. package/components/button/button-add.js +102 -56
  2. package/components/button/demo/button-add.html +9 -27
  3. package/custom-elements.json +31 -9
  4. package/package.json +1 -1
package/components/button/button-add.js CHANGED
@@ -1,14 +1,19 @@
1
1
  import '../colors/colors.js';
2
- import '../icons/icon.js';
3
2
  import '../tooltip/tooltip.js';
4
- import { css, html, LitElement, unsafeCSS } from 'lit';
3
+ import { css, html, LitElement, nothing } from 'lit';
4
+ import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
5
5
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
6
- import { getFocusPseudoClass } from '../../helpers/focus.js';
7
6
  import { getUniqueId } from '../../helpers/uniqueId.js';
8
7
  import { ifDefined } from 'lit/directives/if-defined.js';
9
8
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
10
9
  import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
11
10
 
11
+ const MODE = {
12
+ ICON: 'icon',
13
+ ICON_AND_TEXT: 'icon-and-text',
14
+ ICON_WHEN_INTERACTED: 'icon-when-interacted'
15
+ };
16
+
12
17
  /**
13
18
  * A component for quickly adding items to a specific locaiton.
14
19
  */
@@ -16,23 +21,20 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
16
21
  static get properties() {
17
22
  return {
18
23
  /**
19
- * When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
20
- * @type {string}
24
+ * 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).
25
+ * @type {'icon'|'icon-and-text'|'icon-when-interacted'}
21
26
  */
22
- text: { type: String, required: true },
27
+ mode: { type: String },
23
28
  /**
24
- * When true, show the button with icon and visible text. When false, only show icon.
25
- * @type {boolean}
29
+ * When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
30
+ * @type {string}
26
31
  */
27
- textVisible: { type: Boolean, reflect: true, attribute: 'text-visible' }
32
+ text: { type: String, required: true }
28
33
  };
29
34
  }
30
35
 
31
36
  static get styles() {
32
37
  return css`
33
- :host {
34
- --d2l-button-add-line-style: solid;
35
- }
36
38
  button {
37
39
  align-items: center;
38
40
  background-color: transparent;
@@ -41,56 +43,31 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
41
43
  cursor: pointer;
42
44
  display: flex;
43
45
  font-family: inherit;
46
+ height: 0.9rem;
44
47
  justify-content: center;
45
48
  outline: none;
46
49
  padding: 0;
47
- position: relative;
48
50
  user-select: none;
49
51
  white-space: nowrap;
50
52
  width: 100%;
51
53
  }
52
54
 
53
55
  .line {
54
- border-top: 1px var(--d2l-button-add-line-style) var(--d2l-color-mica);
55
- margin: 3px 0; /** hover/click target */
56
+ border-top: 1px solid var(--d2l-color-mica);
56
57
  width: 100%;
57
58
  }
58
- button:hover .line,
59
- button:${unsafeCSS(getFocusPseudoClass())} .line {
60
- border-top-color: var(--d2l-color-celestine);
61
- }
62
-
63
- .content {
64
- align-items: center;
65
- background-color: white;
66
- display: flex;
67
- position: absolute;
68
- }
69
- :host([text-visible]) .content {
70
- color: var(--d2l-color-celestine);
71
- height: 1.5rem;
72
- padding: 0 0.3rem;
73
- }
74
59
 
75
- :host([text-visible]) d2l-icon,
76
- :host(:not([text-visible])) button:hover d2l-icon,
77
- :host(:not([text-visible])) button:${unsafeCSS(getFocusPseudoClass())} d2l-icon {
78
- color: var(--d2l-color-celestine);
79
- }
80
- :host(:not([text-visible])) d2l-icon {
81
- color: var(--d2l-color-galena);
82
- margin: -3px; /** hover/click target */
83
- padding: 3px; /** hover/click target */
60
+ button:hover .line,
61
+ button:focus .line {
62
+ border-top-color: var(--d2l-color-celestine-minus-1);
84
63
  }
85
- :host([text-visible]) d2l-icon {
86
- padding-inline-end: 0.2rem;
64
+ button:hover d2l-button-add-icon-text,
65
+ button:focus d2l-button-add-icon-text {
66
+ --d2l-button-add-icon-text-color: var(--d2l-color-celestine-minus-1);
87
67
  }
88
68
 
89
- span {
90
- font-size: 0.7rem;
91
- font-weight: 700;
92
- letter-spacing: 0.2px;
93
- line-height: 1rem;
69
+ :host([mode="icon-when-interacted"]) button:not(:focus):not(:hover) d2l-button-add-icon-text {
70
+ position: absolute;
94
71
  }
95
72
  `;
96
73
  }
@@ -98,8 +75,11 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
98
75
  constructor() {
99
76
  super();
100
77
 
101
- this.textVisible = false;
78
+ this.mode = MODE.ICON;
79
+
102
80
  this._buttonId = getUniqueId();
81
+ this._hasFocus = false;
82
+ this._hasHover = false;
103
83
  }
104
84
 
105
85
  static get focusElementSelector() {
@@ -108,20 +88,86 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
108
88
 
109
89
  render() {
110
90
  const text = this.text || this.localize('components.button-add.addItem');
111
- const id = !this.textVisible ? this._buttonId : undefined;
91
+ const id = !this.mode !== MODE.ICON_AND_TEXT ? this._buttonId : undefined;
92
+
93
+ const content = this.mode !== MODE.ICON_AND_TEXT
94
+ ? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.ICON_WHEN_INTERACTED}"></d2l-button-add-icon-text>`
95
+ : html`<d2l-button-add-icon-text text="${text}"></d2l-button-add-icon-text>`;
96
+ const tooltip = this.mode !== MODE.ICON_AND_TEXT
97
+ ? html`<d2l-tooltip class="vdiff-target" offset="18" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
98
+ : nothing;
112
99
 
113
100
  return html`
114
- <button class="d2l-label-text" id="${ifDefined(id)}">
101
+ <button
102
+ class="d2l-label-text d2l-visible-on-ancestor-target"
103
+ id="${ifDefined(id)}"
104
+ type="button">
105
+ <div class="line"></div>
106
+ ${content}
115
107
  <div class="line"></div>
116
- <div class="content">
117
- <d2l-icon icon="tier1:plus-default"></d2l-icon>
118
- ${this.textVisible
119
- ? html`<span>${text}</span>`
120
- : html`<d2l-tooltip class="vdiff-target" offset="18" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`}
121
- </div>
122
108
  </button>
109
+ ${tooltip}
123
110
  `;
124
111
  }
112
+
125
113
  }
126
114
  customElements.define('d2l-button-add', ButtonAdd);
127
115
 
116
+ /**
117
+ * @ignore
118
+ */
119
+ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
120
+ static get properties() {
121
+ return {
122
+ text: { type: String }
123
+ };
124
+ }
125
+
126
+ static get styles() {
127
+ return [visibleOnAncestorStyles, css`
128
+ :host {
129
+ --d2l-button-add-icon-text-color: var(--d2l-color-galena);
130
+ align-items: center;
131
+ display: flex;
132
+ }
133
+ :host([text]) {
134
+ --d2l-button-add-icon-text-color: var(--d2l-color-celestine);
135
+ color: var(--d2l-button-add-icon-text-color);
136
+ height: 1.5rem;
137
+ padding: 0 0.3rem;
138
+ }
139
+
140
+ svg {
141
+ fill: var(--d2l-button-add-icon-text-color);
142
+ }
143
+
144
+ :host([text]) svg {
145
+ padding-inline-end: 0.2rem;
146
+ }
147
+ :host(:not([text])) svg {
148
+ margin: -3px; /** hover/click target */
149
+ padding: 3px; /** hover/click target */
150
+ }
151
+
152
+ span {
153
+ font-size: 0.7rem;
154
+ font-weight: 700;
155
+ letter-spacing: 0.2px;
156
+ line-height: 1rem;
157
+ }`
158
+ ];
159
+ }
160
+
161
+ render() {
162
+ return html`
163
+ <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
164
+ <g>
165
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C10.3845 2 11.7378 2.41054 12.889 3.17971C14.0401 3.94888 14.9373 5.04213 15.4672 6.32122C15.997 7.6003 16.1356 9.00777 15.8655 10.3656C15.5954 11.7235 14.9287 12.9708 13.9497 13.9497C12.9708 14.9287 11.7235 15.5954 10.3656 15.8655C9.00777 16.1356 7.6003 15.997 6.32122 15.4672C5.04213 14.9373 3.94888 14.0401 3.17971 12.889C2.41054 11.7378 2 10.3845 2 9C2.00212 7.14413 2.7403 5.36489 4.05259 4.05259C5.36489 2.7403 7.14413 2.00212 9 2V2ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0Z" />
166
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5V8H5C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H8V13C8 13.5523 8.44772 14 9 14C9.55228 14 10 13.5523 10 13V10H13C13.5523 10 14 9.55228 14 9C14 8.44772 13.5523 8 13 8H10V5Z" />
167
+ </g>
168
+ </svg>
169
+ ${this.text ? html`<span class="d2l-label-text">${this.text}</span>` : nothing}
170
+ `;
171
+ }
172
+ }
173
+ customElements.define('d2l-button-add-icon-text', ButtonAddIconText);
package/components/button/demo/button-add.html CHANGED
@@ -9,8 +9,8 @@
9
9
  import '../button-add.js';
10
10
  </script>
11
11
  <style>
12
- .d2l-button-add-dashed {
13
- --d2l-button-add-line-style: dashed;
12
+ .d2l-button-add-demo-snippet-background {
13
+ background-color: var(--d2l-color-zircon-plus-2);
14
14
  }
15
15
  </style>
16
16
  </head>
@@ -18,45 +18,27 @@
18
18
 
19
19
  <d2l-demo-page page-title="d2l-button-add">
20
20
 
21
- <h2>Add Button</h2>
21
+ <h2>Default Mode (icon)</h2>
22
22
 
23
23
  <d2l-demo-snippet>
24
24
  <template>
25
- <d2l-button-add></d2l-button-add>
25
+ <d2l-button-add text="Add Item"></d2l-button-add>
26
26
  </template>
27
27
  </d2l-demo-snippet>
28
28
 
29
- <h2>Add Button, dashed line</h2>
29
+ <h2>"icon-and-text" Mode</h2>
30
30
 
31
- <d2l-demo-snippet>
32
- <template>
33
- <d2l-button-add class="d2l-button-add-dashed"></d2l-button-add>
34
- </template>
35
- </d2l-demo-snippet>
36
-
37
- <h2>Add Button, custom text</h2>
38
-
39
- <d2l-demo-snippet>
31
+ <d2l-demo-snippet class="d2l-button-add-demo-snippet-background">
40
32
  <template>
41
- <d2l-button-add text="Custom Tooltip"></d2l-button-add>
33
+ <d2l-button-add mode="icon-and-text" text="Custom Text"></d2l-button-add>
42
34
  </template>
43
35
  </d2l-demo-snippet>
44
36
 
45
-
46
- <h2>Add Button, text-visible</h2>
47
-
48
- <d2l-demo-snippet>
49
- <template>
50
- <d2l-button-add text-visible></d2l-button-add>
51
- </template>
52
- </d2l-demo-snippet>
53
-
54
-
55
- <h2>Add Button, text-visible, custom text</h2>
37
+ <h2>"icon-when-interacted" Mode</h2>
56
38
 
57
39
  <d2l-demo-snippet>
58
40
  <template>
59
- <d2l-button-add text-visible text="Custom Text"></d2l-button-add>
41
+ <d2l-button-add mode="icon-when-interacted" text="Add Content"></d2l-button-add>
60
42
  </template>
61
43
  </d2l-demo-snippet>
62
44
 
package/custom-elements.json CHANGED
@@ -354,10 +354,10 @@
354
354
  "type": "string"
355
355
  },
356
356
  {
357
- "name": "text-visible",
358
- "description": "When true, show the button with icon and visible text. When false, only show icon.",
359
- "type": "boolean",
360
- "default": "false"
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).",
359
+ "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
360
+ "default": "\"ICON\""
361
361
  }
362
362
  ],
363
363
  "properties": [
@@ -368,11 +368,11 @@
368
368
  "type": "string"
369
369
  },
370
370
  {
371
- "name": "textVisible",
372
- "attribute": "text-visible",
373
- "description": "When true, show the button with icon and visible text. When false, only show icon.",
374
- "type": "boolean",
375
- "default": "false"
371
+ "name": "mode",
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).",
374
+ "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
375
+ "default": "\"ICON\""
376
376
  },
377
377
  {
378
378
  "name": "documentLocaleSettings",
@@ -380,6 +380,28 @@
380
380
  }
381
381
  ]
382
382
  },
383
+ {
384
+ "name": "d2l-button-add-icon-text",
385
+ "path": "./components/button/button-add.js",
386
+ "attributes": [
387
+ {
388
+ "name": "text",
389
+ "type": "string"
390
+ }
391
+ ],
392
+ "properties": [
393
+ {
394
+ "name": "text",
395
+ "attribute": "text",
396
+ "type": "string"
397
+ },
398
+ {
399
+ "name": "visibleOnAncestor",
400
+ "type": "boolean",
401
+ "default": "false"
402
+ }
403
+ ]
404
+ },
383
405
  {
384
406
  "name": "d2l-button-icon",
385
407
  "path": "./components/button/button-icon.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.169.0",
3
+ "version": "2.170.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",