Add OcCheckbox outline option, OcTable add event to TRow click

changelog/unreleased/change-table-emit-event-row-click

@@ -0,0 +1,6 @@
+Change: OcTable emit event data on row click
+
+We've extended the emit data on row click to now also include the event data
+
+https://github.com/owncloud/owncloud-design-system/pull/2218
+https://github.com/owncloud/web/issues/6029

changelog/unreleased/enhancement-checkbox-add-outline

@@ -0,0 +1,6 @@
+Enhancement: OcCheckbox add outline
+
+We've added an optional outline to be able to highlight the checkbox
+
+https://github.com/owncloud/owncloud-design-system/pull/2218
+https://github.com/owncloud/web/issues/6029

src/components/atoms/OcCheckbox/OcCheckbox.spec.js

@@ -63,4 +63,11 @@ describe("OcCheckbox", () => {
       expect(checkbox.element.checked).toBeTruthy()
     })
   })
+  describe("set outline", () => {
+    it("should show outline", async () => {
+      const wrapper = await getWrapperWithProps({ outline: true })
+      const checkbox = wrapper.find(checkboxSelector)
+      expect(checkbox.element._prevClass).toContain("oc-checkbox-outline")
+    })
+  })
 })

src/components/atoms/OcCheckbox/OcCheckbox.vue

@@ -89,6 +89,14 @@ export default {
       default: "medium",
       validator: size => /(small|medium|large)/.test(size),
     },
+    /**
+     * Show outline of checkbox
+     **/
+    outline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     model: {
@@ -101,7 +109,12 @@ export default {
       },
     },
     classes() {
-      return ["oc-checkbox", "oc-rounded", "oc-checkbox-" + getSizeClass(this.size)]
+      return [
+        "oc-checkbox",
+        "oc-rounded",
+        "oc-checkbox-" + getSizeClass(this.size),
+        { "oc-checkbox-outline": this.outline },
+      ]
     },
     labelClasses() {
       return {
@@ -143,6 +156,11 @@ export default {
   overflow: hidden;
   vertical-align: middle;
   background-color: transparent;
+  outline: none;
+
+  &-outline {
+    outline: solid 2px var(--oc-color-swatch-passive-default);
+  }
 
   &-s {
     @include oc-form-check-size(0.7);

src/components/molecules/OcTable/OcTable.vue

@@ -49,7 +49,7 @@
         v-bind="extractTbodyTrProps(item, trIndex)"
         :data-item-id="item[idKey]"
         :draggable="dragDrop"
-        @click.native="$emit(constants.EVENT_TROW_CLICKED, item)"
+        @click.native="$emit(constants.EVENT_TROW_CLICKED, [item, $event])"
         @contextmenu.native="
           $emit(constants.EVENT_TROW_CONTEXTMENU, $refs[`row-${trIndex}`][0], $event, item)
         "
@@ -477,6 +477,7 @@ export default {
   }
 
   tr {
+    outline: none;
     height: var(--oc-size-height-table-row);
   }