Merge pull request #865 from owncloud/fix-button-click-event

changelog/1.10.0_2020-09-16/reworked-button

@@ -5,4 +5,5 @@ To add an icon into the button, it needs to be included in the slot together wit
 We've added css grid into the button to ensure that all child items of the button will have a predefined gutter between them.
 We've removed all UIKit button styles from the button component.
 
-https://github.com/owncloud/owncloud-design-system/pull/418
+https://github.com/owncloud/owncloud-design-system/pull/418
+https://github.com/owncloud/owncloud-design-system/pull/865

jest.conf.js

@@ -10,6 +10,7 @@ module.exports = {
   transform: {
     "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
     ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
+    "^.+\\.svg$": "jest-svg-transformer",
   },
   setupFiles: ["./jest.setup.js"],
   snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],

package.json

@@ -163,6 +163,7 @@
     "jest-haste-map": "^25.1.0",
     "jest-resolve": "^25.1.0",
     "jest-serializer-vue": "^2.0.2",
+    "jest-svg-transformer": "^1.0.0",
     "lint-staged": "^10.0.7",
     "node-notifier": "^6.0.0",
     "node-sass": "^4.13.1",

src/elements/OcButton.vue

@@ -7,6 +7,7 @@
     :aria-label="ariaLabel"
     :class="$_ocButton_buttonClass"
     :disabled="disabled"
+    @click="$emit('click')"
   >
     <!-- @slot Content of the button -->
     <slot />

src/elements/OcGrid.vue

