@innovaccer/design-system 2.14.1-0 → 2.14.1

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 2.14.1-1 (2023-01-22)
+
+### Highlights
+
+NA
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(input): add states of custom icon button in input (4a495e69)
+- feat(chip): add states of custom icon button in chip (91618a30)
+- feat(tabs): add states of custom icon button in tabs (d9c9f1d7)
+
+### Fixes
+
+- fix(dateRangePicker): add support for same start date and end date selection (9b4c3d3b)
+- fix(verticalNav): fix overlap of scrollbar on verticalNav (0e7a64f2)
+- fix(collapsible): update width for collapsible component (1c34ba4d)
+
+### Improvements
+
+- fix(verticalNav): update state of selected nav item (8096a27e)
+- fix(chip): update states for chip component (ed42215b)
+- fix(slider): update slider states (19ba41c1)
+
+### Documentation
+
+- docs(slider): update images for slider (d03f8980)
+
+---
+
 ## 2.14.1-0 (2023-01-18)
 
 ### Highlights

package/css/dist/index.css

@@ -1963,17 +1963,17 @@ body {
   margin-left: var(--spacing-m);
   display: flex;
   align-items: center;
+  border-radius: 10px;
 }
 
 .Chip--action {
-  background: var(--white);
-  border: var(--border);
+  background: var(--secondary-light);
+  border: 0px;
   cursor: pointer;
 }
 
 .Chip--action:hover {
-  background: var(--secondary-light);
-  border-color: var(--secondary-dark);
+  background: var(--secondary);
 }
 
 .Chip--action:focus-visible {
@@ -1983,12 +1983,12 @@ body {
 
 .Chip--action:active {
   background: var(--secondary-dark);
-  border-color: var(--inverse-lightest);
 }
 
 .Chip-action--disabled {
-  background: var(--secondary-lightest);
-  border: var(--border);
+  background: var(--secondary-lighter);
+  border: 0px;
+  outline: none;
   cursor: default;
 }
 
@@ -2038,6 +2038,11 @@ body {
   border-color: var(--primary-dark);
 }
 
+.Chip-selection--selected:active .Chip-icon,
+.Chip-selection--selected:active .Chip-text {
+  color: var(--primary-darker);
+}
+
 .Chip-selection--selectedDisabled {
   background: var(--primary-lightest);
   border-color: var(--primary-lighter);
@@ -2065,15 +2070,38 @@ body {
 
 .Chip-icon--right:focus-visible {
   outline: var(--spacing-s) solid var(--secondary-shadow);
+}
+
+.Chip-icon--right:hover {
+  background-color: var(--secondary);
+}
+
+.Chip-icon--right:active {
+  background-color: var(--secondary-dark);
+}
+
+.Chip-icon-disabled--right {
+  pointer-events: none;
+}
+
+.Chip-icon--selected {
   border-radius: 10px;
 }
 
 .Chip-icon--selected:focus-visible {
   outline: var(--spacing-s) solid var(--primary-shadow);
-  border-radius: 10px;
+}
+
+.Chip-icon--selected:hover {
+  background-color: var(--primary-lighter);
+}
+
+.Chip-icon--selected:active {
+  background-color: var(--primary-light);
 }
 
 .Chip-selection--disabled:focus-visible,
+.Chip-icon-disabled--right:focus-visible,
 .Chip-selection--selectedDisabled:focus-visible,
 .Chip-input--disabled:focus-visible {
   outline: none;
@@ -2189,7 +2217,7 @@ body {
   display: inline-flex;
   flex-direction: column;
   background-color: var(--secondary-lightest);
-  width: 40px;
+  width: var(--spacing-4);
   height: 100%;
   transition: width 240ms;
   transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
@@ -2202,6 +2230,7 @@ body {
 .Collapsible-body {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .Collapsible-footer {
@@ -3989,16 +4018,37 @@ body {
   color: var(--inverse-lighter);
 }
 
-.Input-icon--right .Icon {
+.Input-icon--right {
   cursor: pointer;
-  margin-left: var(--spacing);
   color: var(--inverse-lighter);
+  border-radius: 10px;
+}
+
+.Input-iconWrapper--right:focus-visible .Input-icon--right {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
+}
+
+.Input-icon--right:focus-visible {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
+  border-radius: 10px;
+}
+
+.Input-iconWrapper--right:hover .Input-icon--right {
+  background-color: var(--secondary);
+}
+
+.Input-iconWrapper--right:active .Input-icon--right {
+  background-color: var(--secondary-dark);
 }
 
 .Input-inlineLabel {
   margin-right: var(--spacing);
 }
 
+.Input-iconWrapper--right:focus-visible {
+  outline: none;
+}
+
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
@@ -5459,6 +5509,7 @@ body {
   top: 0;
   border-radius: 50%;
   background-color: var(--white);
+  border: var(--spacing-s) solid var(--primary);
   box-shadow: var(--shadow-s);
   cursor: pointer;
   box-sizing: border-box;
@@ -5469,18 +5520,25 @@ body {
 }
 
 .Slider-handle:hover {
-  background-color: var(--secondary-lightest);
-  border: var(--border);
+  background-color: var(--primary-lightest);
 }
 
-.Slider-handle:focus,
 .Slider-handle:active {
-  border: var(--spacing-s) solid var(--primary);
+  background-color: var(--primary);
+}
+
+.Slider-handle:focus {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: none;
 }
 
 .Slider-handle--disabled {
   pointer-events: none;
-  background-color: var(--secondary-light);
+  background-color: var(--secondary-lighter);
+  box-shadow: none;
+}
+
+.Slider-handle--disabled:focus {
   box-shadow: none;
 }
 
@@ -5910,8 +5968,34 @@ body {
 }
 
 .DismissibleTab-icon--right {
-  padding-left: var(--spacing-m);
-  padding-top: var(--spacing-s);
+  padding: var(--spacing-s);
+  margin-left: var(--spacing-s);
+  outline: none;
+  border-radius: 10px;
+}
+
+.DismissibleTab-icon--default:focus-visible {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
+}
+
+.DismissibleTab-icon--default:hover {
+  background-color: var(--secondary);
+}
+
+.DismissibleTab-icon--default:active {
+  background-color: var(--secondary-dark);
+}
+
+.DismissibleTab-icon--selected:focus-visible {
+  outline: var(--spacing-s) solid var(--primary-shadow);
+}
+
+.DismissibleTab-icon--selected:hover {
+  background-color: var(--primary-lighter);
+}
+
+.DismissibleTab-icon--selected:active {
+  background-color: var(--primary-light);
 }
 
 /* Textarea */
@@ -6389,7 +6473,7 @@ body {
 }
 
 .VerticalNav--expanded {
-  width: var(--spacing-9);
+  width: 240px;
 }
 
 .VerticalNav-section {
@@ -6411,7 +6495,7 @@ body {
   align-items: center;
   cursor: pointer;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
-  width: var(--spacing-9);
+  width: 232px;
 }
 
 .MenuItem--horizontal {
@@ -6430,8 +6514,8 @@ body {
 .MenuItem--collapsed {
   height: 28px;
   width: 28px;
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: 10px;
+  margin-right: 10px;
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
@@ -6459,17 +6543,33 @@ body {
   background: var(--secondary-dark);
 }
 
-.MenuItem:focus-visible {
+.MenuItem:focus {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
   outline: none;
 }
 
-.MenuItem--active,
-.MenuItem--active:hover {
+.MenuItem--disabled:focus {
+  box-shadow: none;
+}
+
+.MenuItem--active {
   background: var(--primary-lightest);
 }
 
-.MenuItem--active:focus-visible {
+.MenuItem--active:hover {
+  background: var(--primary-lighter);
+}
+
+.MenuItem--active:active {
+  background: var(--primary-lighter);
+  color: var(--primary-darker);
+}
+
+.MenuItem--active:active .MenuItem-Text {
+  color: var(--primary-darker);
+}
+
+.MenuItem--active:focus {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
   outline: none;
 }
@@ -6494,6 +6594,7 @@ body {
 
 .MenuItem-count--disabled {
   opacity: 0.6;
+  color: var(--text);
 }
 
 .align-baseline {