diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b0acde3c9..c2aad236fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,10 @@ should change the heading of the (upcoming) version to include a major version b --> # 5.15.0 +## @rjsf/mui + +- fix gap in text and select widget outlines when `"ui:label": false` is specified. + ## @rjsf/utils - Added an experimental flag `allOf` to `experimental_defaultFormStateBehavior` for populating defaults when using `allOf` schemas [#3969](https://github.com/rjsf-team/react-jsonschema-form/pull/3969) diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx index 9106a16fd9..e62d052f69 100644 --- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -79,7 +79,7 @@ export default function BaseInputTemplate< id={id} name={id} placeholder={placeholder} - label={labelValue(label || undefined, hideLabel, false)} + label={labelValue(label || undefined, hideLabel, undefined)} autoFocus={autofocus} required={required} disabled={disabled || readonly} diff --git a/packages/mui/src/SelectWidget/SelectWidget.tsx b/packages/mui/src/SelectWidget/SelectWidget.tsx index 06ccd78fda..9fbc4a18eb 100644 --- a/packages/mui/src/SelectWidget/SelectWidget.tsx +++ b/packages/mui/src/SelectWidget/SelectWidget.tsx @@ -64,7 +64,7 @@ export default function SelectWidget< span { - padding-left: 5px; - padding-right: 5px; - display: inline-block; - opacity: 0; - visibility: visible; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; } -.emotion-16 { +.emotion-14 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -15666,7 +15605,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- flex-direction: row; } -.emotion-17 { +.emotion-15 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -15714,38 +15653,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- font-size: 1.125rem; } -.emotion-17::-moz-focus-inner { +.emotion-15::-moz-focus-inner { border-style: none; } -.emotion-17.Mui-disabled { +.emotion-15.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-17 { + .emotion-15 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-17:hover { +.emotion-15:hover { background-color: rgba(0, 0, 0, 0.04); } @media (hover: none) { - .emotion-17:hover { + .emotion-15:hover { background-color: transparent; } } -.emotion-17.Mui-disabled { +.emotion-15.Mui-disabled { background-color: transparent; color: rgba(0, 0, 0, 0.26); } -.emotion-18 { +.emotion-16 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -15762,7 +15701,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- font-size: 1.25rem; } -.emotion-23 { +.emotion-21 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -15811,48 +15750,48 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- font-size: 1.125rem; } -.emotion-23::-moz-focus-inner { +.emotion-21::-moz-focus-inner { border-style: none; } -.emotion-23.Mui-disabled { +.emotion-21.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-23 { + .emotion-21 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-23:hover { +.emotion-21:hover { background-color: rgba(0, 0, 0, 0.04); } @media (hover: none) { - .emotion-23:hover { + .emotion-21:hover { background-color: transparent; } } -.emotion-23:hover { +.emotion-21:hover { background-color: rgba(211, 47, 47, 0.04); } @media (hover: none) { - .emotion-23:hover { + .emotion-21:hover { background-color: transparent; } } -.emotion-23.Mui-disabled { +.emotion-21.Mui-disabled { background-color: transparent; color: rgba(0, 0, 0, 0.26); } -.emotion-47 { +.emotion-43 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -15872,11 +15811,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- justify-content: flex-end; } -.emotion-49 { +.emotion-45 { margin-top: 16px; } -.emotion-50 { +.emotion-46 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -15923,48 +15862,48 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- color: #1976d2; } -.emotion-50::-moz-focus-inner { +.emotion-46::-moz-focus-inner { border-style: none; } -.emotion-50.Mui-disabled { +.emotion-46.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-50 { + .emotion-46 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-50:hover { +.emotion-46:hover { background-color: rgba(0, 0, 0, 0.04); } @media (hover: none) { - .emotion-50:hover { + .emotion-46:hover { background-color: transparent; } } -.emotion-50:hover { +.emotion-46:hover { background-color: rgba(25, 118, 210, 0.04); } @media (hover: none) { - .emotion-50:hover { + .emotion-46:hover { background-color: transparent; } } -.emotion-50.Mui-disabled { +.emotion-46.Mui-disabled { background-color: transparent; color: rgba(0, 0, 0, 0.26); } -.emotion-51 { +.emotion-47 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -15981,11 +15920,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- font-size: 1.5rem; } -.emotion-52 { +.emotion-48 { margin-top: 24px; } -.emotion-53 { +.emotion-49 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -16034,23 +15973,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } -.emotion-53::-moz-focus-inner { +.emotion-49::-moz-focus-inner { border-style: none; } -.emotion-53.Mui-disabled { +.emotion-49.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-53 { + .emotion-49 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-53:hover { +.emotion-49:hover { -webkit-text-decoration: none; text-decoration: none; background-color: #1565c0; @@ -16058,20 +15997,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- } @media (hover: none) { - .emotion-53:hover { + .emotion-49:hover { background-color: #1976d2; } } -.emotion-53:active { +.emotion-49:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-53.Mui-focusVisible { +.emotion-49.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-53.Mui-disabled { +.emotion-49.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); @@ -16124,27 +16063,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input- aria-describedby="root_0__error root_0__description root_0__help" className="MuiFormControl-root MuiTextField-root emotion-9" > -
- -   - * + + ​
@@ -16179,10 +16106,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
@@ -13419,50 +13373,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } .emotion-14 { - color: rgba(0, 0, 0, 0.6); - font-family: "Roboto","Helvetica","Arial",sans-serif; - font-weight: 400; - font-size: 1rem; - line-height: 1.4375em; - letter-spacing: 0.00938em; - padding: 0; - position: relative; - display: block; - transform-origin: top left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc(133% - 32px); - position: absolute; - left: 0; - top: 0; - -webkit-transform: translate(14px, -9px) scale(0.75); - -moz-transform: translate(14px, -9px) scale(0.75); - -ms-transform: translate(14px, -9px) scale(0.75); - transform: translate(14px, -9px) scale(0.75); - -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - z-index: 1; - pointer-events: auto; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.emotion-14.Mui-focused { - color: #1976d2; -} - -.emotion-14.Mui-disabled { - color: rgba(0, 0, 0, 0.38); -} - -.emotion-14.Mui-error { - color: #d32f2f; -} - -.emotion-15 { font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 400; font-size: 1rem; @@ -13484,58 +13394,45 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p border-radius: 4px; } -.emotion-15.Mui-disabled { +.emotion-14.Mui-disabled { color: rgba(0, 0, 0, 0.38); cursor: default; } -.emotion-15:hover .MuiOutlinedInput-notchedOutline { +.emotion-14:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.87); } @media (hover: none) { - .emotion-15:hover .MuiOutlinedInput-notchedOutline { + .emotion-14:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.23); } } -.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline { +.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; border-width: 2px; } -.emotion-15.Mui-error .MuiOutlinedInput-notchedOutline { +.emotion-14.Mui-error .MuiOutlinedInput-notchedOutline { border-color: #d32f2f; } -.emotion-15.Mui-disabled .MuiOutlinedInput-notchedOutline { +.emotion-14.Mui-disabled .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.26); } -.emotion-18 { +.emotion-17 { float: unset; width: auto; overflow: hidden; - display: block; padding: 0; - height: 11px; - font-size: 0.75em; - visibility: hidden; - max-width: 100%; - -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms; - transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms; - white-space: nowrap; -} - -.emotion-18>span { - padding-left: 5px; - padding-right: 5px; - display: inline-block; - opacity: 0; - visibility: visible; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; } -.emotion-19 { +.emotion-18 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -13543,7 +13440,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p flex-direction: row; } -.emotion-20 { +.emotion-19 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -13592,48 +13489,48 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 1.125rem; } -.emotion-20::-moz-focus-inner { +.emotion-19::-moz-focus-inner { border-style: none; } -.emotion-20.Mui-disabled { +.emotion-19.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-20 { + .emotion-19 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-20:hover { +.emotion-19:hover { background-color: rgba(0, 0, 0, 0.04); } @media (hover: none) { - .emotion-20:hover { + .emotion-19:hover { background-color: transparent; } } -.emotion-20:hover { +.emotion-19:hover { background-color: rgba(211, 47, 47, 0.04); } @media (hover: none) { - .emotion-20:hover { + .emotion-19:hover { background-color: transparent; } } -.emotion-20.Mui-disabled { +.emotion-19.Mui-disabled { background-color: transparent; color: rgba(0, 0, 0, 0.26); } -.emotion-21 { +.emotion-20 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -13650,7 +13547,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 1.5rem; } -.emotion-22 { +.emotion-21 { overflow: hidden; pointer-events: none; position: absolute; @@ -13662,7 +13559,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p border-radius: inherit; } -.emotion-23 { +.emotion-22 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -13682,7 +13579,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p justify-content: flex-end; } -.emotion-25 { +.emotion-24 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -13729,52 +13626,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: #1976d2; } -.emotion-25::-moz-focus-inner { +.emotion-24::-moz-focus-inner { border-style: none; } -.emotion-25.Mui-disabled { +.emotion-24.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-25 { + .emotion-24 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-25:hover { +.emotion-24:hover { background-color: rgba(0, 0, 0, 0.04); } @media (hover: none) { - .emotion-25:hover { + .emotion-24:hover { background-color: transparent; } } -.emotion-25:hover { +.emotion-24:hover { background-color: rgba(25, 118, 210, 0.04); } @media (hover: none) { - .emotion-25:hover { + .emotion-24:hover { background-color: transparent; } } -.emotion-25.Mui-disabled { +.emotion-24.Mui-disabled { background-color: transparent; color: rgba(0, 0, 0, 0.26); } -.emotion-28 { +.emotion-27 { margin-top: 24px; } -.emotion-29 { +.emotion-28 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -13823,23 +13720,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } -.emotion-29::-moz-focus-inner { +.emotion-28::-moz-focus-inner { border-style: none; } -.emotion-29.Mui-disabled { +.emotion-28.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-29 { + .emotion-28 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-29:hover { +.emotion-28:hover { -webkit-text-decoration: none; text-decoration: none; background-color: #1565c0; @@ -13847,20 +13744,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } @media (hover: none) { - .emotion-29:hover { + .emotion-28:hover { background-color: #1976d2; } } -.emotion-29:active { +.emotion-28:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-29.Mui-focusVisible { +.emotion-28.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-29.Mui-disabled { +.emotion-28.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); @@ -13955,13 +13852,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p aria-describedby="root_additionalProperty__error root_additionalProperty__description root_additionalProperty__help" className="MuiFormControl-root MuiTextField-root emotion-13" > -