@innovaccer/design-system 2.24.0 → 2.25.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 2.25.0 (2023-11-14)
+
+### Highlights
+
+- feat(listbox): add new listbox component (6aca3733)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(listbox): add new listbox component (6aca3733)
+
+### Fixes
+
+NA
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 2.24.0 (2023-11-07)
 
 ### Highlights

package/css/dist/index.css

@@ -506,6 +506,18 @@
     entryRightCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
 }
 
+.rotate-clockwise {
+  transform: rotateZ(360deg);
+  transition: var(--duration--moderate-02) var(--standard-productive-curve);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+.rotate-anticlockwise {
+  transform: rotateZ(180deg);
+  transition: var(--duration--moderate-02) var(--standard-productive-curve);
+}
+
 .ss {
   background: red;
 }
@@ -1794,7 +1806,6 @@ body {
   border-radius: var(--spacing-m);
   border: var(--spacing-xs) solid var(--secondary-light);
   position: relative;
-  overflow: hidden;
   background-color: var(--white);
 }
 
@@ -4549,6 +4560,123 @@ body {
   height: 100%;
 }
 
+.Listbox {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+}
+
+.Listbox-item {
+  display: flex;
+  align-items: center;
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+}
+
+.Listbox-item-wrapper:last-child > .Listbox-divider,
+.Listbox-item--draggable:last-child .Listbox-divider {
+  background: transparent;
+}
+
+/* Sizes */
+
+.Listbox-item--tight {
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+}
+
+.Listbox-item--compressed {
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+}
+
+.Listbox-item--standard {
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
+}
+
+/* Listbox type - option  */
+
+.Listbox-item--option {
+  cursor: pointer;
+}
+
+.Listbox-item--option:hover {
+  background-color: var(--secondary-lightest);
+}
+
+.Listbox-item--option:focus,
+.Listbox-item--option:focus-visible {
+  outline: 3px auto var(--secondary-shadow);
+}
+
+.Listbox-item--option:active {
+  background: rgba(255, 245, 199, 0.6);
+}
+
+.Listbox-item--selected {
+  background: rgba(255, 245, 199, 0.6);
+}
+
+/* Listbox type - resource  */
+
+.Listbox-item--resource {
+  cursor: pointer;
+}
+
+.Listbox-item--resource:hover {
+  background-color: var(--secondary-lightest);
+}
+
+.Listbox-item--resource:focus,
+.Listbox-item--resource:focus-visible {
+  outline: 3px auto var(--secondary-shadow);
+}
+
+.Listbox-item--resource:active {
+  background: rgba(255, 245, 199, 0.6);
+}
+
+.Listbox-item--activated {
+  background: rgba(255, 245, 199, 0.6);
+}
+
+/* Listbox type - description  */
+
+.Listbox-item--description:focus,
+.Listbox-item--description:focus-visible {
+  outline: none;
+}
+
+/* Listbox type - disabled  */
+
+.Listbox-item--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Listbox type - draggable  */
+
+.Listbox-item--draggable:focus {
+  outline: 3px auto var(--secondary-shadow);
+}
+
+.Listbox-item--drag-icon {
+  cursor: -webkit-grab;
+  cursor: grab;
+  margin-right: var(--spacing);
+}
+
+.Listbox-item--drag-icon:hover {
+  color: var(--inverse);
+}
+
+.Listbox-item--drag-icon:active {
+  color: var(--primary);
+}
+
 .Message {
   display: flex;
   flex-direction: row;