Merge pull request #241 from opengovsg/release-0.1.0-alpha.9

build: release version v0.1.0-alpha.9

react/CHANGELOG.md

@@ -4,12 +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).
 
+#### [v0.1.0-alpha.9](https://github.com/opengovsg/design-system/compare/v0.1.0-alpha.8...v0.1.0-alpha.9)
+
+- chore: merge v0.1.0-alpha.8 to back to main [`#240`](https://github.com/opengovsg/design-system/pull/240)
+- feat: replace usage of borderRadius with token [`#235`](https://github.com/opengovsg/design-system/pull/235)
+- feat: upgrade chakra-ui to v2.5.0 to fix Menu [`#228`](https://github.com/opengovsg/design-system/pull/228)
+- feat: add more props, map list to List components, remove unused props [`#227`](https://github.com/opengovsg/design-system/pull/227)
+- fix(deps): bump date-fns-tz from 1.3.7 to 2.0.0 in /react [`#226`](https://github.com/opengovsg/design-system/pull/226)
+- chore(deps-dev): bump @typescript-eslint/parser in /react [`#225`](https://github.com/opengovsg/design-system/pull/225)
+- chore(deps-dev): bump @vitejs/plugin-react from 3.0.1 to 3.1.0 in /react [`#222`](https://github.com/opengovsg/design-system/pull/222)
+- chore(deps-dev): bump storybook in /react [`#217`](https://github.com/opengovsg/design-system/pull/217)
+- chore(deps-dev): bump eslint-plugin-storybook in /react [`#216`](https://github.com/opengovsg/design-system/pull/216)
+- chore(deps-dev): bump eslint-plugin-import in /react [`#214`](https://github.com/opengovsg/design-system/pull/214)
+- chore(deps-dev): bump @storybook/addon-essentials in /react [`#213`](https://github.com/opengovsg/design-system/pull/213)
+- fix(deps): bump http-cache-semantics from 4.1.0 to 4.1.1 in /react [`#212`](https://github.com/opengovsg/design-system/pull/212)
+- build: release v0.1.0-alpha.8 [`#211`](https://github.com/opengovsg/design-system/pull/211)
+
 #### [v0.1.0-alpha.8](https://github.com/opengovsg/design-system/compare/v0.1.0-alpha.7...v0.1.0-alpha.8)
 
+> 3 February 2023
+
 - feat: add ssr, link.isExternalFn props to useMdComponent hook [`#210`](https://github.com/opengovsg/design-system/pull/210)
 - fix(DateRangePicker): avoid kebab case for object css [`#209`](https://github.com/opengovsg/design-system/pull/209)
 - chore: merge v0.1.0-alpha.7 release back to main [`#208`](https://github.com/opengovsg/design-system/pull/208)
 - build: release v0.1.0 alpha.7 [`#207`](https://github.com/opengovsg/design-system/pull/207)
+- chore: update package to v0.1.0-alpha.8 [`58e4573`](https://github.com/opengovsg/design-system/commit/58e45732a125cea7b07c600c41e43e628629c635)
 
 #### [v0.1.0-alpha.7](https://github.com/opengovsg/design-system/compare/v0.1.0-alpha.6...v0.1.0-alpha.7)
 

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",
@@ -38,7 +38,7 @@
     "@fontsource/ibm-plex-mono": "^4.5.13",
     "country-flag-icons": "^1.4.19",
     "date-fns": "^2.28.0",
-    "date-fns-tz": "^1.3.7",
+    "date-fns-tz": "^2.0.0",
     "dayzed": "^3.2.3",
     "downshift": "^6.1.7",
     "fuzzysort": "^2.0.1",
@@ -55,7 +55,7 @@
     "use-draggable-scroll": "^0.1.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.4.4",
+    "@chakra-ui/react": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.0 || ^6.0.0"

react/src/Calendar/CalendarBase/CalendarHeader.tsx

@@ -27,7 +27,7 @@ const MonthYearSelect = ({ children, ...props }: MonthYearSelectProps) => {
       // Prevents any parent form control from applying error styles to this select.
       isInvalid={false}
       variant="flushed"
-      borderRadius="4px"
+      borderRadius="base"
       color="base.content.strong"
       textStyle="subhead-1"
       flexBasis="fit-content"

react/src/Calendar/CalendarBase/DayOfMonth.tsx

@@ -125,10 +125,10 @@ export const DayOfMonth = forwardRef<DayOfMonthProps, 'button'>(
         if (isInRange) {
           const returnStyles: SystemStyleObject = {}
           if (isLastDayOfMonth(date) || isSaturday(date)) {
-            returnStyles.borderEndRadius = '4px'
+            returnStyles.borderEndRadius = 'base'
           }
           if (isFirstDayOfMonth(date) || isSunday(date)) {
-            returnStyles.borderStartRadius = '4px'
+            returnStyles.borderStartRadius = 'base'
           }
           return { bg: selectedBgColor, ...returnStyles }
         }

react/src/DatePicker/components/DatePickerContentBase.tsx

@@ -61,7 +61,7 @@ export const DatePickerContentBase = ({
 
   return (
     <Portal>
-      <PopoverContent borderRadius="4px" w="unset" maxW="100vw" bg="white">
+      <PopoverContent borderRadius="base" w="unset" maxW="100vw" bg="white">
         <ReactFocusLock>
           <PopoverHeader
             h="3.5rem"

react/src/DatePicker/components/DatePickerInput.tsx

@@ -63,7 +63,6 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             maskPlaceholder={placeholder}
             ref={mergedInputRef}
             {...fcProps}
-            borderRightRadius={0}
             onBlur={handleInputBlur}
             onClick={handleInputClick}
             isReadOnly={fcProps.isReadOnly || !allowManualInput}

react/src/DateRangePicker/components/DateRangePickerInput.tsx

@@ -84,7 +84,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             maskPlaceholder={placeholder}
             ref={mergedStartInputRef}
             {...fcProps}
-            borderRightRadius={0}
             onBlur={handleInputBlur}
             onClick={handleInputClick}
             isReadOnly={fcProps.isReadOnly || !allowManualInput}
@@ -117,7 +116,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             onClick={handleInputClick}
             ref={endInputRef}
             {...fcProps}
-            borderRightRadius={0}
             onBlur={handleInputBlur}
             isReadOnly={fcProps.isReadOnly || !allowManualInput}
           />

react/src/FormControl/FormHelperText/FormHelperText.tsx

@@ -1,13 +1,13 @@
 import {
   FormHelperText as ChakraFormHelperText,
-  HelpTextProps,
+  FormHelperTextProps as ChakraFormHelperTextProps,
   Icon,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 import { BxsCheckCircle } from '~/icons'
 
-export interface FormHelperTextProps extends HelpTextProps {
+export interface FormHelperTextProps extends ChakraFormHelperTextProps {
   /**
    * Variant of input message, determines the styling. Defaults to `info`.
    */

react/src/Input/Input.tsx

@@ -7,7 +7,7 @@ import {
   InputRightElement,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { mergeWith, omit } from '@chakra-ui/utils'
+import { merge, omit } from 'lodash'
 
 import { BxsCheckCircle } from '~/icons/BxsCheckCircle'
 
@@ -31,13 +31,7 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
 
   // Return normal input component if not success state.
   if (!props.isSuccess) {
-    return (
-      <ChakraInput
-        ref={ref}
-        {...inputProps}
-        sx={mergeWith(inputStyles.field, props.sx)}
-      />
-    )
+    return <ChakraInput ref={ref} __css={inputStyles.field} {...inputProps} />
   }
 
   return (
@@ -46,8 +40,8 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
     <InputGroup>
       <ChakraInput
         ref={ref}
+        sx={merge({}, inputStyles.field, props.sx)}
         {...inputProps}
-        sx={mergeWith(inputStyles.field, props.sx)}
       />
       <InputRightElement sx={inputStyles.success}>
         <Icon as={BxsCheckCircle} />
@@ -60,8 +54,8 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
  * This is used in by Chakra's `InputGroup` component to remove border radii
  * when paired with `InputLeftAddon` or `InputRightAddon`.
  *
- * See https://github.com/chakra-ui/chakra-ui/blob/main/packages/input/src/input.tsx#L70 and
- * https://github.com/chakra-ui/chakra-ui/blob/main/packages/input/src/input-group.tsx#L58.
+ * See https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/input/src/input.tsx#L70 and
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/input/src/input-group.tsx#L71.
  */
 Input.id = 'Input'
 

react/src/SingleSelect/components/SelectCombobox/SelectCombobox.tsx

@@ -64,6 +64,9 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
           pos="relative"
           display="grid"
           marginInlineEnd={isClearable ? '-1px' : undefined}
+          _focusWithin={{
+            zIndex: 1,
+          }}
           gridTemplateColumns="1fr"
           {...getComboboxProps({
             disabled: isDisabled,

react/src/hooks/useMdComponents.tsx

@@ -1,26 +1,18 @@
 import { useMemo } from 'react'
-import type { Options as TransformOptions } from 'react-markdown'
+import { Components } from 'react-markdown'
 import {
+  LinkProps,
   ListItem,
+  ListProps,
   OrderedList,
   SystemStyleObject,
   Text,
   TextProps,
+  UnorderedList,
 } from '@chakra-ui/react'
 
-import { Link, LinkProps } from '~/Link'
-import type { WithSsr } from '~/types/WithSsr'
-
-type MdComponentStyles = {
-  /**
-   * If exists, will be used for styling links
-   */
-  link?: SystemStyleObject
-  /**
-   * If exists, will be used for styling text
-   */
-  text?: SystemStyleObject
-}
+import { Link } from '~/Link'
+import { WithSsr } from '~/types/WithSsr'
 
 type MdComponentProps = {
   /**
@@ -34,15 +26,34 @@ type MdComponentProps = {
     isExternalFn?: (href: string) => boolean
   }
   /**
-   * If exists, will be used for styling text
+   * If exists, will be passed into List related component
+   */
+  list?: ListProps
+  /**
+   * If exists, will be passed into Text related component
    */
   text?: TextProps
 }
 
+type MdComponentStyles = {
+  /**
+   * If exists, will be used for styling links.
+   */
+  link?: SystemStyleObject
+  /**
+   * If exists, will be used for styling lists
+   */
+  list?: SystemStyleObject
+  /**
+   * If exists, will be used for styling text
+   */
+  text?: SystemStyleObject
+}
+
 interface UseMdComponentsProps extends WithSsr {
   styles?: MdComponentStyles
-  overrides?: TransformOptions['components']
   props?: MdComponentProps
+  overrides?: Components
 }
 
 const calcIsExternal = ({
@@ -73,31 +84,83 @@ export const useMdComponents = ({
   props = {},
   overrides = {},
   ssr,
-}: UseMdComponentsProps = {}): TransformOptions['components'] => {
-  const mdComponents: TransformOptions['components'] = useMemo(
+}: UseMdComponentsProps = {}): Components => {
+  const textStyles = useMemo(
+    () => ({
+      sx: styles.text,
+    }),
+    [styles.text],
+  )
+
+  const linkStyles = useMemo(
+    () => ({
+      sx: {
+        whiteSpace: 'pre-wrap',
+        display: 'initial',
+        ...(styles.link ?? {}),
+      },
+    }),
+    [styles.link],
+  )
+
+  const listStyles = useMemo(
+    () => ({
+      sx: {
+        whiteSpace: 'pre-wrap',
+        ...(styles.list ?? {}),
+      },
+    }),
+    [styles.list],
+  )
+
+  const mdComponents: Components = useMemo(
     () => ({
-      ol: (p) => (
-        <OrderedList marginInlineStart="1.25rem" {...p} sx={styles.text} />
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ol: ({ node, ordered, ...rest }) => (
+        <OrderedList
+          marginInlineStart="1.25rem"
+          whiteSpace="initial"
+          {...props.list}
+          {...rest}
+          {...textStyles}
+        />
+      ),
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ul: ({ node, ordered, ...rest }) => (
+        <UnorderedList {...props.list} {...rest} {...listStyles} />
+      ),
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      li: ({ node, ordered, ...rest }) => (
+        <ListItem {...rest} {...textStyles} />
       ),
-      li: (p) => <ListItem {...p} sx={styles.text} />,
-      a: (p) => {
-        const { isExternalFn, ...restLinkProps } = props.link || {}
-        const { href } = p
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      a: ({ node, href, ...rest }) => {
+        const { isExternalFn, ...restLinkProps } = props.link ?? {}
         const isExternal = calcIsExternal({ href, ssr, isExternalFn })
 
         return (
           <Link
-            {...p}
             isExternal={isExternal}
-            sx={styles.link}
+            href={href}
+            {...linkStyles}
+            {...rest}
             {...restLinkProps}
           />
         )
       },
-      p: (p) => <Text {...p} sx={styles.text} {...props.text} />,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      p: ({ node, ...props }) => <Text {...props} {...textStyles} />,
       ...overrides,
     }),
-    [overrides, props.link, props.text, ssr, styles.link, styles.text],
+    [
+      overrides,
+      props.list,
+      props.link,
+      textStyles,
+      listStyles,
+      linkStyles,
+      ssr,
+    ],
   )
 
   return mdComponents

react/src/theme/components/Attachment.ts

@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
     transitionDuration: 'normal',
   },
   fileInfoContainer: {
-    borderRadius: '4px',
+    borderRadius: 'base',
     border: '1px solid',
     borderColor: 'base.divider.medium',
     bg: 'interaction.main-subtle.default',
@@ -130,7 +130,7 @@ const variantOutline = definePartsStyle((props) => {
       justifyContent: 'center',
       cursor: 'pointer',
       border: '1px dashed',
-      borderRadius: '4px',
+      borderRadius: 'base',
       outline: 'none',
       _invalid: {
         // Remove extra 1px of outline.

react/src/theme/components/Badge.ts

@@ -90,7 +90,7 @@ const sizes: Record<string, SystemStyleObject> = {
   md: {
     py: '0.25rem',
     px: '0.5rem',
-    borderRadius: '4px',
+    borderRadius: 'base',
   },
 }
 

react/src/theme/components/Button.ts

@@ -232,7 +232,7 @@ const variantInputAttached = defineStyle((props) => {
     color: 'interaction.support.disabled-content',
     borderColor: 'base.divider.strong',
     borderStartRadius: 0,
-    borderEndRadius: '2px',
+    borderEndRadius: 'sm',
     _hover: {
       bg: 'interaction.muted.main.hover',
       _disabled: {
@@ -279,7 +279,7 @@ const variants = {
 const baseStyle = defineStyle({
   ...textStyles['subhead-1'],
   whiteSpace: 'pre-wrap',
-  borderRadius: '0.25rem',
+  borderRadius: 'base',
   border: '1px solid',
   flexShrink: 0,
   // -1px for border