Tooltip fixed in pickers

unicef · Apr 8, 2024 · 9409bca · 9409bca
1 parent 8a29e42
commit 9409bca
Show file tree

Hide file tree

Showing 27 changed files with 111 additions and 109 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "cSpell.words": ["inputlabelhelpprops"]
+  "editor.tabSize": 2
 }
diff --git a/example/src/components/FormValidator.js b/example/src/components/FormValidator.js
@@ -222,7 +222,7 @@ export default function FormValidator() {
               label="Email"
               required
               showLabelHelp={true}
-              inputlabelhelpprops={{
+              InputLabelHelpProps={{
                 tooltipTitle: 'Hover text',
               }}
               onChange={handleValue}
@@ -353,7 +353,10 @@ export default function FormValidator() {
                 'matchRegexpCaseInSensitive:^(?!.*<script\\b[^>]*>.*<\\/script\\s*>).*$',
               ]}
               value={values.regex}
-              customErrorMessages={{'matchRegexpCaseInSensitive:^(?!.*<script\\b[^>]*>.*<\\/script\\s*>).*$': 'Invalid data'}}
+              customErrorMessages={{
+                'matchRegexpCaseInSensitive:^(?!.*<script\\b[^>]*>.*<\\/script\\s*>).*$':
+                  'Invalid data',
+              }}
             />
           </Grid>
           <Grid item xs={12} lg={3} xl={2}>

diff --git a/example/src/components/InteractiveViews.js b/example/src/components/InteractiveViews.js
@@ -459,7 +459,7 @@ export default function InteractiveViews() {
                       fullWidth
                       readOnly={readOnly}
                       showLabelHelp={true}
-                      inputlabelhelpprops={{
+                      InputLabelHelpProps={{
                         tooltipTitle: 'Please select multiple people from list',
                       }}
                     />

diff --git a/example/src/components/Pickers.js b/example/src/components/Pickers.js
@@ -236,7 +236,7 @@ export default function Pickers() {
             options={iconOptions}
             isMulti={true}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               type: 'link',
               link: 'https://unicef.github.io/',
             }}
@@ -263,7 +263,7 @@ export default function Pickers() {
             placeholder="Select people ..."
             options={peopleOptions}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               type: 'link',
               link: 'https://unicef.github.io/',
             }}
@@ -279,7 +279,7 @@ export default function Pickers() {
             options={peopleOptions}
             isMulti
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               type: 'tooltip',
               tooltipTitle: 'Please select multiple people from list',
             }}
@@ -368,7 +368,7 @@ export default function Pickers() {
             value={selectedDate}
             onChange={handleDateChange}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Date picker',
             }}
           />
@@ -405,7 +405,7 @@ export default function Pickers() {
             onChange={handleDateChange}
             showLabelHelp={true}
             InputLabelProps={{ shrink: true, required: true }}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Time picker help text',
             }}
           />
@@ -418,7 +418,7 @@ export default function Pickers() {
             onChange={handleDateChange}
             showLabelHelp={true}
             InputLabelProps={{ shrink: true, required: true }}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Time picker help text',
             }}
           />
@@ -431,7 +431,7 @@ export default function Pickers() {
             onChange={handleDateChange}
             showLabelHelp={true}
             InputLabelProps={{ shrink: true, required: true }}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Time picker help text',
             }}
           />
@@ -446,7 +446,7 @@ export default function Pickers() {
             value={selectedDate}
             onChange={handleDateChange}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Date and time',
             }}
           />
@@ -457,7 +457,7 @@ export default function Pickers() {
             value={selectedDate}
             onChange={handleDateChange}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Date and time',
             }}
           />
