@innovaccer/design-system 2.14.1 → 2.14.2-0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 2.14.2-0 (2023-02-07)
+
+### Highlights
+
+- feat(docs): add satismeter feedback form support (f880e6a8)
+- feat(checkbox): add error state in checkbox (f9677fd5)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(docs): add satismeter feedback form support (f880e6a8)
+- feat(checkbox): add error state in checkbox (f9677fd5)
+
+### Fixes
+
+- fix(docs): update cypress test for images (3108592d)
+- fix(dropdown): add support to enable apply button on same option label selection(0e743737)
+
+### Improvements
+
+- fix(fileList): update color of other file type (72704373)
+- fix(checkbox): replace checkbox icons with svg (6e179d5f)
+- fix(stepper): update state of stepper item (e224df82)
+- fix(horizontalNav): update focus ring on disabled state (9be66388)
+
+### Documentation
+
+NA
+
+---
+
 ## 2.14.1-1 (2023-01-22)
 
 ### Highlights

package/css/dist/index.css

@@ -1801,8 +1801,6 @@ body {
   display: block;
 }
 
-/* badge */
-
 .Checkbox {
   display: flex;
   -webkit-user-select: none;
@@ -1857,13 +1855,13 @@ body {
 .Checkbox-wrapper {
   top: 0;
   left: 0;
-  border: var(--border);
   border-radius: var(--spacing-s);
   display: flex;
   align-items: center;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
+  justify-content: center;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -1871,25 +1869,30 @@ body {
   outline: 0;
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper {
+.Checkbox-input ~ .Checkbox-wrapper--default {
+  border: var(--spacing-xs) solid var(--secondary-dark);
+  background-color: var(--shadow-0);
+}
+
+.Checkbox-input:focus ~ .Checkbox-wrapper--default {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.Checkbox-input:hover ~ .Checkbox-wrapper {
+.Checkbox-input:hover ~ .Checkbox-wrapper--default {
   border: var(--spacing-xs) solid var(--inverse-lightest);
   background-color: var(--shadow-0);
 }
 
-.Checkbox-input:active ~ .Checkbox-wrapper {
+.Checkbox-input:active ~ .Checkbox-wrapper--default {
   border: var(--spacing-xs) solid var(--inverse-lightest);
-  background-color: var(--shadow-0);
+  background-color: var(--secondary-light);
 }
 
 .Checkbox--disabled {
   pointer-events: none;
 }
 
-.Checkbox--disabled .Checkbox-wrapper {
+.Checkbox--disabled .Checkbox-wrapper--default {
   border: var(--spacing-xs) solid var(--secondary-light);
   background-color: var(--secondary-lightest);
 }
@@ -1927,6 +1930,59 @@ body {
   border: 0;
 }
 
+/* Error State -> Default */
+
+.Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert);
+}
+
+.Checkbox-input:focus ~ .Checkbox-wrapper--error {
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
+}
+
+.Checkbox-input:hover ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert-dark);
+}
+
+.Checkbox-input:active ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert-darker);
+  background-color: var(--secondary-light);
+}
+
+.Checkbox--disabled .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert-lighter);
+  background-color: var(--secondary-lightest);
+}
+
+/* Error State -> Checked & Indeterminate */
+
+.Checkbox-input--checked ~ .Checkbox-wrapper--error,
+.Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert);
+}
+
+.Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
+.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
+.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert-dark);
+}
+
+.Checkbox-input--checked:active ~ .Checkbox-wrapper--error,
+.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper--error {
+  background-color: var(--primary-darker);
+  border: var(--spacing-xs) solid var(--alert-darker);
+}
+
+.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper--error,
+.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
+  border: var(--spacing-xs) solid var(--alert-lighter);
+}
+
 .Chip {
   display: flex;
   box-sizing: border-box;
@@ -2932,8 +2988,8 @@ body {
   color: var(--accent3);
 }
 .FileIcon--others {
-  background: var(--warning-lightest);
-  color: var(--warning);
+  background: var(--success-lightest);
+  color: var(--success);
 }
 .FileIcon--animate {
   -webkit-animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
@@ -3626,6 +3682,10 @@ body {
   pointer-events: none;
 }
 
+.HorizontalNav-menu--disabled:focus-visible {
+  outline: none;
+}
+
 .HorizontalNav-menu--default:focus-visible {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
   outline: none;