feat: implement FormHelperText base component wrapper (#1400) by abhinavkdeval08-design · Pull Request #1659 · layer5io/sistent

abhinavkdeval08-design · 2026-06-28T05:41:49Z

Description

This PR resolves #1400 by implementing the missing FormHelperText component wrapper from @mui/material into the Sistent design system base components directory matrix.

Changes Proposed

Created FormHelperText directory component under src/base.
Implemented SistentFormHelperTextProps extending MUI's core typings to preserve strict type definitions.
Exported the component locally and globally via the root module index.
Verified successful production builds locally using cross-env and tsup.

cc @leecalcote @KhushamBansal
Please review this PR and let me know if any changes are required. Happy to iterate!

Summary by CodeRabbit

New Features
- Added a reusable form helper text component for displaying supporting or validation messages.
- Supports standard styling, properties, and ref forwarding consistent with the component library.
- Made the component available through the base component exports.

gemini-code-assist

Code Review

This pull request introduces a new wrapper component, FormHelperText, which wraps Material-UI's FormHelperText component, and updates peer dependency flags in package-lock.json. The review feedback recommends wrapping the new component with React.forwardRef to ensure proper integration with other components and form libraries by forwarding the ref to the underlying DOM element.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-06-28T05:42:53Z

+export const FormHelperText: React.FC<SistentFormHelperTextProps> = ({ children, ...props }) => {
+  return <MuiFormHelperText {...props}>{children}</MuiFormHelperText>;
+};


To ensure proper integration with other components, form libraries, and overlays (such as tooltips or focus managers), it is highly recommended to forward the ref to the underlying DOM element. This maintains consistency with other wrapper components in the repository (e.g., TextField).

Suggested change

export const FormHelperText: React.FC<SistentFormHelperTextProps> = ({ children, ...props }) => {

return <MuiFormHelperText {...props}>{children}</MuiFormHelperText>;

};

export const FormHelperText = React.forwardRef<HTMLParagraphElement, SistentFormHelperTextProps>(

({ children, ...props }, ref) => {

return (

<MuiFormHelperText ref={ref} {...props}>

{children}

</MuiFormHelperText>

);

}

);

FormHelperText.displayName = 'FormHelperText';

KhushamBansal

@abhinavkdeval08-design Please sign your commits and address the bot's feedback on your PR.

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design · 2026-06-28T06:11:57Z

Hi @KhushamBansal, thank you for the review! I have addressed the bot's feedback by wrapping the component in React.forwardRef and adding the displayName. I've also amended the commit to include the DCO sign-off. Please let me know if it looks good to go!

abhinavkdeval08-design · 2026-06-28T07:38:39Z

@leecalcote @KhushamBansal
Please review this PR and let me know if any changes are required. Happy to iterate!

Bhumikagarggg · 2026-06-28T17:06:56Z

@abhinavkdeval08-design Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

abhinavkdeval08-design · 2026-06-28T17:26:00Z

Hi @Bhumikagarggg, thank you for the invite! Unfortunately, I won't be able to join the website call tomorrow due to prior personal commitments. However, I have already addressed the code feedback by implementation of React.forwardRef and adding the displayName. The DCO check is also passing now. Please let me know if there are any further code reviews required here on GitHub. Happy to iterate!

abhinavkdeval08-design · 2026-06-30T12:27:51Z

@KhushamBansal @Bhumikagarggg @leecalcote
Plz review this PR

abhinavkdeval08-design · 2026-07-05T12:53:09Z

@leecalcote @KhushamBansal @rishiraj38 @Bhumikagarggg
Kindly review my pr..

Bhumikagarggg · 2026-07-05T19:50:35Z

@abhinavkdeval08-design Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

Bhumikagarggg

Please change the name of file from src/base/FormHelperText/FormHelperText.tsx this to src/base/FormHelperText/FormHelperTextIcon.tsx
Please take this PR as reference - #1332

Bhumikagarggg · 2026-07-05T19:55:04Z

      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,


Please revert package-lock.json file.

Bhumikagarggg · 2026-07-05T19:56:00Z

@@ -0,0 +1,2 @@
+export * from './FormHelperText';


remove this line

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design · 2026-07-06T07:00:53Z

@Bhumikagarggg @leecalcote @KhushamBansal I've renamed the component file to FormHelperTextIcon.tsx, removed the export line from index.ts, and reverted the package-lock.json file as requested. The DCO check is passing. Please review it now!

KhushamBansal

@abhinavkdeval08-design The file shouldn't be named src/base/FormHelperText/FormHelperTextIcon.tsx. It should be src/base/FormHelperText/FormHelperText.tsx. The component isn't an icon.

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design · 2026-07-06T13:10:35Z

@KhushamBansal That makes total sense, it is indeed a text wrapper and not an icon. I had renamed it earlier based on the previous review request, but I have now reverted the file name back to FormHelperText.tsx and fixed the exports. @Bhumikagarggg FYI! The DCO check is passing. Let me know if it looks good to merge now.

abhinavkdeval08-design · 2026-07-14T16:45:04Z

@leecalcote @KhushamBansal @Bhumikagarggg kindly review the PR

coderabbitai · 2026-07-23T16:19:17Z

📝 Walkthrough

Walkthrough

A new typed FormHelperText wrapper forwards props and refs to MUI’s component, sets its display name, and exports it through the local and base package barrels.

Changes

FormHelperText component

Layer / File(s)	Summary
FormHelperText implementation and exports `src/base/FormHelperText/FormHelperText.tsx`, `src/base/FormHelperText/index.ts`, `src/base/index.tsx`	Adds the typed ref-forwarding wrapper and exposes it through both barrel entry points.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: bhumikagarggg, khushambansal

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: implementing the FormHelperText base component wrapper.
Linked Issues check	✅ Passed	The PR implements the requested FormHelperText wrapper and exports it through the base module as required by `#1400`.
Out of Scope Changes check	✅ Passed	The changes are tightly scoped to adding FormHelperText and its exports, with no obvious unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/base/FormHelperText/FormHelperText.tsx`:
- Around line 6-8: Replace the empty SistentFormHelperTextProps interface with a
type alias that preserves its extension of MuiFormHelperTextProps, removing the
unused empty-interface declaration and its comment.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 600cd717-a3bc-410b-830f-ddb11bd6d530

📥 Commits

Reviewing files that changed from the base of the PR and between 2bb6802 and e18dbff.

📒 Files selected for processing (3)

src/base/FormHelperText/FormHelperText.tsx
src/base/FormHelperText/index.ts
src/base/index.tsx

coderabbitai · 2026-07-23T16:20:58Z

+export interface SistentFormHelperTextProps extends MuiFormHelperTextProps {
+  // Custom props for future extension of the Sistent wrapper
+}


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Replace the empty interface with a type alias.

SistentFormHelperTextProps adds no members, so this triggers @typescript-eslint/no-empty-object-type and can fail linting.

Proposed fix

-export interface SistentFormHelperTextProps extends MuiFormHelperTextProps { - // Custom props for future extension of the Sistent wrapper -} +export type SistentFormHelperTextProps = MuiFormHelperTextProps;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export interface SistentFormHelperTextProps extends MuiFormHelperTextProps {

// Custom props for future extension of the Sistent wrapper

}

export type SistentFormHelperTextProps = MuiFormHelperTextProps;

🧰 Tools

🪛 ESLint

[error] 6-6: An interface declaring no members is equivalent to its supertype.

(@typescript-eslint/no-empty-object-type)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/base/FormHelperText/FormHelperText.tsx` around lines 6 - 8, Replace the empty SistentFormHelperTextProps interface with a type alias that preserves its extension of MuiFormHelperTextProps, removing the unused empty-interface declaration and its comment.

Source: Linters/SAST tools

chellej · 2026-07-23T17:21:51Z

@abhinavkdeval08-design, not @leecalcote, but @KhushamBansal and @Bhumikagarggg

gemini-code-assist Bot reviewed Jun 28, 2026

View reviewed changes

KhushamBansal reviewed Jun 28, 2026

View reviewed changes

feat: implement FormHelperText base component wrapper for MUI

536f203

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design force-pushed the feature/implement-form-helper-text branch from 0f694d4 to 536f203 Compare June 28, 2026 06:10

abhinavkdeval08-design requested a review from KhushamBansal June 28, 2026 17:26

Bhumikagarggg suggested changes Jul 5, 2026

View reviewed changes

refactor: rename file to FormHelperTextIcon and revert package-lock

e344196

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design force-pushed the feature/implement-form-helper-text branch from 6f78a41 to e344196 Compare July 6, 2026 07:04

KhushamBansal reviewed Jul 6, 2026

View reviewed changes

refactor: revert filename to FormHelperText.tsx as per maintainer review

483690c

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

abhinavkdeval08-design force-pushed the feature/implement-form-helper-text branch from 5f0765b to 483690c Compare July 6, 2026 13:09

Merge branch 'master' into feature/implement-form-helper-text

f760be4

abhinavkdeval08-design requested review from Bhumikagarggg and KhushamBansal July 6, 2026 13:10

abhinavkdeval08-design added 2 commits July 7, 2026 19:44

Merge branch 'master' into feature/implement-form-helper-text

302f373

Merge branch 'master' into feature/implement-form-helper-text

2d07600

Merge branch 'master' into feature/implement-form-helper-text

e18dbff

coderabbitai Bot reviewed Jul 23, 2026

View reviewed changes

-export const FormHelperText: React.FC<SistentFormHelperTextProps> = ({ children, ...props }) => {
-  return <MuiFormHelperText {...props}>{children}</MuiFormHelperText>;
-};
+export const FormHelperText = React.forwardRef<HTMLParagraphElement, SistentFormHelperTextProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <MuiFormHelperText ref={ref} {...props}>
+        {children}
+      </MuiFormHelperText>
+    );
+  }
+);
+FormHelperText.displayName = 'FormHelperText';

