classname updations and css fixes (#40)

* css-fixes * version updates
egovernments · Apr 10, 2024 · 456ddc8 · 456ddc8
1 parent d3fbd6e
commit 456ddc8
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 67 deletions.
diff --git 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.4 updated classnames 
 1.8.2-coreui.3 styles for stepper and fixed date issue
 1.8.0-beta.13 fixed the login text styling issue
 1.8.0-beta.1 styles for login dropdown and homepage dropdowns

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-coreui.3",
+  "version": "1.8.2-coreui.4",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/infoCardV2.scss b/react/css/src/digitv2/components/infoCardV2.scss
@@ -1,7 +1,7 @@
 @import url("../index.scss");
 @import url("../typography.scss");
 
-.digit-info-banner-wrap {
+.digit-infobanner-wrap {
   @apply m-sm p-md flex flex-col;
   border-radius: 0.25rem;
   top: 1.25rem;

diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -1,6 +1,6 @@
 @import url("../index.scss");
 
-.digit-multi-select-dropdown-wrap {
+.digit-multiselectdropdown-wrap {
   margin-bottom: 0.625rem;
 
   @media (min-width: 30.063rem) and (max-width: 47.938rem) {
@@ -25,8 +25,8 @@
 
   @apply relative text-form-field text-text-primary w-full;
 
-  .digit-master,
-  .digit-master-active {
+  .digit-multiselectdropdown-master,
+  .digit-multiselectdropdown-master-active {
     @apply relative h-10 w-full bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
 
@@ -43,7 +43,7 @@
       }
     }
 
-    .digit-label {
+    .digit-multiselectdropdown-label {
       @apply flex justify-between p-sm w-full h-full;
 
       svg {
@@ -52,7 +52,7 @@
     }
   }
 
-  .digit-master {
+  .digit-multiselectdropdown-master {
 
     &.disabled {
       pointer-events: none !important;
@@ -61,35 +61,35 @@
     }
   }
 
-  .digit-master-active {
+  .digit-multiselectdropdown-master-active {
     border: 0.063rem solid theme(digitv2.lightTheme.primary-orange);
 
   }
 
-  .digit-server {
+  .digit-multiselectdropdown-server {
     top: 2.5rem;
     @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
     max-height: 25vmax;
     box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
     width: 100% !important;
   }
 
-  .digit-server::-webkit-scrollbar-track {
+  .digit-multiselectdropdown-server::-webkit-scrollbar-track {
     background-color: #F5F5F5;
     border-radius: 0.625rem;
   }
 
-  .digit-server::-webkit-scrollbar {
+  .digit-multiselectdropdown-server::-webkit-scrollbar {
     width: 0.625rem;
     background-color: #F5F5F5;
   }
 
-  .digit-server::-webkit-scrollbar-thumb {
+  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
     background-color: #C1C1C1;
     border-radius: 0.625rem;
   }
 
-  .digit-server::-webkit-scrollbar-thumb:hover {
+  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb:hover {
     background-color: #A8A8A8;
   }
 
@@ -114,7 +114,7 @@
     line-height: theme(digitv2.lineHeight.normal);
   }
 
-  .multiselect-dropodwn-menuitem {
+  .digit-multiselectdropodwn-menuitem {
 
     @apply flex w-full bg-white justify-start items-center;
     min-height: 2.438rem;
@@ -197,7 +197,7 @@
       }
     }
 
-    .digit-custom-checkbox {
+    .digit-multiselectdropodwn-custom-checkbox {
       height: 1.25rem;
       width: 1.25rem;
       border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
@@ -209,14 +209,14 @@
     }
 
 
-    input:active~.digit-custom-checkbox,
-    input:checked~.digit-custom-checkbox {
+    input:active~.digit-multiselectdropodwn-custom-checkbox,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox {
       border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
       background-color: theme(digitv2.lightTheme.primary-orange);
     }
 
-    input:active~.digit-custom-checkbox svg,
-    input:checked~.digit-custom-checkbox svg {
+    input:active~.digit-multiselectdropodwn-custom-checkbox svg,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox svg {
       @apply opacity-100;
       width: 1rem;
       height: 1rem;
@@ -260,7 +260,7 @@
         }
       }
 
-      .digit-custom-checkbox {
+      .digit-multiselectdropodwn-custom-checkbox {
         margin: 0rem;
         margin-top: 0.125rem;
       }
@@ -279,7 +279,7 @@
           line-height: 1.188rem;
         }
 
-        .digit-custom-checkbox {
+        .digit-multiselectdropodwn-custom-checkbox {
           margin-top: 0rem;
         }
       }
@@ -294,9 +294,9 @@
     @apply cursor-pointer;
   }
 
-  .digit-master,
-  .digit-master-active {
-    .digit-label {
+  .digit-multiselectdropdown-master,
+  .digit-multiselectdropdown-master-active {
+    .digit-multiselectdropdown-label {
       p {
         white-space: pre;
         margin: auto;

diff --git a/react/css/src/digitv2/components/selectdropdownV2.scss b/react/css/src/digitv2/components/selectdropdownV2.scss
@@ -1,9 +1,9 @@
-.digit-employee-select-wrap {
+.digit-dropdown-employee-select-wrap {
   @apply w-full relative;
 
   max-width: 37.5rem;
 
-  .digit-select {
+  .digit-dropdown-select {
     @extend .light-input-border;
     @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
@@ -21,7 +21,6 @@
 
 
     input[type="text"] {
-      @extend .light-input-border;
       @extend .light-text-color-primary;
       width: calc(100% - 2rem);
       background-color: transparent;
@@ -48,7 +47,7 @@
     }
   }
 
-  .digit-select-active {
+  .digit-dropdown-select-active {
     @apply relative block w-full h-10;
     border: 0.063rem solid #F47738;
 
@@ -102,8 +101,8 @@
     }
   }
 
-  .digit-select,
-  .digit-select-active {
+  .digit-dropdown-select,
+  .digit-dropdown-select-active {
 
     &.treedropdown,
     &.notSearchable {
@@ -278,7 +277,7 @@
   }
 }
 
-.digit-employee-select-wrap--elipses {
+.digit-dropdown-employee-select-wrap--elipses {
   @apply overflow-hidden whitespace-no-wrap;
   width: 85% !important;
   text-overflow: ellipsis;
@@ -289,7 +288,7 @@
   }
 }
 
-.digit-select-wrap {
+.digit-dropdown-select-wrap {
   @apply mb-lg relative bg-white;
 
   @media (min-width: 30.063rem) and (max-width: 47.938rem) {
@@ -311,7 +310,7 @@
     min-width: 12.5rem;
   }
 
-  .digit-select {
+  .digit-dropdown-select {
     @extend .light-input-border;
     @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
@@ -350,7 +349,7 @@
     }
   }
 
-  .digit-select-active {
+  .digit-dropdown-select-active {
     @apply relative block w-full h-10;
     border: 0.063rem solid #F47738;
 
@@ -384,8 +383,8 @@
     }
   }
 
-  .digit-select,
-  .digit-select-active {
+  .digit-dropdown-select,
+  .digit-dropdown-select-active {
 
     &.treedropdown,
     &.notSearchable {

diff --git 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.4",
+    "@egovernments/digit-ui-components": "0.0.1-beta.5",
     "@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/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.4",
+        "@egovernments/digit-ui-components": "0.0.1-beta.5",
         "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
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.4",
+    "@egovernments/digit-ui-components": "0.0.1-beta.5",
     "@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
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.4",
+    "@egovernments/digit-ui-components": "0.0.1-beta.5",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.4",
+    "@egovernments/digit-ui-components": "0.0.1-beta.5",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/README.md b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.5 modified classnames
 0.0.1-beta.4 fixed some date issues 
 0.0.3 Added new components
 0.0.1 base version

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-css": "1.8.2-coreui.3",
+    "@egovernments/digit-ui-css": "1.8.2-coreui.4",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
@@ -71,7 +71,7 @@ const TextField = (props) => {
   return (
     <input
       ref={props.inputRef}
-      className={`digit-employee-select-wrap--elipses ${!props.isSearchable ? "notSearchable" : ""} ${props.disable && "disabled"} ${props.variant ? props.variant : ""}`}
+      className={`digit-dropdown-employee-select-wrap--elipses ${!props.isSearchable ? "notSearchable" : ""} ${props.disable && "disabled"} ${props.variant ? props.variant : ""}`}
       type="text"
       value={replaceDotWithColon(value)}
       onChange={inputChange}
@@ -291,7 +291,7 @@ const Dropdown = (props) => {
   };
   return (
     <div
-      className={`${user_type === "employee" ? "digit-employee-select-wrap" : "digit-select-wrap"} ${props?.className ? props?.className : ""}`}
+      className={`${user_type === "employee" ? "digit-dropdown-employee-select-wrap" : "digit-dropdown-select-wrap"} ${props?.className ? props?.className : ""}`}
       style={props?.style || {}}
     >
       {hasCustomSelector && (
@@ -302,7 +302,7 @@ const Dropdown = (props) => {
       )}
       {!hasCustomSelector && (
         <div
-          className={`${dropdownStatus ? "digit-select-active" : "digit-select"} ${props?.variant ? props?.variant : ""} ${!props?.isSearchable ? "notSearchable" : ""} ${
+          className={`${dropdownStatus ? "digit-dropdown-select-active" : "digit-dropdown-select"} ${props?.variant ? props?.variant : ""} ${!props?.isSearchable ? "notSearchable" : ""} ${
             props.disabled && "disabled"
           }`}
           style={

diff --git a/react/ui-components/src/atoms/InfoCard.js b/react/ui-components/src/atoms/InfoCard.js
@@ -23,7 +23,7 @@ const InfoCard = ({ label, text, variant, style, textStyle, additionalElements,
   const displayedLabel = StringManipulator("toTitleCase", label) || defaultLabel;
 
   return (
-    <div className={`digit-info-banner-wrap ${variant ? variant : "default"}`} style={style}>
+    <div className={`digit-infobanner-wrap ${variant ? variant : "default"}`} style={style}>
       <div height="24px">
         {icon}
         <h2>{displayedLabel}</h2>