@justeattakeaway/pie-button 0.31.0 → 0.33.0

package/dist/react.d.ts

@@ -9,7 +9,7 @@ export declare interface ButtonProps {
      */
     size: typeof sizes[number];
     /**
-     * What type attribute should be applied to the button. For example submit, button or menu.
+     * What type attribute should be applied to the button. For example submit, button.
      */
     type: typeof types[number];
     /**
@@ -32,17 +32,66 @@ export declare interface ButtonProps {
      * When true, displays a loading indicator inside the button.
      */
     isLoading: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    name?: string;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    value?: string;
+    /**
+     * The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formaction?: string;
+    /**
+     * If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted.
+     * If this attribute is specified, it overrides the enctype attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formenctype?: typeof formEncodingtypes[number];
+    /**
+     * If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the HTTP method used to submit the form.
+     * If specified, this attribute overrides the method attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formmethod?: typeof formMethodTypes[number];
+    /**
+     * If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted.
+     * If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formnovalidate?: boolean;
+    /**
+     * If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formtarget?: typeof formTargetTypes[number];
 }
 
+export declare const formEncodingtypes: readonly ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
+
+export declare const formMethodTypes: readonly ["post", "get", "dialog"];
+
+export declare const formTargetTypes: readonly ["_self", "_blank", "_parent", "_top"];
+
 export declare const iconPlacements: readonly ["leading", "trailing"];
 
 export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
 
 /**
+ * @tagname pie-button
  * @slot icon - The icon slot
  * @slot - Default slot
  */
 declare class PieButton_2 extends LitElement implements ButtonProps {
+    static formAssociated: boolean;
+    private readonly _internals;
+    get form(): HTMLFormElement | null;
+    constructor();
     size: ButtonProps['size'];
     type: ButtonProps['type'];
     variant: ButtonProps['variant'];
@@ -50,6 +99,23 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     disabled: boolean;
     isLoading: boolean;
     isFullWidth: boolean;
+    name?: string;
+    value?: string;
+    formaction: ButtonProps['formaction'];
+    formenctype: ButtonProps['formenctype'];
+    formmethod: ButtonProps['formmethod'];
+    formnovalidate: ButtonProps['formnovalidate'];
+    formtarget: ButtonProps['formtarget'];
+    /**
+     * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
+     * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
+     * should be neglible, however this should be monitored.
+     * This is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.
+     *
+     * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
+     */
+    private _simulateNativeButtonClick;
+    private _handleClick;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;
@@ -57,7 +123,7 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
 
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
 
-export declare const types: readonly ["submit", "button", "reset", "menu"];
+export declare const types: readonly ["submit", "button", "reset"];
 
 export declare type Variant = typeof variants[number];
 

package/dist/react.js

@@ -1,6 +1,6 @@
-import * as g from "react";
-import { PieButton as P } from "./index.js";
-import { iconPlacements as k, sizes as D, types as G, variants as O } from "./index.js";
+import * as E from "react";
+import { PieButton as M } from "./index.js";
+import { formEncodingtypes as j, formMethodTypes as k, formTargetTypes as D, iconPlacements as G, sizes as O, types as S, variants as _ } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 /**
@@ -8,31 +8,31 @@ import "lit/decorators.js";
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), B = (d, l, m, p, u) => {
-  const s = u == null ? void 0 : u[l];
-  s === void 0 || m === p ? m == null && l in HTMLElement.prototype ? d.removeAttribute(l) : d[l] = m : ((i, t, h) => {
-    let o = E.get(i);
-    o === void 0 && E.set(i, o = /* @__PURE__ */ new Map());
-    let a = o.get(t);
-    h !== void 0 ? a === void 0 ? (o.set(t, a = { handleEvent: h }), i.addEventListener(t, a)) : a.handleEvent = h : a !== void 0 && (o.delete(t), i.removeEventListener(t, a));
-  })(d, s, m);
+const P = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), b = (m, r, p, d, u) => {
+  const o = u == null ? void 0 : u[r];
+  o === void 0 || p === d ? p == null && r in HTMLElement.prototype ? m.removeAttribute(r) : m[r] = p : ((s, t, h) => {
+    let i = w.get(s);
+    i === void 0 && w.set(s, i = /* @__PURE__ */ new Map());
+    let a = i.get(t);
+    h !== void 0 ? a === void 0 ? (i.set(t, a = { handleEvent: h }), s.addEventListener(t, a)) : a.handleEvent = h : a !== void 0 && (i.delete(t), s.removeEventListener(t, a));
+  })(m, o, p);
 };
