some tweaks

EasyPost · Aug 30, 2023 · 5b7115b · 5b7115b
1 parent bf73e30
commit 5b7115b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/easy-ui-react/src/DataGrid/DataGrid.module.scss b/easy-ui-react/src/DataGrid/DataGrid.module.scss
@@ -125,6 +125,7 @@
 
   width: 24px;
   height: 24px;
+  margin: -4px;
 
   cursor: pointer;
 
@@ -224,18 +225,18 @@
   }
   .cell:nth-child(2) {
     position: sticky;
-    left: 48px;
+    left: 44px;
     z-index: 2;
   }
   .columnHeader:nth-child(2) {
-    left: 48px;
+    left: 44px;
     z-index: 4;
   }
   .columnHeader,
   .cell {
     &:first-child {
       padding-left: design-token("space.2");
-      padding-right: design-token("space.1");
+      padding-right: design-token("space.1.5");
     }
     & + * {
       padding-left: 0;

diff --git a/easy-ui-react/src/DataGrid/Row.tsx b/easy-ui-react/src/DataGrid/Row.tsx
@@ -15,6 +15,7 @@ type RowProps<T = object> = {
 
 export function Row({ item, children, state }: RowProps) {
   const isSelected = state.selectionManager.isSelected(item.key);
+  const isDisabled = state.disabledKeys.has(item.key);
   const isExpanded = item.value
     ? item.value[EXPAND_ROW_COLUMN_KEY as keyof typeof item.value] === true
     : false;
@@ -31,6 +32,7 @@ export function Row({ item, children, state }: RowProps) {
     isFocusVisible && styles.rowFocused,
     isSelected && styles.rowSelected,
     isPressed && styles.rowPressed,
+    isDisabled && styles.rowDisabled,
   );
 
   return (

diff --git a/easy-ui-react/src/DataGrid/SelectAllColumnHeader.tsx b/easy-ui-react/src/DataGrid/SelectAllColumnHeader.tsx
@@ -33,7 +33,7 @@ export function SelectAllColumnHeader({
       {state.selectionManager.selectionMode === "single" ? (
         <VisuallyHidden>{checkboxProps["aria-label"]}</VisuallyHidden>
       ) : (
-        <Checkbox size="lg" {...checkboxProps} />
+        <Checkbox {...checkboxProps} />
       )}
     </div>
   );

diff --git a/easy-ui-react/src/DataGrid/SelectCell.tsx b/easy-ui-react/src/DataGrid/SelectCell.tsx
@@ -20,7 +20,7 @@ export function SelectCell({ cell, state }: SelectCellProps) {
   );
   return (
     <div {...gridCellProps} ref={ref} className={styles.cell}>
-      <Checkbox size="lg" {...checkboxProps} />
+      <Checkbox {...checkboxProps} />
     </div>
   );
 }