feat: add new css variable to DataTable

openedx · Apr 27, 2023 · 8570521 · 8570521
1 parent b373a94
commit 8570521
Show file tree

Hide file tree

Showing 8 changed files with 6,653 additions and 3,409 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
@@ -128,7 +128,7 @@
 
   th {
     background-color: $light-300;
-    padding: $data-table-head-cell-padding;
+    padding: $data-table-cell-padding;
     text-align: start;
   }
 

diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss
@@ -10,4 +10,4 @@ $data-table-footer-position: var(--pgn-spacing-data-table-footer-position) !defa
 $data-table-pagination-dropdown-max-height: var(--pgn-size-data-table-dropdown-pagination-max-height) !default;
 $data-table-pagination-dropdown-min-width: var(--pgn-size-data-table-dropdown-pagination-min-width) !default;
 $data-table-is-loading-bg: var(--pgn-color-data-table-bg-is-loading) !default;
-$data-table-layout-sidebar-width: 12rem !default;
+$data-table-layout-sidebar-width: var(--pgn-size-data-table-layout-sidebar-width) !default;
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 24 Apr 2023 23:00:41 GMT
+ * Generated on Thu, 27 Apr 2023 12:12:55 GMT
  */
 
 @custom-media --pgn-size-breakpoint-xs (min-width: 0);

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 24 Apr 2023 23:00:41 GMT
+ * Generated on Thu, 27 Apr 2023 12:12:55 GMT
  */
 
 :root {
@@ -320,6 +320,7 @@
   --pgn-size-form-input-width-focus: 0.063rem;
   --pgn-size-form-input-width-hover: 0.063rem;
   --pgn-size-dropdown-min-width: 18rem;
+  --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
   --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
   --pgn-size-data-table-border: 1px;

diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 24 Apr 2023 23:00:41 GMT
+ * Generated on Thu, 27 Apr 2023 12:12:55 GMT
  */
 
 .bg-accent-a {

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 24 Apr 2023 23:00:41 GMT
+ * Generated on Thu, 27 Apr 2023 12:12:55 GMT
  */
 
 :root {

diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
@@ -7,6 +7,9 @@
           "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
           "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" }
         }
+      },
+      "layout": {
+        "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" }
       }
     }
   },