@@ -119,8 +119,8 @@ export default {
     </div>
     <div class="uk-width-auto">
       <div class="uk-button-group">
-      <oc-button text="Nothing">Nothing</oc-button>
-        <oc-button id="my_drop_1" icon="filter_list" />
+        <oc-button text="Nothing">Nothing</oc-button>
+        <oc-button id="my_drop_1"><oc-icon name="filter_list" /></oc-button>
       </div>
     </div>
   </oc-grid>

src/elements/OcSidebar.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils"
+import { shallowMount, mount } from "@vue/test-utils"
 import Sidebar from "./OcSidebar.vue"
 
 const defaultProps = {
@@ -69,7 +69,7 @@ describe("OcSidebar", () => {
   })
 
   it('Emits closed event', async () => {
-    const wrapper = shallowMount(Sidebar, {
+    const wrapper = mount(Sidebar, {
       propsData: {
         ...defaultProps,
         fixed: true

src/elements/OcSidebar.vue

@@ -5,7 +5,7 @@
         v-if="fixed"
         class="oc-sidebar-button-close"
         variation="raw"
-        @click.native="$_ocSidebar_buttonClose_click"
+        @click="$_ocSidebar_buttonClose_click"
         :aria-label="closeButtonLabel"
       >
         <oc-icon name="close" aria-hidden="true" />

src/elements/OcSidebarNavItem.vue

@@ -12,10 +12,15 @@
   </li>
 </template>
 <script>
+import OcIcon from "./OcIcon.vue"
+
 export default {
   name: "oc-sidebar-nav-item",
   status: "prototype",
   release: "1.0.0",
+  components: {
+    OcIcon
+  },
   props: {
     active: {
       type: Boolean,

src/pages/Files.vue

@@ -39,7 +39,9 @@ export default {
 ```jsx
 <template>
   <!-- top container to fill the whole screen/area, but with scrollbars  -->
-  <div id="oc-content" style="background-color: white; overflow: auto; height: 70vh; ">
+  <div id="oc-content" style="background-color: #fff;
+  height: 70vh;
+  overflow: auto;">
     <oc-dialog name="OcDialog" title="Not implemented">
       <template slot="content">
         This feature is not implemented yet.
@@ -72,11 +74,12 @@ export default {
           />
           <oc-button
             id="_apps"
-            icon="apps"
             variation="primary"
             class="oc-cursor-pointer uk-padding-small uk-height-1-1"
             aria-label="Application Switcher"
-           />
+          >
+            <oc-icon name="apps" />
+          </oc-button>
           <div class="padding-small uk-height-1-1">
             <oc-avatar
               class="oc-topbar-personal-avatar oc-cursor-pointer"
@@ -100,10 +103,7 @@ export default {
           <h5 class="uk-h4">Hello World !</h5>
           <p class="uk-text-small">Welcome to The System</p>
           <div class="uk-button-group uk-width-1-1 uk-flex-right">
-            <oc-button
-              id="resolve-notification-button"
-              size="small"
-            >Mark as read</oc-button>
+            <oc-button id="resolve-notification-button" size="small">Mark as read</oc-button>
           </div>
           <hr/>
         </div>
@@ -115,10 +115,7 @@ export default {
             <a href="#" class="uk-link" target="_blank">Link</a>
           </p>
           <div class="uk-button-group uk-width-1-1 uk-flex-right">
-            <oc-button
-              id="resolve-notification-button"
-              size="small"
-            >Mark as read</oc-button>
+            <oc-button id="resolve-notification-button" size="small">Mark as read</oc-button>
           </div>
         </div>
       </div>
@@ -241,9 +238,9 @@ export default {
               <oc-table-cell class="uk-text-muted uk-text-nowrap uk-visible@s" v-text=" ++o + ' days ago'" />
               <oc-table-cell>
                 <div class="uk-button-group">
-                  <oc-button icon="edit" aria-label="Edit Picture" />
-                  <oc-button icon="file_download" aria-label="Download Picture" />
-                  <oc-button icon="delete" aria-label="Delete Picture" />
+                  <oc-button aria-label="Edit Picture"><oc-icon name="edit" /></oc-button>
+                  <oc-button aria-label="Download Picture"><oc-icon name="file_download" /></oc-button>
+                  <oc-button aria-label="Delete Picture"><oc-icon name="delete" /></oc-button>
                 </div>
               </oc-table-cell>
             </oc-table-row>

src/patterns/OcAppBar.vue

@@ -37,7 +37,7 @@ export default {
   <div class="uk-width-auto">
     <div class="uk-button-group">
       <oc-button id="_new">+ New</oc-button>
-      <oc-button id="_filter" icon="filter_list" />
+      <oc-button id="_filter"><oc-icon name="filter_list" /></oc-button>
     </div>
   </div>
 </oc-app-bar>

src/patterns/OcAppSideBar.vue

@@ -5,11 +5,12 @@
         <div v-if="!disableAction" class="action">
           <slot name="action">
             <oc-button
-              icon="close"
               class="uk-float-right"
               :aria-label="closeButtonLabel"
-              @click="$emit('close', $event)"
-            ></oc-button>
+              @click="$emit('close')"
+            >
+              <oc-icon name="close" />
+            </oc-button>
           </slot>
         </div>
         <div class="sidebar-title">
@@ -64,7 +65,7 @@ export default {
   <template>
     <oc-app-side-bar>
         <template slot="action">
-          <oc-button icon="close" class="uk-float-right uk-margin-small-right"/>
+          <oc-button class="uk-float-right uk-margin-small-right"><oc-icon name="close" /></oc-button>
         </template>
         <template slot="title">
           <span class="uk-text-lead">Title</span>

src/patterns/OcFileList.vue

@@ -68,9 +68,9 @@ export default {
       <oc-table-cell class="uk-text-muted uk-text-nowrap uk-visible@s" v-text=" ++o + ' days ago'" />
       <oc-table-cell>
         <div class="uk-button-group">
-          <oc-button icon="edit" aria-label="Edit Picture" />
-          <oc-button icon="file_download" aria-label="Download Picture" />
-          <oc-button icon="delete" aria-label="Delete Picture" />
+          <oc-button aria-label="Edit Picture"><oc-icon name="edit" /></oc-button>
+          <oc-button aria-label="Download Picture"><oc-icon name="file_download" /></oc-button>
+          <oc-button aria-label="Delete Picture"><oc-icon name="delete" /></oc-button>
         </div>
       </oc-table-cell>
     </oc-table-row>

src/patterns/_OcTopBarLogo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="uk-navbar-item uk-logo">
-    <oc-button :icon="icon" @click="$_ocTopBarLogo_click"></oc-button>
+    <oc-button @click="$_ocTopBarLogo_click"><oc-icon :name="icon" /></oc-button>
     <span v-if="title" class="uk-navbar-item">{{ title }}</span>
   </div>
 </template>

yarn.lock

@@ -7426,6 +7426,11 @@ jest-snapshot@^25.5.1:
     pretty-format "^25.5.0"
     semver "^6.3.0"
 
+jest-svg-transformer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz#e38884ca4cd8b2295cdfa2a0b24667920c3a8a6d"
+  integrity sha1-44iEykzYsilc36KgskZnkgw6im0=
+
 jest-util@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"