Add extend to formfield container based on child input kind #7498
Conversation
| Children.forEach(children, (child) => { | ||
| if (child && child.type) { | ||
| childName = child.type.displayName; | ||
| if (childName?.length > 1) |
There was a problem hiding this comment.
| if (childName?.length > 1) | |
| // camelCase component name to match theme object key | |
| if (childName?.length > 1) |
There was a problem hiding this comment.
☝️ also was wondering the same thing. I guess Im assuming to ensure that only components with valid names but if we document this as working with only our inputs then Im not sure wed need the check?
There was a problem hiding this comment.
Switched this to > 0 instead of > 1
There was a problem hiding this comment.
Just wanted to check that the string wasn't '' or undefined before trying to do childName.charAt(0).toLowerCase() + childName.slice(1)
There was a problem hiding this comment.
Behavior looking good here. The aesthetics of disabledProp and componentName feel a bit awkward to me, but I'm comfortable with the trade-off given it'll only be engaged with via extend. Agree that this feels like a more reasonable starting point as well than introducing to many theme "container" objects.
What does this PR do?
Adds an extend to the FormField container to style it differently based on the kind of child element (TextInput, TextArea, etc.).
Marking as a draft because I need to add the TS types and a jest test
Where should the reviewer start?
What testing has been done on this PR?
How should this be manually tested?
Do Jest tests follow these best practices?
screenis used for querying.asFragment()is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Closes #7495
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Yes
Should this PR be mentioned in the release notes?
Yes
Is this change backwards compatible or is it a breaking change?
backwards compatible