@@ -468,7 +468,7 @@ export default function Pickers() {
             value={selectedDate}
             onChange={handleDateChange}
             showLabelHelp={true}
-            inputlabelhelpprops={{
+            InputLabelHelpProps={{
               tooltipTitle: 'Date and time',
             }}
           />

diff --git a/src/components/ActiveDatePicker/ActiveDatePicker.js b/src/components/ActiveDatePicker/ActiveDatePicker.js
@@ -54,7 +54,7 @@ export default function ActiveDatePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveDatePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -107,8 +107,8 @@ ActiveDatePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveDatePicker.defaultProps = {

diff --git a/src/components/ActiveDateTimePicker/ActiveDateTimePicker.js b/src/components/ActiveDateTimePicker/ActiveDateTimePicker.js
@@ -55,7 +55,7 @@ export default function ActiveDateTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -76,7 +76,7 @@ export default function ActiveDateTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -107,8 +107,8 @@ ActiveDateTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveDateTimePicker.defaultProps = {

diff --git a/src/components/ActiveDesktopDatePicker/ActiveDesktopDatePicker.js b/src/components/ActiveDesktopDatePicker/ActiveDesktopDatePicker.js
@@ -54,7 +54,7 @@ export default function ActiveDesktopDatePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveDesktopDatePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveDesktopDatePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveDesktopDatePicker.defaultProps = {

diff --git a/src/components/ActiveDesktopDateTimePicker/ActiveDesktopDateTimePicker.js b/src/components/ActiveDesktopDateTimePicker/ActiveDesktopDateTimePicker.js
@@ -54,7 +54,7 @@ export default function ActiveDesktopDateTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveDesktopDateTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveDesktopDateTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveDesktopDateTimePicker.defaultProps = {

diff --git a/src/components/ActiveDesktopTimePicker/ActiveDesktopTimePicker.js b/src/components/ActiveDesktopTimePicker/ActiveDesktopTimePicker.js
@@ -54,7 +54,7 @@ export default function ActiveDesktopTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveDesktopTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveDesktopTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveDesktopTimePicker.defaultProps = {

diff --git a/src/components/ActiveMobileDatePicker/ActiveMobileDatePicker.js b/src/components/ActiveMobileDatePicker/ActiveMobileDatePicker.js
@@ -54,7 +54,7 @@ export default function ActiveMobileDatePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveMobileDatePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveMobileDatePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveMobileDatePicker.defaultProps = {

diff --git a/src/components/ActiveMobileDateTimePicker/ActiveMobileDateTimePicker.js b/src/components/ActiveMobileDateTimePicker/ActiveMobileDateTimePicker.js
@@ -54,7 +54,7 @@ export default function ActiveMobileDateTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveMobileDateTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveMobileDateTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveMobileDateTimePicker.defaultProps = {

diff --git a/src/components/ActiveMobileTimePicker/ActiveMobileTimePicker.js b/src/components/ActiveMobileTimePicker/ActiveMobileTimePicker.js
@@ -54,7 +54,7 @@ export default function ActiveMobileTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveMobileTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveMobileTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveMobileTimePicker.defaultProps = {

diff --git a/src/components/ActiveTimePicker/ActiveTimePicker.js b/src/components/ActiveTimePicker/ActiveTimePicker.js
@@ -54,7 +54,7 @@ export default function ActiveTimePicker({
   value,
   showLabelHelp,
   InputLabelProps,
-  inputlabelhelpprops,
+  InputLabelHelpProps,
   inputVariant,
   interactiveMode,
   readOnly,
@@ -75,7 +75,7 @@ export default function ActiveTimePicker({
             <UTextField
               showLabelHelp={showLabelHelp}
               InputLabelProps={InputLabelProps}
-              inputlabelhelpprops={inputlabelhelpprops}
+              InputLabelHelpProps={InputLabelHelpProps}
               variant={inputVariant}
               readOnly={readOnly}
               {...params}
@@ -106,8 +106,8 @@ ActiveTimePicker.propTypes = {
   label: PropTypes.string,
   /** Show label help */
   showLabelHelp: PropTypes.bool,
-  /** Props applied to the input label help element. E.g inputlabelhelpprops={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
-  inputlabelhelpprops: PropTypes.object,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes.object,
 }
 
 ActiveTimePicker.defaultProps = {