feat(date-field): add isCondensed prop

commercetools · Apr 22, 2024 · 4581041 · 4581041
1 parent d30700f
commit 4581041
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 3 deletions.
diff --git a/.changeset/modern-berries-deliver.md b/.changeset/modern-berries-deliver.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/date-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.inputProps?.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.inputProps?.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>
   );
 };
@@ -50,6 +51,7 @@ export type TInputProps = {
    * HTML ID of an element containing an error message related to the input.
    */
   'aria-errormessage'?: string;
+  isCondensed?: boolean;
   onBlur?: FocusEventHandler;
   onFocus?: FocusEventHandler;
   onKeyDown?: (
@@ -141,6 +143,7 @@ export const CalendarBody = (props: TCalendarBody) => {
         />
         {!disabledOrReadOnly && props.hasSelection && props.isClearable && (
           <ClearSection
+            isCondensed={props.inputProps?.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.inputProps?.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
    */
@@ -267,6 +271,7 @@ const DateInput = (props: TDateInput) => {
                   // Unset the aria-labelledby as it interfers with the link
                   // between the <label for> and the <input id>.
                   'aria-labelledby': undefined,
+                  isCondensed: props.isCondensed,
                   name: props.name,
                   placeholder:
                     typeof props.placeholder === 'string'

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>
 );