diff --git a/changelog/unreleased/change-table-emit-event-row-click b/changelog/unreleased/change-table-emit-event-row-click new file mode 100644 index 000000000..7b6cbb06c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/changelog/unreleased/enhancement-checkbox-add-outline b/changelog/unreleased/enhancement-checkbox-add-outline new file mode 100644 index 000000000..1a8a2b2d2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/components/atoms/OcCheckbox/OcCheckbox.spec.js b/src/components/atoms/OcCheckbox/OcCheckbox.spec.js index eb4ee2f5c..dcbd9951d 100644 --- a/src/components/atoms/OcCheckbox/OcCheckbox.spec.js +++ b/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") + }) + }) }) diff --git a/src/components/atoms/OcCheckbox/OcCheckbox.vue b/src/components/atoms/OcCheckbox/OcCheckbox.vue index 43591d803..56c43037c 100644 --- a/src/components/atoms/OcCheckbox/OcCheckbox.vue +++ b/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); diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue index d28690031..2f5f3c0e8 100644 --- a/src/components/molecules/OcTable/OcTable.vue +++ b/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); }