fix(datepicker): webkit-related stylings (#6875)

* fix: prevent unused outer aria from affecting webkit-related styles * fix: css when disabled * chore: remove unused props * fix: calendar button having red border when input is invalid * fix: remove border glitches when button is active * fix: remove border glitches when input has error * chore: add storybook cases for error and prefilled
opengovsg · Nov 8, 2023 · 9cf4594 · 9cf4594
1 parent c31c063
commit 9cf4594
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 43 deletions.
diff --git a/frontend/src/components/DatePicker/DatePicker.stories.tsx b/frontend/src/components/DatePicker/DatePicker.stories.tsx
@@ -29,3 +29,14 @@ DatePickerDisallowManualInput.args = {
 
 export const Mobile = Template.bind({})
 Mobile.parameters = getMobileViewParameters()
+
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  defaultValue: new Date('2021-09-13'),
+  isDisabled: true,
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  isInvalid: true,
+}
diff --git a/frontend/src/components/DatePicker/DatePicker.tsx b/frontend/src/components/DatePicker/DatePicker.tsx
@@ -2,7 +2,6 @@ import { forwardRef } from '@chakra-ui/react'
 
 import { CalendarProps } from '~components/Calendar'
 
-import { CalendarButton } from './components/CalendarButton'
 import { DatePickerCalendar } from './components/DatePickerCalendar'
 import { DatePickerContent } from './components/DatePickerContent'
 import { DatePickerWrapper } from './components/DatePickerWrapper'
@@ -25,7 +24,6 @@ export const DatePicker = forwardRef<DatePickerProps, 'input'>((props, ref) => {
   return (
     <DatePickerProvider {...props}>
       <DatePickerWrapper ref={ref}>
-        <CalendarButton />
         <DatePickerContent>
           <DatePickerCalendar />
         </DatePickerContent>

diff --git a/frontend/src/components/DatePicker/components/CalendarButton.tsx b/frontend/src/components/DatePicker/components/CalendarButton.tsx
@@ -6,18 +6,17 @@ import { useDatePicker } from '../DatePickerContext'
 export const CalendarButton = (): JSX.Element => {
   const {
     disclosureProps: { onOpen, isOpen },
-    colorScheme,
     calendarButtonAria,
     fcProps: { isDisabled, isReadOnly },
   } = useDatePicker()
   return (
     <IconButton
       onClick={onOpen}
-      colorScheme={colorScheme}
       aria-label={calendarButtonAria}
       icon={<BxCalendar />}
       variant="inputAttached"
-      borderRadius={0}
+      borderLeftColor={'transparent'}
+      borderLeftRadius={0}
       isActive={isOpen}
       isDisabled={isDisabled || isReadOnly}
     />

diff --git a/frontend/src/components/DatePicker/components/DatePickerInput.tsx b/frontend/src/components/DatePicker/components/DatePickerInput.tsx
@@ -1,15 +1,21 @@
 import { useMemo } from 'react'
 import ReactInputMask from 'react-input-mask'
-import { forwardRef, useMergeRefs, VisuallyHidden } from '@chakra-ui/react'
+import {
+  forwardRef,
+  InputGroup,
+  InputRightAddon,
+  useMergeRefs,
+  VisuallyHidden,
+} from '@chakra-ui/react'
 
 import Input from '~components/Input'
 
+import { CalendarButton } from '../components/CalendarButton'
 import { useDatePicker } from '../DatePickerContext'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
   const {
-    styles,
     internalInputValue,
     handleInputChange,
     handleInputBlur,
@@ -36,24 +42,27 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
       <VisuallyHidden aria-live="assertive">
         {selectedDateAriaLiveText}
       </VisuallyHidden>
-      <Input
-        variant="unstyled"
-        inputMode="numeric" // Nudge Android mobile keyboard to be numeric
-        pattern="\d*" // Nudge numeric keyboard on iOS Safari.
-        sx={styles.field}
-        as={ReactInputMask}
-        mask="99/99/9999"
-        value={internalInputValue}
-        onChange={handleInputChange}
-        placeholder={placeholder}
-        maskPlaceholder={placeholder}
-        ref={mergedInputRef}
-        {...fcProps}
-        borderRightRadius={0}
-        onBlur={handleInputBlur}
-        onClick={handleInputClick}
-        isReadOnly={fcProps.isReadOnly || !allowManualInput}
-      />
+      <InputGroup>
+        <Input
+          inputMode="numeric" // Nudge Android mobile keyboard to be numeric
+          pattern="\d*" // Nudge numeric keyboard on iOS Safari.
+          as={ReactInputMask}
+          mask="99/99/9999"
+          value={internalInputValue}
+          onChange={handleInputChange}
+          placeholder={placeholder}
+          maskPlaceholder={placeholder}
+          ref={mergedInputRef}
+          {...fcProps}
+          borderRightRadius={0}
+          onBlur={handleInputBlur}
+          onClick={handleInputClick}
+          isReadOnly={fcProps.isReadOnly || !allowManualInput}
+        />
+        <InputRightAddon p={0} bg="none">
+          <CalendarButton />
+        </InputRightAddon>
+      </InputGroup>
     </>
   )
 })
diff --git a/frontend/src/components/DatePicker/components/DatePickerWrapper.tsx b/frontend/src/components/DatePicker/components/DatePickerWrapper.tsx
@@ -8,25 +8,16 @@ import { DatePickerInput } from './DatePickerInput'
 export const DatePickerWrapper = forwardRef<{}, 'input'>(
   ({ children }, ref) => {
     const {
-      styles,
       disclosureProps,
       initialFocusRef,
       closeCalendarOnChange,
       isMobile,
-      fcProps: { isDisabled, isInvalid, isReadOnly },
     } = useDatePicker()
 
     if (isMobile) {
       return (
         <Flex>
-          <Flex
-            sx={styles.fieldwrapper}
-            aria-disabled={isDisabled}
-            aria-invalid={isInvalid}
-            aria-readonly={isReadOnly}
-          >
-            <DatePickerInput ref={ref} />
-          </Flex>
+          <DatePickerInput ref={ref} />
           {children}
         </Flex>
       )
@@ -43,14 +34,7 @@ export const DatePickerWrapper = forwardRef<{}, 'input'>(
           {...disclosureProps}
         >
           <PopoverAnchor>
-            <Flex
-              sx={styles.fieldwrapper}
-              aria-disabled={isDisabled}
-              aria-invalid={isInvalid}
-              aria-readonly={isReadOnly}
-            >
-              <DatePickerInput ref={ref} />
-            </Flex>
+            <DatePickerInput ref={ref} />
           </PopoverAnchor>
           {children}
         </Popover>

diff --git a/frontend/src/theme/components/Button.ts b/frontend/src/theme/components/Button.ts
@@ -245,8 +245,10 @@ const variantInputAttached: SystemStyleFunction = (props) => {
     ml: '-1px',
     borderColor: 'neutral.400',
     borderRadius: 0,
+    borderLeftColor: 'transparent',
     _hover: {
       bg: 'neutral.100',
+      borderLeftColor: `neutral.400`,
     },
     _active: {
       borderColor: getColor(theme, fc),