Merge pull request #6881 from opengovsg/release_v6.88.0

build: release v6.88.0

CHANGELOG.md

@@ -4,27 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v6.88.0](https://github.com/opengovsg/FormSG/compare/v6.87.0...v6.88.0)
+
+- chore: add note to update guide to sync with file exts [`#6876`](https://github.com/opengovsg/FormSG/pull/6876)
+- fix(datepicker): webkit-related stylings [`#6875`](https://github.com/opengovsg/FormSG/pull/6875)
+- build: merge release 6.87.0 into develop [`#6879`](https://github.com/opengovsg/FormSG/pull/6879)
+- build: release v6.87.0 [`#6878`](https://github.com/opengovsg/FormSG/pull/6878)
+
 #### [v6.87.0](https://github.com/opengovsg/FormSG/compare/v6.86.0...v6.87.0)
 
+> 8 November 2023
+
 - fix: encode product name and log error [`#6877`](https://github.com/opengovsg/FormSG/pull/6877)
 - fix: format Announcement Modal [`#6868`](https://github.com/opengovsg/FormSG/pull/6868)
 - fix: add case for SGID MyInfo when field value is missing [`#6874`](https://github.com/opengovsg/FormSG/pull/6874)
 - build: merge release v6.86.0 into develop  [`#6873`](https://github.com/opengovsg/FormSG/pull/6873)
 - build: release v6.86.0 [`#6866`](https://github.com/opengovsg/FormSG/pull/6866)
+- chore: use non-testing branch for font-wqy-zenhei [`#6867`](https://github.com/opengovsg/FormSG/pull/6867)
+- chore: bump version to v6.86.0 [`1eec9b6`](https://github.com/opengovsg/FormSG/commit/1eec9b63c914b56b7b10adffd03554e07fde0f3a)
+- chore: bump version to v6.87.0 [`5054803`](https://github.com/opengovsg/FormSG/commit/50548038804b03f30ce6d23b4d43b7a8cf7d9620)
 
 #### [v6.86.0](https://github.com/opengovsg/FormSG/compare/v6.85.1...v6.86.0)
 
 > 6 November 2023
 
-- chore: use non-testing branch for font-wqy-zenhei [`#6867`](https://github.com/opengovsg/FormSG/pull/6867)
 - chore: update credits and terms of use [`#6865`](https://github.com/opengovsg/FormSG/pull/6865)
 - fix: add cloudflareinsights as allowable csp [`#6864`](https://github.com/opengovsg/FormSG/pull/6864)
 - feat: optimise submission query [`#6863`](https://github.com/opengovsg/FormSG/pull/6863)
 - chore(dockerfile): update mocktwilio to start asap [`#6862`](https://github.com/opengovsg/FormSG/pull/6862)
 - fix: only render delete button if owner [`#6837`](https://github.com/opengovsg/FormSG/pull/6837)
 - build: merge release v6.85.1 into develop [`#6861`](https://github.com/opengovsg/FormSG/pull/6861)
 - fix: hotfix v6.85.1 to prevent creation of SGID_MyInfo storage mode forms [`#6860`](https://github.com/opengovsg/FormSG/pull/6860)
-- chore: bump version to v6.86.0 [`1eec9b6`](https://github.com/opengovsg/FormSG/commit/1eec9b63c914b56b7b10adffd03554e07fde0f3a)
+- chore: bump version to v6.86.0 [`1c827cd`](https://github.com/opengovsg/FormSG/commit/1c827cd11844649ca303bb5dc9987db5367637c9)
 
 #### [v6.85.1](https://github.com/opengovsg/FormSG/compare/v6.85.0...v6.85.1)
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.87.0",
+  "version": "6.88.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

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,
+}

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>

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}
     />

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>
     </>
   )
 })

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>

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),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "FormSG",
   "description": "Form Manager for Government",
-  "version": "6.87.0",
+  "version": "6.88.0",
   "homepage": "https://form.gov.sg",
   "authors": [
     "FormSG <[email protected]>"

shared/utils/file-validation.ts

@@ -2,6 +2,8 @@ import JSZip from 'jszip'
 import flattenDeep from 'lodash/flattenDeep'
 import uniq from 'lodash/uniq'
 
+// Note: Guide should be updated if the list of valid extensions is changed.
+// https://guide.form.gov.sg/faq/faq/attachments
 export const VALID_EXTENSIONS = [
   '.asc',
   '.avi',