fix(ui): enhance FormItemLabel with customizable class names for label and beta badge#29733
Open
chirag-madlani wants to merge 3 commits into
Open
fix(ui): enhance FormItemLabel with customizable class names for label and beta badge#29733chirag-madlani wants to merge 3 commits into
chirag-madlani wants to merge 3 commits into
Conversation
Contributor
❌ 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 |
github-actions
Bot
added
safe to test
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Contributor
Jest test CoverageUI tests summary
|
Contributor
🔴 Playwright Results — 1 failure(s), 21 flaky✅ 4484 passed · ❌ 1 failed · 🟡 21 flaky · ⏭️ 37 skipped
Genuine Failures (failed on all attempts)❌
|
Code Review ✅ Approved 1 resolved / 1 findingsEnhances FormItemLabel with customizable class names for labels and beta badges, resolving the import ordering issue that would have failed lint checks. ✅ 1 resolved✅ Quality: Misplaced 'classnames' import breaks import ordering
OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
ShaileshParmar11
approved these changes
Jul 3, 2026
|
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.
Describe your changes:
Fixes #
support classnames for better overrides
I worked on ... because ...
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Not applicable.
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Greptile Summary
This PR adds two optional
classNameprops —labelClassNameandbetaBadgeClassName— toFormItemLabel, enabling callers to override styles on the label span and beta badge independently. The component now wraps both elements with theclassnamesutility for conditional class merging, and also introduces a hardcoded base classform-item-labelon the span.FormItemLabelPropsinForm.interface.tsgainslabelClassName?: stringandbetaBadgeClassName?: string.FormItemLabel.tsximportsclassnames, destructures the two new props, and applies them viaclassNames(...)alongside the existing default classes.Confidence Score: 5/5
Safe to merge — the change is purely additive, adding two optional className props with no effect on existing callers.
Both new props are optional with no defaults, so all existing usages are completely unaffected. The classnames merging logic is straightforward and the TypeScript interface change is backward-compatible. The only open question — already noted in a prior review comment — is whether organize-imports-cli reorders the new classnames import in CI; this is a cosmetic lint concern and not a logic risk.
No files require special attention.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[FormItemLabel] --> B{props} B --> C["label + labelClassName\n→ span.form-item-label"] B --> D{helperTextType === Tooltip\n&& helperText\n&& showHelperText} D -- Yes --> E[Tooltip + InfoCircleOutlined] D -- No --> F[nothing] B --> G{isBeta?} G -- Yes --> H["Badge\nm-l-xs + betaBadgeClassName"] G -- No --> I[nothing]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[FormItemLabel] --> B{props} B --> C["label + labelClassName\n→ span.form-item-label"] B --> D{helperTextType === Tooltip\n&& helperText\n&& showHelperText} D -- Yes --> E[Tooltip + InfoCircleOutlined] D -- No --> F[nothing] B --> G{isBeta?} G -- Yes --> H["Badge\nm-l-xs + betaBadgeClassName"] G -- No --> I[nothing]Comments Outside Diff (1)
openmetadata-ui/src/main/resources/ui/src/components/common/Form/FormItemLabel.tsx, line 14-21 (link)classnamesimport is an external library but is placed after all local relative imports, which violates the project's import ordering convention (external → internal absolute → relative). Theorganize-imports-cliCI check will flag this and the PR will fail lint.Context Used: CLAUDE.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Reviews (2): Last reviewed commit: "Merge branch 'main' into chore/form-item..." | Re-trigger Greptile