Merge branch 'main' of github.com:devtron-labs/devtron-fe-common-lib into feat/release-track-apps

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.3-beta-1",
+    "version": "0.1.4-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -31,6 +31,7 @@ import { DateTimePickerProps } from './types'
 import { DATE_PICKER_IDS, DATE_PICKER_PLACEHOLDER, customDayStyles } from './constants'
 import './datePicker.scss'
 import { ReactComponent as CalendarIcon } from '../../../Assets/Icon/ic-calendar.svg'
+import { ReactComponent as ICWarning } from '../../../Assets/Icon/ic-warning.svg'
 import { DATE_TIME_FORMATS } from '../../../Common'
 import 'react-dates/initialize'
 import 'react-dates/lib/css/_datepicker.css'
@@ -50,6 +51,8 @@ const DateTimePicker = ({
     isTodayBlocked = false,
     dataTestIdForTime = DATE_PICKER_IDS.TIME,
     dataTestidForDate = DATE_PICKER_IDS.DATE,
+    openDirection = 'down',
+    error = '',
 }: DateTimePickerProps) => {
     const time = getTimeValue(dateObject)
     const selectedTimeOption = DEFAULT_TIME_OPTIONS.find((option) => option.value === time) ?? DEFAULT_TIME_OPTIONS[0]
@@ -71,20 +74,20 @@ const DateTimePicker = ({
     const isDayBlocked = (day) => isTodayBlocked && !day.isAfter(today)
 
     return (
-        <div>
+        <div className="date-time-picker">
             <label className={`form__label ${required ? 'dc__required-field' : ''}`} htmlFor={id}>
                 {label}
             </label>
-            <div className="dc__grid-row-one-half dc__gap-8">
+            <div className="flex left dc__gap-8">
                 <SingleDatePicker
-                    id="single_date_picker"
+                    id={id}
                     placeholder="Select date"
                     date={moment(dateObject)}
                     onDateChange={handleDateChange}
                     focused={isFocused}
                     onFocusChange={handleFocusChange}
                     numberOfMonths={1}
-                    openDirection="down"
+                    openDirection={openDirection}
                     renderCalendarDay={(props) => <CustomizableCalendarDay {...props} {...customDayStyles} />}
                     hideKeyboardShortcutsPanel
                     withFullScreenPortal={false}
@@ -95,6 +98,8 @@ const DateTimePicker = ({
                     displayFormat={DATE_TIME_FORMATS.DD_MMM_YYYY}
                     data-testid={dataTestidForDate}
                     isDayBlocked={isDayBlocked}
+                    disabled={disabled}
+                    appendToBody
                 />
                 {!hideTimeSelect && (
                     <div className="dc__no-shrink">
@@ -119,6 +124,12 @@ const DateTimePicker = ({
                     </div>
                 )}
             </div>
+            {error && (
+                <div className="form__error">
+                    <ICWarning className="form__icon form__icon--error" />
+                    {error}
+                </div>
+            )}
         </div>
     )
 }

src/Shared/Components/DatePicker/DateTimePicker.tsx

@@ -14,33 +14,90 @@
  * limitations under the License.
  */
 
- .window-configuration {
-    .DayPicker__horizontal {
-        position: fixed !important;
+.SingleDatePicker_picker {
+    z-index: calc(var(--modal-index) + 1) !important;
+}
+
+.date-time-picker {
+    .SingleDatePicker {
+        width: 100%;
     }
-    
+
     .SingleDatePickerInput {
         display: flex !important;
-        width: 200px;
+        width: 100%;
         background-color: var(--N50);
         margin-right: 0 !important;
         padding: 0 !important;
         height: 36px !important;
+        overflow: hidden;
+        border: 1px solid var(--N200);
+        border-radius: 4px;
+
+        &:hover {
+            border: 1px solid var(--N400);
+        }
+
+        &:focus,
+        &:focus-visible,
+        &:focus-within {
+            border: 1px solid var(--B500);
+        }
+
+        &__disabled {
+            background-color: var(--N100);
+            border-color: var(--N200);
+        }
     }
-    
+
     .SingleDatePickerInput_calendarIcon {
         padding: 0 !important;
         margin: 0 !important;
         padding-right: 8px !important;
-        background-color: var(--N50) !important;
-        height: 36px !important;
+        background-color: transparent !important;
+        height: 34px !important;
+        display: flex;
+        align-items: center;
+
+        &:focus-visible {
+            outline: none;
+        }
     }
-    
-    .SingleDatePickerInput__withBorder .DateInput {
-        line-height: 20px !important;
+
+    .SingleDatePickerInput__withBorder {
+        .DateInput {
+            line-height: 20px !important;
+            height: 34px;
+            background-color: transparent;
+            width: 100%;
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        .DateInput_input {
+            font-size: 13px;
+            border-bottom: none;
+            cursor: pointer;
+            background-color: transparent;
+            color: var(--N900);
+
+            &__focused+.DateInput_fang {
+                display: none;
+            }
+
+            &__disabled {
+                cursor: not-allowed;
+            }
+        }
     }
-    
+
     .DateInput_input {
-        padding: 6px 8px !important
+        padding: 6px 8px !important;
+
+        &__disabled {
+            font-style: normal;
+        }
     }
-}
+}

src/Shared/Components/DatePicker/datePicker.scss

@@ -16,6 +16,7 @@
 
 import { Moment } from 'moment'
 import { SelectInstance } from 'react-select'
+import { SingleDatePickerShape } from 'react-dates'
 import { OptionType } from '../../../Common'
 
 export interface SingleDatePickerProps {
@@ -100,10 +101,8 @@ export interface TimeSelectProps {
 }
 
 export interface DateTimePickerProps
-    extends Pick<
-        TimeSelectProps,
-        'date' | 'onChange' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'
-    > {
+    extends Pick<TimeSelectProps, 'date' | 'onChange' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'>,
+        Pick<SingleDatePickerShape, 'openDirection'> {
     /**
      * Props for the date picker
      */