fix: improve full name input styling to match radio buttons #40727
Conversation
WalkthroughThe update adds a required Changes
Suggested labels
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code Graph Analysis (1)app/client/src/pages/setup/DetailsForm.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
🔇 Additional comments (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx (1)
60-63: Be cautious of component name collision.There's already an
InputSectioncomponent in the design system (app/client/packages/design-system/ads/src/Input/Input.styles.tsx). Consider using a more specific name or reusing the existing component to maintain consistency.-// Input section container for consistent spacing -const InputSection = styled.div` +// Container for consistent form section spacing +const FormSectionContainer = styled.div` margin-bottom: ${(props) => props.theme.spaces[10]}px; `;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx (2)
app/client/packages/design-system/ads/src/Input/Input.styles.tsx (1)
InputSection(75-80)app/client/src/ce/constants/messages.ts (1)
WELCOME_FORM_FULL_NAME(1593-1593)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
🔇 Additional comments (2)
app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx (2)
36-58: Good implementation of a styled input component.The
StyledFormTextFieldeffectively customizes the form input to match the radio button styling with appropriate CSS targeting for width, height, border-radius, padding, and typography.
107-116: Clean implementation of the input field with consistent spacing.The refactored code improves UI consistency by replacing previously used
Spacecomponents with a styled container approach.
| // Styled Input to match the radio button group styling | ||
| const StyledFormTextField = styled(FormTextField)` | ||
| .ads-v2-input { | ||
| width: 100%; | ||
| max-width: none; | ||
| } | ||
|
|
||
| .ads-v2-input__input { | ||
| height: 36px; | ||
| border-radius: var(--ads-v2-border-radius); | ||
| padding: var(--ads-v2-spaces-3); | ||
| font-size: var(--ads-font-size-4); | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .ads-v2-input__label { | ||
| font-size: var(--ads-font-size-4); | ||
| font-weight: var(--ads-font-weight-bold-xl); | ||
| color: var(--ads-v2-color-gray-700); | ||
| margin-bottom: 0.5rem; | ||
| } | ||
| `; | ||
|
|
||
| // Input section container for consistent spacing | ||
| const InputSection = styled.div` | ||
| margin-bottom: ${(props) => props.theme.spaces[10]}px; | ||
| `; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify validation for the full name field.
The validation function doesn't include checks for the fullName field. If validation is required, consider adding it to the validation function.
Also applies to: 107-116
🏁 Script executed:
#!/bin/bash
# Check if fullName is used elsewhere for validation
rg "fullName.*validation|validate.*fullName" --type tsLength of output: 56
To pinpoint where—and if—a validation schema exists (and to confirm whether fullName is included), let’s inspect the profiling questions component directly:
🏁 Script executed:
#!/bin/bash
# Locate the file path
fd NonSuperUserProfilingQuestions.tsx
# Search within that file for any validation logic or schema definitions
rg -n "validate|Yup|validationSchema" app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx
# Check for direct references to fullName in this file
rg -n "fullName" app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsxLength of output: 371
Let’s inspect the validate implementation to confirm what fields are checked:
🏁 Script executed:
#!/bin/bash
# Show the validate function body
rg -n "const validate" -A40 -B5 app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsxLength of output: 1644
Add fullName to the validation schema
The validate function in NonSuperUserProfilingQuestions.tsx (lines 80–94) currently only checks proficiency and useCase, but you’ve added a fullName field (lines 112–116). If fullName is required, update the validator accordingly—for example:
const validate = (values: any) => {
const errors: any = {};
if (!values.proficiency) {
errors.proficiency = createMessage(WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE);
}
if (!values.useCase) {
errors.useCase = createMessage(WELCOME_FORM_USE_CASE_ERROR_MESSAGE);
}
+ // Ensure fullName is provided when billing is enabled
+ if (values.isCloudBillingEnabled && !values.fullName?.trim()) {
+ errors.fullName = createMessage(WELCOME_FORM_FULL_NAME_ERROR_MESSAGE);
+ }
return errors;
};• File: app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx
• Validator: lines 80–94
• fullName input: lines 112–116
🤖 Prompt for AI Agents
In app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx around lines 80
to 94, the validate function currently checks only proficiency and useCase
fields but does not validate the fullName field added at lines 112 to 116. To
fix this, update the validate function to include validation logic for fullName,
ensuring it checks for required input or any other necessary constraints
consistent with the other fields.
…perUserProfilingQuestions.tsx
…mprove-ui-of-signup-user-name-input
…for better layout consistency
Summary
This PR updates the styling of the user full name input field on the onboarding screen to match the styling of the radio button groups, creating a more consistent and polished UI.
Problem
The full name input field in the onboarding form had inconsistent styling compared to the radio button groups, which created a visually disjointed user experience.
Solution
FormTextFieldthat matches the styling of radio buttonsInputSectioncomponentChanges
StyledFormTextFieldwith custom CSS to match radio button styling:InputSectionfor consistent vertical spacingFormTextFieldwith the styled versionSpacecomponentsScreenshots
Automation
/ok-to-test tags="@tag.Sanity, @tag.Authentication"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/15205128744
Commit: 6e26d5a
Cypress dashboard.
Tags:
@tag.Sanity, @tag.AuthenticationSpec:
Fri, 23 May 2025 08:33:29 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit