Repository navigation
Normalize Explore page font sizes to the 10/12/14/16 scale - #35506
Conversation
Replace off-scale 15/13/11px sizes on Explore cards and the entity summary panel with Typography size/weight props and Tailwind classes, and drop the corresponding Less font-size/color/margin rules.
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
Rohit0301
added
the
safe to test
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Jest test CoverageUI tests summary
|
anuj-kumary
left a comment
anuj-kumary
left a comment
There was a problem hiding this comment.
@Rohit0301 Let’s remove all the classes that are coming from Less files across the file changes. We’re also adding some unnecessary classes to Typography, which I don’t think are required. Could you please review and remove the redundant classes and styling?
…w links - Remove *-title classes from section headers; Typography props cover them - Overview label/value layout moves to Tailwind; drop their Less rules - Overview links use core Button (link-color, xs) instead of !important - Card title uses Typography weight + tw:text-link instead of legacy classes - Trim redundant overrides on the right-panel tab label
The baseline predated #31268's layout drift and now also reflects the 12/14px summary-panel sizes; regenerated from the CI render in the pinned Playwright container.
- Incident stat colors move from .stat-count/.stat-label onto the card button; the Typography children inherit them - Card description wrapper keeps only its Tailwind margin
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
Code Review ✅ Approved 1 closed / 1 findings🟡 Medium risk · Replacing summary-panel router Links with Button hrefs may trigger full-page navigations, while typography updates also affect shared entity detail panels. Normalizes Explore page font sizes to the 10/12/14/16 scale, moving off-scale Less rules into core ✅ 1 closed✅ Bug: Card description stays 14px: tw:text-xs on wrapper loses to ProseMirror
VerificationRules No rules evaluated Functional validation Not enabledAuto-approval Not enabledFor more verification details, comment OptionsDisplay: compact → Showing compact verification results. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
❌ UI Checkstyle Failed❌ Bundle Runtime CheckA route chunk loads but one of its chunks still exports 🔍 ESLint findings in this PR's files — 0 error(s), 9 warning(s)Errors block the build. Warnings do not yet — they are rules whose backlog is still 0 error(s), 9 warning(s) across 4 changed file(s).
All findings
Fix locally (fast - only checks files changed in this branch): make ui-checkstyle-changed |
|
3 participants
Describe your changes:
I normalized the Explore page font sizes to the design scale (10/12/14/16px) because the search cards (15px title, 13px description) and the right summary panel (13px section headers and overview rows, 11px tab-rail label) used off-scale sizes. Card titles are now 14px; summary-panel headers, overview rows, DQ stat counts are 12px; card descriptions stay 14px; the vertical tab label is 10px. The off-scale
--om-font-size-13/15Less rules (plus their color/weight/margin) were removed and replaced with coreTypographysize/weightprops or Tailwind classes. Overview link values usetw:text-xs!because the global.prose-typography arule infonts.lessforces 14px on links.Type of change:
High-level design:
Styling-only change across 22 UI files. Each off-scale
font-size(and the siblingcolor/font-weight/margin) is deleted from the component.lessfile and moved to the JSX: coreTypographygetssize/weight(default color is alreadytext-primary= gray-900); non-Typography spans becameTypography;@grey-700maps totw:text-secondary. The shared--om-font-size-13/15tokens intokens.cssare untouched since ~20 other files use them. Data Quality hover/active state colors stay in Less because they depend on parent state. Shared section components (Description, Owners, Domains, Tier, Tags, Glossary Terms, Data Products, Overview) also render on entity detail right panels, so those pick up the same sizes.Tests:
Use cases covered
Unit tests
src/components/common,ExploreV1/ExploreSearchCard,Database/TableDataCardBody,Explore/EntitySummaryPanel,DataAssetSummaryPanelV1,Entity/EntityRightPanel— 242 suites, 2691 tests passed, 0 failed.Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
yarn start, open/explore, select a search card.UI screen recording:
Not applicable — styling-only change (font sizes).
Checklist:
Fixes <issue-number>: <short explanation>— no linked issueFixes #<issue-number>above. — no linked issue🤖 Generated with Claude Code