refactor: Replace Textfield and Textarea with StudioTextfield and StudioTextarea
#14711
Conversation
Replace Textarea with StudioTextarea
📝 WalkthroughWalkthroughThe changes update several tests and UI components by replacing design system elements. Multiple files have been updated to replace components from the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-storybook". (The package "eslint-plugin-storybook" was not found when loaded as a Node module from the directory "/frontend/libs/studio-components".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-storybook" was referenced from the config file in "frontend/libs/studio-components/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueContentInput/StringInput.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-storybook". (The package "eslint-plugin-storybook" was not found when loaded as a Node module from the directory "/frontend/libs/studio-components".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-storybook" was referenced from the config file in "frontend/libs/studio-components/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. frontend/libs/studio-components/src/components/StudioExpression/ManualEditor/ManualEditor.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-storybook". (The package "eslint-plugin-storybook" was not found when loaded as a Node module from the directory "/frontend/libs/studio-components".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-storybook" was referenced from the config file in "frontend/libs/studio-components/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
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
CodeRabbit Configuration File (
|
github-actions
bot
added
area/data-modeling
mlqn
changed the title
Textfield and Textarea components with StudioTextfield and StudioTextarea
mlqn
changed the title
Textfield and Textarea components with StudioTextfield and StudioTextareaTextfield and Textarea with StudioTextfield and StudioTextarea
…gnsystemet-components-with-studio
Fix validation of decimal and editor
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #14711 +/- ##
==========================================
- Coverage 95.77% 95.77% -0.01%
==========================================
Files 1923 1923
Lines 25082 25081 -1
Branches 2867 2868 +1
==========================================
- Hits 24023 24022 -1
Misses 799 799
Partials 260 260 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/libs/studio-components/src/hooks/useTextInputProps.tsx (1)
12-14: Added support for uncontrolled components.The hook now properly destructures
valueanddefaultValueseparately, enabling support for both controlled and uncontrolled input components.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
frontend/app-development/features/appPublish/components/CreateRelease.test.tsx(1 hunks)frontend/app-development/features/appPublish/components/CreateRelease.tsx(2 hunks)frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AboutTab/InputFields/InputFields.tsx(2 hunks)frontend/dashboard/components/RepoNameInput/RepoNameInput.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioExpression/ManualEditor/ManualEditor.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueContentInput/StringInput.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx(3 hunks)frontend/libs/studio-components/src/hooks/useTextInputProps.tsx(2 hunks)frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/EnumField.tsx(2 hunks)frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/RestrictionField/RestrictionField.tsx(2 hunks)frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/StringRestrictions/StringRestrictions.tsx(3 hunks)frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx(1 hunks)frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/DeleteModal/DeleteModal.tsx(2 hunks)frontend/packages/text-editor/src/TextEntry.tsx(2 hunks)frontend/packages/text-editor/src/TextRow.tsx(2 hunks)frontend/packages/ux-editor-v3/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx(2 hunks)frontend/packages/ux-editor-v3/src/components/config/componentSpecificContent/Image/ImageComponent.tsx(3 hunks)frontend/packages/ux-editor-v3/src/components/config/editModal/EditCodeList.tsx(2 hunks)frontend/packages/ux-editor-v3/src/components/config/editModal/EditComponentId.tsx(2 hunks)frontend/packages/ux-editor-v3/src/components/config/editModal/EditOptions.tsx(3 hunks)frontend/packages/ux-editor-v3/src/components/config/editModal/EditPreselectedIndex.tsx(2 hunks)frontend/packages/ux-editor-v3/src/components/config/editModal/EditStringValue.tsx(2 hunks)frontend/packages/ux-editor-v3/src/containers/DesignView/PageAccordion/NavigationMenu/InputPopover/InputPopover.tsx(3 hunks)frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx(2 hunks)frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx(2 hunks)
🔇 Additional comments (53)
frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx (2)
5-8: Import statements updated to support new component structure.The import statements have been adjusted to replace the Textfield component with StudioTextfield. This aligns with the PR's objective of transitioning from the designsystemet components to studio components.
86-91: Textfield replaced with StudioTextfield component.The component substitution has been implemented correctly. All the required props are maintained, and the event handler logic remains unchanged.
frontend/libs/studio-components/src/components/StudioExpression/ManualEditor/ManualEditor.tsx (1)
46-46: Property change from errorAfterBlur to errorThe change from
errorAfterBlurtoerrorprop aligns with the PR objective to standardize components. This likely changes when or how error messages are displayed, so ensure the error display behavior still meets requirements.frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/EnumField.tsx (2)
6-6: Import updated to use StudioTextfieldThe import statement has been updated to use StudioTextfield from @studio/components instead of Textfield from the previous design system.
47-55: Component replaced with StudioTextfieldThe Textfield component has been replaced with StudioTextfield, and the
sizeproperty has been removed. Ensure the sizing/styling still meets design requirements without the size property.frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueContentInput/StringInput.tsx (2)
6-6: Import updated to use StudioTextfieldThe import statement has been updated to use StudioTextfield from @studio/components instead of Textfield from the previous design system.
14-14: Component replaced with StudioTextfield and size prop removedThe Textfield component has been replaced with StudioTextfield, and the
sizeproperty previously set to 'small' has been removed. Verify that the component appearance is still appropriate without the size property.frontend/packages/ux-editor-v3/src/components/config/editModal/EditComponentId.tsx (2)
7-7: Import updated to use StudioTextfieldThe import statement has been updated to use StudioTextfield from @studio/components instead of Textfield from the previous design system.
52-56: Component replaced with StudioTextfieldThe Textfield component has been replaced with StudioTextfield while maintaining the same props and event handling. This change aligns with the PR objective to standardize components.
frontend/app-development/features/appPublish/components/CreateRelease.test.tsx (1)
121-121: Improved test reliability with waitForThe change from direct blur to using
waitForenhances test stability by ensuring the DOM is completely updated before triggering the blur event. This prevents flaky tests that might fail due to race conditions between rendering and event handling.frontend/packages/ux-editor-v3/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx (1)
2-2: Consistent component library usageThe replacement of
Textfieldfrom@digdir/designsystemet-reactwithStudioTextfieldfrom@studio/componentsaligns with the PR objective to standardize the text input components across the application.Also applies to: 12-12, 98-99
frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx (1)
54-54: Updated prop from errorAfterBlur to errorThe property name has been updated from
errorAfterBlurtoerror, maintaining the same functionality but following a more standardized naming convention for error handling across components.frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/DeleteModal/DeleteModal.tsx (1)
4-5: Updated import structure and component usageThe changes properly replace
TextfieldwithStudioTextfieldand update the import structure. The removal of thesize='small'prop suggests that sizing might be handled differently in the new component implementation.Also applies to: 9-9, 60-61
frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx (3)
29-29: Good addition of defaultValue prop to support fallback valuesAdding the
defaultValueprop to the component's parameters enhances its flexibility by providing a fallback mechanism.
81-81: Good implementation of fallback logicUsing the nullish coalescing operator (
value ?? defaultValue) is a clean way to provide a fallback when the value is null or undefined.
97-97: Properly passing defaultValue to child componentCorrectly passing the
defaultValueprop to theStudioIconTextfieldcomponent ensures consistent behavior in both view and edit modes.frontend/packages/text-editor/src/TextEntry.tsx (1)
9-9: Successfully replaced Textarea with StudioTextareaThe implementation correctly replaces the
Textareacomponent from@digdir/designsystemet-reactwithStudioTextareafrom@studio/componentsas intended in the PR objective.Could you confirm that the removal of the
size="small"prop (which was likely on the original Textarea) is intentional? DoesStudioTextareahave a different default size or is sizing handled differently?Also applies to: 50-51
frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/RestrictionField/RestrictionField.tsx (2)
4-4: Successfully replaced Textfield with StudioTextfieldThe implementation correctly replaces the
Textfieldcomponent from@digdir/designsystemet-reactwithStudioTextfieldfrom@studio/componentsas intended in the PR objective.Also applies to: 35-36
27-27: Improved type safety with explicit HTMLInputElement typingThe explicit type annotation for the event parameter improves type safety by ensuring that
targetis correctly recognized as anHTMLInputElement.frontend/packages/ux-editor-v3/src/components/config/editModal/EditPreselectedIndex.tsx (1)
10-10: Successfully replaced Textfield with StudioTextfieldThe implementation correctly replaces the
Textfieldcomponent from@digdir/designsystemet-reactwithStudioTextfieldfrom@studio/componentsas intended in the PR objective.Also applies to: 45-46
frontend/packages/ux-editor-v3/src/components/config/editModal/EditCodeList.tsx (2)
2-11: Import changes align with the component replacement patternThe replacement of
TextfieldwithStudioTextfieldis reflected in the imports, ensuring consistent usage of the Studio component library.
78-83: Component replacement looks goodSuccessfully replaced
TextfieldwithStudioTextfieldwhile maintaining all the required props. This change is consistent with the PR objective to standardize on Studio components.frontend/app-development/features/appPublish/components/CreateRelease.tsx (3)
10-10: Import change for Studio components looks goodProperly replaced the imports from
@digdir/designsystemet-reactwith the Studio components from@studio/components.
56-60: TextField replacement is correctSuccessfully replaced
TextfieldwithStudioTextfield. Note that thesizeprop has been removed, which is appropriate if the Studio component has different default styling.
67-73: Textarea replacement is correctSuccessfully replaced
TextareawithStudioTextareawhile maintaining all necessary props. Thesizeprop removal is consistent with the component library migration.frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AboutTab/InputFields/InputFields.tsx (4)
6-6: Import change for StudioTextfield looks goodProperly updated the import statement to use the new component from
@studio/components.
42-47: Textfield replacement for repo field is correctSuccessfully replaced the first
TextfieldwithStudioTextfieldwhile maintaining all needed props. Thesizeprop has been removed as it's not needed in the Studio component.
48-54: Textfield replacement for name field is correctSuccessfully replaced the second
TextfieldwithStudioTextfieldwhile maintaining the error handling capability.
55-60: Textfield replacement for alt_id field is correctThe third
Textfieldhas been properly replaced withStudioTextfield, maintaining all necessary props.frontend/packages/ux-editor-v3/src/components/config/editModal/EditStringValue.tsx (2)
1-1: Import statement updated correctlyThe import statement has been properly updated to include
StudioTextfieldfrom@studio/components.
60-64: Textfield replacement in conditional rendering block is correctSuccessfully replaced
TextfieldwithStudioTextfieldin the conditional rendering section, maintaining all the required props and event handlers.frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/StringRestrictions/StringRestrictions.tsx (2)
97-103: Component replacement looks good.The
Textfieldcomponent has been successfully replaced withStudioTextfield, and the unnecessarysizeprop has been removed. This matches the PR objectives.
117-123: Component replacement looks good.The second
Textfieldinstance has also been successfully replaced withStudioTextfieldwith thesizeprop removed, maintaining consistency.frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx (2)
3-3: Import statement updated correctly.The import statement has been updated to use
StudioTextfieldPropsfrom@studio/componentsinstead ofTextfieldPropsfrom@digdir/designsystemet-react.
11-11: Type definition updated correctly.The
NameFieldPropstype now extendsStudioTextfieldPropsinstead ofTextfieldProps, ensuring type safety with the new component.frontend/libs/studio-components/src/hooks/useTextInputProps.tsx (2)
24-25: Improved initialization logic.The initialization logic has been enhanced to create a proper fallback chain from
valuetodefaultValueto empty string, improving component flexibility.
31-34: Updated effect dependencies.The
useEffecthook now correctly depends oninitialValueinstead of justvalue, ensuring the component responds properly to changes in both controlled and uncontrolled modes.frontend/packages/text-editor/src/TextRow.tsx (3)
6-7: Import statement cleaned up.The import statement now only includes
Tablefrom@digdir/designsystemet-react, removing the no-longer-neededTextfield.
12-12: Added StudioTextfield import.The import for
StudioTextfieldhas been added to replace the removedTextfieldcomponent.
113-119: Component replacement looks good.The
Textfieldcomponent has been successfully replaced withStudioTextfield. Thesizeprop has been removed as it's not needed with the new component.frontend/packages/ux-editor-v3/src/components/config/componentSpecificContent/Image/ImageComponent.tsx (3)
2-2: Updated imports align with the refactoring strategy.The import changes correctly set up the new dependencies, importing only the still-needed
Fieldsetfrom@digdir/designsystemet-reactwhile adding the newStudioTextfieldfrom@studio/components.Also applies to: 8-8
77-82: Successfully replaced Textfield with StudioTextfield.The component replacement maintains all the required props and functionality from the original implementation, ensuring that the form field logic for image source inputs continues to work as expected.
106-110: Successfully replaced Textfield with StudioTextfield for width input.The implementation correctly preserves all necessary functionality including the onChange handler and value propagation.
frontend/dashboard/components/RepoNameInput/RepoNameInput.tsx (2)
3-6: Updated imports and type definitions for StudioTextfield.The changes correctly update the component imports and properly extend the component props from
StudioTextfieldPropsinstead of the previousTextfieldProps.Also applies to: 11-11
18-25: Properly migrated to StudioTextfield with API adjustments.The implementation correctly adapts to the API differences of the new component:
- Removed the
sizeprop which is not supported in the new component- Changed from
valuetodefaultValuefor the repo name- Changed from
errorAfterBlurtoerrorfor error message displayThese changes ensure that the component behavior remains consistent while using the new design system.
frontend/packages/ux-editor-v3/src/components/config/editModal/EditOptions.tsx (2)
3-3: Updated imports for StudioTextfield.The import changes correctly remove
Textfieldfrom@digdir/designsystemet-reactand addStudioTextfieldfrom@studio/components.Also applies to: 16-16
155-160: Successfully replaced Textfield with StudioTextfield.The implementation correctly preserves all the necessary props from the original component, maintaining functionality for option value inputs.
frontend/packages/ux-editor-v3/src/containers/DesignView/PageAccordion/NavigationMenu/InputPopover/InputPopover.tsx (3)
4-4: Updated imports for StudioTextfield and related components.The import changes correctly remove
Textfieldfrom@digdir/designsystemet-reactand add the necessary Studio components includingStudioTextfield.Also applies to: 8-8
51-56: Simplified event type to match the StudioTextfield component.The event handler now correctly specifies
ChangeEvent<HTMLInputElement>instead of the previous union type, which better aligns with the actual events that will be dispatched from the StudioTextfield component.
83-89: Properly migrated to StudioTextfield with API adjustments.The implementation correctly adapts to the API differences of the new component:
- Removed the
sizeprop which is not supported in the new component- Changed the error handling from
errorAfterBlurtoerrorwith a boolean valueThese changes ensure that the input popover functionality remains consistent while using the new design system.
frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx (3)
2-2: Import changes look good.The changes correctly remove the
Textfieldimport from@digdir/designsystemet-reactand addStudioTextfieldfrom@studio/components.Also applies to: 8-8
60-66: Component replacement correctly implemented.The
Textfieldcomponent has been successfully replaced withStudioTextfieldwhile maintaining the same props and functionality.
2-2:❓ Verification inconclusive
Consider whether
Fieldsetshould also be replaced.Since this PR aims to replace design system components with studio components, it might be worth considering whether
Fieldsetshould also be replaced with a potentialStudioFieldsetcomponent for consistency. This might be planned for a future PR but is worth noting.
🏁 Script executed:
#!/bin/bash # Check if a StudioFieldset component exists in the codebase rg "export.*StudioFieldset" --type tsLength of output: 741
Action: Evaluate Consistency of Fieldset Component Usage
The import of
Fieldsetfrom@digdir/designsystemet-reactin this file is still referencing our older design system. Since a replacement—StudioFieldset—is already available (see, for example,frontend/libs/studio-components/src/components/StudioFieldset/StudioFieldset.tsx), please assess whether it makes sense to update this import for consistency with our ongoing migration to studio components. If a direct replacement is not feasible in this PR, consider documenting the decision and tracking it for a future update.
JamalAlabdullah
deleted the
refactor/replace-designsystemet-components-with-studio
branch
Description
TextfieldandTextareawithStudioTextfieldandStudioTextareaRelated Issue(s)
Verification
Summary by CodeRabbit