Merge pull request #755 from opengovsg/release-v1.24.0

build: release v1.24.0
opengovsg · Sep 16, 2024 · 2dfbe9c · 2dfbe9c
2 parents b43b610 + 06e23c9
commit 2dfbe9c
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 16 deletions.
diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
@@ -4,12 +4,21 @@ 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.24.0](https://github.com/opengovsg/design-system/compare/v1.23.0...v1.24.0)
+
+- feat: fix Input prefill style regression, add `isPrefilled` prop to Datepicker and Select [`#754`](https://github.com/opengovsg/design-system/pull/754)
+- chore: merge v1.23.0 back to main [`#747`](https://github.com/opengovsg/design-system/pull/747)
+- build: release v1.23.0 [`#746`](https://github.com/opengovsg/design-system/pull/746)
+
 #### [v1.23.0](https://github.com/opengovsg/design-system/compare/v1.22.0...v1.23.0)
 
+> 20 August 2024
+
 - fix!(DatePicker): add `renderInputElement` prop [`#745`](https://github.com/opengovsg/design-system/pull/745)
 - chore: enable dual publish to GitHub [`#740`](https://github.com/opengovsg/design-system/pull/740)
 - chore: merge latest v1.22.0 back to main [`#732`](https://github.com/opengovsg/design-system/pull/732)
 - build: release v1.22.0 [`#731`](https://github.com/opengovsg/design-system/pull/731)
+- build: release v1.23.0 [`224b03c`](https://github.com/opengovsg/design-system/commit/224b03c263672eccb9a409309b4c549cb718b6f2)
 
 #### [v1.22.0](https://github.com/opengovsg/design-system/compare/v1.21.0...v1.22.0)
 

diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",

diff --git a/react/src/DatePicker/DatePicker.stories.tsx b/react/src/DatePicker/DatePicker.stories.tsx
@@ -62,6 +62,11 @@ FixedHeightCalendarPopover.args = {
   isCalendarFixedHeight: true,
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+}
+
 export const SizeSmall = Template.bind({})
 SizeSmall.args = {
   size: 'sm',

diff --git a/react/src/DatePicker/DatePickerContext.tsx b/react/src/DatePicker/DatePickerContext.tsx
@@ -103,6 +103,7 @@ const useProvideDatePicker = ({
   isReadOnly: isReadOnlyProp,
   isRequired: isRequiredProp,
   isInvalid: isInvalidProp,
+  isPrefilled,
   locale,
   allowManualInput = true,
   allowInvalidDates = true,
@@ -260,6 +261,7 @@ const useProvideDatePicker = ({
   const styles = useMultiStyleConfig('DatePicker', {
     size,
     colorScheme,
+    isPrefilled,
   })
 
   const placeholder = useMemo(

diff --git a/react/src/DatePicker/components/DatePickerInput.tsx b/react/src/DatePicker/components/DatePickerInput.tsx
@@ -30,6 +30,7 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
     size,
     inputPattern,
     innerRef,
+    styles,
   } = useDatePicker()
 
   const mergedInputRef = useMergeRefs(inputRef, innerRef, ref)
@@ -71,13 +72,15 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             onBlur={handleInputBlur}
             onClick={handleInputClick}
             isReadOnly={fcProps.isReadOnly || !allowManualInput}
+            sx={styles.field}
           />
         ) : (
           <Input
             size={size}
             inputMode="numeric"
             placeholder={placeholder}
             pattern={inputPattern}
+            sx={styles.field}
           />
         )}
         <InputRightAddon p={0} border="none">

diff --git a/react/src/DatePicker/types.ts b/react/src/DatePicker/types.ts
@@ -24,6 +24,10 @@ export interface DatePickerBaseProps
    * @defaultValue `true`
    */
   allowInvalidDates?: boolean
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
   /**
    * Whether the calendar will close once a date is selected.
    * @defaultValue `true`

diff --git a/react/src/DateRangePicker/DateRangePicker.stories.tsx b/react/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -57,6 +57,12 @@ DatePickerDisabled.args = {
   defaultValue: [new Date('2001-01-01'), new Date('2002-01-03')],
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  defaultValue: [new Date('2001-01-01'), new Date('2002-01-03')],
+}
+
 export const Mobile = Template.bind({})
 Mobile.parameters = getMobileViewParameters()
 

diff --git a/react/src/DateRangePicker/DateRangePickerContext.tsx b/react/src/DateRangePicker/DateRangePickerContext.tsx
@@ -103,6 +103,7 @@ const useProvideDateRangePicker = ({
   isReadOnly: isReadOnlyProp,
   isRequired: isRequiredProp,
   isInvalid: isInvalidProp,
+  isPrefilled,
   locale,
   allowManualInput = true,
   allowInvalidDates = true,
@@ -333,6 +334,7 @@ const useProvideDateRangePicker = ({
   const styles = useMultiStyleConfig('DateRangePicker', {
     size,
     colorScheme,
+    isPrefilled,
   })
 
   const placeholder = useMemo(

diff --git a/react/src/Input/Input.tsx b/react/src/Input/Input.tsx
@@ -32,7 +32,13 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
 
   // Return normal input component if not success state.
   if (!props.isSuccess) {
-    return <ChakraInput ref={ref} __css={inputStyles.field} {...inputProps} />
+    return (
+      <ChakraInput
+        ref={ref}
+        sx={merge({}, inputStyles.field, props.sx)}
+        {...inputProps}
+      />
+    )
   }
 
   return (

diff --git a/react/src/MultiSelect/MultiSelect.stories.tsx b/react/src/MultiSelect/MultiSelect.stories.tsx
@@ -103,6 +103,12 @@ DisabledWithSelection.args = {
   values: ['What happens when the label is fairly long', 'Bat'],
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  values: ['What happens when the label is fairly long', 'Bat'],
+}
+
 export const WithFixedItemHeight = Template.bind({})
 WithFixedItemHeight.args = {
   size: 'md',

diff --git a/react/src/MultiSelect/MultiSelectProvider.tsx b/react/src/MultiSelect/MultiSelectProvider.tsx
@@ -70,6 +70,10 @@ export interface MultiSelectProviderProps<
    * If `true`, the selected items will take up the full width of the input container. Defaults to `false`.
    */
   isStretchLayout?: boolean
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
 }
 export const MultiSelectProvider = ({
   items: rawItems,
@@ -81,6 +85,7 @@ export const MultiSelectProvider = ({
   placeholder: placeholderProp,
   clearButtonLabel = 'Clear selection',
   isSearchable = true,
+  isPrefilled = false,
   defaultIsOpen,
   isInvalid: isInvalidProp,
   isReadOnly: isReadOnlyProp,
@@ -297,6 +302,7 @@ export const MultiSelectProvider = ({
     size,
     isFocused: isFocused || isOpen,
     isEmpty: selectedItems.length === 0,
+    isPrefilled,
   })
 
   const virtualListHeight = useMemo(() => {

diff --git a/react/src/SingleSelect/SingleSelect.stories.tsx b/react/src/SingleSelect/SingleSelect.stories.tsx
@@ -180,6 +180,12 @@ Disabled.args = {
   isDisabled: true,
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  value: itemToValue(INITIAL_COMBOBOX_ITEMS[2]),
+}
+
 export const FormInput: StoryFn<SingleSelectProps> = (args) => {
   const [value, setValue] = useState<string>(args.value)
 

diff --git a/react/src/SingleSelect/SingleSelectProvider.tsx b/react/src/SingleSelect/SingleSelectProvider.tsx
@@ -39,6 +39,10 @@ export interface SingleSelectProviderProps<
   /** Color scheme of component */
   colorScheme?: ThemingProps<'SingleSelect'>['colorScheme']
   fixedItemHeight?: number
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
 }
 export const SingleSelectProvider = ({
   items: rawItems,
@@ -51,6 +55,7 @@ export const SingleSelectProvider = ({
   clearButtonLabel = 'Clear selection',
   isClearable = true,
   isSearchable = true,
+  isPrefilled = false,
   initialIsOpen,
   isInvalid: isInvalidProp,
   isReadOnly: isReadOnlyProp,
@@ -234,6 +239,7 @@ export const SingleSelectProvider = ({
   const styles = useMultiStyleConfig('SingleSelect', {
     size,
     isClearable,
+    isPrefilled,
     colorScheme,
   })
 

diff --git a/react/src/theme/components/DatePicker.ts b/react/src/theme/components/DatePicker.ts
@@ -1,40 +1,52 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
 import { anatomy } from '@chakra-ui/theme-tools'
 import { memoizedGet as get } from '@chakra-ui/utils'
+import omit from 'lodash/omit'
+
+import { Input } from './Input'
 
 export const datepickerAnatomy = anatomy('datepicker').parts(
   'header',
   'inputButton',
   'container',
   'calendarButton',
+  'field',
 )
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(datepickerAnatomy.keys)
 
 const sizes = {
-  xs: definePartsStyle({
+  xs: definePartsStyle((props) => ({
+    field: Input.sizes?.xs(props).field,
     inputButton: {
       fontSize: '1rem',
     },
-  }),
-  sm: definePartsStyle({
+  })),
+  sm: definePartsStyle((props) => ({
+    field: Input.sizes?.sm(props).field,
     inputButton: {
       fontSize: '1.25rem',
     },
-  }),
-  md: definePartsStyle({
+  })),
+  md: definePartsStyle((props) => ({
+    field: Input.sizes?.md(props).field,
     inputButton: {
       fontSize: '1.25rem',
     },
-  }),
+  })),
 }
 
-const baseStyle = definePartsStyle(({ theme }) => {
-  const themeTextStyles = get(theme, 'textStyles')
+const baseStyle = definePartsStyle((props) => {
+  const themeTextStyles = get(props.theme, 'textStyles')
+  const inputFieldStyle = omit(
+    Input.variants?.outline(props).field,
+    'borderRadius',
+  )
   return {
     container: {
       bg: 'utility.ui',
     },
+    field: inputFieldStyle,
     calendarButton: {
       _active: {
         zIndex: '1',

diff --git a/react/src/theme/components/DateRangePicker.ts b/react/src/theme/components/DateRangePicker.ts
@@ -1,4 +1,5 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import omit from 'lodash/omit'
 
 import { DatePicker, datepickerAnatomy } from './DatePicker'
 import { Input } from './Input'
@@ -40,19 +41,19 @@ const sizes = {
   xs: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.xs(props).field,
-      inputButton: DatePicker.sizes?.xs.inputButton,
+      inputButton: DatePicker.sizes?.xs(props).inputButton,
     }
   }),
   sm: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.sm(props).field,
-      inputButton: DatePicker.sizes?.sm.inputButton,
+      inputButton: DatePicker.sizes?.sm(props).inputButton,
     }
   }),
   md: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.md(props).field,
-      inputButton: DatePicker.sizes?.md.inputButton,
+      inputButton: DatePicker.sizes?.md(props).inputButton,
     }
   }),
 }
@@ -64,7 +65,7 @@ const variants = {
 export const DateRangePicker = defineMultiStyleConfig({
   variants,
   sizes,
-  baseStyle: DatePicker.baseStyle,
+  baseStyle: (props) => omit(DatePicker.baseStyle?.(props), 'field'),
   defaultProps: {
     variant: 'outline',
     size: 'md',