MWC Migration

We intend to migrate from MWC (Material Web Components) to oscd-ui components (https://github.com/OMICRONEnergyOSS/oscd-ui). Here is a list of changes in the API that might be useful for migrating plugins.

Theme

Add md variables to the theme.

/* Fallbacks for Material Design variables */
--md-sys-color-primary: var(--oscd-primary);
--md-sys-color-on-primary: var(--oscd-base3);
--md-sys-color-secondary: var(--oscd-secondary);
--md-sys-color-on-secondary: var(--oscd-base3);
--md-sys-color-secondary-container: var(--oscd-base2);
--md-sys-color-surface: var(--oscd-base3);
--md-sys-color-on-surface: var(--oscd-base00);
--md-sys-color-surface-variant: var(--oscd-base3);
--md-sys-color-on-surface-variant: var(--oscd-base00);
--md-sys-color-surface-bright: var(--oscd-base2);
--md-sys-color-surface-container: var(--oscd-base3);
--md-sys-color-surface-container-high: var(--oscd-base3);
--md-sys-color-surface-container-highest: var(--oscd-base3);
--md-sys-color-outline-variant: var(--oscd-primary);
--md-sys-color-scrim: #000000;
--md-sys-color-error: var(--oscd-error);
--md-sys-color-on-error: var(--oscd-base3);
--md-icon-button-disabled-icon-color: var(--oscd-base3);
/* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
--md-icon-button-disabled-icon-color: var(--oscd-base3);

Components

mwc-icon-button

Move icon from attribute to child element.

<mwc-icon-button icon="edit">
</mwc-icon-button>

->

<oscd-icon-button>
  <oscd-icon>edit</oscd-icon>
</oscd-icon-button>

mwc-list-item

Slot renamed from meta to end.

<mwc-list-item>
  <span slot="meta">Stuff at the end</span> 
</mwc-list-item>

->

<oscd-list-item>
  <span slot="end">Stuff at the end</span>
</oscd-list-item>

mwc-icon-button-toggle

mwc-icon-button-toggle replaced by oscd-icon-button with toggle attribute.

<mwc-icon-button-toggle
  on
  onIcon="keyboard_arrow_up"
  offIcon="keyboard_arrow_down"
  @click=${() => this.doStuff()}
>
</mwc-icon-button-toggle>

->

<oscd-icon-button toggle selected @click=${() => doStuff()}>
  <oscd-icon>keyboard_arrow_up</oscd-icon>
  <oscd-icon slot="selected">keyboard_arrow_down</oscd-icon>
</oscd-icon-button>

mwc-textarea

mwc-textarea replaced by oscd-filled-text-field with type textarea attribute.

<mwc-textarea
  label="Label"
  rows="2"
  cols="40">
</mwc-textarea>

->

<oscd-filled-text-field
  label="Label"
  type="textarea"
  rows="2"
  cols="40">
</oscd-filled-text-field>

mwc-switch

Attribute checked renamed to selected. Use <label> instead of <mwc-formfield> for the label.

<mwc-formfield label=${labelValue}>
  <mwc-switch
    ?checked=${value}>
  </mwc-switch>
</mwc-formfield>

->

<label>
  <oscd-switch
    ?selected=${value}>
  </oscd-switch>
  ${labelValue}
</label>

mwc-list

If you use a clickable list, you need to set type="button" on oscd-list-item and move the event handler from mwc-list to oscd-list-item. Note: There is a request-activation event on oscd-list, but it behaves differently from the selected event, e.g. it only triggers when the selection changes.

<mwc-list 
  @selected=${(e: SingleSelectedEvent) => { doStuff() }}>
  <mwc-list-item>
    Item 1
  </mwc-list-item>
</mwc-list>

->

<oscd-list>
  <oscd-list-item 
    type="button" 
    @click=${(e: Event) => doStuff()}>
    Item 1
  </oscd-list-item>
</oscd-list>

mwc-fab

Move icon from attribute to child element.

<mwc-fab icon="edit" label="Label">
</mwc-fab>

->

<oscd-fab label="Label">
  <oscd-icon slot="icon">edit</oscd-icon>
</oscd-fab>