feat: add error state styling for checked checkbox and new error icon

RohitRaj011 · RohitRaj011 · commit 76066451ea15 · 2025-05-29T18:52:38.000+05:30
diff --git a/src/Common/Checkbox/Checkbox.scss b/src/Common/Checkbox/Checkbox.scss
@@ -51,6 +51,10 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');
     background-image: url('./assets/ic-checkbox-selected.svg');
 }
 
+.form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {
+    background-image: url('./assets/ic-checkbox-selected-error.svg');
+}
+
 .form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {
     background-image: url('./assets/ic-bulk-check.svg');
 }
@@ -84,15 +88,19 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');
             }
         }
 
-        .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container {
+        .form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-checkbox-intermediate.svg');
         }
 
-        .form__checkbox:checked[value='CHECKED']~.form__checkbox-container {
+        .form__checkbox:checked[value='CHECKED'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-checkbox-selected.svg');
         }
 
-        .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {
+        .form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {
+            background-image: url('./assets/dark/ic-checkbox-selected-error.svg');
+        }
+
+        .form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-bulk-check.svg');
         }
     }
diff --git a/src/Common/Checkbox/assets/dark/ic-checkbox-selected-error.svg b/src/Common/Checkbox/assets/dark/ic-checkbox-selected-error.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <rect width="18" height="18" x="3" y="3" fill="#FF5D60" rx="4"/>
+  <path stroke="#15161F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16.813 8.938-6.125 6.124L7.624 12" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/Checkbox/assets/ic-checkbox-selected-error.svg b/src/Common/Checkbox/assets/ic-checkbox-selected-error.svg
@@ -0,0 +1,20 @@
+<!--
+  - Copyright (c) 2024. Devtron Inc.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <rect width="18" height="18" x="3" y="3" fill="#F33E3E" rx="4"/>
+  <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16.813 8.938-6.125 6.124L7.624 12" vector-effect="non-scaling-stroke"/>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,10 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');`
`51`	`51`	`background-image: url('./assets/ic-checkbox-selected.svg');`
`52`	`52`	`}`
`53`	`53`
	`54`	`+.form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {`
	`55`	`+ background-image: url('./assets/ic-checkbox-selected-error.svg');`
	`56`	`+}`
	`57`	`+`
`54`	`58`	`.form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {`
`55`	`59`	`background-image: url('./assets/ic-bulk-check.svg');`
`56`	`60`	`}`
`@@ -84,15 +88,19 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');`
`84`	`88`	`}`
`85`	`89`	`}`
`86`	`90`
`87`		`- .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container {`
	`91`	`+ .form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container {`
`88`	`92`	`background-image: url('./assets/dark/ic-checkbox-intermediate.svg');`
`89`	`93`	`}`
`90`	`94`
`91`		`- .form__checkbox:checked[value='CHECKED']~.form__checkbox-container {`
	`95`	`+ .form__checkbox:checked[value='CHECKED'] ~ .form__checkbox-container {`
`92`	`96`	`background-image: url('./assets/dark/ic-checkbox-selected.svg');`
`93`	`97`	`}`
`94`	`98`
`95`		`- .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {`
	`99`	`+ .form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {`
	`100`	`+ background-image: url('./assets/dark/ic-checkbox-selected-error.svg');`
	`101`	`+ }`
	`102`	`+`
	`103`	`+ .form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {`
`96`	`104`	`background-image: url('./assets/dark/ic-bulk-check.svg');`
`97`	`105`	`}`
`98`	`106`	`}`