@innovaccer/design-system 2.19.0 → 2.21.0

package/CHANGELOG.md

@@ -1,3 +1,102 @@
+## 2.21.0 (2023-09-18)
+
+### Highlights
+
+- feat(metricInput): add icon variations property in metric input component (3469d1b7)
+- feat(linkButton): add icon variations property in link button component (1c51679b)
+- feat(chip): add icon variations property in chip component (9770c92a)
+- feat(chipGroup): add icon variations property in chip group component (53682f18)
+- feat(chip): add icon variations property in chip input component (cf29c673)
+- feat(input): add icon variations property in input component (59902576)
+- feat(verticalNav): add icon variations property in vertical nav component (828a7066)
+- feat(horizontalNav): add icon variations property in horizontal nav component (d058d919)
+- feat(tab): add icon variations property in tab component (b3a6615a)
+- feat(dropdown): add icon variations property in dropdown component (bfcae4bd)
+- feat(metalist): add icon variations property in metalist component (ce7daba2)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(metricInput): add icon variations property in metric input component (3469d1b7)
+- feat(linkButton): add icon variations property in link button component (1c51679b)
+- feat(chip): add icon variations property in chip component (9770c92a)
+- feat(chipGroup): add icon variations property in chip group component (53682f18)
+- feat(chip): add icon variations property in chip input component (cf29c673)
+- feat(input): add icon variations property in input component (59902576)
+- feat(verticalNav): add icon variations property in vertical nav component (828a7066)
+- feat(horizontalNav): add icon variations property in horizontal nav component (d058d919)
+- feat(tab): add icon variations property in tab component (b3a6615a)
+- feat(dropdown): add icon variations property in dropdown component (bfcae4bd)
+- feat(metalist): add icon variations property in metalist component (ce7daba2)
+
+### Fixes
+
+NA
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
+## 2.20.0 (2023-09-08)
+
+### Highlights
+
+- feat(icon): migration to material symbols from material icons (b4677f51)
+- feat(card): add action card component (1f6f2a86)
+
+### 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). (b4677f51) 
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(icon): migration to material symbols from material icons (b4677f51)
+- feat(card): add action card component (1f6f2a86)
+- feat(button): add icon variations property in button component (615bde8f)
+- feat(input): add icon variations property in action button in input component (336dc41e)
+
+### Fixes
+
+- fix(datepicker): update selection chip to action chip in preset story in patterns (db5d8275)
+- fix(dateRangePicker): fix range selection behaviour (2181bf0c)
+- fix(chipinput): update chipinput error state (f5aa019d)
+- fix(input): update icon to icon component in action button (336dc41e)
+
+### Improvements
+
+- chore(deps-dev): bump word-wrap from 1.2.3 to 1.2.5 (a0f9cd0e)
+
+### Documentation
+
+NA
+
+---
+
 ## 2.19.0 (2023-08-25)
 
 ### 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 {
@@ -2311,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%;
@@ -2323,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;