mui: fix gap in outline when label is hidden #3984
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
CHANGELOG.md
Outdated
Comment on lines
18
to
23
| # 5.14.5 | ||
|
|
||
| ## @rjsf/mui | ||
|
|
||
| - fix gap in text and select widget outlines when `"ui:label": false` is specified. | ||
|
|
There was a problem hiding this comment.
Can you rebase with main and move this into 5.15.0 instead?
Passing `label={false}` to the MUI text/select widgets results in a
gap in the widget outline where the label would be. Instead, to hide
the label without a gap, we must pass `label={undefined}`.
This commit changes the calls to `labelValue(...)` for
BaseInputTemplatea and SelectWidget to return `undefined` when
`"ui:label": false` was specified.
drbild
force-pushed
the
mui-fix-hidden-label
branch
from
75dd923
to
0563e3f
Compare
|
@drbild You will need to update the test snapshots in order for this to be merged. Please do the following and then push up the results: |
Done. |
heath-freenome
approved these changes
Dec 1, 2023
nickgros
added a commit
that referenced
this pull request
Dec 8, 2023
Co-authored-by: Jonasz Wiącek <jonaszwiacek@gmail.com> Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> Co-authored-by: Bogdan Savluk <savluk.bogdan@gmail.com> Co-authored-by: Christian Wendt <54559756+cwendtxealth@users.noreply.github.com> Co-authored-by: Ben Lambert <ben@blam.sh> Co-authored-by: David R. Bild <david@davidbild.org> Co-authored-by: Ariqun <38001928+Ariqun@users.noreply.github.com> fix(utils): direct lodash function import to improve bundling on library client side (#3976) fix: #3961 resolve all recurse list for object properties (#3981) fix gap in outline when label is hidden (#3984) Fix: Expose the internal `ajv` variable in the validator implementation classes (#3991) Fixes: #3972 indirectly by exposing the `ajv` variable for use in the issue
Rozamo
pushed a commit
to Rozamo/react-jsonschema-form
that referenced
this pull request
Dec 10, 2023
* mui: fix gap in outline when label is hidden
Passing `label={false}` to the MUI text/select widgets results in a
gap in the widget outline where the label would be. Instead, to hide
the label without a gap, we must pass `label={undefined}`.
This commit changes the calls to `labelValue(...)` for
BaseInputTemplatea and SelectWidget to return `undefined` when
`"ui:label": false` was specified.
* mui: update test snapshots
nickgros
added a commit
that referenced
this pull request
Apr 19, 2024
Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> Co-authored-by: Abdallah Al-Soqatri <abdallah.al-soqatri@aspentech.com> Co-authored-by: Kevin Burnett <18027+burnettk@users.noreply.github.com> Co-authored-by: Marek Bodinger <marek.bodinger@gmail.com> Co-authored-by: Mehdi Salem <mehdi.salem@qt.io> Co-authored-by: Jonasz Wiącek <jonaszwiacek@gmail.com> Co-authored-by: Bogdan Savluk <savluk.bogdan@gmail.com> Co-authored-by: Christian Wendt <54559756+cwendtxealth@users.noreply.github.com> Co-authored-by: Ben Lambert <ben@blam.sh> Co-authored-by: David R. Bild <david@davidbild.org> Co-authored-by: Ariqun <38001928+Ariqun@users.noreply.github.com> Co-authored-by: Shivam Anand Murmu <35562703+Rozamo@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Shubham Biswas <46351104+Shubhcoder@users.noreply.github.com> Co-authored-by: popmanhe <neo_temp@hotmail.com> Co-authored-by: Yuki Aoki <me@aoki.app> Co-authored-by: Xiangcheng Kuo <37873394+orange-guo@users.noreply.github.com> Co-authored-by: Bart van Andel <bavanandel@gmail.com> Co-authored-by: Laurent Direr <laurent.direr@gmail.com> Co-authored-by: Vegard Stenvik <42935080+vstenvik@users.noreply.github.com> Co-authored-by: Appie <abdallarko@hotmail.com> Co-authored-by: Oren Forer <oforer@gmail.com> Co-authored-by: Marcus Penn <11893741+mpenndev@users.noreply.github.com> Co-authored-by: joachimhagheim <47362824+joachimhagheim@users.noreply.github.com> Co-authored-by: MarekBodingerBA <104828482+MarekBodingerBA@users.noreply.github.com> Co-authored-by: momesana <momesana@gmail.com> Co-authored-by: Martti Roitto <MarttiR@users.noreply.github.com> fix(utils): direct lodash function import to improve bundling on library client side (#3976) fix: #3961 resolve all recurse list for object properties (#3981) fix gap in outline when label is hidden (#3984) Fix: Expose the internal `ajv` variable in the validator implementation classes (#3991) Fixes: #3972 indirectly by exposing the `ajv` variable for use in the issue Fix: Change FormHelperText usage with @mui/material to render divs (#4032) Fixes #4031 by switching the render component for `FormHelperText` to be `div` fix: Added support for anyOf/oneOf in uiSchema (#4055) Fixes #4039 by updating `MultiSchemaField` to properly support `anyOf`/`oneOf` arrays in the `uiSchema` Fix checkbox with 0 as a value was unselectable in antd (#4068) Fixed #4067 by properly dealing with enums that have 0 as a value Fix potential XSS in the preview button of FileWidget (#4065) Fix: Make 'ui:rows' option work with chakra-ui for textarea elements #4070 (#4078) Fix typo in ErrorsListTemplate example (#4087) Fix #4080 by moving `base64` encoder/decoder from `@rjsf/utils` to playground (#4093) Fix: Error state not resetting when schema changes (#4079) (#4103) Fix noImplicitAny error (#4106) Fixes: [WARNING] Duplicate key "include" in object literal [duplicate-object-key] (#4114) Fixes: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. (#4117) Fix documentation to add missing Form imports (#4131) Fix #4127 to add missing `Form` import in documentation Fix: filename should be bold (#4125) Fix: use correct ConfigProvider context by using named imports (#4132) Fix 4134 by filtering out bad DOM props (#4140) Fixes: #4134 by updating the spreading of props onto the `TextField` to remove bad DOM fields Fixed Programmatic submit not working properly in Firefox (#4150) Fix Maximum call stack size exceeded in findSchemaDefinition (#4123)
nickgros
added a commit
that referenced
this pull request
Aug 18, 2024
Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> Co-authored-by: Abdallah Al-Soqatri <abdallah.al-soqatri@aspentech.com> Co-authored-by: Kevin Burnett <18027+burnettk@users.noreply.github.com> Co-authored-by: Marek Bodinger <marek.bodinger@gmail.com> Co-authored-by: Mehdi Salem <mehdi.salem@qt.io> Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com> Co-authored-by: Abdallah Al-Soqatri <abdallah.al-soqatri@inmation.com> Co-authored-by: Jonasz Wiącek <jonaszwiacek@gmail.com> Co-authored-by: Bogdan Savluk <savluk.bogdan@gmail.com> Co-authored-by: Christian Wendt <54559756+cwendtxealth@users.noreply.github.com> Co-authored-by: Ben Lambert <ben@blam.sh> Co-authored-by: David R. Bild <david@davidbild.org> Co-authored-by: Ariqun <38001928+Ariqun@users.noreply.github.com> Co-authored-by: Shivam Anand Murmu <35562703+Rozamo@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Shubham Biswas <46351104+Shubhcoder@users.noreply.github.com> Co-authored-by: popmanhe <neo_temp@hotmail.com> Co-authored-by: Yuki Aoki <me@aoki.app> Co-authored-by: Xiangcheng Kuo <37873394+orange-guo@users.noreply.github.com> Co-authored-by: Bart van Andel <bavanandel@gmail.com> Co-authored-by: Laurent Direr <laurent.direr@gmail.com> Co-authored-by: Vegard Stenvik <42935080+vstenvik@users.noreply.github.com> Co-authored-by: Appie <abdallarko@hotmail.com> Co-authored-by: Oren Forer <oforer@gmail.com> Co-authored-by: Marcus Penn <11893741+mpenndev@users.noreply.github.com> Co-authored-by: joachimhagheim <47362824+joachimhagheim@users.noreply.github.com> Co-authored-by: MarekBodingerBA <104828482+MarekBodingerBA@users.noreply.github.com> Co-authored-by: momesana <momesana@gmail.com> Co-authored-by: Martti Roitto <MarttiR@users.noreply.github.com> Co-authored-by: Serge van den Oever <serge@macaw.nl> Co-authored-by: Enzo Ferey <hello@enzoferey.com> Co-authored-by: Skyf0l <tom.rorato@gmail.com> Co-authored-by: Jaejoon Han <jj2726@gmail.com> Co-authored-by: とまとみ <tomatommy.bs@gmail.com> Co-authored-by: Daniel Todd <todddaniel@gmail.com> Co-authored-by: Dmitry Dzhus <dima@dzhus.org> Co-authored-by: Alexander Kachkaev <alexander@kachkaev.ru> Co-authored-by: shaddollxz <56341682+shaddollxz@users.noreply.github.com> Co-authored-by: Changyu Geng <gcyyq@hotmail.com> Co-authored-by: Helen Lin <46795546+helen-m-lin@users.noreply.github.com> Co-authored-by: solimant <solimant@users.noreply.github.com> Co-authored-by: David Li <davidli@cs.stanford.edu> fix(utils): direct lodash function import to improve bundling on library client side (#3976) fix: #3961 resolve all recurse list for object properties (#3981) fix gap in outline when label is hidden (#3984) Fix: Expose the internal `ajv` variable in the validator implementation classes (#3991) Fixes: #3972 indirectly by exposing the `ajv` variable for use in the issue Fix: Change FormHelperText usage with @mui/material to render divs (#4032) Fixes #4031 by switching the render component for `FormHelperText` to be `div` fix: Added support for anyOf/oneOf in uiSchema (#4055) Fixes #4039 by updating `MultiSchemaField` to properly support `anyOf`/`oneOf` arrays in the `uiSchema` Fix checkbox with 0 as a value was unselectable in antd (#4068) Fixed #4067 by properly dealing with enums that have 0 as a value Fix potential XSS in the preview button of FileWidget (#4065) Fix: Make 'ui:rows' option work with chakra-ui for textarea elements #4070 (#4078) Fix typo in ErrorsListTemplate example (#4087) Fix #4080 by moving `base64` encoder/decoder from `@rjsf/utils` to playground (#4093) Fix: Error state not resetting when schema changes (#4079) (#4103) Fix noImplicitAny error (#4106) Fixes: [WARNING] Duplicate key "include" in object literal [duplicate-object-key] (#4114) Fixes: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. (#4117) Fix documentation to add missing Form imports (#4131) Fix #4127 to add missing `Form` import in documentation Fix: filename should be bold (#4125) Fix: use correct ConfigProvider context by using named imports (#4132) Fix 4134 by filtering out bad DOM props (#4140) Fixes: #4134 by updating the spreading of props onto the `TextField` to remove bad DOM fields Fixed Programmatic submit not working properly in Firefox (#4150) Fix Maximum call stack size exceeded in findSchemaDefinition (#4123) fix typos in constants.ts, Form.tsx (#4185) Fix mui imports in docs (#4218) fix] Resetting number fields should check the entire string when deciding to leave the input text alone (#4202) (#4220) Fixed performance issue with large schema dependencies and oneOf (#4203) (#4204) Fixed performance issue #4203 fix(core): field ui-options higher priority (#4212) fix(antd): disabled property of options of antd theme (#4216) fix: omitExtraData on submit and on validateForm (#4228) Fix IdSchema and PathSchema types (#4196) fixes #4236 Fix #4197 in various themes by showing empty option in SelectWidget when appropriate (#4200) fix: xss when rendering schema errors (#4256) fix 4215 and 4260 by updating optionsList() to take a uiSchema (#4263) Fixes #4215 and #4260 by supporting alternate titles for enums and anyOf/oneOf lists via the uiSchema Fixed Changelog (#4269)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reasons for making this change
There is gap in the MUI (v5) text widget (and select widget) outline when the label is hidden (
"ui:label": false), at the spot where the label should be.Example in the playground:
This happens because we pass
label={false}to the MUI components when the label is hidden. Instead, we need to passlabel={undefined}.From what I can tell, material-ui (v4) doesn't have this issue, because the widgets are not outlined.
Discussion
With this approach,
"ui:label": falsealso hides the*used to indicate a required field. That's just how MUI behaves. The asterisk appears as part of the label. Iflabel={undefined}orlabel={""}(empty string), the label is hidden, and thus so is the asterisk.I think that is ok. Anyone specifying
"ui:label": falseis probably using some custom approach to label the widgets, which they can extend to show the required state as well.Checklist
npm run test:updateto update snapshots, if needed.