@momentum-design/components 0.104.7 → 0.104.8

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.
@@ -154,23 +154,25 @@ class MenuItemCheckbox extends MenuItem {
154
154
  }
155
155
  render() {
156
156
  return html `
157
- <div part="leading">
158
- ${this.staticCheckbox()}
159
- <slot name="leading-controls"></slot>
160
- <div part="leading-text">
161
- ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
162
- ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
163
- ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
157
+ <slot name="content">
158
+ <div part="leading">
159
+ ${this.staticCheckbox()}
160
+ <slot name="leading-controls"></slot>
161
+ <div part="leading-text">
162
+ ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
163
+ ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
164
+ ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
165
+ </div>
164
166
  </div>
165
- </div>
166
- <div part="trailing">
167
- <div part="trailing-text">
168
- ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
169
- ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
167
+ <div part="trailing">
168
+ <div part="trailing-text">
169
+ ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
170
+ ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
171
+ </div>
172
+ <slot name="trailing-controls"></slot>
173
+ ${this.staticToggle()} ${this.getCheckmarkIcon()}
170
174
  </div>
171
- <slot name="trailing-controls"></slot>
172
- ${this.staticToggle()} ${this.getCheckmarkIcon()}
173
- </div>
175
+ </slot>
174
176
  `;
175
177
  }
176
178
  }
@@ -163,23 +163,25 @@ class MenuItemRadio extends MenuItem {
163
163
  }
164
164
  render() {
165
165
  return html `
166
- <div part="leading">
167
- ${this.renderStaticRadio()}
168
- <slot name="leading-controls"></slot>
169
- <div part="leading-text">
170
- ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
171
- ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
172
- ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
166
+ <slot name="content">
167
+ <div part="leading">
168
+ ${this.renderStaticRadio()}
169
+ <slot name="leading-controls"></slot>
170
+ <div part="leading-text">
171
+ ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
172
+ ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
173
+ ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
174
+ </div>
173
175
  </div>
174
- </div>
175
- <div part="trailing">
176
- <div part="trailing-text">
177
- ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
178
- ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
176
+ <div part="trailing">
177
+ <div part="trailing-text">
178
+ ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
179
+ ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
180
+ </div>
181
+ <slot name="trailing-controls"></slot>
182
+ ${this.renderCheckmarkIcon()}
179
183
  </div>
180
- <slot name="trailing-controls"></slot>
181
- ${this.renderCheckmarkIcon()}
182
- </div>
184
+ </slot>
183
185
  `;
184
186
  }
185
187
  }
@@ -15,6 +15,7 @@ import type { IconNames } from '../icon/icon.types';
15
15
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
16
16
  *
17
17
  * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
18
+ * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
18
19
  */
19
20
  declare class MenuSection extends Component {
20
21
  /**
@@ -30,6 +30,7 @@ import { DEFAULTS } from './menusection.constants';
30
30
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
31
31
  *
32
32
  * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
33
+ * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
33
34
  */
34
35
  class MenuSection extends Component {
35
36
  constructor() {
@@ -106,7 +107,7 @@ class MenuSection extends Component {
106
107
  render() {
107
108
  return html `
108
109
  ${!this.hideHeaderText ? this.renderHeader() : null}
109
- <slot></slot>
110
+ <slot part="container"></slot>
110
111
  ${this.showDivider ? html `<mdc-divider variant="${this.dividerVariant}" part="divider"></mdc-divider>` : null}
111
112
  `;
112
113
  }
@@ -1,6 +1,8 @@
1
1
  import type { TypedCustomEvent } from '../../utils/types';
2
2
  import type MenuItem from '../menuitem/menuitem.component';
3
3
  export type MenuSectionChangeEvent = TypedCustomEvent<MenuItem>;
4
+ export type MenuSectionActionEvent = TypedCustomEvent<MenuItem>;
4
5
  export interface Events {
5
6
  onChangeEvent: MenuSectionChangeEvent;
7
+ onActionEvent: MenuSectionActionEvent;
6
8
  }