Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

feat: add paddingX prop #1240

Merged
merged 3 commits into from
Apr 26, 2021
Merged

feat: add paddingX prop #1240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a4ea95
feat: add paddingX prop
LukasHirt Apr 26, 2021
7d24b89
fix: use correct css for position and respect sort icon
LukasHirt Apr 26, 2021
eebce57
tests: update snapshots
LukasHirt Apr 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions changelog/unreleased/enhancement-table-padding
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Enhancement: Add prop to define table padding

We've added new prop called `paddingX` which can be used to set the padding along x axis of the `oc-table` or `oc-table-files`.

https://github.com/owncloud/owncloud-design-system/pull/1240
34 changes: 33 additions & 1 deletion src/components/table/OcTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import OcTr from "./_OcTableRow"
import OcTh from "./_OcTableCellHead"
import OcTd from "./_OcTableCellData"
import SortMixin from "./mixins/sort"
import { getSizeClass } from "../../utils/sizeClasses"

import { EVENT_THEAD_CLICKED, EVENT_TROW_CLICKED } from "./helpers/constants"

Expand Down Expand Up @@ -162,6 +163,16 @@ export default {
required: false,
default: 0,
},
/**
* Sets the padding size for x axis
* @values xsmall, small, medium, large, xlarge
*/
paddingX: {
type: String,
required: false,
default: "small",
validator: size => /(xsmall|small|medium|large|xlarge)/.test(size),
},
},
data() {
return {
Expand Down Expand Up @@ -218,7 +229,19 @@ export default {
props.class += ` ${field.thClass}`
}
if (this.sticky) {
props.style = `${this.headerPosition}px`
props.style = `top: ${this.headerPosition}px;`
}

if (index === 0) {
props.class += ` oc-pl-${getSizeClass(this.paddingX)} `
}

if (index === this.fields.length - 1) {
if (field.sortable) {
props.style += `padding-right: calc(var(--oc-space-${this.paddingX}) + 0.65em)`
} else {
props.class += ` oc-pr-${getSizeClass(this.paddingX)}`
}
}

this.extractSortThProps(props, field, index)
Expand All @@ -245,6 +268,15 @@ export default {
if (Object.prototype.hasOwnProperty.call(field, "wrap")) {
props.wrap = field.wrap
}

if (index === 0) {
props.class += ` oc-pl-${getSizeClass(this.paddingX)} `
}

if (index === this.fields.length - 1) {
props.class += ` oc-pr-${getSizeClass(this.paddingX)}`
}

return props
},
extractCellProps(field) {
Expand Down
10 changes: 10 additions & 0 deletions src/components/table/OcTableFiles.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,16 @@ export default {
required: false,
default: null,
},
/**
* Sets the padding size for x axis
* @values xsmall, small, medium, large, xlarge
*/
paddingX: {
type: String,
required: false,
default: "small",
validator: size => /(xsmall|small|medium|large|xlarge)/.test(size),
},
},
computed: {
fields() {
Expand Down
28 changes: 14 additions & 14 deletions src/components/table/__snapshots__/OcTable.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,46 @@ exports[`OcTable displays all field types 1`] = `
<table class="oc-table">
<thead class="oc-thead">
<tr tabindex="-1">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-id">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-id oc-pl-s ">
Id
</th>
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-resource"><span class="slot-header">Hello world!</span></th>
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-doubled">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-doubled oc-pr-s">
Doubled
</th>
</tr>
</thead>
<tbody>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-4b136c0a-5057-11eb-ac70-eba264112003" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">4b136c0a-5057-11eb-ac70-eba264112003</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">4b136c0a-5057-11eb-ac70-eba264112003</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 2 is 4
</td>
</tr>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-8468c9f0-5057-11eb-924b-934c6fd827a2" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">8468c9f0-5057-11eb-924b-934c6fd827a2</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">8468c9f0-5057-11eb-924b-934c6fd827a2</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 6 is 12
</td>
</tr>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-9c4cf97e-5057-11eb-8044-b3d5df9caa21" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">9c4cf97e-5057-11eb-8044-b3d5df9caa21</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">9c4cf97e-5057-11eb-8044-b3d5df9caa21</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 12 is 24
</td>
</tr>
Expand All @@ -57,23 +57,23 @@ exports[`OcTable hides header 1`] = `
<!---->
<oc-tbody-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-4b136c0a-5057-11eb-ac70-eba264112003" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">4b136c0a-5057-11eb-ac70-eba264112003</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">4b136c0a-5057-11eb-ac70-eba264112003</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 2 is 4
</oc-td-stub>
</oc-tr-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-8468c9f0-5057-11eb-924b-934c6fd827a2" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">8468c9f0-5057-11eb-924b-934c6fd827a2</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">8468c9f0-5057-11eb-924b-934c6fd827a2</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 6 is 12
</oc-td-stub>
</oc-tr-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-9c4cf97e-5057-11eb-8044-b3d5df9caa21" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">9c4cf97e-5057-11eb-8044-b3d5df9caa21</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">9c4cf97e-5057-11eb-8044-b3d5df9caa21</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 12 is 24
</oc-td-stub>
</oc-tr-stub>
Expand Down
Loading