7092 - Date Range Picker container space (#7093)

* adds margin to view container for date range * increases version * adds margin in cypress component-index * updates form value on blur * removes onblur param
huridocs · Aug 2, 2024 · 4d24191 · 4d24191
1 parent 0edca68
commit 4d24191
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 33 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1 +1 @@
-<div id="tw-container" class='tw-content tw-datepicker'></div>
+<div id="tw-container" class='tw-content'></div>
diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
@@ -1688,10 +1688,6 @@ input[type="range"]::-ms-fill-lower {
   z-index: 10;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
 .z-40 {
   z-index: 40;
 }
@@ -1737,6 +1733,11 @@ input[type="range"]::-ms-fill-lower {
   margin-right: 0.25rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -4156,6 +4157,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+:is(.dark .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 :is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

diff --git a/app/react/V2/Components/Forms/DatePicker/DateRangePickerComponent.tsx b/app/react/V2/Components/Forms/DatePicker/DateRangePickerComponent.tsx
@@ -39,7 +39,6 @@ const DateRangePickerComponent = React.forwardRef(
       className = '',
       onFromDateSelected = () => {},
       onToDateSelected = () => {},
-      onBlur = () => {},
       from,
       to,
       onClear = () => {},
@@ -139,7 +138,8 @@ const DateRangePickerComponent = React.forwardRef(
                 datepicker-autoselect-today={true}
                 type="text"
                 onSelect={onFromDateSelected}
-                onBlur={onBlur}
+                onChange={onFromDateSelected}
+                onBlur={onFromDateSelected}
                 disabled={disabled}
                 // eslint-disable-next-line max-len
                 className={`[&>div>*:nth-child(odd)]:bg-transparent [&>div>*:nth-child(odd)]:border-0 [&>div>*:nth-child(odd)]:pl-8 ${fieldStyles} bg-gray-50 border border-gray-300 rounded-lg`}
@@ -172,7 +172,8 @@ const DateRangePickerComponent = React.forwardRef(
                 datepicker-autoselect-today={true}
                 type="text"
                 onSelect={onToDateSelected}
-                onBlur={onBlur}
+                onChange={onToDateSelected}
+                onBlur={onToDateSelected}
                 disabled={disabled}
                 // eslint-disable-next-line max-len
                 className={`[&>div>*:nth-child(odd)]:bg-transparent [&>div>*:nth-child(odd)]:border-0 [&>div>*:nth-child(odd)]:pl-8 ${fieldStyles} bg-gray-50 border border-gray-300 rounded-lg`}

diff --git a/app/react/stories/Forms/DateRangePicker.stories.tsx b/app/react/stories/Forms/DateRangePicker.stories.tsx
@@ -25,16 +25,21 @@ type Story = StoryObj<typeof DateRangePicker>;
 const Primary: Story = {
   render: args => (
     <Provider store={createStore()}>
-      <DateRangePicker
-        language={args.language}
-        dateFormat={args.dateFormat}
-        labelToday={args.labelToday}
-        labelClear={args.labelClear}
-        placeholderStart={args.placeholderStart}
-        placeholderEnd={args.placeholderEnd}
-        onFromDateSelected={args.onFromDateSelected}
-        onToDateSelected={args.onToDateSelected}
-      />
+      <div className="tw-container">
+        <div className="mx-2">
+          <DateRangePicker
+            className="mx-2"
+            language={args.language}
+            dateFormat={args.dateFormat}
+            labelToday={args.labelToday}
+            labelClear={args.labelClear}
+            placeholderStart={args.placeholderStart}
+            placeholderEnd={args.placeholderEnd}
+            onFromDateSelected={args.onFromDateSelected}
+            onToDateSelected={args.onToDateSelected}
+          />
+        </div>
+      </div>
     </Provider>
   ),
 };

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
-<html style="font-family: sans-serif; font-size: 16px;" lang="en">
+<!doctype html>
+<html style="font-family: sans-serif; font-size: 16px" lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
     <style>
       *,
       *::after,
       *::before {
-          transition-delay: 0s !important;
-          transition-duration: 0s !important;
-          animation-delay: -0.0001s !important;
-          animation-duration: 0s !important;
-          animation-play-state: paused !important;
-          caret-color: transparent !important;
+        transition-delay: 0s !important;
+        transition-duration: 0s !important;
+        animation-delay: -0.0001s !important;
+        animation-duration: 0s !important;
+        animation-play-state: paused !important;
+        caret-color: transparent !important;
       }
       #nprogress {
         visibility: hidden !important;
@@ -23,10 +23,10 @@
   </head>
   <body>
     <header>
-      <h1 style="font-size: small;">Component test</h1>
+      <h1 style="font-size: small">Component test</h1>
       <hr />
       &nbsp;
     </header>
-    <main data-cy-root></main>
+    <main data-cy-root style="margin: 10px"></main>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uwazi",
-  "version": "1.177.0",
+  "version": "1.177.1",
   "description": "Uwazi is a free, open-source solution for organising, analysing and publishing your documents.",
   "keywords": [
     "react"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div id="tw-container" class='tw-content tw-datepicker'></div>
		<div id="tw-container" class='tw-content'></div>