fix(EuiDataGrid): don't apply icon color to disabled cell action buttons

[tkajtoch]

Summary

This PR addresses an issue in style overrides applied to EuiButtonIcon when rendering EuiDataGrid cell actions. Previously, when disabled or isDisabled were passed to the cell action's <Component>, the style overrides made it look like a regular, not disabled button icon. This fix makes these styles apply only for non-disabled button icons as the disabled state always uses the same icon color no matter the color set.

API Changes

N/A

Screenshots

On both screenshots the mail button icon has isDisabled applied.

Before	After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None to Low

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• Go to https://eui.elastic.co/pr_9672/docs/components/data-grid/cells-and-popovers/#cell-actions and add isDisabled to the <Component> inside cellActions array (see copy-paste code below)
• Confirm that the heart cell action icon button on the Email column has disabled styles applied

import React, { useState, useCallback } from 'react';
import { EuiDataGrid, EuiAvatar } from '@elastic/eui';
import { faker } from '@faker-js/faker';

const columns = [
  {
    id: 'avatar',
    initialWidth: 40,
    isResizable: false,
    actions: false,
  },
  {
    id: 'name',
    initialWidth: 100,
    isSortable: true,
    actions: {
      showHide: false,
    },
  },
  {
    id: 'email',
    isSortable: true,
    cellActions: [
      ({ rowIndex, columnId, Component, closePopover }) => {
        const row = ++rowIndex;
        return (
          <Component
            isDisabled
            onClick={() => {
              alert(`Love sent from row ${row}, column "${columnId}"`);
              closePopover();
            }}
            iconType="heart"
            aria-label={`Send love to ${row}, column "${columnId}" `}
          >
            Send love
          </Component>
        );
      },
    ],
  },
  {
    id: 'city',
    isSortable: true,
    cellActions: [
      ({ rowIndex, columnId, Component, isExpanded }) => {
        const row = ++rowIndex;
        const message = isExpanded
          ? `Cheers sent in Popover to row "${row}" column "${columnId}"`
          : `Cheers sent from row ${row}, column "${columnId}"`;

        return (
          <Component
            onClick={() => alert(message)}
            iconType="popper"
            aria-label={message}
          >
            Cheer
          </Component>
        );
      },
    ],
  },
  {
    id: 'country',
    cellActions: [
      ({ rowIndex, columnId, Component }) => {
        const row = ++rowIndex;
        const label = `Love sent from row ${row}, column "${columnId}"`;
        return (
          <Component
            onClick={() =>
              alert(`Love sent from row ${row}, column "${columnId}"`)
            }
            iconType="heart"
            aria-label={label}
          >
            Love this city
          </Component>
        );
      },
      ({ rowIndex, columnId, Component }) => {
        const row = ++rowIndex;
        const label = `Paint country at row ${row}, column "${columnId}"`;
        return (
          <Component
            onClick={() =>
              alert(`Paint sent from row ${row}, column "${columnId}"`)
            }
            iconType="brush"
            aria-label={label}
          >
            Paint this city
          </Component>
        );
      },
    ],
  },
  {
    id: 'account',
  },
];

const data = [];

for (let i = 1; i < 5; i++) {
  data.push({
    avatar: (
      <EuiAvatar
        size="s"
        name={`${faker.person.lastName()}, ${faker.person.firstName()}`}
      />
    ),
    name: `${faker.person.lastName()}, ${faker.person.firstName()} ${faker.person.suffix()}`,
    email: faker.internet.email(),
    city: faker.location.city(),
    country: faker.location.country(),
    account: faker.finance.accountNumber(),
  });
}

export default () => {
  const [pagination, setPagination] = useState({ pageIndex: 0 });

  const [visibleColumns, setVisibleColumns] = useState(
    columns.map(({ id }) => id)
  );

  const setPageIndex = useCallback(
    (pageIndex) =>
      setPagination((pagination) => ({ ...pagination, pageIndex })),
    []
  );
  const setPageSize = useCallback(
    (pageSize) =>
      setPagination((pagination) => ({
        ...pagination,
        pageSize,
        pageIndex: 0,
      })),
    []
  );

  return (
    <EuiDataGrid
      aria-label="DataGrid demonstrating column sizing constraints"
      columns={columns}
      columnVisibility={{
        visibleColumns: visibleColumns,
        setVisibleColumns: setVisibleColumns,
      }}
      rowCount={data.length}
      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
      pagination={{
        ...pagination,
        onChangeItemsPerPage: setPageSize,
        onChangePage: setPageIndex,
      }}
    />
  );
};

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[mgadewoll]

Considering that EUI buttons support hasAriaDisabled we should use euiDisabledSelector that includes aria-disabled as well.

[tkajtoch]

Thanks! Updated in e1d3f75

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e1d3f75

History

• 💚 Build #6538 succeeded afc29a8

cc @tkajtoch

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e1d3f75
• Documentation website
• Storybook

History

• 💚 Build #3655 succeeded a714329
• 💚 Build #3591 succeeded afc29a8

cc @tkajtoch

[mgadewoll]

🟢 LGTM. I can confirm that the grid action button icons are now correctly displayed as disabled.