@innovaccer/design-system 2.16.0-0 → 2.16.0

package/CHANGELOG.md

@@ -1,3 +1,106 @@
+## 2.16.0 (2023-06-15)
+
+### Highlights
+
+- feat(linkButton): add new link button component (3de23b6e)
+- feat(progressBar): add small size variant in progress bar (9f9e77d4)
+- fix(switch): deprecate large size variant (8a85def2)
+- fix(spinner): deprecate appearances for spinner (0139c2e0)
+- fix(inlineMessage): fix story & deprecate default appearance (e3ad0741)
+- feat(metalist): add size prop for metalist component (4888de49)
+- feat(tabs): add prop for tab header custom classname (fe54da87)
+- feat(label): add info icon in label component (8b39db3)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+- fix(switch): deprecate large size variant (8a85def2)
+- fix(spinner): deprecate appearances for spinner (0139c2e0)
+- fix(inlineMessage): fix story & deprecate default appearance (e3ad0741)
+
+### Features
+
+- feat(linkButton): add new link button component (3de23b6e)
+- feat(progressBar): add small size variant in progress bar (9f9e77d4)
+- feat(metalist): add size prop for metalist component (4888de49)
+- feat(tabs): add prop for tab header custom classname (fe54da87)
+- feat(label): add info icon in label component (8b39db3)
+
+### Fixes
+
+- fix(button): fix text overflow behaviour in button (cf3c5185)
+- fix(toast): fix spacing and stories of toast component (c549647e)
+- fix(inputmask): update placeholder and helptext (35e92647)
+- fix(placeholder): fix border radius and stories (433967e1)
+- fix(pagination): add debounce for entering page (cc2a60e3)
+- fix(modal): update modal footer top and bottom padding (7bdb008a)
+- fix(metalist): update default color to subtle of meta icon (1b6ef7c0)
+- fix(multislider): update design for slider & rangeslider (276342b2)
+- fix(multislider): update border-radius of progress bar (276342b2)
+- fix(multislider): add precision to label in tooltip (276342b2)
+- fix(multislider): update color for disabled progress bar (276342b2)
+- fix(fullscreenModal): update padding for header,body and footer (5f436576)
+- fix(fullscreenModal): fix spacing between overlayHeader buttons (5f436576)
+- fix(fullscreenModal): replace keyboard_backspace icon with arrow_back icon inside overlayHeader back button (5f436576)
+- fix(tab): update focus state for inactive tabs (3250124c)
+- fix(modal): update backdropClose and closeOnEscape functionality (493cc3bf)
+- fix(EditableInput): fix icon size for action button (b54020ca)
+- fix(choiceList): fix proptable and add className (b4572e98)
+- fix(choiceList): update spacing between label and options in choicelist (c7cd2118)
+- fix(sidesheet): update backdropClose and closeOnEscape functionality (6d6bc53c)
+- fix(table): fix onSearch event trigger for error prop (c9e4c15b)
+- fix(overlayHeader): update icon size in back button (79155c18)
+- fix(tooltip): update tooltip padding, animation and opacity (cf6667f3)
+- fix(chipInput): prevent chip input text from transform to lowercase (73888d2e)
+- fix(dropzone): fix background for disabled state (1df198d)
+- fix(calendar): update active state of selected date (4cd082a)
+- fix(horizontalNav): update text weight and focus state and stories (2174da0)
+- fix(label): update icon size and stories (6a7425e)
+
+### Improvements
+
+- fix(docpage): update docpage code preview component for height and showhide issues (791c86b7)
+- fix(storybook): fix spacing for storybook live preview (24ab023a)
+- fix(badge): update stories for badge component (eb1b2d23)
+- fix(button): fix stories for button component (d21a82f8)
+- fix(card): update stories for card component (adc90007)
+- fix(divider): update stories for divider component (b35defed)
+- fix(heading): fix stories for heading component (7f9bc254)
+- fix(text): fix stories for text component (42b284a8)
+- fix(paragraph): update stories for paragraph component (cd421f8a)
+- fix(subheading): update stories for subheading component (a301e3c7)
+- fix(pill): update stories for pill component (54efe651)
+- fix(spinner): update stories for spinner (e22026f9)
+- fix(progressRing): update stories for progress ring component (9ad18cba)
+- fix(pageheader): update pageheader stories (be1ce558)
+- fix(editableDropdown): update border-radius inside customRenderer story (387d9cae)
+- fix(message): update stories for message component (49a78dd3)
+- fix(modal): update modal stories (46ac7d8b)
+- fix(pagination): update pagination stories (d96582b4)
+- fix(metricInput): update metricInput stories (b8390eda)
+- fix(icon): update icon stories (74cf97dd)
+- fix(statusHint): update stories for status hint component (810cf87b)
+- fix(checkbox): update story contents and their groups (029c0f56)
+- fix(fullscreenModal): update stories (5f436576)
+- fix(calendar): fix calendar stories (bdb2a76)
+- fix(switch): fix stories for switch component (13fcc71)
+
+### Documentation
+
+- docs(docs): update hyperlink in mobile foundations tab (b213481b)
+- docs(docs): update interactions in dropdown component (610a263c)
+- docs(linkButton): add documentation of link button (33a2b7e7)
+- docs(docs): update image in link button component (58d16d6d)
+
+---
+
 ## 2.15.4 (2023-04-24)
 
 ### Highlights

