fix(ColorPicker): restore alpha input visibility hidden by geostyler CSS

[rusackas]

SUMMARY

This PR fixes an issue where the alpha/opacity input field in the AntD ColorPicker component is hidden due to CSS styles from the geostyler library.

Root Cause: The geostyler package includes CSS in node_modules/geostyler/dist/Component/Symbolizer/Field/ColorField/ColorField.css that sets display: none on several AntD ColorPicker elements including .ant-color-picker-alpha-input and .ant-color-picker-slider-alpha.

Solution: Add global CSS overrides in GlobalStyles.tsx to restore the visibility of the alpha input and slider with appropriate spacing.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: Alpha input field is hidden (as shown in issue screenshots)

After: Alpha input field and slider are visible with proper spacing

Note: The screenshots in the original issue #34721 show the problem clearly.

TESTING INSTRUCTIONS

1. Navigate to any chart that uses the ColorPicker control (e.g., charts with color customization options)
2. Open the color picker popover
3. Verify that the alpha/opacity input field is visible below the color slider
4. Verify that there is appropriate spacing between the color slider and the alpha slider

ADDITIONAL INFORMATION

• Has associated issue: Fixes AntD ColorPicker ant-color-picker-alpha-input not visible #34721
• Required feature flags:
• Changes UI
• Includes DB Migration
• Introduces new feature or API
• Removes existing feature or API

---

🤖 Generated with Claude Code

[dosubot]

Related Documentation

Checked 0 published document(s) in 2 knowledge base(s). No updates required.

^{How did I do? Any feedback?}  

[bito-code-review]

Code Review Agent Run #35c02d

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 69ac693..69ac693

  • superset-frontend/packages/superset-core/src/ui/theme/GlobalStyles.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codeant-ai-for-open-source]

Sequence Diagram

This PR adds global CSS overrides to counteract geostyler's rules that hid the AntD ColorPicker alpha input. The diagram shows loading of conflicting CSS and the global style override restoring the alpha input visibility in the rendered ColorPicker.

sequenceDiagram
    participant Browser
    participant App
    participant GeoStylerCSS as geostyler CSS
    participant GlobalStyles
    participant ColorPicker as AntD ColorPicker

    Browser->>App: Load application
    App->>GeoStylerCSS: Include geostyler stylesheet (hides .ant-color-picker-alpha-input)
    App->>GlobalStyles: Inject GlobalStyles.tsx (override selectors)
    GlobalStyles-->>Browser: Emit CSS that restores alpha input & slider spacing
    Browser->>ColorPicker: Render ColorPicker component
    ColorPicker-->>Browser: Alpha input and slider visible (overrides applied)

Loading

---

Generated by CodeAnt AI