Add bordered prop to DatePicker and DateInput

.changeset/bordered-datepicker.md

@@ -0,0 +1,20 @@
+---
+"@salt-ds/lab": minor
+---
+
+Added bordered prop for `DateInput` component.
+
+Added examples for bordered style variant for DateInput and DatePicker.
+
+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 />
+```
+
+_Note: this Labs API will be refactored and re-aligned to the updated DatePicker approach via_ [PR 3716](https://github.com/jpmorganchase/salt-ds/pull/3716)

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-input/DateInput.css

@@ -1,12 +1,15 @@
 /* Style applied to the root element */
 .saltDateInput {
+  --input-border: none;
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderStyle: var(--salt-editable-borderStyle);
   --input-outlineColor: var(--salt-focused-outlineColor);
   --input-borderWidth: var(--salt-size-border);
 
   align-items: center;
   background: var(--saltDateInput-background, var(--input-background));
+  border: var(--input-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   gap: var(--salt-spacing-50);
@@ -21,6 +24,7 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
 .saltDateInput:hover {
@@ -178,6 +182,24 @@
   border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
 }
 
+/* Style applied if `bordered={true}` */
+.saltDateInput.saltDateInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+
+/* Style applied if focused or active when `bordered={true}` */
+.saltDateInput-bordered.saltDateInput-focused,
+.saltDateInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+
+/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */
+.saltDateInput-bordered.saltDateInput-readOnly,
+.saltDateInput-bordered.saltDateInput-disabled:hover {
+  --input-borderWidth: 0;
+}
+
 /* Style applied to end adornments */
 .saltDateInput-endAdornmentContainer {
   display: inline-flex;

packages/lab/src/date-input/DateInput.tsx

@@ -102,6 +102,10 @@ export interface DateInputProps<SelectionVariantType>
    * Styling variant. Defaults to "primary".
    */
   variant?: "primary" | "secondary";
+  /**
+   * Styling variant with full border. Defaults to false
+   */
+  bordered?: boolean;
   /**
    * Function to format the input value.
    */
@@ -155,6 +159,7 @@ export const DateInput = forwardRef<
     readOnly: readOnlyProp,
     validationStatus: validationStatusProp,
     variant = "primary",
+    bordered = false,
     dateFormatter = defaultDateFormatter,
     placeholder = "dd mmm yyyy",
     startInputRef,
@@ -327,6 +332,7 @@ export const DateInput = forwardRef<
           [withBaseName("disabled")]: isDisabled,
           [withBaseName("readOnly")]: isReadOnly,
           [withBaseName(validationStatus ?? "")]: validationStatus,
+          [withBaseName("bordered")]: bordered,
         },
         className,
       )}

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

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 
-import { flip, useDismiss, useInteractions } from "@floating-ui/react";
+import { flip, offset, useDismiss, useInteractions } from "@floating-ui/react";
 import {
   type DateValue,
   getLocalTimeZone,
@@ -139,6 +139,7 @@ export const DatePicker = forwardRef<
     onSelectionChange,
     onChange,
     visibleMonths = 2,
+    bordered,
     ...rest
   },
   ref,
@@ -182,7 +183,7 @@ export const DatePicker = forwardRef<
       open: open,
       onOpenChange: onOpenChange,
       placement: "bottom-start",
-      middleware: [flip({ fallbackStrategy: "initialPlacement" })],
+      middleware: [offset(1), flip({ fallbackStrategy: "initialPlacement" })],
     });
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
@@ -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}
       />

packages/lab/src/date-picker/DatePickerPanel.css

@@ -10,6 +10,7 @@
   display: flex;
   border-radius: var(--salt-palette-corner, 0);
 }
+
 .saltDatePickerPanel-container {
   width: min-content;
   gap: 1px;

packages/lab/stories/date-input/date-input.stories.tsx

@@ -24,3 +24,8 @@ export const Range = DateInputTemplate.bind({});
 Range.args = {
   selectionVariant: "range",
 };
+
+export const Bordered = DateInputTemplate.bind({});
+Bordered.args = {
+  bordered: true,
+};

packages/lab/stories/date-picker/date-picker.stories.tsx

@@ -202,3 +202,8 @@ export const ControlledOpenOnEnter: StoryFn<
     />
   );
 };
+
+export const Bordered = DatePickerTemplate.bind({});
+Bordered.args = {
+  bordered: true,
+};

site/docs/components/date-picker/examples.mdx

@@ -56,5 +56,14 @@ For more information, refer to the [calendar](/salt/components/calendar).
 
 Use the `visibleMonths` prop to customize the number of visible months in the panel for a range date picker. This is useful on smaller viewports.
 
+</LivePreview>
+<LivePreview componentName="date-picker" exampleName="Bordered">
+
+## Bordered
+
+To style date picker with a full border, set `bordered={true}`.
+
+We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).
+
 </LivePreview>
 </LivePreviewControls>

site/src/examples/date-picker/Bordered.tsx

@@ -0,0 +1,6 @@
+import { DatePicker } from "@salt-ds/lab";
+import type { ReactElement } from "react";
+
+export const Bordered = (): ReactElement => (
+  <DatePicker bordered style={{ width: "200px" }} />
+);

site/src/examples/date-picker/index.ts

@@ -5,3 +5,4 @@ export * from "./WithValidation";
 export * from "./Range";
 export * from "./WithDisabledDates";
 export * from "./VisibleMonths";
+export * from "./Bordered";