Merge pull request #564 from opengovsg/release-v1.10.0

build: release v1.10.0

react/CHANGELOG.md

@@ -4,8 +4,31 @@ 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).
 
+#### [v1.10.0](https://github.com/opengovsg/design-system/compare/v1.9.0...v1.10.0)
+
+- fix(storybook): remove unnecessary imports [`#563`](https://github.com/opengovsg/design-system/pull/563)
+- feat: allow custom input element override for DatePicker [`#562`](https://github.com/opengovsg/design-system/pull/562)
+- fix: set standard banner padding regardless of viewport, add sm size [`#559`](https://github.com/opengovsg/design-system/pull/559)
+- feat: update Multiselect padding, add xs sizing [`#561`](https://github.com/opengovsg/design-system/pull/561)
+- feat(calendar/datepicker): add `shouldSetDateOnTodayButtonClick` prop to select date on today click [`#557`](https://github.com/opengovsg/design-system/pull/557)
+- feat(FormLabel): allow ReactNode instead of string [`#560`](https://github.com/opengovsg/design-system/pull/560)
+- feat: rename Tooltip to TouchableTooltip [`#558`](https://github.com/opengovsg/design-system/pull/558)
+- chore(deps-dev): bump @types/country-flag-icons in /react [`#556`](https://github.com/opengovsg/design-system/pull/556)
+- fix(deps): bump @swc/core-linux-x64-gnu from 1.3.95 to 1.3.96 in /react [`#554`](https://github.com/opengovsg/design-system/pull/554)
+- chore(deps-dev): bump esbuild from 0.19.5 to 0.19.6 in /react [`#555`](https://github.com/opengovsg/design-system/pull/555)
+- fix(deps): bump nanoid from 5.0.2 to 5.0.3 in /react [`#553`](https://github.com/opengovsg/design-system/pull/553)
+- chore(deps-dev): bump eslint from 8.53.0 to 8.54.0 in /react [`#552`](https://github.com/opengovsg/design-system/pull/552)
+- chore(deps-dev): bump @vitejs/plugin-react from 4.1.0 to 4.1.1 in /react [`#549`](https://github.com/opengovsg/design-system/pull/549)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin in /react [`#548`](https://github.com/opengovsg/design-system/pull/548)
+- fix(deps): bump @floating-ui/react from 0.26.1 to 0.26.2 in /react [`#550`](https://github.com/opengovsg/design-system/pull/550)
+- chore(deps-dev): bump eslint-plugin-testing-library in /react [`#547`](https://github.com/opengovsg/design-system/pull/547)
+- merge v1.9.0 back to main [`#545`](https://github.com/opengovsg/design-system/pull/545)
+- build: release v1.9.0 [`#544`](https://github.com/opengovsg/design-system/pull/544)
+
 #### [v1.9.0](https://github.com/opengovsg/design-system/compare/v1.8.0...v1.9.0)
 
+> 10 November 2023
+
 - fix: remove `pattern` prop on datepickers, add `experimental_forceIosNumberKeyboard` prop to trigger it instead [`#543`](https://github.com/opengovsg/design-system/pull/543)
 - fix: type button and refactor SectionWrapper [`#518`](https://github.com/opengovsg/design-system/pull/518)
 - chore(react-readme): point to updated Storybook URL [`#542`](https://github.com/opengovsg/design-system/pull/542)
@@ -54,6 +77,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump @floating-ui/react from 0.25.2 to 0.25.4 in /react [`#490`](https://github.com/opengovsg/design-system/pull/490)
 - chore(deps-dev): bump eslint from 8.48.0 to 8.49.0 in /react [`#492`](https://github.com/opengovsg/design-system/pull/492)
 - build: release v1.8.0 [`#488`](https://github.com/opengovsg/design-system/pull/488)
+- build: release v1.9.0 [`34e73ac`](https://github.com/opengovsg/design-system/commit/34e73ac77a89183267da38608a9b0a73a8b5349b)
 
 #### [v1.8.0](https://github.com/opengovsg/design-system/compare/v1.7.0...v1.8.0)
 

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",
@@ -78,19 +78,19 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-input-mask": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
     "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-react": "^4.0.0",
     "auto-changelog": "^2.4.0",
     "esbuild": "^0.19.2",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "6.0.1",
+    "eslint-plugin-testing-library": "6.1.2",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
     "prettier": "3.0.3",

react/src/Banner/Banner.stories.tsx

@@ -1,5 +1,8 @@
+import { Divider, Stack } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
+import { getMobileViewParameters } from '~/utils/storybook'
+
 import { Banner, BannerProps } from './Banner'
 
 export default {
@@ -36,3 +39,31 @@ Error.args = {
   variant: 'error',
   children: `This is an error banner`,
 }
+
+const SizeTemplate: StoryFn<BannerProps> = (args) => {
+  return (
+    <Stack>
+      <Template variant="info" {...args}>
+        This is a small dismissable info banner
+      </Template>
+      <Template variant="warn" {...args}>
+        This is a small warning banner
+      </Template>
+      <Template variant="error" {...args}>
+        This is a small error banner
+      </Template>
+    </Stack>
+  )
+}
+
+export const Mobile = SizeTemplate.bind({})
+Mobile.args = {
+  size: 'md',
+}
+Mobile.parameters = getMobileViewParameters()
+
+export const SmSizeMobile = SizeTemplate.bind({})
+SmSizeMobile.args = {
+  size: 'sm',
+}
+SmSizeMobile.parameters = getMobileViewParameters()

react/src/Banner/Banner.tsx

@@ -9,6 +9,7 @@ import {
   ThemingProps,
   useDisclosure,
   useMultiStyleConfig,
+  useTheme,
 } from '@chakra-ui/react'
 
 import { BxsErrorCircle, BxsInfoCircle, BxX } from '~/icons'
@@ -31,10 +32,12 @@ export interface BannerProps {
    * If `null`, the close button will not be rendered.
    */
   closeButton?: React.ReactNode
+  size?: ThemingProps<'Banner'>['size']
 }
 
 export const Banner = ({
-  variant = 'info',
+  variant: _variant,
+  size,
   children,
   isDismissable: isDismissableProp,
   icon: iconProp,
@@ -44,7 +47,14 @@ export const Banner = ({
     defaultIsOpen: true,
   })
 
-  const styles = useMultiStyleConfig('Banner', { variant })
+  const theme = useTheme()
+  const styles = useMultiStyleConfig('Banner', { variant: _variant, size })
+
+  // Required in case variant is set in theme, we should respect the one set in theme.
+  const variant = useMemo(
+    () => _variant ?? theme?.components?.Banner?.defaultProps?.size ?? 'info',
+    [_variant, theme?.components?.Banner?.defaultProps?.size],
+  )
 
   const iconToUse = useMemo(() => {
     if (iconProp) {

react/src/Calendar/Calendar.stories.tsx

@@ -1,13 +1,14 @@
 import { useControllableState } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
+import { userEvent, within } from '@storybook/testing-library'
 import { isWeekend } from 'date-fns'
 
 import { mockDateDecorator } from '~/utils/storybook'
 
 import { Calendar, CalendarProps } from './Calendar'
 
 export default {
-  title: 'Components/Calendar/Calendar',
+  title: 'Components/Calendar',
   component: Calendar,
   tags: ['autodocs'],
   decorators: [mockDateDecorator],
@@ -39,6 +40,16 @@ CalendarWithValue.args = {
   value: new Date('2001-01-01'),
 }
 
+export const SelectTodayWhenTodayButtonClicked = CalendarOnlyTemplate.bind({})
+SelectTodayWhenTodayButtonClicked.args = {
+  shouldSetDateOnTodayButtonClick: true,
+}
+SelectTodayWhenTodayButtonClicked.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const todayButton = canvas.getByText('Today')
+  userEvent.click(todayButton)
+}
+
 export const HideOutsideDays = CalendarOnlyTemplate.bind({})
 HideOutsideDays.args = {
   showOutsideDays: false,

react/src/Calendar/CalendarBase/CalendarContext.tsx

@@ -13,6 +13,7 @@ import {
   differenceInCalendarMonths,
   isFirstDayOfMonth,
   isSameDay,
+  startOfDay,
 } from 'date-fns'
 import { Props as DayzedProps, RenderProps, useDayzed } from 'dayzed'
 import { inRange } from 'lodash'
@@ -85,6 +86,11 @@ type PassthroughProps = {
    * @default false
    */
   isCalendarFixedHeight?: boolean
+  /**
+   * Whether clicking the Today button should set the date on the input to today.
+   * @default false
+   */
+  shouldSetDateOnTodayButtonClick?: boolean
 }
 
 // Removed - and _ from alphabets for simpler classnames
@@ -163,6 +169,7 @@ const useProvideCalendar = ({
   defaultFocusedDate,
   showOutsideDays,
   isCalendarFixedHeight,
+  shouldSetDateOnTodayButtonClick,
 }: UseProvideCalendarProps) => {
   const isMobile = useIsMobile({ ssr })
   // Ensure that calculations are always made based on date of initial render,
@@ -216,7 +223,11 @@ const useProvideCalendar = ({
       ) as HTMLButtonElement | null
       elementToFocus?.focus()
     })
-  }, [classNameId])
+
+    if (shouldSetDateOnTodayButtonClick) {
+      onSelectDate?.(startOfDay(today))
+    }
+  }, [classNameId, onSelectDate, shouldSetDateOnTodayButtonClick])
 
   const updateMonthYear = useCallback(
     (newDate: Date) => {

react/src/Calendar/CalendarBase/types.ts

@@ -8,6 +8,7 @@ export type CalendarBaseProps = Pick<
   | 'size'
   | 'defaultFocusedDate'
   | 'isCalendarFixedHeight'
+  | 'shouldSetDateOnTodayButtonClick'
 > & {
   /**
    * Whether to show or hide the button to focus on Today.

react/src/Calendar/RangeCalendar.stories.tsx

@@ -1,13 +1,14 @@
 import { useControllableState } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
+import { userEvent, within } from '@storybook/testing-library'
 import { isWeekend } from 'date-fns'
 
 import { mockDateDecorator } from '~/utils/storybook'
 
 import { RangeCalendar, RangeCalendarProps } from './RangeCalendar'
 
 export default {
-  title: 'Components/Calendar/RangeCalendar',
+  title: 'Components/RangeCalendar',
   component: RangeCalendar,
   tags: ['autodocs'],
   decorators: [mockDateDecorator],
@@ -43,6 +44,18 @@ RangeCalendarWithValue.args = {
   value: [new Date('2001-01-01'), null],
 }
 
+export const SelectTodayWhenTodayButtonClicked = RangeCalendarOnlyTemplate.bind(
+  {},
+)
+SelectTodayWhenTodayButtonClicked.args = {
+  shouldSetDateOnTodayButtonClick: true,
+}
+SelectTodayWhenTodayButtonClicked.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const todayButton = canvas.getByText('Today')
+  userEvent.click(todayButton)
+}
+
 export const RangeCalendarWithRange = RangeCalendarOnlyTemplate.bind({})
 RangeCalendarWithRange.args = {
   value: [new Date('2001-01-01'), new Date('2001-02-02')],

react/src/DatePicker/DatePicker.stories.tsx

@@ -1,8 +1,10 @@
+import { Button, forwardRef, useMergeRefs } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { getMobileViewParameters, mockDateDecorator } from '~/utils/storybook'
 
 import { DatePicker, DatePickerProps } from './DatePicker'
+import { useDatePicker } from './DatePickerContext'
 
 export default {
   title: 'Components/DatePicker',
@@ -22,6 +24,11 @@ DatePickerWithValue.args = {
   defaultValue: new Date('2001-01-01'),
 }
 
+export const SelectTodayWhenTodayButtonClicked = Template.bind({})
+SelectTodayWhenTodayButtonClicked.args = {
+  shouldSetDateOnTodayButtonClick: true,
+}
+
 export const DatePickerInvalid = Template.bind({})
 DatePickerInvalid.args = {
   isInvalid: true,
@@ -59,3 +66,25 @@ SizeXs.args = {
 
 export const Mobile = Template.bind({})
 Mobile.parameters = getMobileViewParameters()
+
+// !!REQUIRES `forwardRef` to be set so Popover parent knows where to anchor to.
+const CustomInputButton = forwardRef<object, 'button'>((_props, ref) => {
+  const {
+    inputRef,
+    innerRef,
+    disclosureProps: { onOpen },
+  } = useDatePicker()
+  // !!Important to use forwarded ref so popover knows where to anchor to
+  const refs = useMergeRefs(inputRef, innerRef, ref)
+
+  return (
+    <Button ref={refs} onClick={onOpen}>
+      please look at source code to see how to use custom elements
+    </Button>
+  )
+})
+
+export const CustomInput = Template.bind({})
+CustomInput.args = {
+  inputElement: <CustomInputButton />,
+}

react/src/DatePicker/DatePicker.tsx

@@ -22,8 +22,8 @@ export interface DatePickerProps extends DatePickerBaseProps, CalendarProps {
 
 export const DatePicker = forwardRef<DatePickerProps, 'input'>((props, ref) => {
   return (
-    <DatePickerProvider {...props}>
-      <DatePickerWrapper ref={ref}>
+    <DatePickerProvider {...props} innerRef={ref}>
+      <DatePickerWrapper>
         <DatePickerContent>
           <DatePickerCalendar />
         </DatePickerContent>

react/src/DatePicker/DatePickerContext.tsx

@@ -47,6 +47,8 @@ interface DatePickerContextReturn {
   colorScheme?: ThemingProps<'DatePicker'>['colorScheme']
   size?: ThemingProps<'DatePicker'>['size']
   disclosureProps: UseDisclosureReturn
+  inputElement?: React.ReactNode
+  innerRef?: React.Ref<HTMLElement>
   calendarProps: Pick<
     CalendarProps,
     | 'isCalendarFixedHeight'
@@ -55,16 +57,21 @@ interface DatePickerContextReturn {
     | 'defaultFocusedDate'
     | 'showOutsideDays'
     | 'showTodayButton'
+    | 'shouldSetDateOnTodayButtonClick'
   >
   inputPattern?: string
 }
 
 const DatePickerContext = createContext<DatePickerContextReturn | null>(null)
 
+interface DatePickerProviderProps extends DatePickerProps {
+  innerRef?: React.Ref<HTMLElement>
+}
+
 export const DatePickerProvider = ({
   children,
   ...props
-}: PropsWithChildren<DatePickerProps>) => {
+}: PropsWithChildren<DatePickerProviderProps>) => {
   const value = useProvideDatePicker(props)
   return (
     <DatePickerContext.Provider value={value}>
@@ -105,8 +112,10 @@ const useProvideDatePicker = ({
   ssr,
   size,
   experimental_forceIosNumberKeyboard,
+  inputElement,
+  innerRef,
   ...props
-}: DatePickerProps): DatePickerContextReturn => {
+}: DatePickerProviderProps): DatePickerContextReturn => {
   const initialFocusRef = useRef<HTMLInputElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -155,7 +164,9 @@ const useProvideDatePicker = ({
     isDisabled: isDisabledProp,
     isReadOnly: isReadOnlyProp,
     isRequired: isRequiredProp,
-    ...props,
+    'aria-describedby': props['aria-describedby'],
+    onFocus: props.onFocus,
+    id: props.id,
   })
 
   const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
@@ -266,5 +277,7 @@ const useProvideDatePicker = ({
     disclosureProps,
     calendarProps,
     inputPattern,
+    inputElement,
+    innerRef,
   }
 }