Input element (#24)

Things that need to be configurable:

TextArea aria-label
Button label, icon and theme

Fixes #16

package.json

@@ -57,9 +57,11 @@
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-avatar": "^1.0.3",
+    "@vaadin/vaadin-button": "^2.4.0",
     "@vaadin/vaadin-element-mixin": "^2.4.1",
     "@vaadin/vaadin-lumo-styles": "^1.6.1",
     "@vaadin/vaadin-material-styles": "^1.3.2",
+    "@vaadin/vaadin-text-field": "^2.8.0",
     "@vaadin/vaadin-themable-mixin": "^1.6.1"
   },
   "devDependencies": {

src/vaadin-message-input.d.ts

@@ -0,0 +1,25 @@
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+
+/**
+ * `<vaadin-message-input>` is a Web Component for sending messages.
+ * It consists of a text area that grows on along with the content, and a send button to send message.
+ *
+ * ```html
+ * <vaadin-message-input></vaadin-message-input>
+ * ```
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes ElementMixin
+ */
+declare class MessageInputElement extends ThemableMixin(ElementMixin(HTMLElement)) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-message-input': MessageInputElement;
+  }
+}
+
+export { MessageInputElement };

src/vaadin-message-input.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import '@vaadin/vaadin-button/src/vaadin-button.js';
+import '@vaadin/vaadin-text-field/src/vaadin-text-area.js';
+/**
+ * `<vaadin-message-input>` is a Web Component for sending messages.
+ * It consists of a text area that grows on along with the content, and a send button to send message.
+ *
+ * ```html
+ * <vaadin-message-input></vaadin-message-input>
+ * ```
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes ElementMixin
+ */
+class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          align-items: flex-start;
+          box-sizing: border-box;
+          display: flex;
+          max-height: 50vh;
+          overflow: hidden;
+        }
+        vaadin-text-area {
+          align-self: stretch;
+          flex-grow: 1;
+          padding: 0;
+        }
+        vaadin-button {
+          flex-shrink: 0;
+          margin: 0;
+        }
+      </style>
+      <vaadin-text-area placeholder="Message"></vaadin-text-area>
+      <vaadin-button theme="primary contained">Send</vaadin-button>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-message-input';
+  }
+
+  static get version() {
+    return '1.0.0-alpha1';
+  }
+
+  ready() {
+    super.ready();
+
+    // Set aria-label to provide an accessible name for the labelless input
+    const textarea = this.shadowRoot.querySelector('vaadin-text-area').inputElement;
+    textarea.setAttribute('aria-label', 'Message');
+    textarea.removeAttribute('aria-labelledby');
+
+    // Set initial height to one row
+    textarea.setAttribute('rows', 1);
+    textarea.style.minHeight = '0';
+  }
+}
+
+customElements.define(MessageInputElement.is, MessageInputElement);
+
+export { MessageInputElement };

test/message-input.test.js

@@ -0,0 +1,24 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@open-wc/testing-helpers';
+import '../vaadin-message-input.js';
+
+describe('message-input', () => {
+  let messageInput;
+
+  beforeEach(() => {
+    messageInput = fixtureSync('<vaadin-message-input></vaadin-message-input>');
+  });
+
+  it('should have a valid version number', () => {
+    expect(messageInput.constructor.version).to.match(/^(\d+\.)?(\d+\.)?(\d+)(-(alpha|beta)\d+)?$/);
+  });
+
+  it('message should be initialized', () => {
+    expect(messageInput.shadowRoot.querySelector('vaadin-text-area')).to.be.not.undefined;
+    expect(messageInput.shadowRoot.querySelector('vaadin-button')).to.be.not.undefined;
+  });
+
+  it('text area placeholder should be set', () => {
+    expect(messageInput.shadowRoot.querySelector('vaadin-text-area').placeholder).to.be.equal('Message');
+  });
+});

test/visual/default.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 
-<head lang="en">
+<html lang="en">
+<head>
   <meta charset="UTF-8" />
   <title>Message tests</title>
   <script>
@@ -39,3 +40,4 @@
     })();
   </script>
 </body>
+</html>

