From 07b814464eaf50b4a0a66abf3acc75e8fae3d03c Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 3 Nov 2022 07:33:01 +0800
Subject: [PATCH] [portal][ui] allow customization of spacing within
 MonthYearPicker

---
 .../offers/forms/FormMonthYearPicker.tsx      |  1 +
 .../forms/ContributeQuestionForm.tsx          |  1 +
 .../forms/CreateQuestionEncounterForm.tsx     |  1 +
 .../src/components/shared/MonthYearPicker.tsx | 55 +++++++++++--------
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx b/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx
index ca036b0e..52522cbb 100644
--- a/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx
+++ b/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx
@@ -28,6 +28,7 @@ function FormMonthYearPickerWithRef({
 
   return (
     <MonthYearPicker
+      className="space-x-6"
       {...(rest as MonthYearPickerProps)}
       value={value}
       onChange={(val) => {
diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
index f44b22c3..10aa33ef 100644
--- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
@@ -140,6 +140,7 @@ export default function ContributeQuestionForm({
               name="date"
               render={({ field }) => (
                 <MonthYearPicker
+                  className="space-x-2"
                   monthRequired={true}
                   value={{
                     month: ((field.value.getMonth() as number) + 1) as Month,
diff --git a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
index c1095316..453733c8 100644
--- a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
+++ b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
@@ -96,6 +96,7 @@ export default function CreateQuestionEncounterForm({
       )}
       {step === 3 && (
         <MonthYearPicker
+          className="space-x-2"
           // TODO: Add label and hide label on Select instead.
           monthLabel=""
           value={{
diff --git a/apps/portal/src/components/shared/MonthYearPicker.tsx b/apps/portal/src/components/shared/MonthYearPicker.tsx
index aa3fb1d8..0612455c 100644
--- a/apps/portal/src/components/shared/MonthYearPicker.tsx
+++ b/apps/portal/src/components/shared/MonthYearPicker.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useEffect, useId, useState } from 'react';
 import { Select } from '@tih/ui';
 
@@ -14,6 +15,7 @@ export type MonthYearOptional = Readonly<{
 }>;
 
 type Props = Readonly<{
+  className?: string;
   errorMessage?: string;
   monthLabel?: string;
   monthRequired?: boolean;
@@ -84,6 +86,7 @@ const YEAR_OPTIONS = Array.from({ length: NUM_YEARS }, (_, i) => {
 });
 
 export default function MonthYearPicker({
+  className,
   errorMessage,
   monthLabel = 'Month',
   value,
@@ -109,29 +112,35 @@ export default function MonthYearPicker({
 
   return (
     <div aria-describedby={hasError ? errorId : undefined}>
-      <div className="flex items-end space-x-2">
-        <Select
-          key={`month:${monthCounter}`}
-          label={monthLabel}
-          options={MONTH_OPTIONS}
-          placeholder="Select month"
-          required={monthRequired}
-          value={value.month}
-          onChange={(newMonth) =>
-            onChange({ month: Number(newMonth) as Month, year: value.year })
-          }
-        />
-        <Select
-          key={`year:${yearCounter}`}
-          label={yearLabel}
-          options={YEAR_OPTIONS}
-          placeholder="Select year"
-          required={yearRequired}
-          value={value.year}
-          onChange={(newYear) =>
-            onChange({ month: value.month, year: Number(newYear) })
-          }
-        />
+      <div className={clsx('flex items-end', className)}>
+        <div className="grow">
+          <Select
+            key={`month:${monthCounter}`}
+            display="block"
+            label={monthLabel}
+            options={MONTH_OPTIONS}
+            placeholder="Select month"
+            required={monthRequired}
+            value={value.month}
+            onChange={(newMonth) =>
+              onChange({ month: Number(newMonth) as Month, year: value.year })
+            }
+          />
+        </div>
+        <div className="grow">
+          <Select
+            key={`year:${yearCounter}`}
+            display="block"
+            label={yearLabel}
+            options={YEAR_OPTIONS}
+            placeholder="Select year"
+            required={yearRequired}
+            value={value.year}
+            onChange={(newYear) =>
+              onChange({ month: value.month, year: Number(newYear) })
+            }
+          />
+        </div>
       </div>
       {errorMessage && (
         <p className="text-danger-600 mt-2 text-sm" id={errorId}>