added maxHeight prop to support scrollable popover for Select faux (#371

) * added maxHeight prop to support scrollable popover for Select faux component * removed log * chore(baseline): update lost-pixel baselines (#372) Co-authored-by: juliewongbandue <[email protected]> --------- Co-authored-by: devex-bot-github <[email protected]> Co-authored-by: juliewongbandue <[email protected]>
vimeo · Nov 16, 2023 · d0602e1 · d0602e1
1 parent cba7ed8
commit d0602e1
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 1 deletion.
diff --git a/lost-pixel/baseline/components-avatar--size.png b/lost-pixel/baseline/components-avatar--size.png
diff --git a/lost-pixel/baseline/components-select-props--faux-maximum-height.png b/lost-pixel/baseline/components-select-props--faux-maximum-height.png
diff --git a/lost-pixel/baseline/labs-pronouns--auto-complete.png b/lost-pixel/baseline/labs-pronouns--auto-complete.png
diff --git a/lost-pixel/baseline/labs-pronouns--comments.png b/lost-pixel/baseline/labs-pronouns--comments.png
diff --git a/lost-pixel/baseline/labs-pronouns--general-settings.png b/lost-pixel/baseline/labs-pronouns--general-settings.png
diff --git a/lost-pixel/baseline/labs-pronouns--user-settings.png b/lost-pixel/baseline/labs-pronouns--user-settings.png
diff --git a/lost-pixel/baseline/labs-pronouns--video-list.png b/lost-pixel/baseline/labs-pronouns--video-list.png
diff --git a/lost-pixel/baseline/labs-themekit--common.png b/lost-pixel/baseline/labs-themekit--common.png
diff --git a/src/components/inputs/Select/Select.props.story.tsx b/src/components/inputs/Select/Select.props.story.tsx
@@ -238,6 +238,35 @@ export function FauxExternalState({ args }) {
 }
 FauxExternalState.storyName = 'faux (external state)';
 
+export function FauxMaxHeight({ args }) {
+  const [value, valueSet] = useState(null);
+
+  function onChange(event) {
+    valueSet(event.target.value);
+  }
+
+  return (
+    <Layout.StoryVertical>
+      <Select
+        {...args}
+        label="Faux select with maximum height"
+        onChange={onChange}
+        placeholder="Please select an option."
+        value={value}
+        faux
+        maxHeight="300px"
+      >
+        {Array.from({ length: 20 }, (_, index) => (
+          <Select.Option key={index} value={index}>{`Option ${
+            index + 1
+          }`}</Select.Option>
+        ))}
+      </Select>
+    </Layout.StoryVertical>
+  );
+}
+FauxMaxHeight.storyName = 'faux (maximum height)';
+
 const UpgradeBadge = (
   <Badge
     // @ts-ignore

diff --git a/src/components/inputs/Select/Select.types.ts b/src/components/inputs/Select/Select.types.ts
@@ -26,6 +26,10 @@ export type Props = IrisInputProps<
      */
     size?: Sizes;
     value?: string | string[];
+    /**
+     * [default = '100%']
+     */
+    maxHeight?: string;
   },
   HTMLSelectElement
 >;

diff --git a/src/components/inputs/Select/SelectFaux.tsx b/src/components/inputs/Select/SelectFaux.tsx
@@ -39,6 +39,7 @@ export function SelectFaux({
   size = 'md',
   status,
   style,
+  maxHeight = '100%',
   value,
   ...props
 }: Props) {
@@ -113,7 +114,12 @@ export function SelectFaux({
     >
       <PopOver
         attach="bottom"
-        style={{ width, maxWidth: '100%' }}
+        style={{
+          width,
+          maxWidth: '100%',
+          maxHeight,
+          overflowY: 'scroll',
+        }}
         content={<div ref={popOverRef}>{content}</div>}
         active={disabled ? false : active}
       >