From f713ba04d9b328d365b67c440cecea9ea6cd463b Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 19 Jan 2021 16:12:23 +0530
Subject: [PATCH] #69 menu button style overwrite

---
 src/editor/components/seMenu.js              |  2 +-
 src/editor/components/sePlainBorderButton.js | 34 ++++++++++++++++++++
 src/editor/components/sePlainMenuButton.js   | 21 ++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/editor/components/sePlainBorderButton.js
 create mode 100644 src/editor/components/sePlainMenuButton.js

diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js
index 2c80fa5e..78e9b7fd 100644
--- a/src/editor/components/seMenu.js
+++ b/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 = `
diff --git a/src/editor/components/sePlainBorderButton.js b/src/editor/components/sePlainBorderButton.js
new file mode 100644
index 00000000..6fd53c75
--- /dev/null
+++ b/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;
diff --git a/src/editor/components/sePlainMenuButton.js b/src/editor/components/sePlainMenuButton.js
new file mode 100644
index 00000000..85c29c21
--- /dev/null
+++ b/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);