Merge pull request #675 from Orfium/feat/NDS-810_design_qa_for_fields_v5

[NDS-810] DQA for fields
Orfium · Oct 16, 2023 · 965825f · 965825f
2 parents f95ca23 + d79091b
commit 965825f
Show file tree

Hide file tree

Showing 57 changed files with 5,676 additions and 3,083 deletions.
diff --git a/src/components/DatePicker/DatePickInput/DatePickInput.style.ts b/src/components/DatePicker/DatePickInput/DatePickInput.style.ts
@@ -15,7 +15,8 @@ export const iconStyles =
       justify-content: center;
 
       /** @TODO: revisit these styles when Interactive Icon is implemented */
-      &:focus-visible {
+      &:focus-visible,
+      &:hover {
         background: ${theme.tokens.state.get('backgroundColor.hover')};
         border-radius: ${theme.globals.borderRadius.get('7')};
       }

diff --git a/src/components/DatePicker/DatePickInput/DatePickInput.tsx b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
@@ -1,6 +1,6 @@
 import useTheme from 'hooks/useTheme';
-import { rem } from 'polished';
 import React, { useCallback, InputHTMLAttributes, useMemo } from 'react';
+import { rem } from 'theme/utils';
 import dayjs, { Dayjs } from 'utils/date';
 
 import { iconStyles } from './DatePickInput.style';
@@ -13,7 +13,6 @@ import { DATE_PICKER_LABEL, DATE_RANGE_PICKER_LABEL } from '../constants';
 import { DateFormatType } from '../DatePicker.types';
 import { Range } from '../OverlayComponent/OverlayComponent';
 import Icon from 'components/Icon';
-import { getDatePickerMinWidth } from 'components/TextInputBase/config';
 import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.tokens';
 
 // TODO: Need to fix this (TextField onChange prop)
@@ -82,7 +81,13 @@ const DatePickInput = React.forwardRef<HTMLInputElement, DatePickInputProps>(
 
     const { buttonType = 'primary', styleType = 'filled', filterType } = filterConfig;
 
-    const sx = { wrapper: { minWidth: rem(getDatePickerMinWidth(isRangePicker)) } };
+    const sx = {
+      wrapper: {
+        minWidth: isRangePicker
+          ? rem(tokens('minWidth.extraLarge.normal'))
+          : rem(tokens('minWidth.medium.normal')),
+      },
+    };
 
     const renderIconButton = useMemo(
       () => (
@@ -105,7 +110,7 @@ const DatePickInput = React.forwardRef<HTMLInputElement, DatePickInputProps>(
     );
 
     const getLabel = useMemo(() => {
-      if (inputProps?.label.length) {
+      if (inputProps?.label?.length) {
         return inputProps.label;
       }
 

diff --git a/src/components/DatePicker/DatePicker.stories.mdx b/src/components/DatePicker/DatePicker.stories.mdx
@@ -67,7 +67,7 @@ Implementation of the regular DatePicker
 
 <Preview>
   <Story name="DatePicker" parameters={{ decorators: [withKnobs] }} play={openDatePicker} autoPlay>
-    <Stack vertical>
+    <Stack vertical height={600}>
       <Function>
         {() => {
           const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
@@ -97,7 +97,7 @@ Implementation of the regular DateRangePicker
     play={openDatePicker}
     autoPlay
   >
-    <Stack vertical>
+    <Stack vertical height={600}>
       <Function>
         {() => {
           const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
@@ -117,13 +117,93 @@ Implementation of the regular DateRangePicker
   </Story>
 </Preview>
 
+### DatePicker and DateRangePicker with Statuses
+
+DatePicker and DateRangePicker inherit all TextField statuses behavior.
+
+<Preview>
+  <Story
+    name="DatePicker and DateRangePicker with Statuses"
+    parameters={{ decorators: [withKnobs] }}
+  >
+    <Stack vertical height={600}>
+      <Function>
+        {() => {
+          const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
+          return (
+            <DatePicker
+              value={date}
+              isRangePicker={boolean('isRangePicker', false)}
+              onChange={setDate}
+              isClearable={true}
+              disableDates={select('disableDates', options, options[0])}
+              dateFormatOverride={select('dateFormat', dateFormatOptions, dateFormatOptions[1])}
+              inputProps={{
+                label: 'Normal',
+                status: {
+                  type: 'normal',
+                  hintMessage: text('Custom Hint Message', 'Hint Message'),
+                },
+              }}
+            />
+          );
+        }}
+      </Function>
+      <Function>
+        {() => {
+          const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
+          return (
+            <DatePicker
+              value={date}
+              isRangePicker={boolean('isRangePicker', false)}
+              onChange={setDate}
+              isClearable={true}
+              disableDates={select('disableDates', options, options[0])}
+              dateFormatOverride={select('dateFormat', dateFormatOptions, dateFormatOptions[1])}
+              inputProps={{
+                label: 'Error',
+                status: {
+                  type: 'error',
+                  hintMessage: text('Custom Error Message', 'Error Message'),
+                },
+              }}
+            />
+          );
+        }}
+      </Function>
+      <Function>
+        {() => {
+          const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
+          return (
+            <DatePicker
+              value={date}
+              isRangePicker={boolean('isRangePicker', false)}
+              onChange={setDate}
+              isClearable={true}
+              disableDates={select('disableDates', options, options[0])}
+              dateFormatOverride={select('dateFormat', dateFormatOptions, dateFormatOptions[1])}
+              inputProps={{
+                label: 'Read-only',
+                status: {
+                  type: 'read-only',
+                  hintMessage: text('Custom Hint Message', 'Hint Message'),
+                },
+              }}
+            />
+          );
+        }}
+      </Function>
+    </Stack>
+  </Story>
+</Preview>
+
 ### DateRangePicker with options
 
 Implementation of the regular DatePicker with options
 
 <Preview>
   <Story name="DateRangePicker with options" parameters={{ decorators: [withKnobs] }}>
-    <Stack vertical>
+    <Stack vertical height={600}>
       <Function>
         {() => {
           const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
@@ -150,7 +230,7 @@ Implementation of the DatePicker with a Filter instead of a TextField
 
 <Preview>
   <Story name="DatePicker with Filter" parameters={{ decorators: [withKnobs] }}>
-    <Stack vertical>
+    <Stack vertical height={600}>
       <Function>
         {() => {
           const [date, setDate] = useState({ from: undefined, to: undefined });
@@ -185,13 +265,13 @@ Implementation of the DatePicker with a Filter instead of a TextField
   </Story>
 </Preview>
 
-### DayPicker with disabled dates
+### DatePicker with disabled dates
 
 Some disable dates functionality
 
 <Preview>
-  <Story name="DayPicker with disabled dates">
-    <Stack>
+  <Story name="DatePicker with disabled dates">
+    <Stack height={600}>
       <Function>
         {() => {
           const [date, setDate] = useState({
@@ -205,6 +285,38 @@ Some disable dates functionality
   </Story>
 </Preview>
 
+### Disabled DatePicker & DateRangePicker
+
+Disabled DatePicker & DateRangePicker
+
+<Preview>
+  <Story name="Disabled DatePicker & DateRangePicker">
+    <Stack>
+      <Function>
+        {() => {
+          const [date, setDate] = useState({ from: currentDay.toDate(), to: currentDay.toDate() });
+          return (
+            <DatePicker
+              value={date}
+              isRangePicker={boolean('isRangePicker', false)}
+              onChange={setDate}
+              isClearable={true}
+              inputProps={{
+                label: 'Normal',
+                status: {
+                  type: 'normal',
+                  hintMessage: 'This field is disabled',
+                },
+                isDisabled: true,
+              }}
+            />
+          );
+        }}
+      </Function>
+    </Stack>
+  </Story>
+</Preview>
+
 ### Playground
 
 <Preview>

diff --git a/src/components/DatePicker/OverlayComponent/OverlayComponent.test.tsx b/src/components/DatePicker/OverlayComponent/OverlayComponent.test.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render } from 'test';
 
 import { currentDay } from '../utils';
 import OverlayComponent from './OverlayComponent';
-import { CALENDAR_DEFAULT_OPTIONS } from '../constants';
+import { APPLY, CALENDAR_DEFAULT_OPTIONS } from '../constants';
 
 describe('OverlayComponent', () => {
   const mockDate = currentDay;
@@ -53,7 +53,7 @@ describe('OverlayComponent', () => {
       />
     );
 
-    const applyBtn = await findByText('Apply Dates');
+    const applyBtn = await findByText(APPLY);
     const cancelBtn = await findByText('Clear All');
     fireEvent.click(applyBtn);
     fireEvent.click(cancelBtn);

diff --git a/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx b/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx
@@ -13,7 +13,7 @@ import {
 } from './OverlayComponent.style';
 import { getRightCalendarDate, getLeftCalendarDate } from './utils';
 import Button from '../../Button';
-import { APPLY_DATES, CLEAR_ALL } from '../constants';
+import { APPLY, CLEAR_ALL } from '../constants';
 import { DisabledDates, ExtraOption } from '../DatePicker.types';
 
 export type OverlayComponentProps = {
@@ -107,7 +107,7 @@ const OverlayComponent: React.FC<OverlayComponentProps> = ({
             dataTestId={'apply'}
             isDisabled={Boolean(!selectedDays.from || !selectedDays.to)}
           >
-            {APPLY_DATES}
+            {APPLY}
           </Button>
         </div>
       </div>

diff --git a/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap b/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap
@@ -1772,7 +1772,7 @@ exports[`OverlayComponent should render correctly 1`] = `
               class="emotion-15"
             >
               <span>
-                Apply Dates
+                Apply
               </span>
             </span>
           </button>
@@ -4255,7 +4255,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
               class="emotion-19"
             >
               <span>
-                Apply Dates
+                Apply
               </span>
             </span>
           </button>