@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