@innovaccer/design-system 2.14.0-0 → 2.14.1-1

package/CHANGELOG.md

@@ -1,9 +1,98 @@
+## 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
+
+- feat(sizing): add classes of height and width (c6f8a266)
+- docs(stories): 50% of the stories containing a style tag in example code are refactored to use utility css or custom css.
+- fix(security): fixes done to achieve better secure packages in docs site. (ac4f6ccf)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+-  chore(navigation): deprecate navigation component (b3d39694)
+
+### Features
+
+-  feat(sizing): add classes of height and width (c6f8a266)
+
+### Fixes
+
+-  fix(dropdown): update callback function call on selected value in menu variant (56e94168)
+-  fix(tabs): center alignment of icons in tabs (46cc2be5)
+-  fix(grid): update zIndex of pinned column (53a026cc)
+-  fix(datepicker): update snapshots for current date (ef159f3f)
+
+### Improvements
+
+-  fix(horizontalNav): update active state of selected nav item (3e3dbc6e)
+-  fix(dropdown): update state of dropdown option (4ea89199)
+-  fix(button): update active state of selected button (a663621c)
+-  fix(security): fix vulnerability in docs site (ac4f6ccf)
+-  fix(actions): add test job for docs site after deployment (8d6bbe31)
+-  fix(actions): move test job to release workflow (cb5e102f)
+
+### Documentation
+
+-  docs(docs): update documentation for forms (6d18cf63)
+-  fix(stories): remove all the style tags used in stories and use utility classnames or custom styling through css file. (table, popover, dropdown, metricInput, editableInput, pageHeader, editableDropdown, chipInput, textarea, icon, verticalNav, horizontalNav, fullScreenModal, editableChipInput, placeholderImage, outsideClick, input)  (92c90326), (31c4193b), (5093578c), (31321607), (70cdce77), (a560bf1c), (aa29e6b4), (2ae42136), (0534ba66), (82171633), (e9ab9446), (314bf858), (2741559e), (4c946538), (aa6b63da), (fc9b4892), (bee675c7)
+
+---
+
 ## 2.14.0-0 (2023-01-02)
 
 ### Highlights
 
 - docs(site): tabs on page stick under top navigation bar while scrolling the page, which provides ability to switch tabs quickly. (f00e7669) (0a7bdafc)
-- docs(stories): 50% of the stories containig a style tag in example code are refactored to use utility css or custom css.
+- docs(stories): 50% of the stories containing a style tag in example code are refactored to use utility css or custom css.
 - fix(security): fixes done to achieve better secure packages.
 ### Breaking changes
 
@@ -23,7 +112,7 @@ NA
 - feat(chip): add capability to customize chip labels (d9a55db1)
 
 ### Fixes
-- fix(workflow): remove redundent storybook build stage to reduce pipeline build time on Pull requests. (ba03e645)
+- fix(workflow): remove redundant storybook build stage to reduce pipeline build time on Pull requests. (ba03e645)
 - fix(storybook): fix style of prop table for storybook docs page. (e411d5ec)
 - fix(security): upgrade version of dependencies for security (2e84cfe5)
 - fix(security): actions/check-release-commit/package.json & actions/check-release-commit/package-lock.json to reduce vulnerabilities (b117bbb7)

package/css/dist/index.css

@@ -1410,7 +1410,8 @@ body {
 }
 
 .Button--selected:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
+  color: var(--primary-darker);
 }
 
 .Button--selected:focus {
@@ -1419,7 +1420,7 @@ body {
 }
 
 .Button--selected:focus:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
 }
 
 .Button--selected:disabled {
@@ -1962,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 {
@@ -1982,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;
 }
 
@@ -2037,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);
@@ -2064,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;
@@ -2188,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);
@@ -2201,6 +2230,7 @@ body {
 .Collapsible-body {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .Collapsible-footer {
@@ -2393,7 +2423,13 @@ body {
 }
 
 .Option--selected:active {
-  background-color: var(--primary-light);
+  background-color: var(--primary-lighter);
+  color: var(--primary-darker);
+}
+
+.Option--selected:active .Option-text,
+.Option--selected:active .Option-subInfo {
+  color: var(--primary-darker);
 }
 
 .Option--disabled,
@@ -3077,7 +3113,7 @@ body {
 .Grid--pinned {
   position: absolute;
   height: 100%;
-  z-index: 1002;
+  z-index: 5;
   overflow-x: hidden;
   -ms-overflow-style: none;
   border-right: 3px solid var(--secondary);
@@ -3357,7 +3393,7 @@ body {
 .Grid-cellGroup--pinned {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1001;
+  z-index: 4;
 }
 
 .Grid-cellGroup--pinned-left {
@@ -3618,7 +3654,12 @@ body {
 }
 
 .HorizontalNav-menu--active:active {
-  background-color: var(--primary-light);
+  background-color: var(--primary-lighter);
+  color: var(--primary-darker);
+}
+
+.HorizontalNav-menu--active:active .HorizontalNav-menuText {
+  color: var(--primary-darker);
 }
 
 .HorizontalNav-menuText {
@@ -3977,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);
@@ -5447,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;
@@ -5457,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;
 }
 
@@ -5898,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 */
@@ -6377,7 +6473,7 @@ body {
 }
 
 .VerticalNav--expanded {
-  width: var(--spacing-9);
+  width: 240px;
 }
 
 .VerticalNav-section {
@@ -6399,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 {
@@ -6418,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;
@@ -6447,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;
 }
@@ -6482,6 +6594,7 @@ body {
 
 .MenuItem-count--disabled {
   opacity: 0.6;
+  color: var(--text);
 }
 
 .align-baseline {
@@ -7214,6 +7327,18 @@ body {
   max-width: 100% !important;
 }
 
+.vw-25 {
+  width: 25vw !important;
+}
+
+.vw-50 {
+  width: 50vw !important;
+}
+
+.vw-75 {
+  width: 75vw !important;
+}
+
 .vw-100 {
   width: 100vw !important;
 }
@@ -7246,6 +7371,18 @@ body {
   max-height: 100% !important;
 }
 
+.vh-25 {
+  height: 25vh !important;
+}
+
+.vh-50 {
+  height: 50vh !important;
+}
+
+.vh-75 {
+  height: 75vh !important;
+}
+
 .vh-100 {
   height: 100vh !important;
 }