@innovaccer/design-system 2.28.3 → 2.29.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## 2.29.0 (2024-03-13)
+
+### Highlights
+
+- feat(combobox): add new combobox component (bd7993e1)
+- feat(avatarSelection): add new avatar selection component (8c408a0a)
+- feat(select): add new component select (90d37dd9)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(combobox): add new combobox component (bd7993e1)
+- feat(avatarSelection): add new avatar selection component (8c408a0a)
+- feat(select): add new component select (90d37dd9)
+
+### Fixes
+
+- fix(calendar): ordering of days in calendar when firstDayOfWeek is passed (7a16f20a)
+
+### Improvements
+
+- chore(select): show custom label when option selected is more than 2 in multiselect (85680e70)
+
+### Documentation
+
+- docs(popover): add guideline for padding in popover (41281e11)
+- docs(avatar): add avatar selection guidelines (0e27b6c5)
+
+---
+
 ## 2.28.3 (2024-03-01)
 
 ### Highlights

package/css/dist/index.css

@@ -995,6 +995,118 @@ body {
   border-radius: 50%;
 }
 
+/* Selection avatar group */
+.SelectionAvatarGroup {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+/* Selection Avatar List */
+
+.SelectionAvatarGroup-item {
+  margin-right: calc(var(--spacing-m) * -1);
+  border-radius: 50%;
+  display: flex;
+  transition: transform var(--duration--fast-01) var(--standard-productive-curve);
+  position: relative;
+}
+
+.SelectionAvatarGroup-item:focus,
+.SelectionAvatarGroup-item:focus-visible {
+  outline: 3px solid var(--primary-shadow);
+  outline-offset: 3px;
+}
+
+.SelectionAvatarGroup-item:active {
+  outline: var(--spacing-s) solid #00509f;
+  outline-offset: var(--spacing-xs);
+}
+
+.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item {
+  transform: translateY(-8px);
+}
+
+/* Selected Avatar Group Item */
+
+.SelectionAvatarGroup-item--selected {
+  outline-offset: var(--spacing-xs);
+  outline: var(--spacing-s) solid var(--primary-dark);
+}
+
+.SelectionAvatarGroup-item--selected:active {
+  outline-offset: var(--spacing-xs);
+  outline: var(--spacing-s) solid var(--primary-darker);
+}
+
+.SelectionAvatarGroup-item--selected:focus,
+.SelectionAvatarGroup-item--selected:focus-visible {
+  box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
+}
+
+/* Selection Avatar Popover */
+
+.SelectionAvatarGroup-popper {
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.SelectionAvatar-inputWrapper {
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.SelectionAvatar-inputWrapper:focus-within {
+  border-bottom: var(--spacing-xs) solid var(--primary);
+}
+
+.SelectionAvatar-input {
+  min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0;
+  height: 36px;
+}
+
+.SelectionAvatar-input,
+.SelectionAvatar-input:focus-within {
+  border: unset !important;
+  box-shadow: none !important;
+}
+
+.SelectionAvatar-input:hover {
+  background-color: #f4f4f4;
+}
+
+/* Selection Avatar Count */
+
+.SelectionAvatarCount-wrapper {
+  border-radius: 50%;
+}
+
+.SelectionAvatarCount:hover {
+  background: var(--secondary);
+}
+
+.SelectionAvatarCount:active {
+  background: var(--secondary-dark);
+}
+
+.SelectionAvatarCount-wrapper:focus,
+.SelectionAvatarCount-wrapper:focus-visible {
+  outline: 3px solid var(--primary-shadow);
+  outline-offset: 3px;
+}
+
+.SelectionAvatarCount--selected {
+  outline-offset: var(--spacing-xs);
+  outline: var(--spacing-s) solid var(--primary-dark);
+}
+
+.SelectionAvatarCount--selected:focus,
+.SelectionAvatarCount--selected:focus-visible {
+  box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
+}
+
 @-webkit-keyframes backdrop-open {
   from {
     opacity: 0;
@@ -5877,6 +5989,139 @@ body {
   box-shadow: none;
 }
 
+.Select-input {
+  min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0;
+  height: 36px;
+}
+
+.Select-input,
+.Select-input:focus-within {
+  border: unset !important;
+  box-shadow: none !important;
+}
+
+.Select-input:hover {
+  background-color: #f4f4f4;
+}
+
+.Select-trigger {
+  width: 100%;
+  justify-content: space-between;
+  padding-top: unset;
+  padding-bottom: unset;
+  background: var(--secondary-light);
+  color: var(--text);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Select-trigger:disabled {
+  background: var(--secondary-lighter);
+  color: var(--text-disabled);
+  pointer-events: none;
+}
+
+.Select-trigger:active,
+.Select-trigger--open {
+  background-color: var(--secondary-dark) !important;
+  color: var(--text) !important;
+  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  -webkit-animation-duration: 120ms;
+          animation-duration: 120ms;
+}
+
+.Select-trigger:hover {
+  background: var(--secondary);
+  color: var(--text);
+}
+
+.Select-trigger:focus {
+  background-color: var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.Select-inputWrapper {
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.Select-inputWrapper:focus-within {
+  border-bottom: var(--spacing-xs) solid var(--primary);
+}
+
+.Select-trigger-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+}
+
+.Select-trigger--small {
+  height: var(--spacing-xl);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+}
+
+.Select-trigger-text {
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Select-trigger--regular {
+  height: var(--spacing-3);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing-l);
+}
+
+.Select-trigger--placeholder {
+  color: var(--text-subtle);
+}
+
+.Select-trigger--icon {
+  padding-left: var(--spacing);
+}
+
+.Select-buttonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: var(--spacing);
+  padding-right: var(--spacing);
+  padding-bottom: var(--spacing);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
+}
+
+.Select-crossButton {
+  display: flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  color: var(--inverse);
+  border-radius: 50%;
+  padding: var(--spacing-s);
+}
+
+.Select-crossButton:focus-visible,
+.Select-crossButton:focus {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
+}
+
+.Select-crossButton:hover {
+  background-color: var(--secondary);
+}
+
+.Select-crossButton:active {
+  background-color: var(--secondary-dark);
+}
+
 .Selection-card {
   cursor: pointer;
   border-radius: var(--spacing-m);