diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts index ed77ad9e567..b396155bfb2 100644 --- a/src/components/button/button.e2e.ts +++ b/src/components/button/button.e2e.ts @@ -1,10 +1,94 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; +import { accessible, disabled, HYDRATED_ATTR, labelable, defaults } from "../../tests/commonTests"; import { CSS } from "./resources"; import { GlobalTestProps } from "../../tests/utils"; import { html } from "../../../support/formatting"; describe("calcite-button", () => { + it("defaults", async () => + defaults("calcite-button", [ + { + propertyName: "alignment", + defaultValue: "center" + }, + { + propertyName: "appearance", + defaultValue: "solid" + }, + { + propertyName: "label", + defaultValue: undefined + }, + { + propertyName: "color", + defaultValue: "blue" + }, + { + propertyName: "disabled", + defaultValue: false + }, + { + propertyName: "href", + defaultValue: undefined + }, + { + propertyName: "iconEnd", + defaultValue: undefined + }, + { + propertyName: "iconFlipRtl", + defaultValue: undefined + }, + { + propertyName: "iconStart", + defaultValue: undefined + }, + { + propertyName: "intlLoading", + defaultValue: "Loading" + }, + { + propertyName: "loading", + defaultValue: false + }, + { + propertyName: "name", + defaultValue: undefined + }, + { + propertyName: "rel", + defaultValue: undefined + }, + { + propertyName: "form", + defaultValue: undefined + }, + { + propertyName: "round", + defaultValue: false + }, + { + propertyName: "scale", + defaultValue: "m" + }, + { + propertyName: "splitChild", + defaultValue: false + }, + { + propertyName: "target", + defaultValue: undefined + }, + { + propertyName: "type", + defaultValue: "button" + }, + { + propertyName: "width", + defaultValue: "auto" + } + ])); + it("renders as a button with default props", async () => { const page = await newE2EPage(); await page.setContent(`Continue`); diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 086fe734554..59d4e1232d4 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -93,7 +93,7 @@ export class Button implements LabelableComponent, InteractiveComponent { @Prop() target?: string; /** The type attribute to apply to the button */ - @Prop({ mutable: true }) type?: string; + @Prop({ mutable: true }) type = "button"; /** specify the width of the button, defaults to auto */ @Prop({ reflect: true }) width: Width = "auto"; @@ -135,9 +135,6 @@ export class Button implements LabelableComponent, InteractiveComponent { componentWillLoad(): void { if (Build.isBrowser) { this.updateHasContent(); - if (!this.href && !this.type) { - this.type = "submit"; - } } } @@ -270,13 +267,16 @@ export class Button implements LabelableComponent, InteractiveComponent { // act on a requested or nearby form based on type private handleClick = (): void => { const { formEl, type } = this; + + if (this.href) { + return; + } + // this.type refers to type attribute, not child element type - if (!this.href && type !== "button") { - if (type === "submit") { - formEl?.requestSubmit(); - } else if (type === "reset") { - formEl?.reset(); - } + if (type === "submit") { + formEl?.requestSubmit(); + } else if (type === "reset") { + formEl?.reset(); } }; }