added borderd dropdowns for month and year

.changeset/bordered-datepicker.md

@@ -10,6 +10,8 @@ Added corner radius support for `DateInput` component in theme next.
 
 Added 1px gap between Date Input and the menu.
 
+Added borderedDropdown prop for `CalendarNavigation` component to display bordered months and year dropdown.
+
 ```
  <DatePicker bordered />
  <DateInput bordered />

packages/lab/src/calendar/Calendar.tsx

@@ -24,6 +24,7 @@ export type CalendarProps = useCalendarProps & {
   className?: string;
   renderDayContents?: CalendarCarouselProps["renderDayContents"];
   hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
+  borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
   TooltipProps?: CalendarCarouselProps["TooltipProps"];
   hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
 };
@@ -37,6 +38,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
       renderDayContents,
       hideYearDropdown,
       TooltipProps,
+      borderedDropdown,
       ...rest
     } = props;
 
@@ -79,7 +81,10 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
           aria-label={calendarLabel}
           ref={ref}
         >
-          <CalendarNavigation hideYearDropdown={hideYearDropdown} />
+          <CalendarNavigation
+            borderedDropdown={borderedDropdown}
+            hideYearDropdown={hideYearDropdown}
+          />
           <CalendarWeekHeader />
           <CalendarCarousel
             onFocus={handleFocus}

packages/lab/src/calendar/internal/CalendarNavigation.tsx

@@ -37,6 +37,7 @@ export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
   YearDropdownProps?: dateDropdownProps;
   onMonthSelect?: dateDropdownProps["onChange"];
   onYearSelect?: dateDropdownProps["onChange"];
+  borderedDropdown?: dateDropdownProps["bordered"];
   onNavigateNext?: ButtonProps["onClick"];
   onNavigatePrevious?: ButtonProps["onClick"];
   hideYearDropdown?: boolean;
@@ -153,6 +154,7 @@ export const CalendarNavigation = forwardRef<
     MonthDropdownProps,
     YearDropdownProps,
     hideYearDropdown,
+    borderedDropdown,
     ...rest
   } = props;
 
@@ -233,6 +235,7 @@ export const CalendarNavigation = forwardRef<
       </Tooltip>
       <div className={withBaseName("dropdowns")}>
         <Dropdown
+          bordered={borderedDropdown}
           aria-label="Month Dropdown"
           selected={selectedMonth ? [selectedMonth] : []}
           value={formatMonth(selectedMonth)}
@@ -256,6 +259,7 @@ export const CalendarNavigation = forwardRef<
             selected={selectedYear ? [selectedYear] : []}
             value={formatYear(selectedYear)}
             onSelectionChange={handleYearSelect}
+            bordered={borderedDropdown}
             {...YearDropdownProps}
           >
             {years.map((year) => (

packages/lab/src/date-picker/DatePicker.tsx

@@ -139,6 +139,7 @@ export const DatePicker = forwardRef<
     onSelectionChange,
     onChange,
     visibleMonths = 2,
+    bordered,
     ...rest
   },
   ref,
@@ -249,6 +250,7 @@ export const DatePicker = forwardRef<
     <DatePickerContext.Provider value={datePickerContextValue}>
       <DateInput
         validationStatus={validationStatus}
+        bordered={bordered}
         className={clsx(withBaseName(), className)}
         ref={inputRef}
         {...getReferenceProps()}
@@ -275,7 +277,7 @@ export const DatePicker = forwardRef<
         ref={floatingRef}
         {...getFloatingProps()}
         onSelect={handleSelect}
-        CalendarProps={CalendarProps}
+        CalendarProps={{ ...CalendarProps, borderedDropdown: bordered }}
         helperText={helperText}
         visibleMonths={visibleMonths}
       />