fix(listbox): add selected indicator (#785)

* fix(listbox): add selected indicator * fix(listbox): fix lint + snapshots * fix(listbox): fix lint * fix(listbox): fix comments
kronostechnologies · Apr 17, 2024 · 129f3c4 · 129f3c4
1 parent c84a73c
commit 129f3c4
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 0 deletions.
diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -149,6 +149,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -655,6 +656,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1129,6 +1131,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1611,6 +1614,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;

diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -77,6 +77,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -90,6 +91,16 @@ input + .c2 {
   background-color: #DBDEE1;
 }
 
+.c10::before {
+  background-color: #006296;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 4px;
+}
+
 .c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -105,6 +116,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -526,6 +538,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -539,6 +552,16 @@ input + .c2 {
   background-color: #DBDEE1;
 }
 
+.c12::before {
+  background-color: #006296;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 4px;
+}
+
 .c14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -554,6 +577,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -945,6 +969,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -957,6 +982,16 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   background-color: #DBDEE1;
 }
 
+.c8::before {
+  background-color: #006296;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 4px;
+}
+
 .c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -972,6 +1007,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1371,6 +1407,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1384,6 +1421,16 @@ input + .c2 {
   background-color: #DBDEE1;
 }
 
+.c11::before {
+  background-color: #006296;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 4px;
+}
+
 .c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1399,6 +1446,7 @@ input + .c2 {
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;

diff --git a/packages/react/src/components/listbox/listbox.test.tsx.snap b/packages/react/src/components/listbox/listbox.test.tsx.snap
@@ -141,6 +141,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -172,6 +173,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -198,6 +200,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -422,6 +425,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -448,6 +452,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -459,6 +464,16 @@ exports[`Listbox Matches the snapshot 1`] = `
   background-color: #DBDEE1;
 }
 
+.c5::before {
+  background-color: #006296;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 4px;
+}
+
 .c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -474,6 +489,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   line-height: var(--size-1halfx);
   min-height: var(--size-1halfx);
   padding: var(--spacing-half) var(--spacing-2x);
+  position: relative;
   padding-right: var(--spacing-1x);
   -webkit-user-select: none;
   -moz-user-select: none;

diff --git a/packages/react/src/components/listbox/listbox.tsx b/packages/react/src/components/listbox/listbox.tsx
@@ -87,6 +87,7 @@ interface ListItemProps {
     $isMobile: boolean;
     $selected: boolean;
     $focused: boolean;
+    $multiselect: boolean;
 }
 
 const Container = styled.div<ContainerProps>`
@@ -149,6 +150,7 @@ const ListItem = styled.li<ListItemProps>`
     line-height: var(--size-1halfx);
     min-height: var(--size-1halfx);
     padding: var(--spacing-half) var(--spacing-2x);
+    position: relative;
 
     ${({ $isMobile }) => (!$isMobile && css`
         padding-right: var(--spacing-1x);
@@ -171,6 +173,18 @@ const ListItem = styled.li<ListItemProps>`
             border: 1px solid ${({ theme }) => theme.component['listbox-item-selected-border-color']};
         }
     `)}
+
+    ${({ $selected, $multiselect }) => (!$multiselect && $selected && css`
+        &::before {
+            background-color: ${({ theme }) => theme.component['listbox-item-selected-border-color']};
+            content: '';
+            display: block;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            width: 4px;
+        }
+    `)}
 `;
 
 const ListItemTextContainer = styled.span`
@@ -481,6 +495,7 @@ export const Listbox: ForwardRefExoticComponent<ListboxProps & RefAttributes<HTM
                         }}
                         role="option"
                         $selected={isOptionSelected(option)}
+                        $multiselect={multiselect}
                     >
                         {multiselect ? (
                             <CustomCheckbox