@momentum-design/components 0.103.3 → 0.104.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 (11) hide show
  1. package/dist/browser/index.js +86 -82
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/button/button.component.d.ts +5 -1
  4. package/dist/components/button/button.component.js +19 -11
  5. package/dist/custom-elements.json +1528 -1512
  6. package/dist/react/button/index.d.ts +5 -1
  7. package/dist/react/button/index.js +5 -1
  8. package/dist/react/index.d.ts +3 -3
  9. package/dist/react/index.js +3 -3
  10. package/dist/utils/mixins/ButtonComponentMixin.js +11 -4
  11. package/package.json +1 -1
package/dist/components/button/button.component.d.ts CHANGED
@@ -28,15 +28,19 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
28
28
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
29
29
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
30
30
  * - **Icon button**: A button represented by just an icon without any text.
31
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
31
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
32
32
  *
33
33
  * @dependency mdc-icon
34
34
  *
35
35
  * @tagname mdc-button
36
36
  *
37
37
  * @slot - Text label of the button.
38
+ * @slot prefix - Content to be displayed before the text label.
39
+ * @slot postfix - Content to be displayed after the text label.
38
40
  *
39
41
  * @csspart button-text - Text label of the button, passed in default slot
42
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
43
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
40
44
  */
41
45
  declare class Button extends Button_base {
42
46
  /**
package/dist/components/button/button.component.js CHANGED
@@ -39,15 +39,19 @@ import { getIconNameWithoutStyle } from './button.utils';
39
39
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
40
40
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
41
41
  * - **Icon button**: A button represented by just an icon without any text.
42
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
42
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
43
43
  *
44
44
  * @dependency mdc-icon
45
45
  *
46
46
  * @tagname mdc-button
47
47
  *
48
48
  * @slot - Text label of the button.
49
+ * @slot prefix - Content to be displayed before the text label.
50
+ * @slot postfix - Content to be displayed after the text label.
49
51
  *
50
52
  * @csspart button-text - Text label of the button, passed in default slot
53
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
54
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
51
55
  */
52
56
  class Button extends ButtonComponentMixin(Buttonsimple) {
53
57
  constructor() {
@@ -124,21 +128,25 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
124
128
  }
125
129
  render() {
126
130
  return html `
127
- ${this.prefixFilledIconName
131
+ <slot name="prefix" part="prefix">
132
+ ${this.prefixFilledIconName
128
133
  ? html ` <mdc-icon
129
- name="${this.prefixFilledIconName}"
130
- part="prefix-icon"
131
- length-unit="rem"
132
- ></mdc-icon>`
134
+ name="${this.prefixFilledIconName}"
135
+ part="prefix-icon"
136
+ length-unit="rem"
137
+ ></mdc-icon>`
133
138
  : ''}
139
+ </slot>
134
140
  <slot @slotchange=${this.inferButtonType} part="button-text"></slot>
135
- ${this.postfixFilledIconName
141
+ <slot name="postfix" part="postfix">
142
+ ${this.postfixFilledIconName
136
143
  ? html ` <mdc-icon
137
- name="${this.postfixFilledIconName}"
138
- part="postfix-icon"
139
- length-unit="rem"
140
- ></mdc-icon>`
144
+ name="${this.postfixFilledIconName}"
145
+ part="postfix-icon"
146
+ length-unit="rem"
147
+ ></mdc-icon>`
141
148
  : ''}
149
+ </slot>
142
150
  `;
143
151
  }
144
152
  }