Merge pull request #2009 from owncloud/make_oc_buttons_of_type_button…

…_by_default

OcButton: Change default type of buttons to button

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

src/components/atoms/OcButton/OcButton.vue

@@ -2,7 +2,6 @@
   <component
     :is="type"
     v-bind="additionalAttributes"
-    :type="submit"
     :aria-label="ariaLabel"
     :class="$_ocButton_buttonClass"
     :disabled="disabled"
@@ -73,13 +72,13 @@ export default {
       default: null,
     },
     /**
-     * Set the button’s type to “submit”.
+     * Set the button’s type ("submit", "button" or "reset").
      */
     submit: {
       type: String,
-      default: null,
+      default: "button",
       validator: value => {
-        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 }),
       }
     },
 

src/components/molecules/OcAlert/__snapshots__/OcAlert.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`OcAlert displays correct message 1`] = `
 <div class="oc-alert oc-alert-passive">
-  <oc-button-stub type="button" size="medium" arialabel="Close alert" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-alert-close">
+  <oc-button-stub type="button" size="medium" arialabel="Close alert" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-alert-close">
     <oc-icon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="inverse" color=""></oc-icon-stub>
   </oc-button-stub>
   <p class="slot-message">Test message</p>
@@ -18,7 +18,7 @@ exports[`OcAlert hides the close button if disabled 1`] = `
 
 exports[`OcAlert sets correct variation 1`] = `
 <div class="oc-alert oc-alert-primary">
-  <oc-button-stub type="button" size="medium" arialabel="Close alert" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-alert-close">
+  <oc-button-stub type="button" size="medium" arialabel="Close alert" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-alert-close">
     <oc-icon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="inverse" color=""></oc-icon-stub>
   </oc-button-stub>
   <p class="slot-message">Test message</p>

src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap

@@ -10,7 +10,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item">
       <!---->
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
@@ -34,7 +34,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
           </router-link-stub>
         </li>
         <li>
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
             Subfolder
           </oc-button-stub>
         </li>
@@ -59,7 +59,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item">
       <!---->
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
@@ -83,7 +83,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
           </router-link-stub>
         </li>
         <li>
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
             Subfolder
           </oc-button-stub>
         </li>

src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap

@@ -11,8 +11,8 @@ exports[`OcModal displays input 1`] = `
       <div class="oc-modal-body">
         <oc-text-input-stub id="oc-textinput-1" type="text" value="New folder" clearbuttonaccessiblelabel="" label="Folder name" fixmessageline="true" class="oc-modal-body-input"></oc-text-input-stub>
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
-          <oc-button-stub type="button" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -31,8 +31,8 @@ exports[`OcModal hides icon if not specified 1`] = `
       <div class="oc-modal-body">
         <p class="oc-modal-body-message">Example message</p>
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
-          <oc-button-stub type="button" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -51,8 +51,8 @@ exports[`OcModal matches snapshot 1`] = `
       <div class="oc-modal-body">
         <p class="oc-modal-body-message">Example message</p>
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
-          <oc-button-stub type="button" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -73,8 +73,8 @@ exports[`OcModal overrides props message with slot 1`] = `
           <p>Slot message</p>
         </div>
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub type="button" size="medium" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
-          <oc-button-stub type="button" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
+          <oc-button-stub type="button" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-confirm oc-ml-s">Confirm</oc-button-stub>
         </div>
       </div>
     </div>