add option to display inline

Frontify · Jan 24, 2025 · aa12d5a · aa12d5a
1 parent 964730a
commit aa12d5a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 27 deletions.
diff --git a/.changeset/short-weeks-suffer.md b/.changeset/short-weeks-suffer.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue": patch
+---
+
+fix: add inline variant to `DatePicker`
diff --git a/packages/fondue/src/components/DatePicker/DatePicker.stories.tsx b/packages/fondue/src/components/DatePicker/DatePicker.stories.tsx
@@ -7,7 +7,6 @@ import { useRef, useState } from 'react';
 import { Badge, BadgeEmphasis, BadgeStyle } from '@components/Badge';
 import { Button } from '@components/Button';
 import { FormControl } from '@components/FormControl';
-import { SegmentedControls } from '@components/SegmentedControls';
 import IconCalendar16 from '@foundation/Icon/Generated/IconCalendar16';
 import { Validation } from '@utilities/validation';
 
@@ -61,31 +60,6 @@ const TemplateWithFormControl: StoryFn<DatePickerProps> = (args: DatePickerProps
                         />
                     </FormControl>
                 </div>
-                <div className="tw-px-5 tw-py-3 tw-flex tw-flex-col tw-gap-3">
-                    <FormControl>
-                        <DatePicker
-                            {...args}
-                            variant="single"
-                            startDate={null}
-                            endDate={null}
-                            value={selectedDate as Date}
-                            onChange={(date) => setSelectedDate(date)}
-                        />
-                    </FormControl>
-                </div>
-            </div>
-            <div className="tw-px-5 tw-py-3 tw-flex tw-flex-col tw-gap-3">
-                <FormControl>
-                    <SegmentedControls
-                        activeItemId="a"
-                        items={[
-                            { id: 'a', value: 'abc' },
-                            { id: 'b', value: 'def' },
-                            { id: 'c', value: 'ghi' },
-                        ]}
-                        onChange={() => {}}
-                    />
-                </FormControl>
             </div>
         </div>
     );
@@ -199,3 +173,24 @@ const TemplateDateRange: StoryFn<DatePickerProps> = () => {
 };
 
 export const DateRange = TemplateDateRange.bind({});
+
+const WithWrapperDiv: StoryFn<DatePickerProps> = (args: DatePickerProps) => {
+    const [selectedDate, setSelectedDate] = useState<Date | null>();
+
+    return (
+        <div className="tw-bg-red-50 tw-p-8 tw-w-[500px]">
+            <DatePicker
+                {...args}
+                variant="single"
+                startDate={null}
+                endDate={null}
+                value={selectedDate as Date}
+                onChange={(date) => setSelectedDate(date)}
+            />
+        </div>
+    );
+};
+export const Inline = WithWrapperDiv.bind({});
+Inline.args = {
+    inline: true,
+};
diff --git a/packages/fondue/src/components/DatePicker/DatePicker.tsx b/packages/fondue/src/components/DatePicker/DatePicker.tsx
@@ -51,6 +51,7 @@ export type DatePickerProps = {
     children?: ReactNode;
     hasPopperArrow?: boolean;
     preventOpenOnFocus?: boolean;
+    inline?: boolean;
     filterDate?: (date: Date) => boolean;
     onOpen?: () => void;
     onClose?: () => void;
@@ -91,6 +92,7 @@ export const DatePicker = forwardRef<ReactDatePickerRef, DatePickerProps>(
             children,
             hasPopperArrow = true,
             preventOpenOnFocus = false,
+            inline = false,
             filterDate = () => true,
             variant = 'single',
             'data-test-id': dataTestId = 'date-picker',
@@ -112,7 +114,8 @@ export const DatePicker = forwardRef<ReactDatePickerRef, DatePickerProps>(
         return (
             <div data-test-id={dataTestId}>
                 <ReactDatePickerComponent
-                    calendarClassName="tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap tw-pointer-events-auto"
+                    calendarClassName={`tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap tw-pointer-events-auto${inline ? ' react-datepicker-inline' : ''}`}
+                    inline={inline}
                     selected={value}
                     startDate={startDate}
                     endDate={endDate}

diff --git a/packages/fondue/src/components/DatePicker/styles.css b/packages/fondue/src/components/DatePicker/styles.css
@@ -22,6 +22,11 @@
     box-shadow: 0 3px 10px 0 rgba(8, 8, 8, 0.3);
 }
 
+.react-datepicker-wrap.react-datepicker-inline {
+    border: none;
+    box-shadow: none;
+}
+
 .react-datepicker-popper .react-datepicker__triangle {
     z-index: 1;
 }