diff --git a/react/css/README.md b/react/css/README.md index 29b04b5153..caa9fac274 100644 --- a/react/css/README.md +++ b/react/css/README.md @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html # Changelog ```bash +1.8.2-coreui.6 updated css with new classnames and updated tag styles 1.8.2-coreui.5 updated css version 1.8.2-coreui.4 updated classnames 1.8.2-coreui.3 styles for stepper and fixed date issue diff --git a/react/css/package.json b/react/css/package.json index 3baf639e6d..b40de0f043 100644 --- a/react/css/package.json +++ b/react/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-coreui.5", + "version": "1.8.2-coreui.6", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss index 34455718fc..f058ce7830 100644 --- a/react/css/src/digitv2/components/buttonsV2.scss +++ b/react/css/src/digitv2/components/buttonsV2.scss @@ -1,7 +1,7 @@ @import url("../index.scss"); .icon-label-container { - @apply w-full flex max-w-full; + @apply w-full flex max-w-full items-center; gap: 0.5rem; .digit-button-customIcon { @@ -12,6 +12,7 @@ &.link { gap: 0.25rem; + align-items: flex-start; .digit-button-customIcon { width: 1.25rem; @@ -20,10 +21,6 @@ } } -.icon-label-container:not(.link) { - @apply items-center; -} - .digit-button-label { @extend .typography.button; @apply leading-6 text-center text-white w-full overflow-hidden whitespace-no-wrap; diff --git a/react/css/src/digitv2/components/checkboxV2.scss b/react/css/src/digitv2/components/checkboxV2.scss index eb0227d94c..9f6a568410 100644 --- a/react/css/src/digitv2/components/checkboxV2.scss +++ b/react/css/src/digitv2/components/checkboxV2.scss @@ -1,6 +1,6 @@ @import url("../index.scss"); -.digit-checkbox-wrap { +.digit-checkbox-container { @apply flex mb-md relative; gap: 1rem; diff --git a/react/css/src/digitv2/components/fieldV1.scss b/react/css/src/digitv2/components/fieldV1.scss index 71f18926ec..21e89c6ccc 100644 --- a/react/css/src/digitv2/components/fieldV1.scss +++ b/react/css/src/digitv2/components/fieldV1.scss @@ -19,18 +19,14 @@ } .label-container { - @apply flex; - width: 80%; + @apply flex items-end w-full; gap: 0.25rem; - - @media (max-width: 30rem) { - /* Media query for mobile */ - width: 100%; - } } .info-icon { @apply relative cursor-pointer; + width: 1.188rem; + height: 1.188rem; } .info-icon .infotext { diff --git a/react/css/src/digitv2/components/labelFieldPairV2.scss b/react/css/src/digitv2/components/labelFieldPairV2.scss index c5c4bfabfe..d87c40a888 100644 --- a/react/css/src/digitv2/components/labelFieldPairV2.scss +++ b/react/css/src/digitv2/components/labelFieldPairV2.scss @@ -3,12 +3,11 @@ @media (min-width: 30.063rem) { - align-items: flex-start; + @apply items-start; } @media (max-width: 30rem) { - flex-direction: column; - align-items: flex-start; + @apply flex-col items-start; } & .label, @@ -16,20 +15,8 @@ margin-right: 1.5rem; width: 33%; - @media (min-width: 30.063rem) and (max-width: 47.938rem) { - /* Media query for tablets */ - max-width: 12rem; - } - @media (max-width: 30rem) { - /* Media query for mobile */ - width:100%; - max-width:100% - } - - @media (min-width: 48rem) { - /*Media quey for desktop*/ - max-width: 17rem; + @apply w-full; } } diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss index 26f90f12a9..cc723cf356 100644 --- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss +++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss @@ -69,28 +69,24 @@ .digit-multiselectdropdown-server { top: 2.5rem; @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto; - max-height: 25vmax; + max-height: 70vmax; box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; width: 100% !important; } - .digit-multiselectdropdown-server::-webkit-scrollbar-track { - background-color: #F5F5F5; - border-radius: 0.625rem; + .digit-server::-webkit-scrollbar { + width: 0.5rem; + background-color: theme(digitv2.lightTheme.generic-background); } - .digit-multiselectdropdown-server::-webkit-scrollbar { - width: 0.625rem; - background-color: #F5F5F5; + .digit-server::-webkit-scrollbar-track { + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; } - .digit-multiselectdropdown-server::-webkit-scrollbar-thumb { - background-color: #C1C1C1; - border-radius: 0.625rem; - } - - .digit-multiselectdropdown-server::-webkit-scrollbar-thumb:hover { - background-color: #A8A8A8; + .digit-server::-webkit-scrollbar-thumb { + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; } .digit-nested-category { diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss index 70d20c87a6..72c26d7471 100644 --- a/react/css/src/digitv2/components/radiobtnV2.scss +++ b/react/css/src/digitv2/components/radiobtnV2.scss @@ -1,6 +1,6 @@ @import url("../index.scss"); -.digit-radio-wrap { +.digit-radio-options-wrap { @apply leading-10 flex justify-between flex-wrap; margin-bottom: 0.5rem; diff --git a/react/css/src/digitv2/components/selectdropdownV2.scss b/react/css/src/digitv2/components/selectdropdownV2.scss index afdc1811c0..a7f1103bf4 100644 --- a/react/css/src/digitv2/components/selectdropdownV2.scss +++ b/react/css/src/digitv2/components/selectdropdownV2.scss @@ -1,7 +1,24 @@ .digit-dropdown-employee-select-wrap { @apply w-full relative; - max-width: 37.5rem; + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + /* Media query for tablets */ + max-width: 27.5rem; + min-width: 12.5rem; + } + + @media (max-width: 30rem) { + /* Media query for mobile */ + max-width: 20.5rem; + min-width: 9.75rem; + width: 100%; + } + + @media (min-width: 48rem) { + /* Media query for desktop */ + max-width: 37.5rem; + min-width: 12.5rem; + } .digit-dropdown-select { @extend .light-input-border; @@ -83,10 +100,10 @@ } } - .digit-options-card { + .digit-dropdown-options-card { width: 100% !important; box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; - max-height: 27.5rem; + max-height: 70vmax; @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden; p { @@ -111,23 +128,19 @@ } } -.digit-options-card::-webkit-scrollbar-track { - background-color: #F5F5F5; - border-radius: 0.625rem; -} - .digit-options-card::-webkit-scrollbar { - width: 0.625rem; - background-color: #F5F5F5; + width: 0.5rem; + background-color: theme(digitv2.lightTheme.generic-background); } -.digit-options-card::-webkit-scrollbar-thumb { - background-color: #C1C1C1; - border-radius: 0.625rem; +.digit-options-card::-webkit-scrollbar-track { + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; } -.digit-options-card::-webkit-scrollbar-thumb:hover { - background-color: #A8A8A8; +.digit-options-card::-webkit-scrollbar-thumb { + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; } @@ -154,8 +167,11 @@ height: 1.188rem; } -.profile-dropdown--item { +.digit-dropdown-item { + @apply flex flex-row; + padding: 0.625rem; + gap:0.625rem; min-height: 2.438rem; color: theme(digitv2.lightTheme.text-primary) !important; @@ -392,11 +408,11 @@ } } - .digit-options-card { + .digit-dropdown-options-card { width: 100% !important; box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026; @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden; - max-height: 25vmax; + max-height: 70vmax; p { @extend .light-text-color-primary; diff --git a/react/css/src/digitv2/components/stepper.scss b/react/css/src/digitv2/components/stepper.scss index 4b5aa0dfd7..a87475a193 100644 --- a/react/css/src/digitv2/components/stepper.scss +++ b/react/css/src/digitv2/components/stepper.scss @@ -135,22 +135,18 @@ } } -.digit-stepper-container::-webkit-scrollbar-track { - background-color: #F5F5F5; - border-radius: 0.313rem; -} - .digit-stepper-container::-webkit-scrollbar { - width: 0.313rem; - height: 0.625rem; - background-color: #F5F5F5; + width: 0.5rem; + height:0.5rem; + background-color: theme(digitv2.lightTheme.generic-background); } -.digit-stepper-container::-webkit-scrollbar-thumb { - background-color: #C1C1C1; - border-radius: 0.313rem; +.digit-stepper-container::-webkit-scrollbar-track { + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; } -.digit-stepper-container::-webkit-scrollbar-thumb:hover { - background-color: #A8A8A8; +.digit-stepper-container::-webkit-scrollbar-thumb { + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; } \ No newline at end of file diff --git a/react/css/src/digitv2/components/tagV2.scss b/react/css/src/digitv2/components/tagV2.scss index 7a1fc5897d..814bffb697 100644 --- a/react/css/src/digitv2/components/tagV2.scss +++ b/react/css/src/digitv2/components/tagV2.scss @@ -1,7 +1,7 @@ .digit-tag-container { @apply flex flex-wrap mb-md items-center; gap: 0.5rem; - margin-top:0.5rem; + margin-top: 0.5rem; @media (min-width: 481px) { /* Media query for tablets */ @@ -23,36 +23,46 @@ } .digit-tag { - @apply inline-flex items-center; + @apply inline-flex items-center h-10; padding: 0.5rem; gap: 0.5rem; - border-radius: 3.125rem; - background: theme(digitv2.lightTheme.generic-divider); - height: 2.5rem; - margin: 0px; + border-radius: 0.25rem; + background: theme(digitv2.lightTheme.generic-background); + margin: 0rem; + border: 0.063rem solid theme(digitv2.lightTheme.generic-divider); .digit-text { + @extend .typography.body-s; + @apply overflow-hidden h-4; max-width: calc(100% - 24px); - overflow: hidden; text-overflow: clip; color: theme(digitv2.lightTheme.text-primary); - font-family: theme(digitv2.fontFamily.sans); - font-size: 0.875rem; - font-style: theme(digitv2.fontStyle.normal); - font-weight: theme(digitv2.fontWeight.regular); - line-height: theme(digitv2.lineHeight.normal); - height: 1rem; + line-height: 1.026rem; } .close-icon { - @apply flex items-center; - width: 1.25rem; - height: 1.25rem; - border: 1px solid theme(digitv2.lightTheme.text-secondary); - border-radius: 50%; + @apply flex items-center w-6 h-6 cursor-pointer; + border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); + border-radius: 0.25rem; background-color: theme(digitv2.lightTheme.text-secondary); - cursor: pointer; + } + + &.errortag { + border: 0.063rem solid theme(digitv2.lightTheme.alert-error); + background-color: theme(digitv2.lightTheme.paper-primary); + box-shadow: 0.125rem 0.125rem 0.25rem 0rem #D4351C4D; + + .digit-text { + @extend .typography.heading-s; + line-height: 1.172rem; + color: theme(digitv2.lightTheme.alert-error); + } + + .close-icon { + border: 0.063rem solid theme(digitv2.lightTheme.alert-error); + background-color: theme(digitv2.lightTheme.alert-error); + } } } } \ No newline at end of file diff --git a/react/css/src/digitv2/components/textareaV2.scss b/react/css/src/digitv2/components/textareaV2.scss index 59d65230ea..62b7b64fac 100644 --- a/react/css/src/digitv2/components/textareaV2.scss +++ b/react/css/src/digitv2/components/textareaV2.scss @@ -48,22 +48,18 @@ } textarea::-webkit-scrollbar { - width: 0.625rem; - background-color: #F5F5F5; + width: 0.5rem; + background-color: theme(digitv2.lightTheme.generic-background); } textarea::-webkit-scrollbar-track { - background-color: #F5F5F5; - border-radius: 0.625rem; + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; } textarea::-webkit-scrollbar-thumb { - background-color: #C1C1C1; - border-radius: 0.625rem; -} - -textarea::-webkit-scrollbar-thumb:hover { - background-color: #A8A8A8; + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; } .digit-employee-card-textarea { diff --git a/react/css/src/digitv2/components/toggle.scss b/react/css/src/digitv2/components/toggle.scss index 526bff6a3c..c29c61b0ff 100644 --- a/react/css/src/digitv2/components/toggle.scss +++ b/react/css/src/digitv2/components/toggle.scss @@ -23,7 +23,7 @@ .digit-toggle-label { @extend .typography.body-xs; - @apply w-full overflow-hidden; + @apply w-full overflow-hidden whitespace-no-wrap; line-height: 1.25rem; color: theme(digitv2.lightTheme.text-disabled); text-overflow: ellipsis; diff --git a/react/example/package.json b/react/example/package.json index 94749b0ca1..28110a6488 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.7", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", diff --git a/react/example/public/index.html b/react/example/public/index.html index 2ac3b15a34..29591d30d5 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -9,7 +9,7 @@ rel='stylesheet' type='text/css'> diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index 315e8d378d..a90649a1b1 100644 --- a/react/modules/Project/package.json +++ b/react/modules/Project/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.7", "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", diff --git a/react/modules/core/package.json b/react/modules/core/package.json index b03bfd8a85..e779b572aa 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,7 +14,7 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.7", "@egovernments/digit-ui-react-components": "1.8.1-beta.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index d1f3960c94..4c0b6fd4fc 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.7", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/modules/sample/src/configs/SampleConfig.js b/react/modules/sample/src/configs/SampleConfig.js index 1372a53c30..c2563cf84f 100644 --- a/react/modules/sample/src/configs/SampleConfig.js +++ b/react/modules/sample/src/configs/SampleConfig.js @@ -8,7 +8,7 @@ export const newConfig = [ isMandatory: false, type: "text", disable: false, - populators: { name: "text-Default", error: "Error!"}, + populators: { name: "text-Default", error: "Error!" }, }, { inline: true, @@ -16,8 +16,8 @@ export const newConfig = [ isMandatory: false, type: "text", disable: false, - placeholder:"Inner label", - populators: { name: "text-With InnerLabel", error: "Error!"}, + placeholder: "Inner label", + populators: { name: "text-With InnerLabel", error: "Error!" }, }, { inline: true, @@ -38,11 +38,14 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, type: "text", disable: false, - populators: { name: "text-Error", error: "This field is mandatory!" }, + populators: { + name: "text-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -59,6 +62,8 @@ export const newConfig = [ isMandatory: false, type: "text", disable: false, + description: + "If maxlength is specified in the validation,then the user cannot enter more than that,else max charCount will be shown as 0 by default.", charCount: true, populators: { name: "text-With CharCount", error: "Error!" }, }, @@ -74,21 +79,27 @@ export const newConfig = [ }, { inline: true, - label: "With Des&Err", + label: "Required Field With Des", isMandatory: true, type: "text", disable: false, description: "Help text", charCount: true, - populators: { name: "text-With Des&Err", error: "Error!" }, + populators: { + name: "text-Required Field With Des", + error: "This field is mandatory!", + }, }, { inline: true, - label: "Mandatory", + label: "Required", isMandatory: true, type: "text", disable: false, - populators: { name: "text-Mandatory", error: "This field is mandatory!" }, + populators: { + name: "text-Required", + error: "This field is mandatory!", + }, }, { inline: true, @@ -106,7 +117,10 @@ export const newConfig = [ type: "text", disable: false, infoMessage: "This is mandatory", - populators: { name: "text-Info&Mandatory", error: "Required" }, + populators: { + name: "text-Info&Mandatory", + error: "This field is mandatory!", + }, }, { inline: true, @@ -119,11 +133,17 @@ export const newConfig = [ }, { inline: true, - label: "With Validation", + label: "With Validation max chars as 10 and min chars as 2", isMandatory: true, type: "text", disable: false, - populators: { name: "text-With Validation", error: "Enter minimum two characters", validation: { minlength: 2, maxlength: 10 } }, + charCount: true, + populators: { + name: "text-With Validation", + wrapLabel: true, + error: "Enter minimum two characters and maximum ten characters", + validation: { minlength: 2, maxlength: 10 }, + }, }, { inline: true, @@ -142,7 +162,7 @@ export const newConfig = [ }, { inline: true, - label: "Complete hufiewgfruefgweochwioecheihcowecjkncjkrncnfekjjsiwhsuwyduyodweydpxiwoecbhiorbiocrbhiobciorfciorexfibwfyxiowebfyxyfpiweqbdzpuwdpwefyewixbfefhxwioexfbhwebfiweh", + label: "With all properties", placeholder: "Enter Text", isMandatory: true, type: "text", @@ -150,15 +170,34 @@ export const newConfig = [ infoMessage: "Complete text field", description: "Help Text", charCount: true, - populators: { name: "text-Complete", error: "This field is mandatory!" ,wrapLabel:true}, + populators: { + name: "text-Complete", + error: "This field is mandatory!", + wrapLabel: true, + }, + }, + { + inline: true, + label: + "Max chars allowed for the label are 64, then ellipsis are added.", + isMandatory: true, + type: "text", + disable: false, + infoMessage: "hvgvbsdvdvfvfd", + description: "text-With MaxCharsLabel", + populators: { + name: "text-With MaxCharsLabel", + error: "Error!", + wrapLabel: true, + }, }, { inline: true, - label: "qazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikl", + label: "Wraplabel-false ellipsis-added", isMandatory: false, type: "text", disable: false, - description:"text-With MaxCharsLabel", + description: "text-Withot wrapLabel", populators: { name: "text-With MaxCharsLabel", error: "Error!" }, }, { @@ -168,7 +207,7 @@ export const newConfig = [ type: "text", disable: false, description: - "qazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikl", + "Maximum characters allowed for the description is 256 characters,If more than 256 characters are sent then ellipsis will be added for the description and shown in this way.The error also follows the same way,so max characters allowed for description - 256,,", charCount: true, populators: { name: "text-With MaxDes&CharCount", error: "Error!" }, }, @@ -178,17 +217,13 @@ export const newConfig = [ isMandatory: true, type: "text", disable: false, - description:"", + description: "", charCount: true, - populators: { name: "text-With MaxErr&CharCount", error: "qazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikqazwsxedcrfvtgbyhnujmikolpplmoknijbuhvygctfxrdzeswaqedfrtgyhujikl" }, - }, - { - inline: true, - label: "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead", - isMandatory: false, - type: "text", - disable: false, - populators: { name: "text-labelwrap", error: "Error!" ,wrapLabel:true}, + populators: { + name: "text-With MaxErr&CharCount", + error: + "Maximum characters allowed for the error is 256 characters,If more than 256 characters are sent then ellipsis will be added for the error message and shown in this way.The description also follows the same way.The maximum characters allowed for error - 256.", + }, }, { inline: true, @@ -221,7 +256,7 @@ export const newConfig = [ description: "", type: "date", disable: false, - placeholder:"date", + placeholder: "date", populators: { name: "date-With Innerlabel", error: "Error!" }, }, { @@ -245,12 +280,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "date", disable: false, - populators: { name: "date-Error", error: "This field is mandatory!" }, + populators: { + name: "date-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -261,7 +299,7 @@ export const newConfig = [ disable: false, infoMessage: "Select the date", populators: { name: "date-With Info", error: "Error!" }, - } + }, ], }, { @@ -283,7 +321,7 @@ export const newConfig = [ description: "", type: "time", disable: false, - placeholder:"time", + placeholder: "time", populators: { name: "time-With Innerlabel", error: "Error!" }, }, { @@ -307,12 +345,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "time", disable: false, - populators: { name: "time-Error", error: "This field is mandatory!" }, + populators: { + name: "time-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -345,7 +386,7 @@ export const newConfig = [ description: "", type: "geolocation", disable: false, - placeholder:"Innerlabel", + placeholder: "Innerlabel", populators: { name: "geolocation-With Innerlabel", error: "Error!" }, }, { @@ -369,12 +410,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "geolocation", disable: false, - populators: { name: "geolocation-Error", error: "This field is mandatory!" }, + populators: { + name: "geolocation-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -407,7 +451,7 @@ export const newConfig = [ description: "", type: "numeric", disable: false, - placeholder:0, + placeholder: "0", populators: { name: "numeric-With Innerlabel", error: "Error!" }, }, { @@ -441,12 +485,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "numeric", disable: false, - populators: { name: "numeric-Error", error: "This field is mandatory!" }, + populators: { + name: "numeric-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -458,6 +505,20 @@ export const newConfig = [ infoMessage: "this is numeric field", populators: { name: "numeric-With Info", error: "Error!" }, }, + { + inline: true, + label: "With minimum 2 and maximum 10", + isMandatory: false, + description: "", + type: "numeric", + disable: false, + populators: { + name: "numeric-With Validation", + error: "Enter value in between 1 to 11!", + validation: { min: 2, max: 10 }, + wrapLabel: true, + }, + }, ], }, { @@ -479,8 +540,12 @@ export const newConfig = [ description: "", type: "text", disable: false, - placeholder:"Prefix", - populators: { name: "prefix-With Innerlabel", error: "Error!", prefix: "₹" }, + placeholder: "Prefix", + populators: { + name: "prefix-With Innerlabel", + error: "Error!", + prefix: "₹", + }, }, { inline: true, @@ -489,7 +554,11 @@ export const newConfig = [ description: "", type: "text", disable: false, - populators: { name: "prefix-Large Prefix", error: "Error!", prefix: "1234567890" }, + populators: { + name: "prefix-Large Prefix", + error: "Error!", + prefix: "1234567890", + }, }, { inline: true, @@ -508,16 +577,24 @@ export const newConfig = [ type: "text", disable: false, nonEditable: true, - populators: { name: "prefix-Noneditable", error: "Error!", prefix: "₹" }, + populators: { + name: "prefix-Noneditable", + error: "Error!", + prefix: "₹", + }, }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "text", disable: false, - populators: { name: "prefix-Error", error: "This field is mandatory!", prefix: "₹" }, + populators: { + name: "prefix-Required Field", + error: "This field is mandatory!", + prefix: "₹", + }, }, { inline: true, @@ -560,8 +637,12 @@ export const newConfig = [ description: "", type: "text", disable: false, - placeholder:"suffix", - populators: { name: "suffix-With Innerlabel", error: "Error!", suffix: "₹" }, + placeholder: "suffix", + populators: { + name: "suffix-With Innerlabel", + error: "Error!", + suffix: "₹", + }, }, { inline: true, @@ -570,7 +651,11 @@ export const newConfig = [ description: "", type: "text", disable: false, - populators: { name: "suffix-Large Suffix", error: "Error!", suffix: "1234567890" }, + populators: { + name: "suffix-Large Suffix", + error: "Error!", + suffix: "1234567890", + }, }, { inline: true, @@ -589,16 +674,24 @@ export const newConfig = [ type: "text", disable: false, nonEditable: true, - populators: { name: "suffix-Noneditable", error: "Error!", suffix: "₹" }, + populators: { + name: "suffix-Noneditable", + error: "Error!", + suffix: "₹", + }, }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "text", disable: false, - populators: { name: "suffix-Error", error: "This field is mandatory!", suffix: "₹" }, + populators: { + name: "suffix-Required Field", + error: "This field is mandatory!", + suffix: "₹", + }, }, { inline: true, @@ -608,7 +701,11 @@ export const newConfig = [ type: "text", disable: false, description: "Help Text", - populators: { name: "suffix-With Description", error: "Error!", suffix: "₹" }, + populators: { + name: "suffix-With Description", + error: "Error!", + suffix: "₹", + }, }, { inline: true, @@ -641,7 +738,7 @@ export const newConfig = [ description: "", type: "password", disable: false, - placeholder:"Password", + placeholder: "Password", populators: { name: "password-With Innerlabel", error: "Error!" }, }, { @@ -665,12 +762,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "password", disable: false, - populators: { name: "password-Error", error: "This field is mandatory!" }, + populators: { + name: "password-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -698,7 +798,11 @@ export const newConfig = [ isMandatory: false, type: "password", disable: false, - populators: { name: "password-With Validation", error: "Error!", validation: { minlength: 6 } }, + populators: { + name: "password-With Validation", + error: "Error!", + validation: { minlength: 6 }, + }, }, ], }, @@ -721,7 +825,7 @@ export const newConfig = [ description: "", type: "search", disable: false, - placeholder:"Inner label", + placeholder: "Inner label", populators: { name: "search-With Innerlabel", error: "Error!" }, }, { @@ -745,12 +849,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "search", disable: false, - populators: { name: "search-Error", error: "This field is mandatory!" }, + populators: { + name: "search-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -802,7 +909,11 @@ export const newConfig = [ description: "", type: "textarea", disable: false, - populators: { name: "textarea-Smart Resize", error: "Error!" ,resizeSmart:true}, + populators: { + name: "textarea-Smart Resize", + error: "Error!", + resizeSmart: true, + }, }, { inline: true, @@ -825,12 +936,15 @@ export const newConfig = [ }, { inline: true, - label: "Error", + label: "Required Field", isMandatory: true, description: "", type: "textarea", disable: false, - populators: { name: "textarea-Error", error: "This field is mandatory!" }, + populators: { + name: "textarea-Required Field", + error: "This field is mandatory!", + }, }, { inline: true, @@ -862,13 +976,16 @@ export const newConfig = [ }, { inline: true, - label: "With Des&Err", + label: "Required Field With Des", isMandatory: true, type: "textarea", disable: false, description: "Help text", charCount: true, - populators: { name: "textarea-With Des&Err", error: "This field is mandatory!" }, + populators: { + name: "textarea-Required Field With Des", + error: "This field is mandatory!", + }, }, { inline: true, @@ -876,7 +993,10 @@ export const newConfig = [ isMandatory: true, type: "textarea", disable: false, - populators: { name: "textarea-Mandatory", error: "This field is mandatory" }, + populators: { + name: "textarea-Mandatory", + error: "This field is mandatory", + }, }, { inline: true, @@ -894,15 +1014,10 @@ export const newConfig = [ type: "textarea", disable: false, infoMessage: "Textare field information", - populators: { name: "textarea-Info&Mandatory", error: "This field is mandatory" }, - }, - { - inline: true, - label: "With Validation", - isMandatory: false, - type: "textarea", - disable: false, - populators: { name: "textarea-With Validation", error: "Error!", validation: { minlength: 20, maxlength: 500 } }, + populators: { + name: "textarea-Info&Mandatory", + error: "This field is mandatory", + }, }, { inline: true, @@ -914,7 +1029,10 @@ export const newConfig = [ infoMessage: "Textare field complete", description: "Help Text", charCount: true, - populators: { name: "textarea-Complete", error: "This field is mandatory" }, + populators: { + name: "textarea-Complete", + error: "This field is mandatory", + }, }, { inline: true, @@ -971,10 +1089,10 @@ export const newConfig = [ isMandatory: true, type: "radio", key: "genders", - label: "Error", + label: "Required Field", disable: false, populators: { - name: "radio-Error", + name: "radio-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, @@ -1058,7 +1176,7 @@ export const newConfig = [ options: [ { code: "1", - name: "maxlabeloneuiuichjkdcbd", + name: "max labelon eui uichjkdcbdhjfjhvfbjfdvjkfhgrghrjekghruieghuireghruieghruieghregrejghreighruieghre", }, { code: "2", @@ -1116,10 +1234,10 @@ export const newConfig = [ isMandatory: true, type: "dropdown", key: "genders", - label: "Error", + label: "Required Field", disable: false, populators: { - name: "dropdown-Error", + name: "dropdown-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, @@ -1177,7 +1295,7 @@ export const newConfig = [ moduleName: "common-masters", localePrefix: "COMMON_GENDER", }, - isSearchable:false + isSearchable: false, }, }, ], @@ -1257,11 +1375,11 @@ export const newConfig = [ isMandatory: true, type: "dropdown", key: "genders", - label: "Error", + label: "Required Field", disable: false, variant: "nesteddropdown", populators: { - name: "nesteddropdown-Error", + name: "nesteddropdown-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, @@ -1299,23 +1417,47 @@ export const newConfig = [ optionsKey: "name", error: "", required: true, - showIcon:true, + showIcon: true, options: [ { name: "Category A", options: [ - { code: "Category A.Option A", name: "Option A", icon: "Article" }, - { code: "Category A.Option B", name: "Option B", icon: "Article" }, - { code: "Category A.Option C", name: "Option C", icon: "Article" }, + { + code: "Category A.Option A", + name: "Option A", + icon: "Article", + }, + { + code: "Category A.Option B", + name: "Option B", + icon: "Article", + }, + { + code: "Category A.Option C", + name: "Option C", + icon: "Article", + }, ], code: "Category A", }, { name: "Category B", options: [ - { code: "Category B.Option A", name: "Option A", icon: "Article" }, - { code: "Category B.Option 2", name: "Option 2", icon: "Article" }, - { code: "Category B.Option 3", name: "Option 3", icon: "Article" }, + { + code: "Category B.Option A", + name: "Option A", + icon: "Article", + }, + { + code: "Category B.Option 2", + name: "Option 2", + icon: "Article", + }, + { + code: "Category B.Option 3", + name: "Option 3", + icon: "Article", + }, ], code: "Category B", }, @@ -1354,7 +1496,7 @@ export const newConfig = [ code: "Category B", }, ], - isSearchable:false + isSearchable: false, }, }, ], @@ -1482,11 +1624,11 @@ export const newConfig = [ isMandatory: true, type: "dropdown", key: "genders", - label: "Error", + label: "Required Field", disable: false, variant: "treedropdown", populators: { - name: "treedropdown-Error", + name: "treedropdown-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, @@ -1557,17 +1699,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -1588,17 +1733,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -1607,11 +1755,11 @@ export const newConfig = [ isMandatory: true, type: "dropdown", key: "genders", - label: "Error", + label: "Required Field", disable: false, variant: "nestedtextdropdown", populators: { - name: "nestedtextdropdown-Error", + name: "nestedtextdropdown-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, @@ -1619,17 +1767,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -1646,25 +1797,28 @@ export const newConfig = [ optionsKey: "name", error: "", required: true, - showIcon:true, + showIcon: true, options: [ { code: "Option1", name: "Option1", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -1685,20 +1839,23 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], - isSearchable:false + isSearchable: false, }, }, ], @@ -1721,15 +1878,15 @@ export const newConfig = [ options: [ { code: "Option1", - name: "Option1" + name: "Option1", }, { code: "Option2", - name: "Option2" + name: "Option2", }, { code: "Option3", - name: "Option3" + name: "Option3", }, ], }, @@ -1749,15 +1906,15 @@ export const newConfig = [ options: [ { code: "Option1", - name: "Option1" + name: "Option1", }, { code: "Option2", - name: "Option2" + name: "Option2", }, { code: "Option3", - name: "Option3" + name: "Option3", }, ], }, @@ -1766,26 +1923,26 @@ export const newConfig = [ isMandatory: true, type: "dropdown", key: "genders", - label: "Error", + label: "Required Field", disable: false, variant: "profiledropdown", populators: { - name: "profiledropdown-Error", + name: "profiledropdown-Required Field", optionsKey: "name", error: "This field is mandatory!", required: true, options: [ { code: "Option1", - name: "Option1" + name: "Option1", }, { code: "Option2", - name: "Option2" + name: "Option2", }, { code: "Option3", - name: "Option3" + name: "Option3", }, ], }, @@ -1806,17 +1963,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, { code: "Option2", name: "Option2", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, { code: "Option3", name: "Option3", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, ], }, @@ -1837,20 +1997,26 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", - profileIcon: "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + profileIcon: + "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png", }, ], }, @@ -1870,18 +2036,18 @@ export const newConfig = [ options: [ { code: "Option1", - name: "Option1" + name: "Option1", }, { code: "Option2", - name: "Option2" + name: "Option2", }, { code: "Option3", - name: "Option3" + name: "Option3", }, ], - isSearchable:false + isSearchable: false, }, }, ], @@ -1957,7 +2123,7 @@ export const newConfig = [ error: "Error!", required: false, isDropdownWithChip: true, - showIcon:true, + showIcon: true, options: [ { code: "Option1", @@ -2065,23 +2231,47 @@ export const newConfig = [ error: "Error!", required: false, isDropdownWithChip: true, - showIcon:true, + showIcon: true, options: [ { name: "Category A", options: [ - { code: "Category A.Option A", name: "Option A", icon: "Article" }, - { code: "Category A.Option B", name: "Option B", icon: "Article" }, - { code: "Category A.Option C", name: "Option C", icon: "Article" }, + { + code: "Category A.Option A", + name: "Option A", + icon: "Article", + }, + { + code: "Category A.Option B", + name: "Option B", + icon: "Article", + }, + { + code: "Category A.Option C", + name: "Option C", + icon: "Article", + }, ], code: "Category A", }, { name: "Category B", options: [ - { code: "Category B.Option A", name: "Option A", icon: "Article" }, - { code: "Category B.Option 2", name: "Option 2", icon: "Article" }, - { code: "Category B.Option 3", name: "Option 3", icon: "Article" }, + { + code: "Category B.Option A", + name: "Option A", + icon: "Article", + }, + { + code: "Category B.Option 2", + name: "Option 2", + icon: "Article", + }, + { + code: "Category B.Option 3", + name: "Option 3", + icon: "Article", + }, ], code: "Category B", }, @@ -2233,17 +2423,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -2265,17 +2458,20 @@ export const newConfig = [ { code: "Option1", name: "Option1", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -2293,25 +2489,28 @@ export const newConfig = [ error: "Error!", required: false, isDropdownWithChip: true, - showIcon:true, + showIcon: true, options: [ { code: "Option1", name: "Option1", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option2", name: "Option2", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, { code: "Option3", name: "Option3", - icon:"Article", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", + icon: "Article", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna", }, ], }, @@ -2335,7 +2534,11 @@ export const newConfig = [ type: "checkbox", disable: false, withoutLabel: true, - populators: { name: "checkbox-Labelled", error: "Error!", title: "Labelled" }, + populators: { + name: "checkbox-Labelled", + error: "Error!", + title: "Labelled", + }, }, { inline: true, @@ -2356,7 +2559,11 @@ export const newConfig = [ type: "checkbox", disable: true, withoutLabel: true, - populators: { name: "checkbox-DefaultDisabled", error: "Error!", title: "" }, + populators: { + name: "checkbox-DefaultDisabled", + error: "Error!", + title: "", + }, }, { inline: true, @@ -2364,7 +2571,11 @@ export const newConfig = [ type: "checkbox", disable: true, withoutLabel: true, - populators: { name: "checkbox-Disabled", error: "Error!", title: "Disabled" }, + populators: { + name: "checkbox-Disabled", + error: "Error!", + title: "Disabled", + }, }, { inline: true, @@ -2385,7 +2596,12 @@ export const newConfig = [ type: "checkbox", disable: false, withoutLabel: true, - populators: { name: "checkbox-LabelledFirst", isLabelFirst:true, error: "Error!", title: "LabelledFirst" }, + populators: { + name: "checkbox-LabelledFirst", + isLabelFirst: true, + error: "Error!", + title: "LabelledFirst", + }, }, { inline: true, @@ -2395,7 +2611,7 @@ export const newConfig = [ withoutLabel: true, populators: { name: "checkbox-LabelFirst", - isLabelFirst:true, + isLabelFirst: true, error: "Error!", title: "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead", @@ -2407,7 +2623,12 @@ export const newConfig = [ type: "checkbox", disable: true, withoutLabel: true, - populators: { name: "checkbox-LabelledFirstDisabled", isLabelFirst:true, error: "Error!", title: "LabelledFirstDisabled" }, + populators: { + name: "checkbox-LabelledFirstDisabled", + isLabelFirst: true, + error: "Error!", + title: "LabelledFirstDisabled", + }, }, { inline: true, @@ -2417,7 +2638,7 @@ export const newConfig = [ withoutLabel: true, populators: { name: "checkbox-LabelFirstDisabled", - isLabelFirst:true, + isLabelFirst: true, error: "Error!", title: "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead", diff --git a/react/modules/sample/src/pages/employee/Sample.js b/react/modules/sample/src/pages/employee/Sample.js index e47cda9e12..dc1839a738 100644 --- a/react/modules/sample/src/pages/employee/Sample.js +++ b/react/modules/sample/src/pages/employee/Sample.js @@ -135,12 +135,12 @@ const Create = () => { const defaultValues = { "text-Default": "Sample Text Input", "text-Noneditable": "Sample Text Input Noneditable", - "text-Error": "Sample Text Input Error", + "text-Required Field": "Sample Text Input Error", "text-With Description": "Sample Text Input with description", "text-With CharCount": "Sample Text Input with charcount", "text-With Des&CharCount": "Sample Text Input with des&charcount", - "text-With Des&Err": "Sample Text Input with Des&Err", - "text-Mandatory": "Sample Text Input Mandatory", + "text-Required Field With Des": "Sample Text Input with Des&Err", + "text-Required": "Sample Text Input Mandatory", "text-With Info": "Sample Text Input with infomessage", "text-Info&Mandatory": "Sample Text Input mandatory&infomessage", "text-With Innerlabel": "Sample Text Input With Innerlabel", @@ -150,11 +150,11 @@ const Create = () => { "textarea-Default": "Sample TextArea", "textarea-Noneditable": "Sample TextArea Noneditable", - "textarea-Error": "Sample TextArea Error", + "textarea-Required Field": "Sample TextArea Error", "textarea-With Description": "Sample TextArea with description", "textarea-With CharCount": "Sample TextArea with charcount", "textarea-With Des&CharCount": "Sample TextArea with des&charcount", - "textarea-With Des&Err": "Sample TextArea with des&err", + "textarea-Required Field With Des": "Sample TextArea with des&err", "textarea-Mandatory": "Sample TextArea mandatory", "textarea-With Info": "Sample TextArea with infomessage", "textarea-Info&Mandatory": "Sample TextArea mandatory&infomessage", @@ -165,24 +165,24 @@ const Create = () => { "numeric-Default": 0, "numeric-With Step Value": 0, "numeric-Noneditable": 0, - "numeric-Error": 0, + "numeric-Required Field": 0, "numeric-With InfoMessage": 0, "prefix-Default": 1000, "prefix-Noneditable": 1000, - "prefix-Error": 1000, + "prefix-Required Field": 1000, "prefix-With Description": 1000, "prefix-With InfoMessage": 1000, "suffix-Default": 1000, "suffix-Noneditable": 1000, - "suffix-Error": 1000, + "suffix-Required Field": 1000, "suffix-With Description": 1000, "suffix-With Info": 1000, "password-Default": "password", "password-Noneditable": "password", - "password-Error": "password", + "password-Required Field": "password", "password-With Description": "password", "password-With InfoMessage": "password", @@ -405,7 +405,7 @@ const Create = () => {