diff --git a/changelog/unreleased/change-ocbutton-default-type b/changelog/unreleased/change-ocbutton-default-type new file mode 100644 index 000000000..7db98d97e --- /dev/null +++ b/changelog/unreleased/change-ocbutton-default-type @@ -0,0 +1,9 @@ +Change: Default type of OcButton + +We've changed the default type of buttons rendered by `OcButton` to `button`. +Browsers otherwise assume they are of type `submit` which leads to very unexpected +behavior in forms, especially as we use `OcButton` in a lot of (not so obvious) places +for a11y reasons. + + +https://github.com/owncloud/owncloud-design-system/pull/2009 diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue index a46c51716..b59a475cf 100644 --- a/src/components/atoms/OcButton/OcButton.vue +++ b/src/components/atoms/OcButton/OcButton.vue @@ -2,7 +2,6 @@ { - return value.match(/(null|submit)/) + return value.match(/(null|button|submit|reset)/) }, }, /** @@ -156,6 +155,7 @@ export default { return { ...(this.href && { href: this.href }), ...(this.to && { to: this.to }), + ...(this.type === 'button' && { type: this.submit}), } }, diff --git a/src/components/molecules/OcAlert/__snapshots__/OcAlert.spec.js.snap b/src/components/molecules/OcAlert/__snapshots__/OcAlert.spec.js.snap index 1ab4964db..d3986fc2b 100644 --- a/src/components/molecules/OcAlert/__snapshots__/OcAlert.spec.js.snap +++ b/src/components/molecules/OcAlert/__snapshots__/OcAlert.spec.js.snap @@ -2,7 +2,7 @@ exports[`OcAlert displays correct message 1`] = `
- +

Test message

@@ -18,7 +18,7 @@ exports[`OcAlert hides the close button if disabled 1`] = ` exports[`OcAlert sets correct variation 1`] = `
- +

Test message

diff --git a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap index 2440b95b5..54b70d1db 100644 --- a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap +++ b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap @@ -10,7 +10,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
  • - Subfolder + Subfolder
  • @@ -34,7 +34,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
  • - + Subfolder
  • @@ -59,7 +59,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
  • - Subfolder + Subfolder
  • @@ -83,7 +83,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
  • - + Subfolder
  • diff --git a/src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap b/src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap index b140b4817..c953116bd 100644 --- a/src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap +++ b/src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap @@ -11,8 +11,8 @@ exports[`OcModal displays input 1`] = `
    - Cancel - Confirm + Cancel + Confirm
    @@ -31,8 +31,8 @@ exports[`OcModal hides icon if not specified 1`] = `

    Example message

    - Cancel - Confirm + Cancel + Confirm
    @@ -51,8 +51,8 @@ exports[`OcModal matches snapshot 1`] = `

    Example message

    - Cancel - Confirm + Cancel + Confirm
    @@ -73,8 +73,8 @@ exports[`OcModal overrides props message with slot 1`] = `

    Slot message

    - Cancel - Confirm + Cancel + Confirm