Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-button-bar/mr-button-bar.js b/static_src/elements/framework/mr-button-bar/mr-button-bar.js
new file mode 100644
index 0000000..8cff503
--- /dev/null
+++ b/static_src/elements/framework/mr-button-bar/mr-button-bar.js
@@ -0,0 +1,100 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+
+import 'elements/framework/mr-dropdown/mr-dropdown.js';
+
+import 'shared/typedef.js';
+
+/** Button bar containing table controls. */
+export class MrButtonBar extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: flex;
+ }
+ button {
+ background: none;
+ color: var(--chops-link-color);
+ cursor: pointer;
+ font-size: var(--chops-normal-font-size);
+ font-weight: var(--chops-link-font-weight);
+
+ line-height: 24px;
+ padding: 4px 16px;
+
+ border: none;
+
+ align-items: center;
+ display: inline-flex;
+ }
+ button:hover {
+ background: var(--chops-active-choice-bg);
+ }
+ i.material-icons {
+ font-size: 20px;
+ margin-right: 4px;
+ vertical-align: middle;
+ }
+ mr-dropdown {
+ --mr-dropdown-anchor-padding: 6px 4px;
+ --mr-dropdown-icon-color: var(--chops-link-color);
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ ${this.items.map(_renderItem)}
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ items: {type: Array},
+ };
+ };
+
+ /** @override */
+ constructor() {
+ super();
+
+ /** @type {Array<MenuItem>} */
+ this.items = [];
+ }
+};
+
+/**
+ * Renders one item.
+ * @param {MenuItem} item
+ * @return {TemplateResult}
+ */
+function _renderItem(item) {
+ if (item.items) {
+ return html`
+ <mr-dropdown
+ icon=${item.icon}
+ menuAlignment="left"
+ label=${item.text}
+ .items=${item.items}
+ ></mr-dropdown>
+ `;
+ } else {
+ return html`
+ <button @click=${item.handler}>
+ <i class="material-icons" ?hidden=${!item.icon}>
+ ${item.icon}
+ </i>
+ ${item.text}
+ </button>
+ `;
+ }
+}
+
+customElements.define('mr-button-bar', MrButtonBar);