feat(table): Gradient Toggle

[mohammadqassim12]

SUMMARY

This PR adds a "Use gradient" toggle to the table chart’s conditional formatting configuration.

Previously, conditional formatting always rendered colors using a gradient (via varying opacity). With this change, users can explicitly choose between:

• Gradient mode (current behavior): apply a color gradient by varying opacity based on the metric value.
• Solid mode (new behavior): render all formatted cells using the selected color at full opacity.

This gives users finer control over the visual styling of conditional formatting, especially in cases where gradients can be visually noisy or conflict with existing themes.

Key changes:

• Extend ConditionalFormattingConfig with a useGradient flag.
• Update the color computation logic (getColorFunction) to respect useGradient and fall back to solid colors when disabled.
• Add a "Use gradient" checkbox to the FormattingPopoverContent UI.
• Default useGradient to true for backward compatibility with existing saved charts and dashboards.

AFTER SCREENSHOTS

TESTING INSTRUCTIONS

1. Basic UI behavior

   1. Create or open a Table chart.
   2. Open the Customize / Conditional formatting panel.
   3. Confirm that a "Use gradient" checkbox is visible in the formatting popover.
   4. Ensure the checkbox is checked by default for:
      • Newly created conditional formatting rules.
      • Existing charts with conditional formatting.

2. Gradient mode (backward compatibility)

   1. With "Use gradient" checked:
      • Apply a conditional formatting rule on a numeric column.
      • Verify that cell colors are rendered using varying opacity (gradient behavior).
      • Confirm that existing dashboards continue to look the same as before.

3. Solid mode behavior

   1. Uncheck "Use gradient" for a conditional formatting rule.
   2. Apply the rule and run the query.
   3. Verify that formatted cells are rendered with solid colors (full opacity).
   4. Toggle the checkbox on/off and confirm the visual changes update accordingly.

Automated Tests:

• cd superset-frontend && npm run test
• Run specific unit tests added in this pr:
  npm run test -- getColorFormatters && npm run test -- TableChart && npm run test -- FormattingPopoverContent

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[Copilot]

Pull request overview

This PR introduces a "Use gradient" toggle for conditional formatting in table charts, giving users explicit control over whether colored cells use gradient opacity effects or solid colors.

Key changes:

• Adds a useGradient boolean flag to ConditionalFormattingConfig type definitions
• Updates color computation logic to respect the flag, returning solid colors when disabled or gradient colors (with opacity) when enabled
• Implements a new checkbox in the formatting UI that defaults to checked for backward compatibility

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts	Adds useGradient?: boolean to ConditionalFormattingConfig type
superset-frontend/packages/superset-ui-chart-controls/src/types.ts	Adds useGradient?: boolean to ConditionalFormattingConfig type for consistency
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx	Implements "Use gradient" checkbox with proper state management and form integration
superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts	Updates color function to check useGradient flag and return solid colors when false
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx	Adds tests verifying checkbox display, default state, and toggle behavior
superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx	Adds comprehensive tests for gradient vs solid color rendering with various operators
superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts	Adds unit tests for color function with useGradient flag, including backward compatibility

[SBIN2010]

Running CI 🤞

[mohammadqassim12]

Fixed the failing pre-commit check (missing newline at end of file). CI should pass now.