@innovaccer/design-system 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+## 3.4.0 (2024-11-18)
+
+### Highlights
+
+- feat(progressBar): update small size from 2px to 4px (c5ed8a80)
+- feat(progressRing): add large size support in progress ring component (2da8320b)
+- feat(spinner): add extra small size for spinner (16ab49ff)
+- feat(scrollbar): update scrollbar state (ca53ef74)
+- feat(spinner): add secondary and white appearances (c1730ed5)
+- feat(spinner): update figma code connect for extra small size of spinner (e4bdbb0f)
+
+### Breaking changes
+
+- feat(progressBar): update small size from 2px to 4px (c5ed8a80)
+- feat(scrollbar): update scrollbar state (ca53ef74)
+- Revert "fix(table): fix selection state of resource table" (fc4f1739)
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(progressBar): update small size from 2px to 4px (c5ed8a80)
+- feat(progressRing): add large size support in progress ring component (2da8320b)
+- feat(spinner): add extra small size for spinner (16ab49ff)
+- feat(scrollbar): update scrollbar state (ca53ef74)
+- feat(spinner): add secondary and white appearances (c1730ed5)
+- feat(spinner): update figma code connect for extra small size of spinner (e4bdbb0f)
+
+### Fixes
+
+- fix(docs): update active state for leftnav menu item (c07b00a3)
+- fix(docs): synchronize active tab state with URL to prevent mismatch after navigation (c5bd00d8)
+- Revert "fix(table): fix selection state of resource table" (fc4f1739)
+
+### Improvements
+
+- fix(modal): update story of Modal component and replace Dropdown with Select component (60c93bb8)
+- fix(Table): update stories of Resource table component and replace Dropdown with Menu component (95775d34)
+- fix(HorizontalNav): update stories of HorizontalNav component and replace Dropdown with Select component (e6b9cfb8)
+- fix(pageheader): replace dropdown with Menu component in Pageheader stories (dad8ae1d)
+- chore: remove jira automation workflow for github issues (6b5ebb8e)
+
+### Documentation
+
+- docs(docs): update progress indicator documentation (2788f9d5)
+
+---
+
 ## 3.3.0 (2024-11-04)
 
 ### Highlights

package/css/dist/index.css

