feat: add UX improvements for override screen , forms and context cards#10
Open
sauraww wants to merge 3 commits into
Open
feat: add UX improvements for override screen , forms and context cards#10sauraww wants to merge 3 commits into
sauraww wants to merge 3 commits into
Conversation
sauraww
changed the title
There was a problem hiding this comment.
Pull request overview
This PR focuses on UI/UX upgrades for the Override Manager and related form/card components, while also adjusting the build setup to treat @juspay/blend-design-system as an external dependency in library/browser module builds.
Changes:
- Externalize
@juspay/blend-design-systemin Vite/Rollup config for ES/CJS builds. - Revamp Override Manager cards and forms: updated styling, removed delete actions, and added client-side pagination fallback when the API returns unpaginated datasets.
- Replace Blend tooltip/tag usage with custom Tooltip + CSS-based condition badges and select dropdown UI; update tests accordingly.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
vite.config.ts |
Externalizes React + Blend Design System in Rollup config for library builds. |
vite.browser.config.ts |
Mirrors externalization behavior for browser ES/CJS builds. |
src/styles.css |
Adds new styling for buttons, tooltips, select dropdowns, and condition badge layouts. |
src/providers/SuperpositionUIProvider.tsx |
Adds cssLength() helper and improves theme var generation for font-size tokens. |
src/pages/OverrideManager.tsx |
Updates override cards/actions UI, removes delete, and adds client-side pagination fallback. |
src/components/Tooltip.tsx |
Replaces Blend Tooltip with a custom tooltip implementation. |
src/components/Table.tsx |
Tweaks DataTable loading and disables column manager/settings UI. |
src/components/StructuredContextOverrideForm.tsx |
Adds permission gating for add/remove actions and introduces custom select UI. |
src/components/Pagination.tsx |
Minor border styling adjustment. |
src/components/JsonViewer.tsx |
Improves collapsed/expanded JSON rendering and “Show more/less” affordance. |
src/components/FormField.tsx |
Adjusts control/button styling (border thickness, shadows, transitions). |
src/components/ConditionBadges.tsx |
Replaces Blend tags with custom badge markup that matches new CSS. |
__tests__/pages/OverrideManager.test.tsx |
Updates dropdown helper, conjunction expectation, adds pagination test, and removes delete-action test. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
11
to
+16
| return ( | ||
| <BlendTooltip content={content} maxWidth="220px" showArrow> | ||
| <div className="sp-tooltip" aria-describedby={tooltipId} style={{ display: "inline-flex" }}> | ||
| {children} | ||
| </BlendTooltip> | ||
| <span id={tooltipId} role="tooltip" className="sp-tooltip__bubble"> | ||
| {content} | ||
| </span> |
Comment on lines
+6
to
+17
| const externalPackages = [ | ||
| "react", | ||
| "react-dom", | ||
| "react-dom/client", | ||
| "react/jsx-runtime", | ||
| ]; | ||
|
|
||
| function isExternal(id: string) { | ||
| return ( | ||
| externalPackages.includes(id) || id.startsWith("@juspay/blend-design-system") | ||
| ); | ||
| } |
Comment on lines
+5
to
+17
| const externalPackages = [ | ||
| "react", | ||
| "react-dom", | ||
| "react-dom/client", | ||
| "react/jsx-runtime", | ||
| ]; | ||
|
|
||
| function isExternal(id: string) { | ||
| return ( | ||
| externalPackages.includes(id) || id.startsWith("@juspay/blend-design-system") | ||
| ); | ||
| } | ||
|
|
Comment on lines
+518
to
+524
| const shouldClientPage = Boolean(data && filteredData.length > pageSize); | ||
| const totalPages = shouldClientPage | ||
| ? Math.ceil(filteredData.length / pageSize) | ||
| : (data?.total_pages ?? 0); | ||
| const rows = shouldClientPage | ||
| ? paginateRows(filteredData, page, pageSize) | ||
| : filteredData; |
sauraww
force-pushed
the
feat/ux-improvements
branch
7 times, most recently
from
cb3f2e7 to
7d7987c
Compare
gitanjli525
approved these changes
May 25, 2026
sauraww
force-pushed
the
feat/ux-improvements
branch
from
7d7987c to
f1144ad
Compare
sauraww
force-pushed
the
feat/ux-improvements
branch
from
f1144ad to
2b1d1a8
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.