Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add support for custom styles in a manner similar to classNames #3378

Merged
merged 3 commits into from
Jan 15, 2023

Conversation

heath-freenome
Copy link
Member

@heath-freenome heath-freenome commented Jan 15, 2023

Reasons for making this change

Fixes #1200 by reimplementing #1256

  • In @rjsf/utils, added the new style prop onto FieldTemplateProps, WrapIfAdditionalTemplateProps and UIOptionsBaseType
  • In @rjsf/core, added support for the new style prop in uiSchema as follows:
    • Updated SchemaField to handle the new style prop in the uiSchema similarly to classNames, passing it to the FieldTemplate and removing it from being passed down to children.
    • Also, added support for new style prop on FieldTemplate and WrapIfAdditionalTemplate rendering them on the outermost wrapper
    • Added or updated tests to verify the style prop functionality
  • In all the themes, added support for new style prop on FieldTemplate and WrapIfAdditionalTemplate rendering them on the outermost wrapper
    • Fluent-ui is a special case since it doesn't currently implement WrapIfAdditionalTemplate fully
  • Updated the documentation to describe this new style prop
    • Also updated the validation documentation to describe the uiSchema prop that can be passed to the customValidate() and transformError() functions
  • Updated the CHANGELOG.md accordingly

Checklist

  • I'm updating documentation
  • I'm adding or updating code
    • I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
    • I've updated docs if needed
    • I've updated the changelog with a description of the PR
  • I'm adding a new feature
    • I've updated the playground with an example use of the feature

Copy link
Contributor

@nickgros nickgros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@heath-freenome WDYT about using style to match the React property rather than styles? It seemed like @epicfaace also suggested the same in the original issue and PR.

Code changes otherwise LGTM.

packages/utils/src/types.ts Outdated Show resolved Hide resolved
Fixes rjsf-team#1200 by reimplementing rjsf-team#1256
- In `@rjsf/utils`, added the new `style` prop onto `FieldTemplateProps`, `WrapIfAdditionalTemplateProps` and `UIOptionsBaseType`
- In `@rjsf/core`, added support for the new `style` prop in `uiSchema` as follows:
  - Updated `SchemaField` to handle the new `style` prop in the `uiSchema` similarly to `classNames`, passing it to the `FieldTemplate` and removing it from being passed down to children.
  - Also, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Added or updated tests to verify the `style` prop functionality
- In all the themes, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Fluent-ui is a special case since it doesn't currently implement `WrapIfAdditionalTemplate` fully
- Updated the documentation to describe this new `style` prop
  - Also updated the `validation` documentation to describe the `uiSchema` prop that can be passed to the `customValidate()` and `transformError()` functions
- Updated the `CHANGELOG.md` accordingly
Copy link
Contributor

@nickgros nickgros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed a couple in the changelog, won't block you from merging

CHANGELOG.md Outdated Show resolved Hide resolved
CHANGELOG.md Outdated Show resolved Hide resolved
Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>
@heath-freenome heath-freenome merged commit 5db71e3 into rjsf-team:main Jan 15, 2023
@heath-freenome heath-freenome deleted the reimplement-1256 branch January 15, 2023 18:53
shijistar pushed a commit to shijistar/react-jsonschema-form that referenced this pull request Jun 8, 2023
…jsf-team#3378)

* fix: Add support for custom styles in a manner similar to classNames
Fixes rjsf-team#1200 by reimplementing rjsf-team#1256
- In `@rjsf/utils`, added the new `style` prop onto `FieldTemplateProps`, `WrapIfAdditionalTemplateProps` and `UIOptionsBaseType`
- In `@rjsf/core`, added support for the new `style` prop in `uiSchema` as follows:
  - Updated `SchemaField` to handle the new `style` prop in the `uiSchema` similarly to `classNames`, passing it to the `FieldTemplate` and removing it from being passed down to children.
  - Also, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Added or updated tests to verify the `style` prop functionality
- In all the themes, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Fluent-ui is a special case since it doesn't currently implement `WrapIfAdditionalTemplate` fully
- Updated the documentation to describe this new `style` prop
  - Also updated the `validation` documentation to describe the `uiSchema` prop that can be passed to the `customValidate()` and `transformError()` functions
- Updated the `CHANGELOG.md` accordingly

* - Renamed `styles` to `style`

* Apply suggestions from code review

Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>

Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>
shijistar pushed a commit to shijistar/react-jsonschema-form that referenced this pull request Jun 8, 2023
…jsf-team#3378)

* fix: Add support for custom styles in a manner similar to classNames
Fixes rjsf-team#1200 by reimplementing rjsf-team#1256
- In `@rjsf/utils`, added the new `style` prop onto `FieldTemplateProps`, `WrapIfAdditionalTemplateProps` and `UIOptionsBaseType`
- In `@rjsf/core`, added support for the new `style` prop in `uiSchema` as follows:
  - Updated `SchemaField` to handle the new `style` prop in the `uiSchema` similarly to `classNames`, passing it to the `FieldTemplate` and removing it from being passed down to children.
  - Also, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Added or updated tests to verify the `style` prop functionality
- In all the themes, added support for new `style` prop on `FieldTemplate` and `WrapIfAdditionalTemplate` rendering them on the outermost wrapper
  - Fluent-ui is a special case since it doesn't currently implement `WrapIfAdditionalTemplate` fully
- Updated the documentation to describe this new `style` prop
  - Also updated the `validation` documentation to describe the `uiSchema` prop that can be passed to the `customValidate()` and `transformError()` functions
- Updated the `CHANGELOG.md` accordingly

* - Renamed `styles` to `style`

* Apply suggestions from code review

Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>

Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support for styles (in addition to className)
2 participants