RV-238: Update padding styles of Card Table, List Table to updated OX…

…D standards (#823) * remove unnecessary padding * changes to listTable * revert list table change * update cell container * update list table skeleton loader * update snapshot of list table * update list-table scss * changed list styling and updated list-table styling * changed list styling for table row * removed unnecessary checkbox padding for list * remove that standard since list.vue is not used * update list.scss to include remove unnecessary checkbox padding * updates after PR review * pr feedback changes to list.scss * refactor table-row.scss * revert change to collapsible.vue * align action button to the right * changed right to flex end * revert styling changes to list and list table * updated list table tests * remove styling of list.scss * update changelog.md * update commit hash * revert change is listtable scss * update changelog * update changelog * update list.scss * update changelog.md * PR Feedback Changes
orangehrm · Dec 10, 2024 · a7ee333 · a7ee333
1 parent af3ad71
commit a7ee333
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 18 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+2024-12-06 - 6cb384e32c6b56d65cc35801cfd54ba1b3aca5fb - CardTable/Cell/DefaultCellContainer.vue, CardTable/Header/DefaultCardHeader.vue, CardTable/Table/_variables.scss, CardTable/Table/table-row.scss, List/list.scss, ListTable/CellContainer.vue - Add 11px left and right padding for each cell, remove right padding of checkbox cell, make left padding of any first coloumn 5px and right align all action buttons in action class.
+
 2024-12-05 - c041308720a8cf73b879a431e97ff08f997df0a8 - TinyMce/TinyMce.vue - add background image and remove image option  
 
 2024-12-02 - abc536c1864e5c272aac7508bf19066148f0969c - components/Icon/icons.ts - Update oxd-refresh icon fill colour

diff --git a/components/src/core/components/CardTable/Cell/DefaultCellContainer.vue b/components/src/core/components/CardTable/Cell/DefaultCellContainer.vue
@@ -91,7 +91,10 @@ export default defineComponent({
           {
             key: header,
             style: header.style,
-            class: this.$attrs.class,
+            class:
+              header.name === 'selector'
+                ? ['checkbox-cell', this.$attrs.class]
+                : this.$attrs.class,
           },
           {
             default: () => h(cellType ?? defaultCell, cellProps),

diff --git a/components/src/core/components/CardTable/Header/DefaultCardHeader.vue b/components/src/core/components/CardTable/Header/DefaultCardHeader.vue
@@ -3,7 +3,7 @@
     <oxd-card-tr :clickable="false">
       <oxd-card-th
         v-if="tableProps.selectable"
-        class="oxd-padding-cell oxd-table-th"
+        class="oxd-padding-cell oxd-table-th checkbox-cell"
         :class="tableProps.selector.class"
         :style="tableProps.selector.style"
       >

diff --git a/components/src/core/components/CardTable/Table/_variables.scss b/components/src/core/components/CardTable/Table/_variables.scss
@@ -14,7 +14,7 @@ $oxd-table-row-border-color: $oxd-interface-gray-lighten-2-color !default;
 $oxd-table-tr-bg-color: $oxd-interface-gray-color !default;
 $oxd-table-tr-padding: 25px !default;
 
-$oxd-table-cell-padding: 5px !default;
+$oxd-table-cell-padding: 5px 11px !default; 
 $oxd-table-row-left-padding: 5px !default;
 $oxd-table-row-right-padding: 5px !default;
 $oxd-card-table-row-gap: 5px !default;

diff --git a/components/src/core/components/CardTable/Table/table-row.scss b/components/src/core/components/CardTable/Table/table-row.scss
@@ -25,3 +25,18 @@
 .oxd-table-row--clickable {
   cursor: pointer;
 }
+
+:deep(.oxd-table-cell-actions) {
+  justify-content: flex-end;
+}
+
+:deep(.oxd-table-th), :deep(.oxd-table-cell){
+  &:first-child {
+    padding-left: 5px;
+  }
+}
+
+:deep(.checkbox-cell ){
+  padding-right: 0;
+}
+
diff --git a/components/src/core/components/List/list.scss b/components/src/core/components/List/list.scss
@@ -84,9 +84,6 @@
       font-size: 15px;
     }
     :deep(.oxd-table-th) {
-      &:first-child {
-        padding-left: 0;
-      }
       text-align: left;
       padding-top: 0.65rem;
       padding-bottom: 0.65rem;
@@ -99,9 +96,6 @@
       }
     }
     :deep(.oxd-table-cell) {
-      &:first-child {
-        padding-left: 0;
-      }
       flex-wrap: nowrap;
       .oxd-select-wrapper {
         max-width: 195px;

diff --git a/components/src/core/components/ListTable/CellContainer.vue b/components/src/core/components/ListTable/CellContainer.vue
@@ -107,7 +107,10 @@ export default defineComponent({
           {
             key: header,
             style: header.style,
-            class: this.$attrs.class,
+            class:
+              header.name === 'selector'
+                ? ['checkbox-cell', this.$attrs.class]
+                : this.$attrs.class,
           },
           {
             default: () => h(cellType ?? defaultCell, cellProps),

diff --git a/components/src/core/components/ListTable/ListTable.vue b/components/src/core/components/ListTable/ListTable.vue
@@ -4,13 +4,13 @@
       <oxd-card-tr :clickable="false">
         <oxd-card-th
           v-if="loading && skeleton"
-          class="oxd-padding-cell oxd-table-th"
+          class="oxd-padding-cell oxd-table-th checkbox-cell"
         >
           <oxd-skeleton class="oxd-skeleton-checkbox" animateHighlighted />
         </oxd-card-th>
         <oxd-card-th
           v-else-if="selectable"
-          class="oxd-padding-cell oxd-table-th"
+          class="oxd-padding-cell oxd-table-th checkbox-cell"
         >
           <oxd-checkbox-input v-model="selectAll" :checkIcon="checkIcon" />
         </oxd-card-th>

diff --git a/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap b/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
 <div class="oxd-table" role="table">
   <div class="oxd-table-header" role="rowgroup">
     <div class="oxd-table-row oxd-table-row--with-border" role="row">
-      <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th" role="columnheader">
+      <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th checkbox-cell" role="columnheader">
         <div class="oxd-checkbox-wrapper"><label class="">
             <!--v-if-->
             <!--v-if--><input type="checkbox" true-value="true" false-value="false"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
@@ -24,7 +24,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
   <div class="oxd-table-body" role="rowgroup">
     <div class="oxd-table-card --loaded">
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
-        <div class="oxd-table-cell oxd-padding-cell" role="cell">
+        <div class="oxd-table-cell checkbox-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
               <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
@@ -42,7 +42,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
     </div>
     <div class="oxd-table-card --loaded">
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
-        <div class="oxd-table-cell oxd-padding-cell" role="cell">
+        <div class="oxd-table-cell checkbox-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
               <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
@@ -66,7 +66,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
 <div class="oxd-table" role="table">
   <div class="oxd-table-header" role="rowgroup">
     <div class="oxd-table-row oxd-table-row--with-border" role="row">
-      <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th" role="columnheader">
+      <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th checkbox-cell" role="columnheader">
         <div class="oxd-checkbox-wrapper"><label class="">
             <!--v-if-->
             <!--v-if--><input type="checkbox" true-value="true" false-value="false"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
@@ -86,7 +86,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
   <div class="oxd-table-body" role="rowgroup">
     <div class="oxd-table-card --loaded">
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
-        <div class="oxd-table-cell oxd-padding-cell" role="cell">
+        <div class="oxd-table-cell checkbox-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
               <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
@@ -104,7 +104,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
     </div>
     <div class="oxd-table-card --loaded">
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
-        <div class="oxd-table-cell oxd-padding-cell" role="cell">
+        <div class="oxd-table-cell checkbox-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
               <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>

diff --git a/components/src/core/components/ListTable/__tests__/list-table.spec.ts b/components/src/core/components/ListTable/__tests__/list-table.spec.ts
@@ -89,4 +89,39 @@ describe('ListTable > ListTable.vue', () => {
     );
     expect(wrapper.findAllComponents(Skeleton).length).toEqual(6);
   });
+
+  it('should render checkbox cell when selectable is true and not loading', () => {
+    const wrapper = mount(ListTable, {
+      props: {
+        loading: false,
+        skeleton: false,
+        selectable: true,
+        items: DUMMY_DATA.items,
+        headers: DUMMY_DATA.headers,
+      },
+    });
+
+    const checkboxCells = wrapper.findAll('.checkbox-cell');
+    expect(checkboxCells.length).toBeGreaterThan(0);
+
+    checkboxCells.forEach(cell => {
+      expect(cell.exists()).toBe(true);
+      expect(cell.findComponent({name: 'oxd-checkbox-input'}).exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  it('should not render checkbox cell when selectable is false', () => {
+    const wrapper = mount(ListTable, {
+      props: {
+        selectable: false,
+        items: DUMMY_DATA.items,
+        headers: DUMMY_DATA.headers,
+      },
+    });
+
+    const checkboxCells = wrapper.findAll('.checkbox-cell');
+    expect(checkboxCells.length).toBe(0);
+  });
 });