Skip to content

Commit

Permalink
UI Kit | FE | Date / Time Inputs add new isCondensed prop (#2790)
Browse files Browse the repository at this point in the history 
* 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 <jonathan@Jons-MBP.lan>
Co-authored-by: Carlos Cortizas <carlos.martines@commercetools.com>
Co-authored-by: Jonathan Creasman <jonathan@Jons-MacBook-Pro.local>
Co-authored-by: Douglas Egiemeh <douglasegiemeh@gmail.com>
  • Loading branch information
@jmcreasman @CarlosCortizasCT @ddouglasz
5 people committed Apr 24, 2024
1 parent 77ea50a commit cd9c9b0
Show file tree
Hide file tree
Showing 20 changed files with 82 additions and 6 deletions.
9 changes: 9 additions & 0 deletions .changeset/modern-berries-deliver.md
View file
@@ -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.
7 changes: 6 additions & 1 deletion packages/calendar-utils/src/calendar-body/calendar-body.styles.ts
View file
Expand Up @@ -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};
Expand Down Expand Up @@ -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;
Expand Down
10 changes: 8 additions & 2 deletions packages/calendar-utils/src/calendar-body/calendar-body.tsx
View file
Expand Up @@ -17,6 +17,7 @@ import {
} from './calendar-body.styles';

export type TClearSection = {
isCondensed?: boolean;
isDisabled?: boolean;
hasError?: boolean;
hasWarning?: boolean;
Expand All @@ -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>
);
};
Expand Down Expand Up @@ -68,6 +69,7 @@ export type TCalendarBody = {
isDisabled?: boolean;
isReadOnly?: boolean;
isOpen?: boolean;
isCondensed?: boolean;
hasSelection?: boolean;
hasWarning?: boolean;
hasError?: boolean;
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-input/README.md
View file
Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-input/src/date-input.story.js
View file
Expand Up @@ -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)}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/inputs/date-input/src/date-input.tsx
View file
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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}
Expand Down
9 changes: 9 additions & 0 deletions packages/components/inputs/date-input/src/date-input.visualroute.jsx
View file
Expand Up @@ -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>
);
1 change: 1 addition & 0 deletions packages/components/inputs/date-range-input/README.md
View file
Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-range-input/src/date-range-input.story.js
View file
Expand Up @@ -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)}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/inputs/date-range-input/src/date-range-input.tsx
View file
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-time-input/README.md
View file
Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-time-input/src/date-time-input.story.js
View file
Expand Up @@ -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)}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/inputs/date-time-input/src/date-time-input.tsx
View file
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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({
Expand Down
9 changes: 9 additions & 0 deletions packages/components/inputs/date-time-input/src/date-time-input.visualroute.jsx
View file
Expand Up @@ -131,5 +131,14 @@ export const component = () => (
hasError
/>
</Spec>
<Spec label="minimal">
<DateTimeInput
value={value}
timeZone="UTC"
isCondensed={true}
onChange={() => {}}
horizontalConstraint={7}
/>
</Spec>
</Suite>
);
1 change: 1 addition & 0 deletions packages/components/inputs/time-input/README.md
View file
Expand Up @@ -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 |
Expand Down
4 changes: 3 additions & 1 deletion packages/components/inputs/time-input/src/time-input-body.styles.ts
View file
Expand Up @@ -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};
Expand Down
9 changes: 7 additions & 2 deletions packages/components/inputs/time-input/src/time-input-body.tsx
View file
Expand Up @@ -21,6 +21,7 @@ type TTimeInputBodyProps = TTimeInputProps & {
};

type TClearSectionProps = {
isCondensed?: boolean;
isDisabled?: boolean;
hasError?: boolean;
hasWarning?: boolean;
Expand All @@ -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>
);
};
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/time-input/src/time-input.story.js
View file
Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/inputs/time-input/src/time-input.tsx
View file
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions packages/components/inputs/time-input/src/time-input.visualroute.jsx
View file
Expand Up @@ -50,5 +50,8 @@ export const component = () => (
hasWarning={true}
/>
</Spec>
<Spec label="minimal">
<TimeInput value={value} onChange={() => {}} horizontalConstraint={7} isCondensed={true}/>
</Spec>
</Suite>
);

0 comments on commit cd9c9b0

Please sign in to comment.