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);
diff --git a/static_src/elements/framework/mr-button-bar/mr-button-bar.test.js b/static_src/elements/framework/mr-button-bar/mr-button-bar.test.js
new file mode 100644
index 0000000..349a8df
--- /dev/null
+++ b/static_src/elements/framework/mr-button-bar/mr-button-bar.test.js
@@ -0,0 +1,53 @@
+// 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 {assert} from 'chai';
+import sinon from 'sinon';
+
+import {MrButtonBar} from './mr-button-bar.js';
+
+/** @type {MrButtonBar} */
+let element;
+
+describe('mr-button-bar', () => {
+ beforeEach(() => {
+ // @ts-ignore
+ element = document.createElement('mr-button-bar');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrButtonBar);
+ });
+
+ it('renders button items', async () => {
+ const handler = sinon.stub();
+
+ element.items = [{icon: 'emoji_nature', text: 'Pollinate', handler}];
+ await element.updateComplete;
+
+ const button = element.shadowRoot.querySelector('button');
+ button.click();
+
+ assert.include(button.innerHTML, 'emoji_nature');
+ assert.include(button.innerHTML, 'Pollinate');
+ sinon.assert.calledOnce(handler);
+ });
+
+ it('renders dropdown items', async () => {
+ const items = [{icon: 'emoji_nature', text: 'Pollinate'}];
+ element.items = [{icon: 'more_vert', text: 'More actions...', items}];
+ await element.updateComplete;
+
+ /** @type {MrDropdown} */
+ const dropdown = element.shadowRoot.querySelector('mr-dropdown');
+ assert.strictEqual(dropdown.icon, 'more_vert');
+ assert.strictEqual(dropdown.label, 'More actions...');
+ assert.strictEqual(dropdown.items, items);
+ });
+});