#69 menu button style overwrite

src/editor/components/seMenu.js

@@ -1,6 +1,6 @@
 /* eslint-disable node/no-unpublished-import */
-import 'elix/define/MenuButton.js';
 import 'elix/define/MenuItem.js';
+import './sePlainMenuButton.js';
 
 const template = document.createElement('template');
 template.innerHTML = `

src/editor/components/sePlainBorderButton.js

@@ -0,0 +1,34 @@
+/* eslint-disable node/no-unpublished-import */
+import {template} from 'elix/src/base/internal.js';
+import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
+import PlainButton from 'elix/src/plain/PlainButton.js';
+
+/**
+ * @class SePlainBorderButton
+ * Button with a border in the Plain reference design system
+ *
+ * @inherits PlainButton
+ */
+class SePlainBorderButton extends PlainButton {
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [template] () {
+    const result = super[template];
+    result.content.append(
+      fragmentFrom.html`
+        <style>
+          [part~="button"] {
+            background: #72797A;
+            border: 1px solid #ccc;
+            padding: 0.25em 0.5em;
+          }
+        </style>
+      `
+    );
+    return result;
+  }
+}
+
+export default SePlainBorderButton;

src/editor/components/sePlainMenuButton.js

@@ -0,0 +1,21 @@
+/* eslint-disable node/no-unpublished-import */
+import PlainMenuButton from 'elix/src/plain/PlainMenuButton.js';
+import {defaultState} from 'elix/src/base/internal.js';
+import sePlainBorderButton from './sePlainBorderButton.js';
+
+/**
+ * @class ElixMenuButton
+ */
+export default class ElixMenuButton extends PlainMenuButton {
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [defaultState] () {
+    return Object.assign(super[defaultState], {
+      sourcePartType: sePlainBorderButton
+    });
+  }
+}
+
+customElements.define('elix-menu-button', ElixMenuButton);