Add type attributes to ipl-button and ipl-space, making them more conscious of HTML forms

Author: inkfarer

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 3.9.1
+
+- Add `type` attributes to ipl-button and ipl-space (when clickable), making them more conscious of HTML forms
+
 # 3.9.0
 
 - Allow adjusting the position of ipl-dialog

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iplsplatoon/vue-components",
-    "version": "3.9.0",
+    "version": "3.9.1",
     "description": "Vue components for internal Inkling Performance Labs utilities.",
     "homepage": "https://github.com/IPLSplatoon/vue-components",
     "repository": "https://github.com/IPLSplatoon/vue-components",

src/components/__tests__/__snapshots__/iplDialogTitle.test.ts.snap

@@ -3,15 +3,15 @@
 exports[`IplDialogTitle matches snapshot 1`] = `
 "<div class="ipl-dialog-title color-primary"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
   <div class="ipl-dialog-title__end">
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" data-test="close-button" class="close-button"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" type="button" data-test="close-button" class="close-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`IplDialogTitle matches snapshot when closing is disabled 1`] = `
 "<div class="ipl-dialog-title color-primary"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
   <div class="ipl-dialog-title__end">
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" data-test="close-button" class="close-button"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" type="button" data-test="close-button" class="close-button"></ipl-button-stub>
   </div>
 </div>"
 `;
@@ -20,7 +20,7 @@ exports[`IplDialogTitle matches snapshot with slots 1`] = `
 "<div class="ipl-dialog-title color-primary"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
   <div class="ipl-dialog-title__end">
     <div>End Item</div>
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" data-test="close-button" class="close-button"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" type="button" data-test="close-button" class="close-button"></ipl-button-stub>
   </div>
 </div>"
 `;

src/components/__tests__/__snapshots__/iplMessage.test.ts.snap

@@ -13,7 +13,7 @@ exports[`IplMessage matches snapshot when closeable 1`] = `
 "<div class="ipl-message__wrapper ipl-message__type-info">
   <font-awesome-icon-stub icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
   <div class="message-content">
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true" class="close-button"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true" type="button" class="close-button"></ipl-button-stub>
   </div>
 </div>"
 `;

src/components/__tests__/__snapshots__/iplPagination.test.ts.snap

@@ -7,8 +7,8 @@ exports[`iplPagination matches snapshot 1`] = `
   </div>
   <div class="page-buttons">
     <!--v-if-->
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true"></ipl-button-stub>
-    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true" type="button"></ipl-button-stub>
+    <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" errormessage="Error!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true" type="button"></ipl-button-stub>
   </div>
 </div>"
 `;

src/components/iplButton.vue

@@ -15,6 +15,7 @@
             'is-transparent': color === 'transparent',
             'inline': inline
         }"
+        :type="type"
         :disabled="hasLink ? undefined : disabledInternal"
         :autocomplete="hasLink ? undefined : 'off'"
         @click="handleClick"
@@ -135,6 +136,10 @@ export default defineComponent({
         inline: {
             type: Boolean,
             default: false
+        },
+        type: {
+            type: String,
+            default: 'button'
         }
     },
 

src/components/iplSpace.vue

@@ -3,6 +3,7 @@
         :is="clickable ? 'button' : 'div'"
         class="ipl-space"
         :class="`color-${color}`"
+        :type="clickable ? 'button' : undefined"
     >
         <slot />
     </component>