Uh oh!

Conversation

abhinavkdeval08-design commented Jun 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes Proposed

Summary by CodeRabbit

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 28, 2026

Choose a reason for hiding this comment

Uh oh!

KhushamBansal left a comment

Choose a reason for hiding this comment

Uh oh!

abhinavkdeval08-design commented Jun 28, 2026

Uh oh!

abhinavkdeval08-design commented Jun 28, 2026

Uh oh!

Bhumikagarggg commented Jun 28, 2026

Uh oh!

abhinavkdeval08-design commented Jun 28, 2026

Uh oh!

abhinavkdeval08-design commented Jun 30, 2026

Uh oh!

abhinavkdeval08-design commented Jul 5, 2026

Uh oh!

Bhumikagarggg commented Jul 5, 2026

Uh oh!

Bhumikagarggg left a comment

Choose a reason for hiding this comment

Uh oh!

Bhumikagarggg Jul 5, 2026

Choose a reason for hiding this comment

Uh oh!

Bhumikagarggg Jul 5, 2026

Choose a reason for hiding this comment

Uh oh!

abhinavkdeval08-design commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KhushamBansal left a comment

Choose a reason for hiding this comment

Uh oh!

abhinavkdeval08-design commented Jul 6, 2026

Uh oh!

abhinavkdeval08-design commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

chellej commented Jul 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

abhinavkdeval08-design commented Jun 28, 2026 •

edited by coderabbitai Bot

Loading

abhinavkdeval08-design commented Jul 6, 2026 •

edited

Loading

abhinavkdeval08-design commented Jul 14, 2026 •

edited

Loading

coderabbitai Bot commented Jul 23, 2026 •

edited

Loading