diff --git a/.changeset/modern-berries-deliver.md b/.changeset/modern-berries-deliver.md new file mode 100644 index 0000000000..07efed3025 --- /dev/null +++ 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 index ae9c78f26b..8442341d03 100644 --- 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 index 3f450b905b..47592f159f 100644 --- 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" > - + ); }; @@ -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 && ( { {props.icon === 'clock' ? ( ) : ( - + )} diff --git a/packages/components/inputs/date-input/README.md b/packages/components/inputs/date-input/README.md index bde40435c4..a014772725 100644 --- 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 index 7b55f5c8eb..f14885b085 100644 --- 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 index 984554767e..0d1bad6128 100644 --- 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 index 04eb166c4f..d9e4fd4b00 100644 --- 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 /> + + {}} + isCondensed={true} + horizontalConstraint={7} + placeholder="Select something" + /> + ); diff --git a/packages/components/inputs/date-range-input/README.md b/packages/components/inputs/date-range-input/README.md index 14a4f4742d..52a09aa41b 100644 --- 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 index eafefccb11..47d6abf77c 100644 --- 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 index 5bb71d1038..010fb8c235 100644 --- 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 index 3d8cadcba4..fa4ecc8a65 100644 --- 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 index 65c5bf3f42..0f9322b29a 100644 --- 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 index d102e9098d..d4fbde9524 100644 --- 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 index fdebb9d014..7f78f203e4 100644 --- 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 /> + + {}} + horizontalConstraint={7} + /> + ); diff --git a/packages/components/inputs/time-input/README.md b/packages/components/inputs/time-input/README.md index 9096b59832..2d38ee3d9e 100644 --- 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 index 2d30ba32be..ded6c7e504 100644 --- 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 index b1dfe5894c..3c4a2fc42d 100644 --- 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} > - + ); }; @@ -79,6 +80,7 @@ const TimeInputBody = forwardRef( {!props.isDisabled && !props.isReadOnly && Boolean(props.value) && ( ( htmlFor={props.id} data-toggle > - + diff --git a/packages/components/inputs/time-input/src/time-input.story.js b/packages/components/inputs/time-input/src/time-input.story.js index 875d644e2a..688f17245c 100644 --- 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 index 3ea1757497..00b1d041b0 100644 --- 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 index b96f91712d..272b6eb87e 100644 --- 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} /> + + {}} horizontalConstraint={7} isCondensed={true}/> + );