chore(application-system): Improving form field styling consistency #17217
Conversation
WalkthroughThe pull request introduces a comprehensive update to the application's field components, focusing on adding Changes
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
Datadog ReportAll test runs ✅ 21 Total Test Services: 0 Failed, 20 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (1)
|
…d.is into chore/form-field-styling
…d.is into chore/form-field-styling
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx (1)
Line range hint
91-93: Address TypeScript ignore commentThe code contains a ts-ignore comment that should be addressed to maintain type safety.
Consider:
- Adding proper type definitions for the onSelect prop
- Documenting why the ts-ignore is necessary if it can't be removed
- Creating a follow-up task to resolve the TypeScript error
🧹 Nitpick comments (18)
libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx (1)
21-24: Consider documenting the margin properties in the field interface.To improve maintainability and developer experience, it would be helpful to add JSDoc comments explaining the margin properties and their default values in the
ExpandableDescriptionFieldinterface.Example addition to the interface:
interface ExpandableDescriptionField { /** * Top margin of the field container. * @default 2 */ marginTop?: number; /** * Bottom margin of the field container. * @default 2 */ marginBottom?: number; // ... other properties }libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx (1)
41-42: Consider adding a default value for marginBottomWhile marginTop has a default fallback of 4, marginBottom doesn't have a default value. This might lead to inconsistent spacing across forms.
- marginBottom={marginBottom} + marginBottom={marginBottom ?? 4}libs/application/ui-fields/src/lib/SliderFormField/SliderFormField.tsx (2)
Line range hint
23-46: Consider adding error handling for max value computationWhile the
computeMaxfunction is well-implemented and memoized, it might benefit from error handling to gracefully handle edge cases where the computation fails or returns invalid values.const computeMax = ( maybeMax: MaybeWithApplicationAndField<number>, memoApplication: Application, memoField: SliderField, ) => { + try { if (typeof maybeMax === 'function') { - return maybeMax(memoApplication, memoField) + const result = maybeMax(memoApplication, memoField) + if (typeof result !== 'number' || isNaN(result)) { + console.warn(`Invalid max value computed for field ${memoField.id}`) + return memoField.min || 0 + } + return result } return maybeMax + } catch (error) { + console.error(`Error computing max value for field ${memoField.id}:`, error) + return memoField.min || 0 + } }
Line range hint
82-89: Consider consolidating value updatesThe current implementation calls both
onChangeandsetValueseparately with the converted value. Consider consolidating these updates to ensure consistency and prevent potential race conditions.- const value = field.saveAsString ? String(val) : val - onChange(value) - setValue(field.id, value) + const newValue = field.saveAsString ? String(val) : val + onChange(newValue) + // setValue is handled automatically by react-hook-form's Controllerlibs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx (3)
16-16: Consider adding type safety for margin properties.The margin properties should be properly typed in the
DividerFieldtype to ensure type safety and better IDE support.Verify that the
DividerFieldtype includes these properties:#!/bin/bash # Description: Check if DividerField type includes margin properties ast-grep --pattern 'interface DividerField { $$$ marginTop?: $_ marginBottom?: $_ $$$ }'
19-19: Document margin units for better maintainability.The default margin values (5 and 1) should be documented to clarify the units being used (e.g., spacing units from the design system).
Consider adding a comment:
+ // Margins use spacing units from island-ui/core design system <Box marginTop={marginTop ?? 5} marginBottom={marginBottom ?? 1}>
Line range hint
1-43: Implementation aligns well with PR objectives.The changes successfully implement configurable margins while maintaining component reusability and type safety. The component properly integrates with the design system and follows React/TypeScript best practices.
Consider extracting the default margin values into a shared constants file if they're used across multiple field components, promoting better maintainability and consistency.
libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx (1)
Line range hint
38-63: Consider performance and reusability improvements.The async loading and error handling logic could be optimized:
- Extract the loading logic into a reusable custom hook (e.g.,
useAsyncOptions).- Add loading state management for better UX.
- Memoize options transformation to prevent unnecessary re-renders.
Example implementation of a custom hook:
function useAsyncOptions(loadOptions, application, apolloClient) { const [state, setState] = useState({ options: [], isLoading: true, error: false }); useEffect(() => { const load = async () => { try { setState(prev => ({ ...prev, isLoading: true, error: false })); const loaded = await loadOptions({ application, apolloClient }); setState({ options: loaded, isLoading: false, error: false }); } catch { setState(prev => ({ ...prev, isLoading: false, error: true })); } }; load(); }, [loadOptions]); return state; }libs/application/ui-fields/src/lib/FileUploadFormField/FileUploadFormField.tsx (1)
51-51: LGTM! Consider documenting margin usageThe Box component implementation with margin props aligns well with the PR's objective of improving form field styling consistency. The component correctly utilizes the island-ui/core design system.
Consider adding a comment or updating the component's documentation to explain the margin props usage and their impact on field spacing.
Also applies to: 85-85
libs/application/ui-fields/src/lib/RedirectToServicePortalFormField/RedirectToServicePortalFormField.tsx (1)
34-35: Consider extracting default margin values to constantsThe hardcoded default margin value of 10 should be extracted to a shared constant to maintain consistency across field components.
+ const DEFAULT_MARGIN = 10; return ( <Box display="flex" alignItems="center" justifyContent="center" width="full" - marginTop={field.marginTop ?? 10} - marginBottom={field.marginBottom ?? 10} + marginTop={field.marginTop ?? DEFAULT_MARGIN} + marginBottom={field.marginBottom ?? DEFAULT_MARGIN} >libs/application/ui-fields/src/lib/KeyValueFormField/KeyValueFormField.tsx (1)
26-27: Ensure consistent margin handling across field componentsFor consistency with other field components, consider adding default values for marginTop and marginBottom props.
<Box paddingY={field.paddingY} paddingX={field.paddingX} paddingBottom={field.paddingBottom} display={field.display === 'flex' ? 'flex' : 'block'} justifyContent="spaceBetween" - marginTop={field.marginTop} - marginBottom={field.marginBottom} + marginTop={field.marginTop ?? DEFAULT_MARGIN} + marginBottom={field.marginBottom ?? DEFAULT_MARGIN} >libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx (1)
54-54: Consider adding type safety for margin valuesThe Box component accepts various margin value types (number, array, etc.). Consider adding type constraints to ensure consistent margin value types across the application.
type MarginValue = number | [number, number]; interface Props extends FieldBaseProps { field: CompanySearchField & { marginTop?: MarginValue; marginBottom?: MarginValue; }; }libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx (1)
49-49: Consider margin composition with nested Box componentsThe component uses nested Box components. While the current implementation works, be mindful of margin composition when both parent and child Box components have margin properties.
Consider documenting the margin composition behavior or establishing guidelines for nested Box components to maintain consistent spacing across the application.
Also applies to: 99-99
libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx (1)
52-52: Consider extracting common Box wrapper patternMultiple form field components share the same Box wrapper pattern with margin properties.
Consider creating a reusable FormFieldWrapper component to:
- Reduce code duplication
- Ensure consistent margin handling
- Simplify future styling updates
interface FormFieldWrapperProps { marginTop?: number; marginBottom?: number; children: React.ReactNode; } const FormFieldWrapper: FC<FormFieldWrapperProps> = ({ marginTop, marginBottom, children }) => ( <Box marginTop={marginTop} marginBottom={marginBottom}> {children} </Box> );Also applies to: 102-102
libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx (1)
55-55: Consider adding data-testid attribute for testingWhile the Box component implementation is correct for margin handling, consider adding a data-testid attribute to the outer Box for easier testing.
- <Box marginTop={marginTop} marginBottom={marginBottom}> + <Box marginTop={marginTop} marginBottom={marginBottom} data-testid={`${id}-container`}>Also applies to: 112-112
libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx (1)
Line range hint
58-118: Consider extracting error handling logicWhile the Box implementation is correct, consider extracting the error handling logic from the onChange handler into a separate function for better maintainability.
+ const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { + if (error) { + clearErrors(id) + } + onChange(e) + } + return ( <Box marginTop={marginTop} marginBottom={marginBottom}> {/* ... */} - onChange={(e) => { - if (error) { - clearErrors(id) - } - onChange(e) - }} + onChange={handleInputChange}libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx (1)
360-360: Consider using destructured margin props.The code uses
field.marginTopandfield.marginBottominstead of the destructured variables. For consistency with the rest of the codebase, consider using the destructured props.- <Box marginTop={field.marginTop} marginBottom={field.marginBottom}> + <Box marginTop={marginTop} marginBottom={marginBottom}>libs/application/types/src/lib/Fields.ts (1)
223-224: LGTM: Well-designed addition of margin properties to BaseField.The margin properties are correctly added to the BaseField interface, enabling consistent margin handling across all field types through inheritance. The optional nature of these properties maintains backward compatibility.
This change follows good design principles by:
- Centralizing margin handling in the base interface
- Leveraging the existing BoxProps type from island-ui
- Maintaining backward compatibility through optional properties
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
libs/application/core/src/lib/fieldBuilders.ts(16 hunks)libs/application/types/src/lib/Fields.ts(1 hunks)libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx(3 hunks)libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx(3 hunks)libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/FileUploadFormField/FileUploadFormField.tsx(3 hunks)libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/KeyValueFormField/KeyValueFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/PaymentChargeOverviewFormField/PaymentChargeOverviewFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/RedirectToServicePortalFormField/RedirectToServicePortalFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx(3 hunks)libs/application/ui-fields/src/lib/SliderFormField/SliderFormField.tsx(1 hunks)libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx(2 hunks)libs/application/ui-fields/src/lib/VehicleRadioFormField/VehicleRadioFormField.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- libs/application/ui-fields/src/lib/VehicleRadioFormField/VehicleRadioFormField.tsx
🧰 Additional context used
📓 Path-based instructions (21)
libs/application/ui-fields/src/lib/KeyValueFormField/KeyValueFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/SliderFormField/SliderFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/FileUploadFormField/FileUploadFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/PaymentChargeOverviewFormField/PaymentChargeOverviewFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/RedirectToServicePortalFormField/RedirectToServicePortalFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/types/src/lib/Fields.ts (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/core/src/lib/fieldBuilders.ts (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
🔇 Additional comments (26)
libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx (1)
21-24: LGTM! The margin properties implementation looks good.
The changes align well with the PR objectives by allowing consistent form field styling through configurable margins. The nullish coalescing operator ensures a good fallback value of 2 when margins are not specified.
libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx (3)
Line range hint 9-12: LGTM: Type definitions are well-structured
The Props interface follows TypeScript best practices and properly extends FieldBaseProps.
19-19: LGTM: Clean prop destructuring
The margin properties are properly destructured alongside existing field properties.
Line range hint 1-54: LGTM: Component follows best practices for reusability
The implementation:
- Uses proper TypeScript features
- Follows modular design principles
- Implements proper tree-shaking through specific imports
- Uses shared UI components effectively
libs/application/ui-fields/src/lib/SliderFormField/SliderFormField.tsx (2)
Line range hint 1-14: Well-structured TypeScript implementation!
The component demonstrates excellent TypeScript practices with proper type definitions, generics usage, and type safety. The shared types from @island.is/application/types promote reusability across the application system.
Also applies to: 16-21
47-47: Margin properties implementation aligns with PR objectives
The addition of marginTop and marginBottom props to the Box component successfully implements the requested styling consistency while maintaining type safety through the field object.
libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx (2)
Line range hint 8-12: LGTM! Type definitions follow best practices.
The component demonstrates good TypeScript usage with clear prop types, enabling reusability and type safety.
40-43: LGTM! Margin properties enhance styling flexibility.
The changes align with the PR's objective of improving form field styling consistency by allowing granular margin control.
libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx (1)
64-64: Verify type definitions for margin properties.
The Box component usage with margin properties aligns well with the PR objectives for consistent form field styling. However, let's ensure proper type safety.
Also applies to: 116-116
libs/application/ui-fields/src/lib/FileUploadFormField/FileUploadFormField.tsx (1)
Line range hint 1-87: Implementation follows best practices
The component implementation adheres to all required guidelines:
- Proper TypeScript usage with well-defined props and types
- Positioned in libs directory for reusability across NextJS apps
- Specific imports supporting effective tree-shaking
libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx (1)
35-36: 🛠️ Refactor suggestion
Standardize margin handling with other field components
The margin implementation differs from other field components:
- marginTop uses responsive array values [2, 4]
- marginBottom lacks a default value
Consider standardizing the margin implementation across all field components.
Let's verify the margin implementation across other field components:
libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx (1)
45-46: Verify type definitions for margin properties
The margin properties are correctly implemented using the Box component. However, we should verify the type definitions to ensure type safety.
✅ Verification successful
Based on the extensive search results, I can see that the margin properties are widely used throughout the codebase with the Box component from island-ui/core, but I don't see any explicit type definitions for the field object that would include marginTop and marginBottom properties. However, since these properties are being used with the Box component, which is a common UI component that accepts margin props, and the implementation follows a consistent pattern across the codebase, this is a safe usage.
The margin properties are correctly implemented
The marginTop and marginBottom properties are being used appropriately with the Box component from island-ui/core, which is designed to handle these spacing properties. While we don't see the explicit type definition, this is a common pattern in the codebase for handling component spacing.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for BaseField or DisplayField type definitions
ast-grep --pattern 'interface $field {
$$$
marginTop?: $_;
marginBottom?: $_;
$$$
}'
Length of output: 94
Script:
#!/bin/bash
# Let's try a broader search for type definitions related to form fields
ast-grep --pattern 'type $field = {
$$$
margin$_?: $_;
$$$
}'
# Also search for interface definitions with a different pattern
ast-grep --pattern 'interface $_ {
$$$
margin$_?: $_;
$$$
}'
# Search for actual usage of these properties in the codebase
rg "marginTop|marginBottom" -A 2 -B 2
Length of output: 67296
Script:
#!/bin/bash
# Let's search for field type definitions in the DisplayFormField component and related files
rg -l "DisplayFormField" --type ts --type tsx
# Also search for any field interface or type definitions that might contain margin properties
ast-grep --pattern 'type $field = {
$$$
margin?: $_;
$$$
}'
ast-grep --pattern 'interface $field {
$$$
margin?: $_;
$$$
}'
Length of output: 212
Script:
#!/bin/bash
# Search for DisplayFormField files and their content
rg "DisplayFormField" -A 5 -B 5
# Search for field type definitions with a broader pattern
ast-grep --pattern 'type $_ = {
$$$
}'
# Search for field interfaces with a broader pattern
ast-grep --pattern 'interface $_ {
$$$
}'
Length of output: 65756
libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx (1)
41-42: LGTM: Props interface correctly extended
The margin properties are properly typed in the Props interface.
libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx (1)
41-42: LGTM: Consistent margin property implementation
The margin properties are implemented consistently with other form field components.
libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx (1)
44-45: LGTM: Props properly extended with margin properties
The margin properties are correctly added to the field destructuring, maintaining type safety and component consistency.
libs/application/ui-fields/src/lib/PaymentChargeOverviewFormField/PaymentChargeOverviewFormField.tsx (1)
50-50: LGTM: Consistent margin implementation
The Box component implementation follows the established pattern for margin handling across form fields.
libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx (1)
50-51: LGTM: Margin properties properly integrated
The margin properties are correctly added to the field destructuring, maintaining consistency with other form fields.
libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx (2)
43-44: LGTM! Props added for consistent margin control.
The addition of marginTop and marginBottom props aligns with the PR's objective of improving form field styling consistency.
54-60: LGTM! Box component implementation enhances layout control.
The Box component usage with margin props provides consistent spacing control while maintaining accessibility with proper ARIA attributes.
libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx (2)
48-49: LGTM! Props added for consistent margin control.
The addition of margin props aligns with the standardization of form field styling.
120-120: LGTM! Box component implementation enhances layout control.
The Box component usage with margin props provides consistent spacing control.
Also applies to: 160-160
libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx (1)
162-163: LGTM! Props added for consistent margin control.
The addition of margin props aligns with the standardization of form field styling.
libs/application/core/src/lib/fieldBuilders.ts (4)
76-77: LGTM: Common field extraction properly handles margin properties.
The margin properties are correctly extracted and propagated, ensuring consistent margin handling across all field types.
Also applies to: 91-92
403-404: LGTM: Divider field correctly implements margin properties.
The margin properties are properly typed and integrated into the divider field builder.
Also applies to: 406-406, 416-417
470-471: LGTM: Submit field properly implements margin properties.
The margin properties are correctly integrated into the submit field builder, maintaining consistency with other field types.
Also applies to: 481-482, 495-496
949-950: LGTM: Slider field correctly implements margin properties.
The margin properties are properly integrated into the slider field builder, maintaining consistency with other field types.
Also applies to: 977-978
libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx
Show resolved
Hide resolved
libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx
Outdated
Show resolved
Hide resolved
libs/application/ui-fields/src/lib/FileUploadFormField/FileUploadFormField.tsx
Show resolved
Hide resolved
libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx
Show resolved
Hide resolved
...lication/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx
Outdated
Show resolved
Hide resolved
libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx
Outdated
Show resolved
Hide resolved
...tion/ui-fields/src/lib/RedirectToServicePortalFormField/RedirectToServicePortalFormField.tsx
Show resolved
Hide resolved
libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx
Outdated
Show resolved
Hide resolved
HjorturJ
added
the
deprecated:automerge
Improving form field styling consistency by adding fields to the base field object
Task link
What
Make sure its possible to adjust field styling in a similar way for each field
Screenshots / Gifs
No changes to default look, now possible to add marginTop and marginBottom to all fields who extend base field.
Before:
After:
Checklist:
Summary by CodeRabbit
New Features
marginTopandmarginBottomproperties to various form fields for enhanced layout flexibility.Boxcomponent for improved styling and spacing control.Bug Fixes
FindVehicleFormFieldcomponent.Documentation