Skip to content

fix(theming): Fix visual regressions from theming P7 #34237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

EnxDev
Copy link
Contributor

@EnxDev EnxDev commented Jul 20, 2025

SUMMARY

This PR fixes various regressions introduced by the theming project and introduces a new reusable component, ModalTitleWithIcon, to standardize the rendering of modal titles across the application.

✅ What's Included

  • Fixed styling inconsistencies and regressions caused by recent theming changes.
  • Added ModalTitleWithIcon to unify and simplify modal title implementations.
  • Supports both static and edit/add dynamic titles via editModeConfig.
  • Allows passing custom icons, ensuring consistent layout and spacing.
  • Replaced duplicated JSX title blocks with this new component across multiple modals.

🎯 Why

  • To clean up duplicated code and ensure consistent UX across modals.
  • To provide a single source of truth for icon size, spacing, and typography in modal headers.
  • To make future changes to modal titles easier and less error

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

  • Before
before-1
  • After
after-1
  • Before
before-2
  • After
after-2
  • Before
before-3
  • After
after-3
  • Before
Screenshot 2025-07-18 153058
  • After
after-4
  • Before
before-5
  • After
after-5
  • Before
before-6
  • After
after-6
  • Before
before-7
  • After
after-7
  • Before
before-8
  • After
after-8
  • Before
before-10
  • After
after-10
  • Before
before-11
  • After
after-11
  • Before
before-12
  • After
after-12
  • Before
before-13
  • After
after-13 after-13-1
  • Before
before-1
  • After
after-1
  • Before
before-2
  • After
after-2

TESTING INSTRUCTIONS

  • All tests should pass

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

EnxDev added 5 commits July 17, 2025 17:26
…with edit mode support and customizable icon - Supports dynamic titles based on edit mode (add/edit) - Allows passing a custom icon with forced iconSize override - Applies

consistent styling and spacing for title and icon - Adds data-test attribute for easier testing - Improves code clarity by handling icon rendering and translation internally
@EnxDev EnxDev marked this pull request as draft July 20, 2025 11:27
@dosubot dosubot bot added change:frontend Requires changing the frontend global:theming Related to theming Superset labels Jul 20, 2025
@EnxDev EnxDev added review:draft and removed change:frontend Requires changing the frontend global:theming Related to theming Superset labels Jul 20, 2025
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've completed my review and didn't find any issues.

Files scanned
File Path Reviewed
superset-frontend/src/features/datasets/DuplicateDatasetModal.tsx
superset-frontend/src/features/roles/RoleListAddModal.tsx
superset-frontend/src/components/ModalTitleWithIcon/index.tsx
superset-frontend/src/features/tags/BulkTagModal.tsx
superset-frontend/src/features/groups/GroupListModal.tsx
superset-frontend/packages/superset-ui-core/src/components/UnsavedChangesModal/index.tsx
superset-frontend/src/pages/UserInfo/index.tsx
superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
superset-frontend/src/features/users/UserListModal.tsx
superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx
superset-frontend/src/features/tags/TagModal.tsx
superset-frontend/src/pages/GroupsList/index.tsx
superset-frontend/src/explore/components/PropertiesModal/index.tsx
superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
superset-frontend/src/explore/components/ControlPanelsContainer.tsx
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
superset-frontend/src/features/databases/UploadDataModel/index.tsx
superset-frontend/src/features/alerts/AlertReportModal.tsx
superset-frontend/src/components/Datasource/DatasourceEditor.jsx
superset-frontend/src/features/databases/DatabaseModal/index.tsx

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant