UI: Remove use of React.FC in components #25588
Conversation
| @@ -207,7 +207,7 @@ type TextareaProps = Omit< | |||
| valid?: ValidationStates; | |||
| height?: number; | |||
| } & React.RefAttributes<HTMLTextAreaElement>; | |||
| export const Textarea: FC<TextareaProps> = Object.assign( | |||
| export const Textarea = Object.assign( | |||
| styled( | |||
| forwardRef<any, TextareaProps>(function Textarea({ size, valid, align, ...props }, ref) { | |||
There was a problem hiding this comment.
Is children included somewhere in TextareaProps? I didn't see it.
There was a problem hiding this comment.
No but it shouldn't need it anyway for an input Element, right?
There was a problem hiding this comment.
Oh, the name threw me. I thought it was rendering a <textarea>.
There was a problem hiding this comment.
Indeed, it is:
type TextareaPropsRaw = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
There was a problem hiding this comment.
@kylegach I don't think passing children to this Textarea is valid anyway, so it seems like this fixes a type bug, removing that possibility?
|
@kylegach in the components package there's only the tabs component remaining because it does some children manipulation with pretty hairy types. We should refactor that separately or deprecate it for an easier API |
What I did
In React 18, the React team removed the children typing from
React.FCand is now best practice not to use it over all.With that breaking change, a bunch of our component's types make them unusable with children as the types are incorrect or too narrow. This aims to resolve that.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>