From 40fff07b6de8e9b15a98ccc00d22de51a08f8680 Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Wed, 17 Apr 2024 15:16:52 +0530 Subject: [PATCH] modified classnames and updated tag styles and other css (#43) * updated-components * updated-css * updated components and css versions --- react/css/README.md | 1 + react/css/package.json | 2 +- .../css/src/digitv2/components/buttonsV2.scss | 7 +- .../src/digitv2/components/checkboxV2.scss | 2 +- react/css/src/digitv2/components/fieldV1.scss | 10 +- .../digitv2/components/labelFieldPairV2.scss | 19 +- .../components/multiSelectDropdownV2.scss | 24 +- .../src/digitv2/components/radiobtnV2.scss | 2 +- .../digitv2/components/selectdropdownV2.scss | 52 +- react/css/src/digitv2/components/stepper.scss | 22 +- react/css/src/digitv2/components/tagV2.scss | 48 +- .../src/digitv2/components/textareaV2.scss | 16 +- react/css/src/digitv2/components/toggle.scss | 2 +- react/example/package.json | 2 +- react/example/public/index.html | 2 +- react/modules/Project/package.json | 2 +- react/modules/core/package.json | 2 +- react/modules/sample/package.json | 2 +- .../sample/src/configs/SampleConfig.js | 557 ++++++++++++------ .../sample/src/pages/employee/Sample.js | 20 +- react/package.json | 2 +- react/ui-components/README.md | 1 + react/ui-components/package.json | 4 +- react/ui-components/src/atoms/Button.js | 42 +- react/ui-components/src/atoms/CheckBox.js | 6 +- react/ui-components/src/atoms/Dropdown.js | 9 +- .../src/atoms/MultiSelectDropdown.js | 2 +- react/ui-components/src/atoms/RadioButtons.js | 24 +- .../ui-components/src/atoms/RemoveableTag.js | 6 +- .../src/atoms/StringManipulator.js | 4 +- react/ui-components/src/atoms/TextArea.js | 13 +- react/ui-components/src/atoms/TextInput.js | 4 +- react/ui-components/src/hoc/FieldV1.js | 6 +- react/ui-components/yarn-error.log | 4 +- react/yarn-error.log | 2 +- 35 files changed, 586 insertions(+), 337 deletions(-) diff --git a/react/css/README.md b/react/css/README.md index 29b04b5153f..caa9fac274a 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 3baf639e6d4..b40de0f0434 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 34455718fc2..f058ce78309 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 eb0227d94ce..9f6a5684106 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 71f18926ec9..21e89c6ccce 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 c5c4bfabfef..d87c40a888a 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 26f90f12a9d..cc723cf3567 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 70d20c87a60..72c26d74715 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 afdc1811c0a..a7f1103bf40 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 4b5aa0dfd76..a87475a1933 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 7a1fc5897d8..814bffb6976 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 59d65230ea0..62b7b64fac3 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 526bff6a3ca..c29c61b0ff9 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 94749b0ca13..28110a6488f 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 2ac3b15a347..29591d30d57 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 315e8d378de..a90649a1b1b 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 b03bfd8a856..e779b572aa0 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 d1f3960c940..4c0b6fd4fca 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 1372a53c306..c2563cf84f7 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 e47cda9e122..dc1839a7387 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 = () => {