@innovaccer/design-system 2.14.2-0 → 2.15.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## 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

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);
@@ -2010,7 +2030,7 @@ body {
 }
 
 .Chip-icon--left {
-  padding-right: var(--spacing-m);
+  margin-right: var(--spacing-m);
   display: flex;
   align-items: center;
 }
@@ -2114,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;
 }
 
@@ -5805,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 {
@@ -5846,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;
@@ -5868,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 {
@@ -6166,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,
@@ -6179,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;