@innovaccer/design-system 2.16.2 → 2.18.0

package/CHANGELOG.md

@@ -1,3 +1,89 @@
+## 2.18.0 (2023-08-08)
+
+### Highlights
+
+- feat(chip): add label prefix prop for custom label (3bce8c32)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(chip): add label prefix prop for custom label (3bce8c32)
+
+### Fixes
+
+- fix(avatar): update mouse pointer cursor to default on hover on avatar (a58add0a)
+- fix(table): add limit to call nested row renderer function (7f3e0aba) 
+- fix(label): fix overflow behaviour of label with required indicator (f4ad093f)
+- fix(toast): update description overflow behaviour (aee04fa3)
+- fix(calendar): fix height of calendar and datepicker (78dcd91a)
+- fix(inputmask): update action icon states (c1b23ff1)
+- fix(chipinput): update horizontal-vertical spacing and action icon state (8d1d37e4)
+- fix(editableinput): replace text with inline message inside error popover (3ba15748)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(docs): update size of calendar and datepicker in docs (84c18281)
+
+---
+
+## 2.17.0 (2023-07-24)
+
+### Highlights
+
+- feat(radio): add keyboard accessibility for radio component (f78b2e12) 
+- feat(docs): add Algolia doc search support on documentation site (e5d8fb76)
+- feat(stories): stories are grouped in storybook and mdx file (01477a4d)
+- feat(avatargroup): add tiny size in avatar group (459739fc)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(radio): add keyboard accessibility for radio component (f78b2e12) 
+- feat(docs): add Algolia doc search support on documentation site (e5d8fb76)
+- feat(stories): stories are grouped in storybook and mdx file (01477a4d)
+- feat(avatargroup): add tiny size in avatar group (459739fc)
+
+### Fixes
+
+- fix(checkbox): update font weight in tiny checkbox component (4e85e984)
+- fix(docs): fix live preview width in documentation site (092d2cc8)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(badge): update documentation for hover on badge component (59b1cad2)
+
+---
+
 ## 2.16.1 (2023-07-12)
 
 ### Highlights

package/css/dist/index.css

@@ -699,6 +699,7 @@ body {
 .Label-text {
   line-height: var(--font-height-s);
   font-weight: var(--font-weight-medium);
+  word-break: break-all;
 }
 
 .Label-optionalText {
@@ -716,6 +717,8 @@ body {
   border-radius: 50%;
   background: var(--alert);
   margin-left: var(--spacing-m);
+  margin-bottom: 6px;
+  display: inline-flex;
 }
 
 /* Caption */
@@ -871,7 +874,7 @@ body {
   overflow: hidden;
   text-transform: uppercase;
   border-radius: 50%;
-  cursor: pointer;
+  cursor: default;
 }
 
 .Avatar--regular {
@@ -950,7 +953,15 @@ body {
 }
 
 .AvatarGroup-item {
-  margin-right: calc((var(--spacing-s) + var(--spacing-m)) * -1);
+  border-radius: 50%;
+}
+
+.AvatarGroup-item--regular {
+  margin-right: calc(var(--spacing-m) * -1);
+}
+
+.AvatarGroup-item--tiny {
+  margin-right: calc(var(--spacing-s) * -1);
 }
 
 .AvatarGroup-Popper {
@@ -971,6 +982,10 @@ body {
   overflow-y: auto;
 }
 
+.AvatarCount-wrapper {
+  border-radius: 50%;
+}
+
 @-webkit-keyframes backdrop-open {
   from {
     opacity: 0;
@@ -1490,11 +1505,11 @@ body {
 }
 
 .Calendar-month--small {
-  height: 192px;
+  height: 200px;
 }
 
 .Calendar-year--small {
-  height: 192px;
+  height: 200px;
 }
 
 .Calendar--large {
@@ -1510,7 +1525,7 @@ body {
 }
 
 .Calendar-month--large {
-  height: 272px;
+  height: 276px;
 }
 
 .Calendar-year--large {
@@ -1530,7 +1545,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--spacing-m);
+  padding-bottom: var(--spacing);
 }
 
 .Calendar-headerIcon {
@@ -1569,7 +1584,7 @@ body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .Calendar-valueRow {
@@ -2261,28 +2276,23 @@ body {
 }
 
 .ChipInput {
-  box-sizing: border-box;
   display: flex;
   border-radius: var(--spacing-m);
-  border: var(--border);
-  padding-left: var(--spacing-s);
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary);
+  padding-left: 10px;
+  padding-right: 10px;
   background: var(--white);
   cursor: text;
   flex: 100%;
 }
 
-.ChipInput-wrapper {
-  display: flex;
-  flex: 100%;
-  align-items: center;
-  flex-wrap: wrap;
+.ChipInput:focus,
+.ChipInput:focus-visible {
+  outline: var(--spacing-xs) var(--primary);
 }
 
 .ChipInput:focus-within {
-  border-color: var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);
 }
 
 .ChipInput--disabled {
@@ -2291,6 +2301,22 @@ body {
   pointer-events: none;
 }
 
+.ChipInput--withChips {
+  padding-right: var(--spacing);
+}
+
+.ChipInput-wrapper {
+  display: flex;
+  flex: 100%;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.ChipInput-border:focus-within {
+  border-radius: var(--spacing-m);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
 .ChipInput-input {
   border: none;
   outline: none;
@@ -2300,19 +2326,32 @@ body {
   flex: 0px;
   box-sizing: border-box;
   height: var(--spacing-xl);
-  margin-top: var(--spacing-s);
-  margin-bottom: var(--spacing-s);
-  padding-left: var(--spacing-m);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
   font-family: var(--font-family);
   font-size: var(--font-size);
 }
 
 .ChipInput-icon {
   height: var(--spacing-2);
-  margin-top: var(--spacing-m);
-  padding-top: var(--spacing-s);
-  margin-right: var(--spacing-l);
+  padding: var(--spacing-s);
+  margin-left: var(--spacing);
+  margin-top: 6px;
   cursor: pointer;
+  border-radius: 10px;
+}
+
+.ChipInput-icon:hover {
+  background-color: var(--secondary);
+}
+
+.ChipInput-icon:active {
+  background-color: var(--secondary-dark);
+}
+
+.ChipInput-icon:focus,
+.ChipInput-icon:focus-visible {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
 }
 
 .ChoiceList {
@@ -5504,22 +5543,24 @@ body {
   border-color: var(--alert-darker);
 }
 
-.Radio-input ~ .Radio-wrapper:focus {
+.Radio:focus-within .Radio-wrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  border-radius: 50%;
 }
 
-.Radio-input ~ .Radio-errorWrapper:focus {
+.Radio:focus-within .Radio-errorWrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-radius: 50%;
 }
 
-.Radio-input:checked ~ .Radio-wrapper:focus {
+.Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
-.Radio-input:checked ~ .Radio-errorWrapper:focus {
+.Radio:focus-within .Radio-input:checked ~ .Radio-errorWrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
@@ -6467,7 +6508,7 @@ body {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-
+  word-break: break-word;
   width: 360px;
   border-radius: var(--spacing-m);
   padding-left: var(--spacing-2);