Fix SelectNext styles when used inside an InputGroup

Author: acelaya

src/components/input/SelectNext.tsx

@@ -17,6 +17,7 @@ import { useSyncedRef } from '../../hooks/use-synced-ref';
 import type { PresentationalProps } from '../../types';
 import { MenuCollapseIcon, MenuExpandIcon } from '../icons';
 import Button from './Button';
+import { inputGroupStyles } from './InputGroup';
 import SelectContext from './SelectContext';
 
 export type SelectOptionStatus = {
@@ -185,12 +186,15 @@ function SelectMain<T>({
   }, [buttonRef, listboxOpen]);
 
   return (
-    <div className="relative" ref={wrapperRef}>
+    <div
+      className={classnames('relative w-full border rounded', inputGroupStyles)}
+      ref={wrapperRef}
+    >
       <Button
         id={buttonId ?? defaultButtonId}
         variant="custom"
         classes={classnames(
-          'w-full flex border rounded',
+          'w-full flex',
           'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
           classes,
         )}

src/pattern-library/components/patterns/prototype/SelectNextPage.tsx

@@ -92,40 +92,38 @@ function InputGroupSelectExample() {
         onClick={previous}
         disabled={selectedIndex <= 0}
       />
-      <div className="w-full">
-        <SelectNext
-          value={selected}
-          onChange={setSelected}
-          buttonContent={
-            selected ? (
+      <SelectNext
+        value={selected}
+        onChange={setSelected}
+        buttonContent={
+          selected ? (
+            <>
+              {selected.name}
+              <div className="rounded px-2 bg-grey-7 text-white">
+                {selected.id}
+              </div>
+            </>
+          ) : (
+            <>Select one...</>
+          )
+        }
+      >
+        {defaultItems.map(item => (
+          <SelectNext.Option value={item} key={item.id}>
+            {() => (
               <>
-                {selected.name}
-                <div className="rounded px-2 bg-grey-7 text-white">
-                  {selected.id}
+                {item.name}
+                <div className="grow" />
+                <div
+                  className={classnames('rounded px-2 text-white bg-grey-7')}
+                >
+                  {item.id}
                 </div>
               </>
-            ) : (
-              <>Select one...</>
-            )
-          }
-        >
-          {defaultItems.map(item => (
-            <SelectNext.Option value={item} key={item.id}>
-              {() => (
-                <>
-                  {item.name}
-                  <div className="grow" />
-                  <div
-                    className={classnames('rounded px-2 text-white bg-grey-7')}
-                  >
-                    {item.id}
-                  </div>
-                </>
-              )}
-            </SelectNext.Option>
-          ))}
-        </SelectNext>
-      </div>
+            )}
+          </SelectNext.Option>
+        ))}
+      </SelectNext>
       <IconButton
         icon={ArrowRightIcon}
         title="Next student"