feat(ui-date-input): add support for custom calendar icon

Closes: CLX-260
instructure · Dec 11, 2024 · a0fff9d · a0fff9d
1 parent 2b2a997
commit a0fff9d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/packages/ui-date-input/src/DateInput2/__examples__/DateInput2.examples.tsx b/packages/ui-date-input/src/DateInput2/__examples__/DateInput2.examples.tsx
@@ -22,7 +22,9 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import type { StoryConfig } from '@instructure/ui-test-utils'
+import { IconHeartLine } from '@instructure/ui-icons'
 import type { DateInput2Props } from '../props'
 
 export default {
@@ -33,6 +35,10 @@ export default {
       [{ text: 'error example', type: 'error' }],
       [{ text: 'hint example', type: 'hint' }],
       [{ text: 'success example', type: 'success' }]
+    ],
+    renderCalendarIcon: [
+      null,
+      <IconHeartLine key="custom-icon" color="error" title="Love" />
     ]
   },
   getComponentProps: () => {

diff --git a/packages/ui-date-input/src/DateInput2/__new-tests__/DateInput2.test.tsx b/packages/ui-date-input/src/DateInput2/__new-tests__/DateInput2.test.tsx
@@ -26,6 +26,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi, MockInstance } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
+import { IconHeartLine } from '@instructure/ui-icons'
 
 import { DateInput2 } from '../index'
 
@@ -125,6 +126,27 @@ describe('<DateInput2 />', () => {
     expect(calendarLabel).toBeInTheDocument()
   })
 
+  it('should render a custom calendar icon with screen reader label', async () => {
+    const iconLabel = 'Calendar icon Label'
+    const { container } = render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: iconLabel,
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value=""
+        renderCalendarIcon={<IconHeartLine />}
+      />
+    )
+    const calendarIcon = container.querySelector('svg[name="IconHeart"]')
+    const calendarLabel = screen.getByText(iconLabel)
+
+    expect(calendarIcon).toBeInTheDocument()
+    expect(calendarLabel).toBeInTheDocument()
+  })
+
   it('should not show calendar table by default', async () => {
     render(<DateInputExample />)
     const calendarTable = screen.queryByRole('table')

diff --git a/packages/ui-date-input/src/DateInput2/index.tsx b/packages/ui-date-input/src/DateInput2/index.tsx
@@ -34,7 +34,7 @@ import {
 } from '@instructure/ui-icons'
 import { Popover } from '@instructure/ui-popover'
 import { TextInput } from '@instructure/ui-text-input'
-import { passthroughProps } from '@instructure/ui-react-utils'
+import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
 import { jsx } from '@instructure/emotion'
@@ -152,6 +152,7 @@ const DateInput2 = ({
   placeholder,
   dateFormat,
   onRequestValidateDate,
+  renderCalendarIcon,
   // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
@@ -298,7 +299,11 @@ const DateInput2 = ({
               shape="circle"
               interaction={interaction}
             >
-              <IconCalendarMonthLine />
+              {renderCalendarIcon ? (
+                callRenderProp(renderCalendarIcon)
+              ) : (
+                <IconCalendarMonthLine />
+              )}
             </IconButton>
           }
           isShowingContent={showPopover}

diff --git a/packages/ui-date-input/src/DateInput2/props.ts b/packages/ui-date-input/src/DateInput2/props.ts
@@ -165,6 +165,11 @@ type DateInput2OwnProps = {
     utcDateString: string
   ) => void
   // margin?: Spacing // TODO enable this prop
+
+  /**
+   * Custom icon for the icon button opening the picker.
+   */
+  renderCalendarIcon?: Renderable
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -195,7 +200,8 @@ const propTypes: PropValidators<PropKeys> = {
   timezone: PropTypes.string,
   withYearPicker: PropTypes.object,
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  onRequestValidateDate: PropTypes.func
+  onRequestValidateDate: PropTypes.func,
+  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
 export type { DateInput2Props }