Add classroom timepicker (#612)

* Create `ControlledDateTimePicker` and remove unused component * Update placeholder to fit in smaller field size * Standardize placeholder format Placeholders are sentences, so they should read like one instead of like a title. For example, you probably wouldn't use "Please choose a date" as a title. * Fix modal spacing * Fix disabled style for `TimePicker` component
uwblueprint · Nov 21, 2023 · 8c52a3b · 8c52a3b
1 parent 839df19
commit 8c52a3b
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/...ents/common/form/ControlledDatePicker.tsx → .../common/form/ControlledDateTimePicker.tsx b/...ents/common/form/ControlledDatePicker.tsx → .../common/form/ControlledDateTimePicker.tsx
@@ -2,7 +2,7 @@ import type { ReactElement } from "react";
 import React from "react";
 import { Controller } from "react-hook-form";
 
-import DatePicker from "./DatePicker";
+import DateTimePicker from "./DateTimePicker";
 
 type ControlledDatePickerProps = {
   name?: string;
@@ -11,7 +11,7 @@ type ControlledDatePickerProps = {
   additionalRules?: Record<string, unknown>;
 };
 
-const ControlledDatePicker = ({
+const ControlledDateTimePicker = ({
   name: fieldName,
   isDisabled,
   isRequired,
@@ -21,7 +21,7 @@ const ControlledDatePicker = ({
     <Controller
       name={fieldName || "date-input"}
       render={({ field: { onChange, onBlur, value, name } }) => (
-        <DatePicker
+        <DateTimePicker
           isDisabled={isDisabled}
           name={name}
           onChange={(date) => {
@@ -45,4 +45,4 @@ const ControlledDatePicker = ({
   );
 };
 
-export default ControlledDatePicker;
+export default ControlledDateTimePicker;
diff --git a/frontend/src/components/common/form/DatePicker.tsx b/frontend/src/components/common/form/DatePicker.tsx
@@ -69,7 +69,7 @@ const getDatePickerStyles = (
     cursor: "pointer",
     "aria-label": "This is a date input, activate to open date picker",
     textAlign: "left",
-    value: value ? format(value, "yyyy-MM-dd") : "Please choose a date",
+    value: value ? format(value, "yyyy-MM-dd") : "Choose a date",
     color: value ? "grey.300" : "placeholder.300",
     transition: "color 0s",
   },

diff --git a/frontend/src/components/common/form/TimePicker.tsx b/frontend/src/components/common/form/TimePicker.tsx
@@ -34,6 +34,9 @@ const chakraStyles = (
       outline: "none",
     },
     border: "none",
+    _disabled: {
+      opacity: 1,
+    },
   }),
   valueContainer: (provided) => ({
     ...provided,

diff --git a/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx b/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx
@@ -75,7 +75,7 @@ const AddInformation = ({
       >
         <HStack alignItems="flex-start" gap="15" pt="4">
           <FormControl isInvalid={!!invalidStartDate} isRequired>
-            <FormLabel color="blue.300">Start date</FormLabel>
+            <FormLabel color="blue.300">Start Date</FormLabel>
             <DateTimePicker
               isDisabled={isEditDisabled}
               name="startDate"
@@ -92,7 +92,7 @@ const AddInformation = ({
         </HStack>
         <HStack alignItems="flex-start" gap="15" pt="4">
           <FormControl isInvalid={!!invalidEndDate} isRequired>
-            <FormLabel color="blue.300">End date</FormLabel>
+            <FormLabel color="blue.300">End Date</FormLabel>
             <DateTimePicker
               name="endDate"
               onChange={(newDate: Date | null) => {

diff --git a/...d/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx b/...d/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx
@@ -26,7 +26,7 @@ import {
   FormValidationError,
   getQueryName,
 } from "../../../../utils/GeneralUtils";
-import ControlledDatePicker from "../../../common/form/ControlledDatePicker";
+import ControlledDateTimePicker from "../../../common/form/ControlledDateTimePicker";
 import ControlledSelect from "../../../common/form/ControlledSelect";
 import InlineFormError from "../../../common/form/InlineFormError";
 import Modal from "../../../common/modal/Modal";
@@ -107,12 +107,12 @@ const AddOrEditClassroomModal = ({
         submitButtonText="Save"
         variant="large"
       >
-        <HStack direction="row" mt={6}>
+        <HStack direction="row" mt={6} spacing={8}>
           <VStack align="left" direction="column" width="320px">
             <FormControl isInvalid={!!errors.className} isRequired>
               <FormLabel color="blue.300">Class Name</FormLabel>
               <Input
-                placeholder="Type in Class Name"
+                placeholder="Type in class name"
                 type="text"
                 {...register("className", {
                   required: { value: true, message: "This field is required." },
@@ -127,7 +127,7 @@ const AddOrEditClassroomModal = ({
           <VStack align="left" direction="column" width="320px">
             <FormControl isInvalid={!!errors.startDate} isRequired>
               <FormLabel color="blue.300">Start Date</FormLabel>
-              <ControlledDatePicker
+              <ControlledDateTimePicker
                 additionalRules={
                   isEditing
                     ? {}
@@ -160,7 +160,7 @@ const AddOrEditClassroomModal = ({
                 isRequired
                 name="gradeLevel"
                 options={gradeOptions}
-                placeholder="Choose a Grade Level"
+                placeholder="Choose a grade level"
               />
               <InlineFormError error={errors.gradeLevel} />
             </FormControl>