fix only item scroll in combobox (#3679)

jpmorganchase · Jul 29, 2024 · 3913dbb · 3913dbb
1 parent e9c1287
commit 3913dbb
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/.changeset/mean-kids-marry.md b/.changeset/mean-kids-marry.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed list scroll when there is only one item in `ComboBox` and `Dropdown`.
diff --git a/packages/core/src/option/Option.css b/packages/core/src/option/Option.css
@@ -32,30 +32,8 @@
 .saltOption[aria-selected="true"] {
   z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
-}
-
-.saltOption[aria-selected="true"]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  left: 0;
-  width: 100%;
-}
-
-.saltOption[aria-selected="true"]::after {
-  border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-  border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-}
-
-.saltOption[aria-selected="true"]:first-of-type::before {
-  border-top: unset;
-  top: 0;
-}
-.saltOption[aria-selected="true"]:last-of-type::before {
-  border-bottom: unset;
-  bottom: 0;
+  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)
+    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
 
 .saltOption[aria-disabled="true"] {

diff --git a/packages/core/stories/combo-box/combo-box.qa.stories.tsx b/packages/core/stories/combo-box/combo-box.qa.stories.tsx
@@ -5,6 +5,7 @@ import {
   FormFieldLabel,
   Option,
   OptionGroup,
+  StackLayout,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
@@ -242,3 +243,29 @@ ClosedExamples.parameters = {
     },
   },
 };
+
+export const OpenWithSingleSelectionExamples: StoryFn<
+  QAContainerProps
+> = () => (
+  <QAContainer cols={2} itemPadding={12} width={800} vertical>
+    <StackLayout gap={10}>
+      <ComboBox placeholder="State" open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </ComboBox>
+      <ComboBox multiselect open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </ComboBox>
+    </StackLayout>
+    <ComboBox open defaultSelected={["Alaska"]} style={{ marginBottom: 280 }}>
+      <OptionGroup label={"A"}>
+        <Option value={"Alaska"} />
+      </OptionGroup>
+      {/* empty group to ensure borders are not overlapping */}
+      <OptionGroup label={"C"} />
+    </ComboBox>
+  </QAContainer>
+);
+
+OpenWithSingleSelectionExamples.parameters = {
+  chromatic: { disableSnapshot: false },
+};
diff --git a/packages/core/stories/dropdown/dropdown.qa.stories.tsx b/packages/core/stories/dropdown/dropdown.qa.stories.tsx
@@ -5,6 +5,7 @@ import {
   FormFieldLabel,
   Option,
   OptionGroup,
+  StackLayout,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
@@ -152,3 +153,29 @@ ClosedExamples.parameters = {
     },
   },
 };
+
+export const OpenWithSingleSelectionExamples: StoryFn<
+  QAContainerProps
+> = () => (
+  <QAContainer cols={2} itemPadding={12} width={800} vertical>
+    <StackLayout gap={8.5}>
+      <Dropdown placeholder="State" open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </Dropdown>
+      <Dropdown multiselect open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </Dropdown>
+    </StackLayout>
+    <Dropdown open defaultSelected={["Alaska"]} style={{ marginBottom: 280 }}>
+      <OptionGroup label={"A"}>
+        <Option value={"Alaska"} />
+      </OptionGroup>
+      {/* empty group to ensure borders are not overlapping */}
+      <OptionGroup label={"C"} />
+    </Dropdown>
+  </QAContainer>
+);
+
+OpenWithSingleSelectionExamples.parameters = {
+  chromatic: { disableSnapshot: false },
+};