@innovaccer/design-system 2.14.1 → 2.15.0

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+## 2.15.0 (2023-03-06)
+
+### Highlights
+
+- feat(docs): add functionality to preview images using Light box on documentation site (970fe8bc)
+- fix(input): update copy-paste behavior of dates in Input for DatePicker and DateRangePicker component (925af578)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+-  feat(docs): add functionality to preview images using Light box on documentation site (970fe8bc)
+
+### Fixes
+
+- fix(input): update copy-paste behavior of dates in Input for DatePicker and DateRangePicker component (925af578)
+- fix(chip): fix disabled and active state for all types of Chip component and update focus state for input Chip component (46d09832)
+
+### Improvements
+
+- fix(calendar): update hover and active states for Calendar and DateRangePicker component (e7007a91)
+- fix(toast): update states for close action icon in Toast component (9dcb30e6)
+- fix(switch): update states and shadow for knob in Switch component (6325915e)
+- feat(dropdown): add different placeholder sizes in loading state of Dropdown component (5944d391)
+
+### Documentation
+
+- docs(docs): update documentation and usage guidelines for Chips component (46d09832)
+
+---
+
+## 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

@@ -1451,15 +1451,15 @@ body {
   width: 212px;
 }
 
-.Calendar--date--small {
+.Calendar-date--small {
   height: 248px;
 }
 
-.Calendar--month--small {
+.Calendar-month--small {
   height: 192px;
 }
 
-.Calendar--year--small {
+.Calendar-year--small {
   height: 192px;
 }
 
@@ -1471,15 +1471,15 @@ body {
   width: 316px;
 }
 
-.Calendar--date--large {
+.Calendar-date--large {
   height: 324px;
 }
 
-.Calendar--month--large {
+.Calendar-month--large {
   height: 272px;
 }
 
-.Calendar--year--large {
+.Calendar-year--large {
   height: 272px;
 }
 
@@ -1556,6 +1556,14 @@ body {
   background: var(--primary-lightest);
 }
 
+.Calendar-valueWrapper--inRange .Calendar-inRangeValue:hover {
+  background: var(--primary-lighter);
+}
+
+.Calendar-valueWrapper--inRange .Calendar-inRangeValue:active {
+  background: var(--primary-light);
+}
+
 .Calendar-valueWrapper--inRangeError {
   background: var(--alert-lightest);
 }
@@ -1597,6 +1605,10 @@ body {
 }
 
 .Calendar-value:hover {
+  background: var(--secondary-light);
+}
+
+.Calendar-value:active {
   background: var(--secondary);
 }
 
@@ -1620,19 +1632,30 @@ body {
   background: var(--alert-lightest);
 }
 
-.Calendar-value--currDateMonthYear,
+.Calendar-value--currDateMonthYear {
+  background: var(--primary-lightest);
+}
+
 .Calendar-value--currDateMonthYear:hover {
-  background: var(--primary-lightest) !important;
+  background: var(--primary-lighter);
 }
 
-.Calendar-value--active,
-.Calendar-value--active:hover {
-  background: var(--primary) !important;
+.Calendar-value--currDateMonthYear:active {
+  background: var(--primary-lighter);
+  color: var(--primary-dark);
+}
+
+.Calendar-value--currDateMonthYear:active .Calendar-text {
+  color: var(--primary-dark);
+}
+
+.Calendar-value--active {
+  background: var(--primary);
   font-weight: var(--font-weight-bold);
 }
 
-.Calendar-yearValue,
-.Calendar-monthValue {
+.Calendar-value--active:hover {
+  background: var(--primary-dark);
 }
 
 .Calendar-yearValue--small,
@@ -1647,9 +1670,6 @@ body {
   width: var(--spacing-5);
 }
 
-.Calendar-dateValue {
-}
-
 .Calendar-dateValue--small {
   height: var(--spacing-xl);
   width: var(--spacing-xl);
@@ -1801,8 +1821,6 @@ body {
   display: block;
 }
 
-/* badge */
-
 .Checkbox {
   display: flex;
   -webkit-user-select: none;
@@ -1857,13 +1875,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 +1889,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 +1950,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;
@@ -1954,7 +2030,7 @@ body {
 }
 
 .Chip-icon--left {
-  padding-right: var(--spacing-m);
+  margin-right: var(--spacing-m);
   display: flex;
   align-items: center;
 }
@@ -2058,13 +2134,18 @@ body {
   background: var(--secondary);
 }
 
-.Chip--input:focus-visible {
+.Chip--input:focus-visible,
+.Chip--input:focus {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
   outline: none;
 }
 
+.Chip--input:active {
+  background: var(--secondary-dark);
+}
+
 .Chip-input--disabled {
-  background: var(--secondary-light);
+  background: var(--secondary-lighter);
   border: 0px;
 }
 
@@ -2932,8 +3013,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 +3707,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;
@@ -5745,20 +5830,20 @@ body {
 
 .Switch-input:focus ~ .Switch-wrapper {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper--checked {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background-color: var(--primary);
 }
 
 .Switch-input:hover ~ .Switch-wrapper {
-  background-color: var(--secondary-light);
-  box-shadow: var(--shadow-s);
+  background-color: var(--secondary);
 }
 
 .Switch-input:hover ~ .Switch-wrapper--checked {
   background-color: var(--primary-dark);
-  box-shadow: var(--shadow-s);
 }
 
 .Switch-input:active ~ .Switch-wrapper {
@@ -5786,7 +5871,7 @@ body {
   height: 100%;
   width: 50%;
   background-color: var(--shadow-0);
-  box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
+  box-shadow: var(--shadow-m);
   border-radius: 50%;
   box-sizing: border-box;
   transition-duration: 80ms;
@@ -5808,8 +5893,8 @@ body {
   pointer-events: none;
 }
 
-.Switch-wrapper--disabled:before {
-  background-color: var(--secondary-lightest);
+.Switch-wrapper--disabled {
+  background-color: var(--secondary-lighter);
 }
 
 .Switch-wrapper--checkedDisabled {
@@ -6106,6 +6191,11 @@ body {
 .Toast-icon--right {
   cursor: pointer;
   margin-left: var(--spacing-2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  padding-right: var(--spacing-m);
+  padding-left: var(--spacing-m);
 }
 
 .Toast-icon--info,
@@ -6119,6 +6209,50 @@ body {
   color: var(--warning-darker);
 }
 
+.Toast-close-icon--warning:focus,
+.Toast-close-icon--warning:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(183, 135, 7, 0.16);
+}
+
+.Toast-close-icon--warning:hover,
+.Toast-close-icon--warning:active {
+  background: var(--warning-dark);
+}
+
+.Toast-close-icon--success:focus,
+.Toast-close-icon--success:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
+}
+
+.Toast-close-icon--success:hover,
+.Toast-close-icon--success:active {
+  background: var(--success-dark);
+}
+
+.Toast-close-icon--info:focus,
+.Toast-close-icon--info:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
+}
+
+.Toast-close-icon--info:hover,
+.Toast-close-icon--info:active {
+  background: var(--primary-dark);
+}
+
+.Toast-close-icon--alert:focus,
+.Toast-close-icon--alert:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(156, 40, 40, 0.16);
+}
+
+.Toast-close-icon--alert:hover,
+.Toast-close-icon--alert:active {
+  background: var(--alert-dark);
+}
+
 .Toast-body {
   display: flex;
   flex-direction: column;