added bordered prop for DateInput and added examples

.changeset/bordered-datepicker.md

@@ -0,0 +1,12 @@
+---
+"@salt-ds/lab": minor
+---
+
+Added bordered prop for `DateInput` component.
+
+Added examples for bordered style variant for DateInput and DatePicker
+
+```
+ <DatePicker bordered />
+ <DateInput bordered />
+```

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

@@ -1,12 +1,14 @@
 /* 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);
   color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   gap: var(--salt-spacing-50);
@@ -178,6 +180,25 @@
   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;
@@ -187,15 +208,15 @@
   align-items: end;
 }
 
-.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
+.saltDateInput-endAdornmentContainer .saltButton~.saltButton {
   margin-left: calc(-1 * var(--salt-spacing-50));
 }
 
 .saltDateInput-endAdornmentContainer .saltButton:last-child {
   margin-right: calc(var(--salt-spacing-50) * -1);
 }
 
-.saltDateInput-endAdornmentContainer > .saltButton {
+.saltDateInput-endAdornmentContainer>.saltButton {
   --saltButton-padding: var(--salt-spacing-50);
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-}
+}

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

@@ -66,16 +66,16 @@ function getCalendarDate(inputDate: string) {
 const defaultDateFormatter = (date: DateValue | undefined): string => {
   return date
     ? new DateFormatter("EN-GB", {
-        day: "2-digit",
-        month: "short",
-        year: "numeric",
-      }).format(date.toDate(getLocalTimeZone()))
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    }).format(date.toDate(getLocalTimeZone()))
     : "";
 };
 
 export interface DateInputProps<SelectionVariantType>
   extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange">,
-    Pick<ComponentPropsWithoutRef<"input">, "disabled" | "placeholder"> {
+  Pick<ComponentPropsWithoutRef<"input">, "disabled" | "placeholder"> {
   ariaLabel?: string;
   /**
    * The marker to use in an empty read only DateInput.
@@ -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.
    */
@@ -129,15 +133,15 @@ export interface DateInputProps<SelectionVariantType>
    * Callback fired when the input value change.
    */
   onChange?: SelectionVariantType extends SingleSelectionValueType
-    ? (
-        event: ChangeEvent<HTMLInputElement>,
-        selectedDateInputValue?: string,
-      ) => void
-    : (
-        event: ChangeEvent<HTMLInputElement>,
-        startDateInputValue?: string,
-        endDateInputValue?: string,
-      ) => void;
+  ? (
+    event: ChangeEvent<HTMLInputElement>,
+    selectedDateInputValue?: string,
+  ) => void
+  : (
+    event: ChangeEvent<HTMLInputElement>,
+    startDateInputValue?: string,
+    endDateInputValue?: string,
+  ) => void;
 }
 
 export const DateInput = forwardRef<
@@ -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/stories/date-input/date-input.stories.tsx

@@ -24,3 +24,9 @@ export const Range = DateInputTemplate.bind({});
 Range.args = {
   selectionVariant: "range",
 };
+
+export const Bordered: StoryFn<typeof DateInput> = (args) => {
+  return (
+    <DateInput bordered {...args} />
+  );
+};

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

@@ -41,10 +41,10 @@ CustomFormat.args = {
   dateFormatter: (date: DateValue | undefined): string => {
     return date
       ? new DateFormatter("fr-CA", {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).format(date.toDate(getLocalTimeZone()))
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      }).format(date.toDate(getLocalTimeZone()))
       : "";
   },
   placeholder: "YYYY-MM-DD",
@@ -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";