Feat: Date (Range) Picker align prop (#10)

* add align prop * update datpicker prop
tremorlabs · Apr 11, 2024 · 384f4bf · 384f4bf
1 parent 27cc098
commit 384f4bf
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -124,7 +124,7 @@ const Calendar = ({
           "text-gray-900 dark:text-gray-50",
         ),
         day: cx(
-          "size-9 rounded text-gray-900 dark:text-gray-50",
+          "text-sm size-9 rounded text-gray-900 dark:text-gray-50",
           "hover:bg-gray-200 hover:dark:bg-gray-700",
           focusRing,
         ),

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw Date Picker [v0.0.0]
+// Tremor Raw Date Picker [v0.0.1]
 
 "use client"
 
@@ -94,14 +94,14 @@ Trigger.displayName = "DatePicker.Trigger"
 const CalendarPopover = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitives.Content>,
   React.ComponentProps<typeof PopoverPrimitives.Content>
->(({ className, children, ...props }, forwardedRef) => {
+>(({ align, className, children, ...props }, forwardedRef) => {
   return (
     <PopoverPrimitives.Portal>
       <PopoverPrimitives.Content
         ref={forwardedRef}
         sideOffset={10}
         side="bottom"
-        align="center"
+        align={align}
         avoidCollisions
         onOpenAutoFocus={(e) => e.preventDefault()}
         className={cx(
@@ -308,6 +308,7 @@ interface PickerProps extends CalendarProps {
   id?: string
   // Customize the date picker for different languages.
   translations?: Translations
+  align?: "center" | "end" | "start"
   "aria-invalid"?: boolean
   "aria-label"?: string
   "aria-labelledby"?: string
@@ -339,6 +340,7 @@ const SingleDatePicker = ({
   translations,
   enableYearNavigation = false,
   locale = enUS,
+  align = "center",
   ...props
 }: SingleProps) => {
   const [open, setOpen] = React.useState(false)
@@ -414,7 +416,7 @@ const SingleDatePicker = ({
       >
         {formattedDate}
       </Trigger>
-      <CalendarPopover>
+      <CalendarPopover align={align}>
         <div className="flex">
           <div className="flex flex-col sm:flex-row sm:items-start">
             {presets && presets.length > 0 && (
@@ -497,6 +499,7 @@ const RangeDatePicker = ({
   placeholder = "Select date range",
   hasError,
   translations,
+  align = "center",
   className,
   ...props
 }: RangeProps) => {
@@ -575,7 +578,7 @@ const RangeDatePicker = ({
       >
         {displayRange}
       </Trigger>
-      <CalendarPopover>
+      <CalendarPopover align={align}>
         <div className="flex">
           <div className="flex flex-col overflow-x-scroll sm:flex-row sm:items-start">
             {presets && presets.length > 0 && (

diff --git a/src/components/DatePicker/changelog.md b/src/components/DatePicker/changelog.md
@@ -1,5 +1,7 @@
 # Tremor Raw Date Picker Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* New: Align prop to horizontally align the popover ("center" | "end" | "start")
diff --git a/src/components/DatePicker/datepicker.stories.tsx b/src/components/DatePicker/datepicker.stories.tsx
@@ -172,6 +172,13 @@ const PopoverNested = ({ value, onChange }: PopoverNestedProps) => {
   )
 }
 
+export const AlignEnd: Story = {
+  args: {align: "end"},
+  parameters: {
+    layout: "centered"
+  }
+}
+
 const PopoverNestedDemo = () => {
   const [value, setValue] = React.useState<Date | undefined>(undefined)
 

diff --git a/src/components/DatePicker/daterangepicker.stories.tsx b/src/components/DatePicker/daterangepicker.stories.tsx
@@ -153,6 +153,13 @@ export const Localized: Story = {
   },
 }
 
+export const AlignEnd: Story = {
+  args: {align: "end"},
+  parameters: {
+    layout: "centered"
+  }
+}
+
 const ControlledRangeDemo = () => {
   const [value, setValue] = React.useState<DateRange | undefined>(undefined)