UI Kit | FE | Date / Time Inputs add new isCondensed prop (#2790)

* feat(date-field): add isCondensed prop * fix(date-input): fix invalid input prop * feat(date-range-field): add isCondensed prop * feat(time-input): add isCondensed prop * feat(date-time-input): add isCondensed prop * refactor: update readmes * Update modern-berries-deliver.md --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]> Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Douglas Egiemeh <[email protected]>
commercetools · Apr 24, 2024 · cd9c9b0 · cd9c9b0
1 parent 77ea50a
commit cd9c9b0
Show file tree

Hide file tree

Showing 20 changed files with 82 additions and 6 deletions.
diff --git a/.changeset/modern-berries-deliver.md b/.changeset/modern-berries-deliver.md
@@ -0,0 +1,9 @@
+---
+'@commercetools-uikit/date-range-input': minor
+'@commercetools-uikit/date-time-input': minor
+'@commercetools-uikit/date-input': minor
+'@commercetools-uikit/time-input': minor
+'@commercetools-uikit/calendar-utils': minor
+---
+
+Add isCondensed prop that when set to true, condenses the input height, icon size and font size.
diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts b/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts
@@ -151,7 +151,9 @@ const getInputContainerStyles = (props: TCalendarBody, state: TState) => {
       color: ${getInputFontColor(props)};
       cursor: ${props.isDisabled ? 'not-allowed' : 'default'};
       width: 100%;
-      height: ${designTokens.heightForInput};
+      height: ${props.isCondensed
+        ? `${designTokens.heightForInputAsSmall}`
+        : `${designTokens.heightForInput}`};
       align-items: center;
       display: flex;
       font-size: ${designTokens.fontSize30};
@@ -203,6 +205,9 @@ const getDateTimeInputStyles = (props: TCalendarBody) => {
       &:focus:not(:read-only) {
         box-shadow: none;
       }
+      font-size: ${props.isCondensed
+        ? `${designTokens.fontSize20}`
+        : `${designTokens.fontSize30}`};
     `,
   ];
   return baseStyles;

diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.tsx b/packages/calendar-utils/src/calendar-body/calendar-body.tsx
@@ -17,6 +17,7 @@ import {
 } from './calendar-body.styles';
 
 export type TClearSection = {
+  isCondensed?: boolean;
   isDisabled?: boolean;
   hasError?: boolean;
   hasWarning?: boolean;
@@ -35,7 +36,7 @@ export const ClearSection = (props: TClearSection) => {
       onClick={props.onClear}
       aria-label="clear"
     >
-      <CloseIcon size="medium" />
+      <CloseIcon size={props.isCondensed ? 'small' : 'medium'} />
     </AccessibleButton>
   );
 };
@@ -68,6 +69,7 @@ export type TCalendarBody = {
   isDisabled?: boolean;
   isReadOnly?: boolean;
   isOpen?: boolean;
+  isCondensed?: boolean;
   hasSelection?: boolean;
   hasWarning?: boolean;
   hasError?: boolean;
@@ -141,6 +143,7 @@ export const CalendarBody = (props: TCalendarBody) => {
         />
         {!disabledOrReadOnly && props.hasSelection && props.isClearable && (
           <ClearSection
+            isCondensed={props.isCondensed}
             hasError={props.hasError}
             hasWarning={props.hasWarning}
             isFocused={isFocused}
@@ -162,7 +165,10 @@ export const CalendarBody = (props: TCalendarBody) => {
           {props.icon === 'clock' ? (
             <ClockIcon color="neutral60" />
           ) : (
-            <CalendarIcon color="neutral60" />
+            <CalendarIcon
+              color="neutral60"
+              size={props.isCondensed ? 'medium' : 'big'}
+            />
           )}
         </button>
       </div>

diff --git a/packages/components/inputs/date-input/README.md b/packages/components/inputs/date-input/README.md
@@ -57,6 +57,7 @@ export default Example;
 | `aria-errormessage`    | `string`                                                                                     |          |         | HTML ID of an element containing an error message related to the input.                                                                   |
 | `name`                 | `string`                                                                                     |          |         | Used as the HTML `name` attribute.                                                                                                        |
 | `placeholder`          | `string`                                                                                     |          |         | Placeholder value to show in the input field                                                                                              |
+| `isCondensed`          | `boolean`                                                                                    |          |         | Use this property to reduce the paddings of the component for a ui compact variant                                                        |
 | `isDisabled`           | `boolean`                                                                                    |          |         | Disables the date picker                                                                                                                  |
 | `isReadOnly`           | `boolean`                                                                                    |          |         | Disables the date picker menu and makes input field read-only                                                                             |
 | `hasError`             | `boolean`                                                                                    |          |         | Indicates the input field has an error                                                                                                    |

diff --git a/packages/components/inputs/date-input/src/date-input.story.js b/packages/components/inputs/date-input/src/date-input.story.js
@@ -41,6 +41,7 @@ storiesOf('Components|Inputs', module)
               id={text('id', '')}
               name={text('name', '')}
               placeholder={placeholder === '' ? undefined : placeholder}
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               hasError={boolean('hasError', false)}

diff --git a/packages/components/inputs/date-input/src/date-input.tsx b/packages/components/inputs/date-input/src/date-input.tsx
@@ -107,6 +107,10 @@ export type TDateInput = {
    * Placeholder value to show in the input field
    */
   placeholder?: string;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Disables the date picker
    */
@@ -353,6 +357,7 @@ const DateInput = (props: TDateInput) => {
                 isOpen={isOpen}
                 isDisabled={props.isDisabled}
                 isReadOnly={props.isReadOnly}
+                isCondensed={props.isCondensed}
                 toggleButtonProps={getToggleButtonProps()}
                 hasError={props.hasError}
                 hasWarning={props.hasWarning}

diff --git a/packages/components/inputs/date-input/src/date-input.visualroute.jsx b/packages/components/inputs/date-input/src/date-input.visualroute.jsx
@@ -113,5 +113,14 @@ export const component = () => (
         hasError
       />
     </Spec>
+    <Spec label="with isCondensed">
+      <DateInput
+        value=""
+        onChange={() => {}}
+        isCondensed={true}
+        horizontalConstraint={7}
+        placeholder="Select something"
+      />
+    </Spec>
   </Suite>
 );
diff --git a/packages/components/inputs/date-range-input/README.md b/packages/components/inputs/date-range-input/README.md
@@ -58,6 +58,7 @@ export default Example;
 | `id`                   | `string`                                                                                     |          |         | Used as the HTML `id` attribute.                                                                                                                                  |
 | `name`                 | `string`                                                                                     |          |         | Used as the HTML `name` attribute.                                                                                                                                |
 | `placeholder`          | `string`                                                                                     |          |         | Placeholder value to show in the input field                                                                                                                      |
+| `isCondensed`          | `boolean`                                                                                    |          |         | Use this property to reduce the paddings of the component for a ui compact variant                                                                                |
 | `isDisabled`           | `boolean`                                                                                    |          |         | Disables the date picker                                                                                                                                          |
 | `isReadOnly`           | `boolean`                                                                                    |          |         | Disables the date picker menu and makes input field read-only                                                                                                     |
 | `hasError`             | `boolean`                                                                                    |          |         | Indicates the input field has an error                                                                                                                            |

diff --git a/packages/components/inputs/date-range-input/src/date-range-input.story.js b/packages/components/inputs/date-range-input/src/date-range-input.story.js
@@ -35,6 +35,7 @@ class DateRangeInputStory extends Component {
           name={text('name', '')}
           placeholder={placeholder === '' ? undefined : placeholder}
           isClearable={boolean('isClearable', false)}
+          isCondensed={boolean('isCondensed', false)}
           isDisabled={boolean('isDisabled', false)}
           isReadOnly={boolean('isReadOnly', false)}
           hasError={boolean('hasError', false)}

diff --git a/packages/components/inputs/date-range-input/src/date-range-input.tsx b/packages/components/inputs/date-range-input/src/date-range-input.tsx
@@ -172,6 +172,10 @@ export type TDateRangeInputProps = {
    * Placeholder value to show in the input field
    */
   placeholder?: string;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Disables the date picker
    */
@@ -532,6 +536,7 @@ class DateRangeInput extends Component<
                   isOpen={isOpen}
                   isDisabled={this.props.isDisabled}
                   isReadOnly={this.props.isReadOnly}
+                  isCondensed={this.props.isCondensed}
                   toggleButtonProps={getToggleButtonProps()}
                   hasError={this.props.hasError}
                   hasWarning={this.props.hasWarning}

diff --git a/packages/components/inputs/date-time-input/README.md b/packages/components/inputs/date-time-input/README.md
@@ -61,6 +61,7 @@ export default Example;
 | `id`                      | `string`                                                                                     |          |         | Used as the HTML `id` attribute.                                                                                                                                                                                                                                                   |
 | `name`                    | `string`                                                                                     |          |         | Used as the HTML `name` attribute.                                                                                                                                                                                                                                                 |
 | `placeholder`             | `string`                                                                                     |          |         | Placeholder value to show in the input field                                                                                                                                                                                                                                       |
+| `isCondensed`             | `boolean`                                                                                    |          |         | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                 |
 | `isDisabled`              | `boolean`                                                                                    |          |         | Disables the date picker                                                                                                                                                                                                                                                           |
 | `isReadOnly`              | `boolean`                                                                                    |          |         | Disables the date picker menu and sets the input field as read-only                                                                                                                                                                                                                |
 | `hasError`                | `boolean`                                                                                    |          |         | Indicates the input field has an error                                                                                                                                                                                                                                             |

diff --git a/packages/components/inputs/date-time-input/src/date-time-input.story.js b/packages/components/inputs/date-time-input/src/date-time-input.story.js
@@ -50,6 +50,7 @@ class DateTimeInputStory extends Component {
           id={text('id', '')}
           name={text('name', '')}
           placeholder={placeholder === '' ? undefined : placeholder}
+          isCondensed={boolean('isCondensed', false)}
           isDisabled={boolean('isDisabled', false)}
           isReadOnly={boolean('isReadOnly', false)}
           hasError={boolean('hasError', false)}

diff --git a/packages/components/inputs/date-time-input/src/date-time-input.tsx b/packages/components/inputs/date-time-input/src/date-time-input.tsx
@@ -145,6 +145,10 @@ export type TDateTimeInputProps = {
    * Placeholder value to show in the input field
    */
   placeholder?: string;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Disables the date picker
    */
@@ -508,6 +512,7 @@ class DateTimeInput extends Component<
                   hasSelection={Boolean(selectedItem)}
                   onClear={clearSelection}
                   isOpen={isOpen}
+                  isCondensed={this.props.isCondensed}
                   isDisabled={this.props.isDisabled}
                   isReadOnly={this.props.isReadOnly}
                   toggleButtonProps={getToggleButtonProps({

diff --git a/packages/components/inputs/date-time-input/src/date-time-input.visualroute.jsx b/packages/components/inputs/date-time-input/src/date-time-input.visualroute.jsx
@@ -131,5 +131,14 @@ export const component = () => (
         hasError
       />
     </Spec>
+    <Spec label="minimal">
+      <DateTimeInput
+        value={value}
+        timeZone="UTC"
+        isCondensed={true}
+        onChange={() => {}}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );
diff --git a/packages/components/inputs/time-input/README.md b/packages/components/inputs/time-input/README.md
@@ -55,6 +55,7 @@ export default Example;
 | `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render                                                              |
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                 |
+| `isCondensed`          | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant             |
 | `hasWarning`           | `boolean`                                                                                             |          |           | Indicates the input field has a warning                                                        |
 | `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                      |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                       |

diff --git a/packages/components/inputs/time-input/src/time-input-body.styles.ts b/packages/components/inputs/time-input/src/time-input-body.styles.ts
@@ -142,7 +142,9 @@ const getInputContainerStyles = (props: TTimeInputProps) => {
       color: ${getInputContainerFontColor(props)};
       cursor: ${props.isDisabled ? 'not-allowed' : 'default'};
       width: 100%;
-      height: ${designTokens.heightForInput};
+      height: ${props.isCondensed
+        ? `${designTokens.heightForInputAsSmall}`
+        : `${designTokens.heightForInput}`};
       align-items: center;
       display: flex;
       font-size: ${designTokens.fontSize30};

diff --git a/packages/components/inputs/time-input/src/time-input-body.tsx b/packages/components/inputs/time-input/src/time-input-body.tsx
@@ -21,6 +21,7 @@ type TTimeInputBodyProps = TTimeInputProps & {
 };
 
 type TClearSectionProps = {
+  isCondensed?: boolean;
   isDisabled?: boolean;
   hasError?: boolean;
   hasWarning?: boolean;
@@ -38,7 +39,7 @@ export const ClearSection = (props: TClearSectionProps) => {
       aria-label="clear"
       onClick={props.onClear}
     >
-      <CloseIcon size="medium" />
+      <CloseIcon size={props.isCondensed ? 'small' : 'medium'} />
     </AccessibleButton>
   );
 };
@@ -79,6 +80,7 @@ const TimeInputBody = forwardRef<HTMLInputElement, TTimeInputBodyProps>(
           {!props.isDisabled && !props.isReadOnly && Boolean(props.value) && (
             <ClearSection
               isDisabled={props.isDisabled}
+              isCondensed={props.isCondensed}
               hasError={props.hasError}
               hasWarning={props.hasWarning}
               isReadOnly={props.isReadOnly}
@@ -90,7 +92,10 @@ const TimeInputBody = forwardRef<HTMLInputElement, TTimeInputBodyProps>(
             htmlFor={props.id}
             data-toggle
           >
-            <ClockIcon color="neutral60" />
+            <ClockIcon
+              color="neutral60"
+              size={props.isCondensed ? 'medium' : 'big'}
+            />
           </StyledClockIconContainer>
         </StyledInputContainer>
       </Inline>

diff --git a/packages/components/inputs/time-input/src/time-input.story.js b/packages/components/inputs/time-input/src/time-input.story.js
@@ -26,6 +26,7 @@ storiesOf('Components|Inputs', module)
               name={text('name', '')}
               placeholder={text('placeholder', 'Enter time')}
               isAutofocussed={boolean('isAutofocussed', false)}
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               value={value}

diff --git a/packages/components/inputs/time-input/src/time-input.tsx b/packages/components/inputs/time-input/src/time-input.tsx
@@ -94,6 +94,10 @@ export type TTimeInputProps = {
    * Placeholder text for the input
    */
   placeholder?: string;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Indicates the input field has a warning
    */
@@ -199,6 +203,7 @@ const TimeInput = (props: TTimeInputProps) => {
         isAutofocussed={props.isAutofocussed}
         isDisabled={props.isDisabled}
         isReadOnly={props.isReadOnly}
+        isCondensed={props.isCondensed}
         hasError={props.hasError}
         hasWarning={props.hasWarning}
         onClear={handleClear}

diff --git a/packages/components/inputs/time-input/src/time-input.visualroute.jsx b/packages/components/inputs/time-input/src/time-input.visualroute.jsx
@@ -50,5 +50,8 @@ export const component = () => (
         hasWarning={true}
       />
     </Spec>
+    <Spec label="minimal">
+      <TimeInput value={value} onChange={() => {}} horizontalConstraint={7} isCondensed={true}/>
+    </Spec>
   </Suite>
 );