Add button hover states

jpmorganchase · Oct 18, 2024 · 53d5064 · 53d5064
1 parent f5f4adc
commit 53d5064
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 3 deletions.
diff --git a/packages/ag-grid-theme/css/parts/ag-header.css b/packages/ag-grid-theme/css/parts/ag-header.css
@@ -87,8 +87,30 @@ div[class*="ag-theme-salt"] .ag-floating-filter .ag-floating-filter-body:focus-w
   outline-offset: -2px;
 }
 
+div[class*="ag-theme-salt"] .ag-header-cell-menu-button:hover,
+div[class*="ag-theme-salt"] .ag-header-cell-filter-button:hover,
+div[class*="ag-theme-salt"] .ag-panel-title-bar-button:hover,
+div[class*="ag-theme-salt"] .ag-header-expand-icon:hover,
+div[class*="ag-theme-salt"] .ag-column-group-icons:hover,
+div[class*="ag-theme-salt"] .ag-set-filter-group-icons:hover,
+div[class*="ag-theme-salt"] .ag-group-expanded .ag-icon:hover,
+div[class*="ag-theme-salt"] .ag-group-contracted .ag-icon:hover,
+div[class*="ag-theme-salt"] .ag-chart-settings-prev:hover,
+div[class*="ag-theme-salt"] .ag-chart-settings-next:hover,
+div[class*="ag-theme-salt"] .ag-group-title-bar-icon:hover,
+div[class*="ag-theme-salt"] .ag-column-select-header-icon:hover,
+div[class*="ag-theme-salt"] .ag-floating-filter-button-button:hover,
+div[class*="ag-theme-salt"] .ag-filter-toolpanel-expand:hover,
+div[class*="ag-theme-salt"] .ag-panel-title-bar-button-icon:hover,
+div[class*="ag-theme-salt"] .ag-chart-menu-icon:hover {
+  /* Button is the same size of icon, we're copying what ag quartz theme is doing */
+  box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-hover);
+  background-color: var(--salt-actionable-subtle-background-hover);
+  --ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-hover);
+}
+
 /* When filter is active, use toggle button active styles */
-div[class*="ag-theme-salt"] .ag-button.ag-filter-active {
+div[class*="ag-theme-salt"] .ag-filter-active {
   /* Button is the same size of icon, we're copying what ag quartz theme is doing */
   box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-active);
   background-color: var(--salt-actionable-subtle-background-active);
@@ -109,7 +131,7 @@ div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button .ag-button:focus
   outline-offset: 2px;
 }
 
-div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button .ag-button.ag-filter-active:focus {
+div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button .ag-filter-active:focus {
   /* when active, there is fake 4px box-shadow set above */
   box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-active);
   outline-offset: 6px;

diff --git a/packages/ag-grid-theme/css/parts/ag-root-var.css b/packages/ag-grid-theme/css/parts/ag-root-var.css
@@ -16,7 +16,7 @@ div[class*="ag-theme-salt"] {
   --ag-font-family: var(--salt-text-fontFamily);
   --ag-font-size: var(--salt-text-fontSize);
   --ag-foreground-color: var(--salt-content-primary-foreground);
-  --ag-grid-size: var(--salt-spacing-50);
+  --ag-grid-size: var(--salt-spacing-100);
   --ag-header-background-color: var(--salt-container-primary-background);
   --ag-header-cell-hover-background-color: var(--salt-container-primary-background);
   --ag-header-column-separator-color: var(--salt-separable-tertiary-borderColor);

diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx
@@ -135,6 +135,56 @@ ColumnMenuFilter.play = async ({ canvasElement }) => {
     await expect(menu).toBeInTheDocument();
   }
 };
+export const ColumnMenuFilterFiltered: StoryObj<typeof AgGridReact> = () => {
+  return <Default />;
+};
+
+ColumnMenuFilterFiltered.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Do findAll here so this will also work in `side-by-side` mode
+  const nameHeaderCells = await canvas.findAllByText("Name");
+
+  for (const cell of nameHeaderCells) {
+    const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!;
+
+    await userEvent.click(
+      cell
+        .closest(".ag-header-cell-comp-wrapper")!
+        .querySelector(".ag-icon.ag-icon-filter")!,
+    );
+
+    const menu = within(gridRoot).getByRole("presentation", {
+      name: "Column Filter",
+    });
+
+    const alaskaOption = await within(menu).findByRole("option", {
+      name: /Alaska/,
+    });
+
+    await userEvent.click(within(alaskaOption).getByText("Alaska"));
+
+    await expect(within(alaskaOption).getByRole("checkbox")).not.toBeChecked();
+
+    await userEvent.click(
+      within(menu).getByRole("button", {
+        name: /Apply/,
+      }),
+    );
+
+    await userEvent.click(within(gridRoot).getByText(/Total Rows/));
+
+    await expect(menu).not.toBeInTheDocument();
+
+    const nameHeader = canvas.getByRole("columnheader", { name: "Name" });
+
+    await userEvent.click(within(nameHeader).getByText("Name"));
+    await expect(nameHeader).toHaveAttribute("aria-sort", "ascending");
+
+    await userEvent.click(within(gridRoot).getByText(/Total Rows/));
+    // Capture active filter, sorted header
+  }
+};
 
 export const ColumnMenuColumns: StoryObj<typeof AgGridReact> = () => {
   return <Default />;

diff --git a/site/src/examples/ag-grid-theme/data/defaultColumns.ts b/site/src/examples/ag-grid-theme/data/defaultColumns.ts
@@ -12,6 +12,8 @@ export const defaultColumns: ColDef[] = [
     suppressHeaderMenuButton: true,
     resizable: false,
     suppressColumnsToolPanel: true,
+    filter: false,
+    sortable: false,
   },
   {
     headerName: "Name",