package/css/dist/index.css

@@ -703,7 +703,7 @@ body {
 
 .Label-optionalText {
   line-height: var(--font-height-s);
-  margin-left: var(--spacing-s);
+  margin-left: var(--spacing-m);
 }
 
 .Label--disabled {
@@ -711,8 +711,8 @@ body {
 }
 
 .Label-requiredIndicator {
-  height: var(--spacing-m);
-  width: var(--spacing-m);
+  height: 6px;
+  width: 6px;
   border-radius: 50%;
   background: var(--alert);
   margin-left: var(--spacing-m);
@@ -1656,11 +1656,6 @@ body {
 
 .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 {
@@ -1672,6 +1667,10 @@ body {
   background: var(--primary-dark);
 }
 
+.Calendar-value--active:active {
+  background: var(--primary-darker);
+}
+
 .Calendar-yearValue--small,
 .Calendar-monthValue--small {
   height: var(--spacing-xl);
@@ -2295,11 +2294,11 @@ body {
 }
 
 .ChoiceList-checkbox--vertical {
-  margin-top: var(--spacing);
+  margin-top: var(--spacing-m);
 }
 
 .ChoiceList-radio--vertical {
-  margin-top: var(--spacing);
+  margin-top: var(--spacing-m);
 }
 
 .ChoiceList--alignHorizontal {
@@ -2778,7 +2777,6 @@ body {
 }
 
 .Dropzone--disabled {
-  background: var(--secondary-lightest);
   background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
     linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
@@ -3175,17 +3173,17 @@ body {
   justify-content: flex-start;
   padding-top: var(--spacing-l);
   padding-bottom: var(--spacing-l);
-  padding-right: var(--spacing-2);
+  padding-right: var(--spacing-l);
 }
 
 .FullscreenModal-footer {
   justify-content: flex-end;
-  padding-top: var(--spacing-xl);
-  padding-bottom: var(--spacing-xl);
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
 }
 
 .FullscreenModal-body {
-  padding: var(--spacing) var(--spacing-xl);
+  padding: var(--spacing-2) var(--spacing-xl);
 }
 
 /** Grid **/
@@ -3737,11 +3735,13 @@ body {
   pointer-events: none;
 }
 
-.HorizontalNav-menu--disabled:focus-visible {
+.HorizontalNav-menu--disabled:focus-visible,
+.HorizontalNav-menu--disabled:focus {
   outline: none;
 }
 
-.HorizontalNav-menu--default:focus-visible {
+.HorizontalNav-menu--default:focus-visible,
+.HorizontalNav-menu--default:focus {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
   outline: none;
 }
@@ -3758,7 +3758,8 @@ body {
   background-color: var(--primary-lightest);
 }
 
-.HorizontalNav-menu--active:focus-visible {
+.HorizontalNav-menu--active:focus-visible,
+.HorizontalNav-menu--active:focus {
   background-color: var(--primary-lightest);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
   outline: none;
@@ -4707,7 +4708,8 @@ body {
 }
 
 .Modal-footer {
-  height: 80px;
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
@@ -5670,6 +5672,7 @@ body {
   background: var(--secondary-lighter);
   height: var(--spacing-s);
   box-sizing: border-box;
+  border-radius: var(--spacing-s);
 }
 
 .Slider-progress--inRange {
@@ -5677,7 +5680,6 @@ body {
 }
 
 .Slider-progress--inRangeDisabled {
-  background: var(--secondary-light);
   border: var(--border);
 }
 
@@ -6081,8 +6083,6 @@ body {
   cursor: pointer;
   min-width: 40px;
   padding: var(--spacing-l);
-  margin-left: calc(-1 * var(--spacing-l));
-  margin-right: var(--spacing-l);
   margin-bottom: calc(-1 * var(--spacing-xs));
   text-align: center;
 }
@@ -6489,10 +6489,10 @@ body {
 
 .Tooltip {
   max-width: var(--spacing-9);
-  padding: var(--spacing) var(--spacing-2);
+  padding: var(--spacing-m) var(--spacing);
   border-radius: var(--spacing-m);
   z-index: 500;
-  background: var(--inverse);
+  background: rgba(47, 47, 47, 0.88);
   overflow: hidden;
   box-sizing: border-box;
   transition: opacity 120ms;
@@ -6560,41 +6560,41 @@ body {
 }
 @-webkit-keyframes tooltip-open-bottom {
   from {
-    top: 0px;
+    top: -4px;
     opacity: 0;
   }
   to {
-    top: 4px;
+    top: 0px;
     opacity: 1;
   }
 }
 @keyframes tooltip-open-bottom {
   from {
-    top: 0px;
+    top: -4px;
     opacity: 0;
   }
   to {
-    top: 4px;
+    top: 0px;
     opacity: 1;
   }
 }
 @-webkit-keyframes tooltip-close-bottom {
   from {
-    top: 4px;
+    top: 0px;
     opacity: 1;
   }
   to {
-    top: 0px;
+    top: -4px;
     opacity: 0;
   }
 }
 @keyframes tooltip-close-bottom {
   from {
-    top: 4px;
+    top: 0px;
     opacity: 1;
   }
   to {
-    top: 0px;
+    top: -4px;
     opacity: 0;
   }
 }
@@ -6612,42 +6612,42 @@ body {
 
 @-webkit-keyframes tooltip-open-left {
   from {
-    left: 0px;
+    left: 1px;
     opacity: 0;
   }
   to {
-    left: -4px;
+    left: -3px;
     opacity: 1;
   }
 }
 
 @keyframes tooltip-open-left {
   from {
-    left: 0px;
+    left: 1px;
     opacity: 0;
   }
   to {
-    left: -4px;
+    left: -3px;
     opacity: 1;
   }
 }
 @-webkit-keyframes tooltip-close-left {
   from {
-    left: -4px;
+    left: -3px;
     opacity: 1;
   }
   to {
-    left: 0px;
+    left: 1px;
     opacity: 0;
   }
 }
 @keyframes tooltip-close-left {
   from {
-    left: -4px;
+    left: -3px;
     opacity: 1;
   }
   to {
-    left: 0px;
+    left: 1px;
     opacity: 0;
   }
 }
@@ -6665,42 +6665,42 @@ body {
 
 @-webkit-keyframes tooltip-open-right {
   from {
-    left: 0px;
+    left: -3px;
     opacity: 0;
   }
   to {
-    left: 4px;
+    left: 1px;
     opacity: 1;
   }
 }
 
 @keyframes tooltip-open-right {
   from {
-    left: 0px;
+    left: -3px;
     opacity: 0;
   }
   to {
-    left: 4px;
+    left: 1px;
     opacity: 1;
   }
 }
 @-webkit-keyframes tooltip-close-right {
   from {
-    left: 4px;
+    left: 1px;
     opacity: 1;
   }
   to {
-    left: 0px;
+    left: -3px;
     opacity: 0;
   }
 }
 @keyframes tooltip-close-right {
   from {
-    left: 4px;
+    left: 1px;
     opacity: 1;
   }
   to {
-    left: 0px;
+    left: -3px;
     opacity: 0;
   }
 }