@@ -705,14 +705,26 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: var(--spacing-2);
+  width: 16px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border: var(--spacing-s) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
+  background: #c5c5c5;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a6a6a6;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #707070;
+  border: 2px solid transparent;
+  background-clip: content-box;
 }
 
 .Legend {
@@ -741,7 +753,7 @@ body {
 }
 
 .ProgressBar-indicator--small {
-  height: var(--spacing-s);
+  height: var(--spacing-m);
 }
 
 .ProgressBar-indicator--regular {
@@ -1511,16 +1523,6 @@ body {
   z-index: 1;
 }
 
-.Button--tiny .Spinner--small {
-  height: var(--font-size-s);
-  width: var(--font-size-s);
-}
-
-.Button--large .Spinner--small {
-  height: var(--font-size-l);
-  width: var(--font-size-l);
-}
-
 .Button--selected {
   background: var(--primary-lightest);
   color: var(--primary-dark);
@@ -3457,6 +3459,15 @@ body {
   padding: var(--spacing-2) var(--spacing-xl);
 }
 
+/** Grid **/
+
+.Grid-wrapper {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
 .Grid {
   display: flex;
   flex-direction: column;
@@ -3466,11 +3477,20 @@ body {
   background: var(--white);
 }
 
-.Grid-wrapper {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  height: 100%;
+.Grid--resource .Grid-row--body:hover,
+.Grid--resource .Grid-row--body:hover .Grid-cellGroup {
+  cursor: pointer;
+  background: var(--secondary-lightest);
+}
+
+.Grid--resource .Grid-row--body:active,
+.Grid--resource .Grid-row--body:active .Grid-cellGroup {
+  background: var(--secondary-lighter);
+}
+
+.Grid--resource .Grid-row--body:focus {
+  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
+  outline: none;
 }
 
 .Grid--pinned {
@@ -3573,6 +3593,42 @@ body {
   border-bottom: var(--border);
 }
 
+.Grid-row {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: var(--white);
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+  transition-delay: var(--duration--fast-01);
+}
+
+.Grid-row--body {
+  border-color: var(--secondary-light);
+}
+
+.Grid-row--selected,
+.Grid-row--selected .Grid-cellGroup {
+  background: rgba(220, 236, 249, 0.48);
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+}
+
+.Grid-row--selected:hover,
+.Grid-row--selected .Grid-cellGroup:hover {
+  background: rgba(151, 197, 240, 0.48) !important;
+}
+
+.Grid-row--selected:active,
+.Grid-row--selected .Grid-cellGroup:active {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus,
+.Grid-row--selected .Grid-cellGroup:focus {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
+}
+
 .Grid-rowWrapper:last-child .Grid-row--body {
   border-bottom: 0;
 }
@@ -3644,6 +3700,15 @@ body {
   border-left: none;
 }
 
+/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
+    border-right: var(--border);
+} */
+
+.Grid-row--disabled {
+  opacity: var(--opacity-10);
+  pointer-events: none;
+}
+
 .Grid-cell--head.Grid-cell--selected {
   background: var(--primary-light);
 }
@@ -3658,15 +3723,6 @@ body {
   overflow: visible !important;
 }
 
-.Grid-cell--separator {
-  border-left: var(--border);
-  border-color: var(--secondary-light);
-}
-
-.Grid-cell--selected {
-  background: var(--primary-lightest);
-}
-
 .Grid-sortingIcons {
   display: flex;
   align-items: center;
@@ -3728,6 +3784,7 @@ body {
 .Grid-cellGroup {
   display: flex;
   box-sizing: border-box;
+  background: var(--white);
 }
 
 .Grid-cellGroup--pinned {
@@ -3737,10 +3794,48 @@ body {
 
 .Grid-cellGroup--pinned-left {
   left: 0;
+  border-style: inset;
+  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right-width: 4px;
+  -o-border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
 }
 
 .Grid-cellGroup--pinned-right {
   right: 0;
+  border-style: inset;
+  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left-width: 4px;
+  -o-border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
 }
 
 .Grid .Checkbox-wrapper {
@@ -3757,11 +3852,13 @@ body {
 }
 
 .GridCell--align-left {
+  /* flex-direction: row; */
   justify-content: flex-start;
   text-align: left;
 }
 
 .GridCell--align-right {
+  /* flex-direction: row-reverse; */
   justify-content: flex-end;
   text-align: right;
 }
@@ -3832,6 +3929,20 @@ body {
   margin-left: 0;
 }
 
+/* .GridCell-image {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing);
+}
+
+.Image {
+    z-index: 0;
+    height: 100%;
+    width: 100%;
+} */
+
 /** Header **/
 
 /** Table-header **/
@@ -3899,188 +4010,6 @@ body {
   margin-bottom: var(--spacing-2);
 }
 
-/* Grid row */
-
-.Grid-row--disabled {
-  opacity: var(--opacity-10);
-  pointer-events: none;
-}
-
-.Grid-row {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  background: var(--white);
-}
-
-.Grid-row--body {
-  border-color: var(--secondary-light);
-}
-
-.Grid--resource .Grid-row--body:hover {
-  cursor: pointer;
-  background: var(--secondary-lightest);
-}
-
-.Grid--resource .Grid-row--body:active {
-  background: var(--secondary-lighter);
-}
-
-.Grid--resource .Grid-row--body:focus {
-  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
-  outline: none;
-}
-
-/* Selected States */
-
-.Grid-row--selected {
-  background: rgba(220, 236, 249, 0.48);
-}
-
-.Grid-row--selected:hover {
-  background: rgba(151, 197, 240, 0.48) !important;
-}
-
-.Grid-row--selected:active {
-  background: var(--primary-lighter) !important;
-}
-
-.Grid-row--selected:focus {
-  outline: none;
-  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
-}
-
-/* Pinned Columns Default State */
-
-.Grid--resource .Grid-row--body:hover .Grid-cellWrapper--pinned {
-  cursor: pointer;
-  background: var(--secondary-lightest);
-}
-
-.Grid--resource .Grid-row--body:active .Grid-cellWrapper--pinned {
-  background: var(--secondary-lighter);
-}
-
-.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
-  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
-  outline: none;
-}
-
-/* Pinned Columns Selected State */
-
-.Grid-row--selected .Grid-cellWrapper--pinned {
-  background: rgba(220, 236, 249, 0.48);
-}
-
-.Grid-row--selected:hover .Grid-cellWrapper--pinned {
-  background: rgba(151, 197, 240, 0.48) !important;
-}
-
-.Grid-row--selected:active .Grid-cellWrapper--pinned {
-  background: var(--primary-lighter) !important;
-}
-
-.Grid-row--selected:focus .Grid-cellWrapper--pinned {
-  outline: none;
-  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
-}
-
-/* Grid header */
-.Grid-row--head .Grid-cellGroup--pinned {
-  background: var(--white);
-}
-
-.Grid-row--head .Grid-cellGroup--pinned-left {
-  border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
-  -o-border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-}
-
-.Grid-row--head .Grid-cellGroup--pinned-right {
-  border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
-  -o-border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-}
-
-/* Pinned Column Border */
-
-.Grid-cellWrapper--pinned-left {
-  border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
-  -o-border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-}
-
-.Grid-cellWrapper--pinned-right {
-  border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
-  -o-border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-}
-
 .HorizontalNav {
   display: flex;
 }
@@ -5769,14 +5698,19 @@ body {
   transform: rotate(-90deg);
 }
 
+.Ring--small {
+  height: var(--spacing-2);
+  width: var(--spacing-2);
+}
+
 .Ring--regular {
   height: var(--spacing-3);
   width: var(--spacing-3);
 }
 
-.Ring--small {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
+.Ring--large {
+  height: var(--spacing-4);
+  width: var(--spacing-4);
 }
 
 .Ring Circle {
@@ -6505,6 +6439,11 @@ body {
   animation: rotate 2s linear infinite;
 }
 
+.Spinner--xsmall {
+  height: var(--spacing-l);
+  width: var(--spacing-l);
+}
+
 .Spinner--small {
   height: var(--spacing-2);
   width: var(--spacing-2);
@@ -6532,11 +6471,11 @@ body {
 }
 
 .Circle--secondary {
-  stroke: var(--primary);
+  stroke: var(--secondary-dark);
 }
 
 .Circle--white {
-  stroke: var(--primary);
+  stroke: var(--white);
 }
 
 .StatusHint {