@innovaccer/design-system 2.18.0 → 2.20.0

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+## 2.20.0 (2023-09-08)
+
+### Highlights
+
+- feat(icon): migration to material symbols from material icons
+- feat(card): add action card component
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+- feat(icon): material icons are migrated to material symbols. Need to update the test snapshots to update icon name (if used anywhere). 
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(icon): migration to material symbols from material icons
+- feat(card): add action card component
+- feat(button): add icon variations property in button component
+- feat(input): add icon variations property in action button in input component
+
+### Fixes
+
+- fix(datepicker): update selection chip to action chip in preset story in patterns
+- fix(dateRangePicker): fix range selection behaviour
+- fix(chipinput): update chipinput error state
+- fix(input): update icon to icon component in action button
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
+## 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

package/css/dist/index.css

@@ -274,40 +274,16 @@
   --duration--slow-02: 720ms;
 }
 
-/* fallback */
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIcons-Regular.ttf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsOutlined-Regular.otf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Round';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsRound-Regular.otf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Sharp';
+  font-family: 'Material Symbols Outlined';
   font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsSharp-Regular.otf);
+  src: url(MaterialSymbolsOutlined.ttf);
 }
-/* fallback */
+
 @font-face {
-  font-family: 'Material Icons Two Tone';
+  font-family: 'Material Symbols Rounded';
   font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsTwoTone-Regular.otf);
+  src: url(MaterialSymbolsRounded.ttf);
 }
 
 .material-icons {
@@ -327,68 +303,15 @@
 }
 
 .material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-round {
-  font-family: 'Material Icons Round';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+  font-family: 'Material Symbols Outlined';
+  font-size: 24px; /* Preferred icon size */
 }
 
-.material-icons-sharp {
-  font-family: 'Material Icons Sharp';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+.material-icons-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-size: 24px; /* Preferred icon size */
 }
 
-.material-icons-two-tone {
-  font-family: 'Material Icons Two Tone';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;
@@ -398,6 +321,7 @@
     opacity: 1;
   }
 }
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -863,6 +787,47 @@ body {
   background-color: var(--secondary-dark);
 }
 
+.ActionCard {
+  cursor: pointer;
+  border-radius: var(--spacing-m);
+  width: 100%;
+  border: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.ActionCard:hover {
+  box-shadow: var(--shadow-m);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.ActionCard:focus,
+.ActionCard:focus-visible {
+  outline: none;
+  border: var(--spacing-xs) solid var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.ActionCard:active {
+  box-shadow: var(--shadow-l);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.ActionCard--disabled {
+  pointer-events: none;
+  position: relative;
+  border: var(--spacing-xs) solid var(--secondary-lighter);
+}
+
+.ActionCard-overlay--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  opacity: 50%;
+  background: var(--secondary-light);
+}
+
 /* badge */
 
 .Avatar {
@@ -1631,6 +1596,11 @@ body {
   border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
 }
 
+.Calendar-valueWrapper--hoverDate {
+  background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);
+  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+}
+
 .Calendar-valueWrapper--endError {
   background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
 }
@@ -1661,6 +1631,10 @@ body {
   background: var(--secondary);
 }
 
+.Calendar-value:active .Calendar-value--currDate {
+  color: var(--primary-dark);
+}
+
 .Calendar-value--start:hover,
 .Calendar-value--end:hover {
   background: var(--primary-lightest);
@@ -1693,6 +1667,10 @@ body {
   background: var(--primary-lighter);
 }
 
+.Calendar-value--currDate:active {
+  color: var(--primary-dark);
+}
+
 .Calendar-value--active {
   background: var(--primary);
   font-weight: var(--font-weight-bold);
@@ -1770,6 +1748,26 @@ body {
   background-color: var(--white);
 }
 
+.Calendar-valueWrapper--inStartRange {
+  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+}
+
+.Calendar-valueWrapper--inEndRange {
+  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
+  background: var(--primary-lightest);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
+  background: var(--primary-lighter);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:active {
+  background: var(--primary-light);
+}
+
 /* badge */
 
 .Card {
@@ -2291,8 +2289,14 @@ body {
   outline: var(--spacing-xs) var(--primary);
 }
 
+.ChipInput:hover {
+  background: var(--secondary-lighter);
+  border-color: var(--secondary-dark);
+}
+
 .ChipInput:focus-within {
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);
+  background: var(--white);
 }
 
 .ChipInput--disabled {
@@ -2305,6 +2309,11 @@ body {
   padding-right: var(--spacing);
 }
 
+.ChipInput--error,
+.ChipInput--error:focus-within {
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--alert);
+}
+
 .ChipInput-wrapper {
   display: flex;
   flex: 100%;
@@ -2317,6 +2326,10 @@ body {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
+.ChipInput-border--error:focus-within {
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
+}
+
 .ChipInput-input {
   border: none;
   outline: none;
@@ -2332,6 +2345,14 @@ body {
   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);
   padding: var(--spacing-s);
@@ -6557,6 +6578,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,
@@ -8851,6 +8874,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);
 }