@innovaccer/design-system 2.17.0 → 2.19.0

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+## 2.19.0 (2023-08-25)
+
+### Highlights
+
+- style(text): add text alignment css classes (f64a919)
+- feat(timepicker): add error state support for timepicker (9b1078a5)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- style(text): add text alignment css classes (f64a919)
+- feat(timepicker): add error state support for timepicker (9b1078a5)
+
+### Fixes
+
+- fix(chipInput): update chipInput background of hover state (e330274)
+- fix(toast): fix height of toast action icon (e73b5ef4)
+- fix(toast): fix toast right icon spacing (bd9cfdb5)
+
+### Improvements
+
+- fix(packages): update package-lock file (2b05ef23)
+
+### Documentation
+
+- docs(toast): add usage guidelines for overuse and actions of toast (645be26)
+
+---
+
+## 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

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 {
@@ -1502,11 +1505,11 @@ body {
 }
 
 .Calendar-month--small {
-  height: 192px;
+  height: 200px;
 }
 
 .Calendar-year--small {
-  height: 192px;
+  height: 200px;
 }
 
 .Calendar--large {
@@ -1522,7 +1525,7 @@ body {
 }
 
 .Calendar-month--large {
-  height: 272px;
+  height: 276px;
 }
 
 .Calendar-year--large {
@@ -1542,7 +1545,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--spacing-m);
+  padding-bottom: var(--spacing);
 }
 
 .Calendar-headerIcon {
@@ -1581,7 +1584,7 @@ body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .Calendar-valueRow {
@@ -2273,28 +2276,29 @@ 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:hover {
+  background: var(--secondary-lighter);
+  border-color: var(--secondary-dark);
 }
 
 .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);
+  background: var(--white);
 }
 
 .ChipInput--disabled {
@@ -2303,6 +2307,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;
@@ -2312,19 +2332,40 @@ 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:hover .ChipInput-input {
+  background: var(--secondary-lighter);
+}
+
+.ChipInput:focus-within .ChipInput-input {
+  background: var(--white);
+}
+
 .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 {
@@ -6481,7 +6522,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);
@@ -6530,6 +6571,8 @@ body {
   align-items: center;
   padding-right: var(--spacing-m);
   padding-left: var(--spacing-m);
+  height: var(--spacing-xl);
+  box-sizing: initial;
 }
 
 .Toast-icon--info,
@@ -8824,6 +8867,30 @@ body {
   padding-left: auto !important;
 }
 
+.text-align-start {
+  text-align: start !important;
+}
+
+.text-align-end {
+  text-align: end !important;
+}
+
+.text-align-center {
+  text-align: center !important;
+}
+
+.text-align-justify {
+  text-align: justify !important;
+}
+
+.text-align-left {
+  text-align: left !important;
+}
+
+.text-align-right {
+  text-align: right !important;
+}
+
 .color-white {
   color: var(--white);
 }