-function M(d = window.React, l, m, p, u) {
-  let s, i, t;
-  if (l === void 0) {
-    const r = d;
-    ({ tagName: i, elementClass: t, events: p, displayName: u } = r), s = r.react;
+function B(m = window.React, r, p, d, u) {
+  let o, s, t;
+  if (r === void 0) {
+    const l = m;
+    ({ tagName: s, elementClass: t, events: d, displayName: u } = l), o = l.react;
   } else
-    s = d, t = m, i = l;
-  const h = s.Component, o = s.createElement, a = new Set(Object.keys(p ?? {}));
-  class f extends h {
+    o = m, t = p, s = r;
+  const h = o.Component, i = o.createElement, a = new Set(Object.keys(d ?? {}));
+  class v extends h {
     constructor() {
       super(...arguments), this.o = null;
     }
     t(e) {
       if (this.o !== null)
-        for (const v in this.i)
-          B(this.o, v, this.props[v], e ? e[v] : void 0, p);
+        for (const f in this.i)
+          b(this.o, f, this.props[f], e ? e[f] : void 0, d);
     }
     componentDidMount() {
       this.t();
@@ -41,33 +41,36 @@ function M(d = window.React, l, m, p, u) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...v } = this.props;
+      const { _$Gl: e, ...f } = this.props;
       this.h !== e && (this.u = (n) => {
-        e !== null && ((c, w) => {
-          typeof c == "function" ? c(w) : c.current = w;
+        e !== null && ((c, g) => {
+          typeof c == "function" ? c(g) : c.current = g;
         })(e, n), this.o = n, this.h = e;
       }), this.i = {};
       const y = { ref: this.u };
-      for (const [n, c] of Object.entries(v))
-        b.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
-      return o(i, y);
+      for (const [n, c] of Object.entries(f))
+        P.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
+      return i(s, y);
     }
   }
-  f.displayName = u ?? t.name;
-  const N = s.forwardRef((r, e) => o(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
-  return N.displayName = f.displayName, N;
+  v.displayName = u ?? t.name;
+  const N = o.forwardRef((l, e) => i(v, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
+  return N.displayName = v.displayName, N;
 }
-const R = M({
+const L = B({
   displayName: "PieButton",
-  elementClass: P,
-  react: g,
+  elementClass: M,
+  react: E,
   tagName: "pie-button",
   events: {}
 });
 export {
-  R as PieButton,
-  k as iconPlacements,
-  D as sizes,
-  G as types,
-  O as variants
+  L as PieButton,
+  j as formEncodingtypes,
+  k as formMethodTypes,
+  D as formTargetTypes,
+  G as iconPlacements,
+  O as sizes,
+  S as types,
+  _ as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -31,12 +31,15 @@
     "@justeat/pie-design-tokens": "5.8.2",
     "@justeattakeaway/pie-components-config": "0.4.0",
     "@justeattakeaway/pie-css": "0.6.0",
-    "@justeattakeaway/pie-webc-core": "0.10.0"
+    "@justeattakeaway/pie-webc-core": "0.11.0"
   },
   "volta": {
     "extends": "../../../package.json"
   },
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "dependencies": {
+    "element-internals-polyfill": "1.3.8"
+  }
 }

package/src/defs.ts

@@ -1,5 +1,5 @@
 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
-export const types = ['submit', 'button', 'reset', 'menu'] as const;
+export const types = ['submit', 'button', 'reset'] as const;
 export const variants = [
     'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
     'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
@@ -8,13 +8,17 @@ export const iconPlacements = ['leading', 'trailing'] as const;
 
 export type Variant = typeof variants[number];
 
+export const formEncodingtypes = ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'] as const;
+export const formMethodTypes = ['post', 'get', 'dialog'] as const;
+export const formTargetTypes = ['_self', '_blank', '_parent', '_top'] as const;
+
 export interface ButtonProps {
     /**
      * What size the button should be.
      */
     size: typeof sizes[number];
     /**
-     * What type attribute should be applied to the button. For example submit, button or menu.
+     * What type attribute should be applied to the button. For example submit, button.
      */
     type: typeof types[number];
     /**
@@ -37,4 +41,49 @@ export interface ButtonProps {
      * When true, displays a loading indicator inside the button.
      */
     isLoading: boolean;
+
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    name?: string;
+
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    value?: string;
+
+    /**
+     * The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formaction?: string;
+
+    /**
+     * If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted.
+     * If this attribute is specified, it overrides the enctype attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formenctype?: typeof formEncodingtypes[number]
+
+    /**
+     * If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the HTTP method used to submit the form.
+     * If specified, this attribute overrides the method attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formmethod?: typeof formMethodTypes[number]
+
+    /**
+     * If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted.
+     * If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formnovalidate?: boolean;
+
+    /**
+     * If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
+     */
+    formtarget?: typeof formTargetTypes[number]
 }

package/src/index.ts

@@ -2,11 +2,12 @@ import {
     LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property } from 'lit/decorators.js';
-import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
-import styles from './button.scss?inline';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import {
     ButtonProps, sizes, types, variants, iconPlacements,
 } from './defs';
+import styles from './button.scss?inline';
+import 'element-internals-polyfill';
 
 // Valid values available to consumers
 export * from './defs';
@@ -14,10 +15,25 @@ export * from './defs';
 const componentSelector = 'pie-button';
 
 /**
+ * @tagname pie-button
  * @slot icon - The icon slot
  * @slot - Default slot
  */
 export class PieButton extends LitElement implements ButtonProps {
+    // TODO - we may want to consider making the element internals code reusable for other form controls.
+    static formAssociated = true;
+
+    private readonly _internals: ElementInternals;
+
+    public get form () {
+        return this._internals.form;
+    }
+
+    constructor () {
+        super();
+        this._internals = this.attachInternals();
+    }
+
     @property()
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: ButtonProps['size'] = 'medium';
@@ -43,6 +59,95 @@ export class PieButton extends LitElement implements ButtonProps {
     @property({ type: Boolean })
     public isFullWidth = false;
 
+    @property({ type: String })
+    public name?: string;
+
+    @property({ type: String })
+    public value?: string;
+
+    @property()
+    public formaction: ButtonProps['formaction'];
+
+    @property()
+    public formenctype: ButtonProps['formenctype'];
+
+    @property()
+    public formmethod: ButtonProps['formmethod'];
+
+    @property({ type: Boolean })
+    public formnovalidate: ButtonProps['formnovalidate'];
+
+    @property()
+    public formtarget: ButtonProps['formtarget'];
+
+    /**
+     * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
+     * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
+     * should be neglible, however this should be monitored.
+     * This is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.
+     *
+     * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
+     */
+    private _simulateNativeButtonClick (btnType: 'submit' | 'reset') {
+        if (!this.form) return;
+
+        const btn = document.createElement('button');
+        btn.type = btnType;
+
+        // Visually hidden styles
+        btn.style.position = 'absolute';
+        btn.style.width = '1px';
+        btn.style.height = '1px';
+        btn.style.padding = '0';
+        btn.style.margin = '-1px';
+        btn.style.overflow = 'hidden';
+        btn.style.border = '0';
+        btn.style.whiteSpace = 'nowrap';
+
+        if (btnType === 'submit') {
+            if (this.name) {
+                btn.name = this.name;
+            }
+            if (this.value) {
+                btn.value = this.value;
+            }
+            if (this.formaction) {
+                btn.setAttribute('formaction', this.formaction);
+            }
+            if (this.formenctype) {
+                btn.setAttribute('formenctype', this.formenctype);
+            }
+            if (this.formmethod) {
+                btn.setAttribute('formmethod', this.formmethod);
+            }
+            if (this.formnovalidate) {
+                btn.setAttribute('formnovalidate', 'formnovalidate');
+            }
+            if (this.formtarget) {
+                btn.setAttribute('formtarget', this.formtarget);
+            }
+        }
+
+        this.form.append(btn);
+        btn.click();
+        btn.remove();
+    }
+
+    private _handleClick () {
+        if (!this.isLoading && this.form) {
+            if (this.type === 'submit') {
+                // only submit the form if either formnovalidate is set, or the form passes validation checks (triggers native form validation)
+                if (this.formnovalidate || this.form.reportValidity()) {
+                    this._simulateNativeButtonClick('submit');
+                }
+            }
+
+            if (this.type === 'reset') {
+                this._simulateNativeButtonClick('reset');
+            }
+        }
+    }
+
     render () {
         const {
             type,
@@ -56,6 +161,7 @@ export class PieButton extends LitElement implements ButtonProps {
 
         return html`
             <button
+                @click=${this._handleClick}
                 class="o-btn"
                 type=${type}
                 variant=${variant}
@@ -77,7 +183,7 @@ export class PieButton extends LitElement implements ButtonProps {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define(componentSelector, PieButton);
+defineCustomElement(componentSelector, PieButton);
 
 declare global {
     interface HTMLElementTagNameMap {