[Design feedback] Re-add animation delay, shade hover actions darker

cee-chen · cee-chen · commit 375d5fd1e530 · 2023-11-16T14:53:08.000-08:00
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -52,17 +52,22 @@
     }
   }
 
-  // On hover, color the cell actions more subdued and show a same-colored focus ring
-  // so the cell actions look less weird on datagrids without cell borders
+  // On hover
   &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
     .euiDataGridRowCell__actions {
-      background-color: $euiBorderColor;
-      border-color: $euiBorderColor;
-      color: $euiColorFullShade;
+      // Delay the actions showing on hover
+      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
+      animation-delay: $euiAnimSpeedNormal;
+
+      // Color the actions and focus ring grayscale on hover
+      // (Actions look odd without the ring on grids without cell borders)
+      background-color: $euiColorDarkShade;
+      border-color: $euiColorDarkShade;
+      color: $euiColorEmptyShade;
     }
 
     &::after {
-      border-color: $euiBorderColor;
+      border-color: $euiColorDarkShade;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -52,17 +52,22 @@`
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`
`55`		`- // On hover, color the cell actions more subdued and show a same-colored focus ring`
`56`		`- // so the cell actions look less weird on datagrids without cell borders`
	`55`	`+ // On hover`
`57`	`56`	`&:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {`
`58`	`57`	`.euiDataGridRowCell__actions {`
`59`		`- background-color: $euiBorderColor;`
`60`		`- border-color: $euiBorderColor;`
`61`		`- color: $euiColorFullShade;`
	`58`	`+ // Delay the actions showing on hover`
	`59`	`+ // (Note: the focus ring show instantly on hover & the actions show instantly on focus)`
	`60`	`+ animation-delay: $euiAnimSpeedNormal;`
	`61`	`+`
	`62`	`+ // Color the actions and focus ring grayscale on hover`
	`63`	`+ // (Actions look odd without the ring on grids without cell borders)`
	`64`	`+ background-color: $euiColorDarkShade;`
	`65`	`+ border-color: $euiColorDarkShade;`
	`66`	`+ color: $euiColorEmptyShade;`
`62`	`67`	`}`
`63`	`68`
`64`	`69`	`&::after {`
`65`		`- border-color: $euiBorderColor;`
	`70`	`+ border-color: $euiColorDarkShade;`
`66`	`71`	`}`
`67`	`72`	`}`
`68`	`73`