[atable] Fix atable gray border (#201)

* added left border to first cell of all atable rows for expanded, default, and pinned * reduced row height and added cell change variable (light blue) * added changelog * updated gray border to match aform. Added border to expanded row * used darker gray for table borders. Added thin gray left border to expanded content * updated aform to use darker gray border to match atable border style --------- Co-authored-by: Rohan Bansal <[email protected]>
agritheory · Dec 13, 2024 · c777f22 · c777f22
1 parent 809a481
commit c777f22
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 13 deletions.
diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
@@ -74,7 +74,7 @@ const cellStyle = computed((): CSSProperties => {
 	return {
 		textAlign,
 		width: cellWidth,
-		backgroundColor: !cellModified.value ? 'inherit' : 'var(--sc-cell-modified)',
+		backgroundColor: !cellModified.value ? 'inherit' : 'var(--sc-cell-changed-color)',
 		fontWeight: !cellModified.value ? 'inherit' : 'bold',
 		paddingLeft: store.getIndent(colIndex, store.display[rowIndex]?.indent),
 	}

diff --git a/atable/src/components/AExpansionRow.vue b/atable/src/components/AExpansionRow.vue
@@ -75,17 +75,21 @@ if (addNavigation) {
 .expandable-row {
 	border-top: 1px solid var(--sc-row-border-color);
 	height: var(--sc-atable-row-height);
-	border-left: 4px solid var(--sc-row-border-color);
 	display: flex;
 }
+.expandable-row > td:first-child {
+	border-left: 4px solid var(--sc-row-border-color);
+}
 
 .expanded-row {
-	border-bottom: 1px solid var(--sc-row-border-color);
-	border-top: 1px solid var(--sc-row-border-color);
+	display: flex;
+	border-left: 2px solid var(--sc-row-border-color);
 }
 
-.expanded-row-content {
+.expandable-row:last-child {
 	border-bottom: 1px solid var(--sc-row-border-color);
+}
+.expanded-row-content {
 	border-top: 1px solid var(--sc-row-border-color);
 	padding: 1.5rem;
 }

diff --git a/atable/src/components/ARow.vue b/atable/src/components/ARow.vue
@@ -74,6 +74,10 @@ if (addNavigation) {
 	background-color: white;
 }
 
+.table-row > td:first-child {
+	border-left: 4px solid var(--sc-row-border-color);
+}
+
 .list-index {
 	color: var(--sc-header-text-color);
 	font-weight: bold;

diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue
@@ -252,6 +252,7 @@ td.sticky-index {
 	box-sizing: border-box;
 	table-layout: auto;
 	width: auto;
+	/* border-left:4px solid var(--sc-form-border); */
 }
 .atable th {
 	border-width: 0px;

diff --git a/common/changes/@stonecrop/atable/fix-atable-gray-border_2024-12-02-19-16.json b/common/changes/@stonecrop/atable/fix-atable-gray-border_2024-12-02-19-16.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "minor style updates for Atable",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
diff --git a/common/changes/@stonecrop/themes/fix-atable-gray-border_2024-12-02-19-16.json b/common/changes/@stonecrop/themes/fix-atable-gray-border_2024-12-02-19-16.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "added cell change color variable",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}
diff --git a/examples/atable/default.story.vue b/examples/atable/default.story.vue
@@ -115,11 +115,7 @@ const full_width_table = ref({
 })
 </script>
 
-<style>
-:root {
-	--sc-cell-modified: yellow;
-}
-</style>
+<style></style>
 
 <!-- enter documentation here -->
 <docs lang="md"></docs>
diff --git a/themes/default/_variables.css b/themes/default/_variables.css
@@ -39,8 +39,8 @@
 	--sc-input-border-color: var(--sc-gray-20);
 	--sc-input-label-color: var(--sc-gray-60);
 	--sc-required-border: #e63c28;
-	--sc-cell-modified: #ffffb1;
-	--sc-form-border: var(--sc-gray-5);
+	--sc-cell-changed-color: #d8edff;
+	--sc-form-border: var(--sc-gray-20);
 	--sc-form-background: #ffffff;
 	--sc-input-field-background: #ffffff;
 	--sc-input-field-disabled-background: var(--sc-gray-5);
@@ -52,7 +52,7 @@
 	--sc-atable-font-family: 'Arimo', sans-serif;
 
 	/* TABLE */
-	--sc-atable-row-padding: 5px;
+	--sc-atable-row-padding: 0.125rem;
 	--sc-atable-row-height: 1.5em;
 	--sc-atable-cell-border-width: 2px;