@codecademy/gamut
68.6.268.6.3-alpha.57e1cd.0
dist/DatePicker/DatePickerInput/index.js~
dist/DatePicker/DatePickerInput/index.jsModified+9−12
Index: package/dist/DatePicker/DatePickerInput/index.js
===================================================================
--- package/dist/DatePicker/DatePickerInput/index.js
+++ package/dist/DatePicker/DatePickerInput/index.js
@@ -1,7 +1,8 @@
import { MiniCalendarIcon } from '@codecademy/gamut-icons';
import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
import { FlexBox } from '../../Box';
+import { IconButton } from '../../Button';
import { FormGroup } from '../../Form/elements/FormGroup';
import { isSameDay } from '../DatePickerCalendar/Calendar/utils/dateGrid';
import { handleDateSelectRange } from '../DatePickerCalendar/utils/dateSelect';
import { useDatePicker } from '../DatePickerContext';
@@ -18,8 +19,9 @@
label,
name,
rangePart,
size = 'base',
+ description,
...rest
}, ref) => {
const context = useDatePicker();
if (context === null) {
@@ -143,17 +145,18 @@
if (!isCalendarOpen) openCalendar();
focusCalendar();
}, [isCalendarOpen, openCalendar, focusCalendar]);
return /*#__PURE__*/_jsx(FormGroup, {
- htmlFor: inputId,
+ description: description,
+ id: inputId,
isSoloField: true,
label: label ?? defaultLabel,
mb: 0,
pb: 0,
spacing: "tight",
width: "fit-content",
children: /*#__PURE__*/_jsxs(SegmentedShell, {
- id: inputId,
+ "aria-labelledby": inputId,
inputSize: size,
ref: shellRef,
role: "group",
variant: error ? 'error' : 'default',
@@ -198,18 +201,12 @@
name: name ?? 'datePickerInput',
tabIndex: -1,
type: "hidden",
value: hiddenValue
- }), /*#__PURE__*/_jsx(FlexBox, {
- alignItems: "center",
- justifyContent: "center",
- pl: 16,
- pr: 8,
- role: "presentation",
- children: /*#__PURE__*/_jsx(MiniCalendarIcon, {
- "aria-hidden": true,
- size: 16
- })
+ }), /*#__PURE__*/_jsx(IconButton, {
+ icon: MiniCalendarIcon,
+ size: "small",
+ tip: "Open calendar"
})]
})
});
});
\ No newline at end of file