test/visual/message-input.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Message tests</title>
+  <script>
+    window.polymerSkipLoadingFontRoboto = true;
+  </script>
+  <style>
+    html {
+      --vaadin-user-color-1: blue;
+      --vaadin-user-color-2: green;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="tests" style="padding: 10px">
+    <vaadin-message-list></vaadin-message-list>
+    <vaadin-message-input></vaadin-message-input>
+  </div>
+
+  <script type="module">
+    (async () => {
+      const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+
+      await import('../../theme/' + theme + '/vaadin-message-list.js');
+      await import('../../theme/' + theme + '/vaadin-message-input.js');
+
+      window.requestAnimationFrame(() => {
+        const messageList = document.querySelector('vaadin-message-list');
+        messageList.items = [
+          {
+            text: 'Hello list',
+            time: 'yesterday',
+            userName: 'Matt Mambo',
+            userAbbr: 'MM',
+            userColorIndex: 1
+          },
+          {
+            text: 'Another message',
+            time: 'right now',
+            userName: 'Linsey Listy',
+            userAbbr: 'LL',
+            userColorIndex: 2,
+            userImg: '/test/visual/avatars/avatar.jpg'
+          }
+        ];
+        document.getElementById('tests').dataset.ready = true;
+      });
+    })();
+  </script>
+</body>
+
+</html>

test/visual/message-list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 
-<head lang="en">
+<html lang="en">
+<head>
   <meta charset="UTF-8" />
   <title>Message tests</title>
   <script>
@@ -49,3 +50,4 @@
     })();
   </script>
 </body>
+</html>

test/visual/test.js

@@ -21,3 +21,7 @@ describe('vaadin-message', () => {
 describe('vaadin-message-list', () => {
   assertView('message-list', 'message-list.html');
 });
+
+describe('vaadin-message-input', () => {
+  assertView('message-input', 'message-input.html');
+});

theme/lumo/vaadin-message-input-styles.js

@@ -0,0 +1,26 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-area-styles.js';
+import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field-styles.js';
+
+registerStyles(
+  'vaadin-message-input',
+  css`
+    :host {
+      padding: var(--lumo-space-s) var(--lumo-space-m);
+    }
+
+    vaadin-text-area {
+      margin: 0 var(--lumo-space-s) 0 0;
+    }
+
+    :host([dir='rtl']) vaadin-text-area {
+      margin: 0 0 0 var(--lumo-space-s);
+    }
+  `,
+  { moduleId: 'lumo-message-input' }
+);

theme/lumo/vaadin-message-input.js

@@ -0,0 +1,2 @@
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-message-input.js';

theme/lumo/vaadin-message-styles.js

@@ -4,7 +4,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-avatar/theme/lumo/vaadin-avatar.js';
+import '@vaadin/vaadin-avatar/theme/lumo/vaadin-avatar-styles.js';
 
 registerStyles(
   'vaadin-message',
@@ -35,11 +35,19 @@ registerStyles(
       margin-right: var(--lumo-space-s);
     }
 
+    [part='name']:empty {
+      margin-right: 0;
+    }
+
     :host([dir='rtl']) [part='name'] {
       margin-left: var(--lumo-space-s);
       margin-right: 0;
     }
 
+    :host([dir='rtl']) [part='name']:empty {
+      margin-left: 0;
+    }
+
     [part='time'] {
       color: var(--lumo-secondary-text-color);
       font-size: var(--lumo-font-size-s);

theme/material/vaadin-message-input-styles.js

@@ -0,0 +1,23 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import '@vaadin/vaadin-button/theme/material/vaadin-button-styles.js';
+import '@vaadin/vaadin-text-field/theme/material/vaadin-text-area-styles.js';
+
+registerStyles(
+  'vaadin-message-input',
+  css`
+    :host {
+      padding: 0.5em 1em;
+    }
+
+    vaadin-text-area {
+      margin: 0 0.5em 0 0;
+    }
+
+    :host([dir='rtl']) vaadin-text-area {
+      margin: 0 0 0 0.5em;
+    }
+  `,
+  { moduleId: 'material-message-input' }
+);

theme/material/vaadin-message-input.js

@@ -0,0 +1,2 @@
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-message-input.js';

vaadin-message-input.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-message-input.js';

vaadin-message-input.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-message-input.js';
+export * from './src/vaadin-message-input.js';