Skip to content

Commit

Permalink
feat(field components): add isCondensed prop and pass it down to the …
Browse files Browse the repository at this point in the history 
…input (#2795)

Co-authored-by: Jonathan Creasman <[email protected]>
  • Loading branch information
@jmcreasman
jmcreasman and Jonathan Creasman authored Apr 25, 2024
1 parent 3a47d4a commit 4dbbe80
Show file tree
Hide file tree
Showing 17 changed files with 74 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .changeset/shy-llamas-smile.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@commercetools-uikit/date-range-field': minor
'@commercetools-uikit/date-time-field': minor
'@commercetools-uikit/date-field': minor
'@commercetools-uikit/time-field': minor
---

Add isCondensed prop that when set to true, condenses the input height, icon size and font size.
1 change: 1 addition & 0 deletions packages/components/fields/date-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default Example;
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `minValue` | `string` | | | A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
| `maxValue` | `string` | | | A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/date-field/src/date-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ storiesOf('Components|Fields', module)
onFocus={action('onFocus')}
minValue={text('minValue', exampleDates.minDate)}
maxValue={text('maxValue', exampleDates.maxDate)}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={placeholder === '' ? undefined : placeholder}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/date-field/src/date-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,10 @@ export type TDateFieldProps = {
* Placeholder text for the input
*/
placeholder?: string;
/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;
/**
* A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
*/
Expand Down Expand Up @@ -248,6 +252,7 @@ class DateField extends Component<TDateFieldProps, TDateFieldState> {
minValue={this.props.minValue}
maxValue={this.props.maxValue}
onChange={this.props.onChange}
isCondensed={this.props.isCondensed}
isDisabled={this.props.isDisabled}
isReadOnly={this.props.isReadOnly}
hasWarning={hasWarning}
Expand Down
9 changes: 9 additions & 0 deletions packages/components/fields/date-field/src/date-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,14 @@ export const component = () => (
renderWarning={() => 'Custom warning'}
/>
</Spec>
<Spec label="is condensed">
<DateField
title="Release Date"
isCondensed={true}
horizontalConstraint={7}
value={value}
onChange={() => {}}
/>
</Spec>
</Suite>
);
1 change: 1 addition & 0 deletions packages/components/fields/date-range-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default Example;
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
| `hint` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/date-range-field/src/date-range-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ storiesOf('Components|Fields', module)
}}
onBlur={action('onBlur')}
onFocus={action('onFocus')}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={placeholder === '' ? undefined : placeholder}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/date-range-field/src/date-range-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@ export type TDateRangeFieldProps = {
* Placeholder text for the input
*/
placeholder?: string;
/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;

// LabelField
/**
Expand Down Expand Up @@ -240,6 +244,7 @@ class DateRangeField extends Component<
onChange={this.props.onChange}
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
isCondensed={this.props.isCondensed}
isDisabled={this.props.isDisabled}
isReadOnly={this.props.isReadOnly}
hasError={hasError}
Expand Down
9 changes: 9 additions & 0 deletions packages/components/fields/date-range-field/src/date-range-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,14 @@ export const component = () => (
renderWarning={() => 'Custom warning'}
/>
</Spec>
<Spec label="is condensed">
<DateRangeField
title="Discounted days"
isCondensed={true}
horizontalConstraint={7}
value={value}
onChange={() => {}}
/>
</Spec>
</Suite>
);
1 change: 1 addition & 0 deletions packages/components/fields/date-time-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default Example;
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.&#xA;<br />&#xA;See the `DateTimeInput` docs for more information. |
| `title` | `ReactNode` | ✅ | | Title of the label |
| `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/date-time-field/src/date-time-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ storiesOf('Components|Fields', module)
}}
onBlur={action('onBlur')}
onFocus={action('onFocus')}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={placeholder === '' ? undefined : placeholder}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/date-time-field/src/date-time-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ export type TDateTimeFieldProps = {
* Placeholder text for the input
*/
placeholder?: string;
/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;
/**
* Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
* <br />
Expand Down Expand Up @@ -257,6 +261,7 @@ class DateTimeField extends Component<
onChange={this.props.onChange}
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
isCondensed={this.props.isCondensed}
isDisabled={this.props.isDisabled}
isReadOnly={this.props.isReadOnly}
hasError={hasError}
Expand Down
10 changes: 10 additions & 0 deletions packages/components/fields/date-time-field/src/date-time-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,5 +110,15 @@ export const component = () => (
renderWarning={() => 'Custom warning'}
/>
</Spec>
<Spec label="is condensed">
<DateTimeField
timeZone="UTC"
title="Release Date"
isCondensed={true}
horizontalConstraint={7}
value={value}
onChange={() => {}}
/>
</Spec>
</Suite>
);
1 change: 1 addition & 0 deletions packages/components/fields/time-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default Example;
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the input is read only (no changes allowed). |
| `placeholder` | `string` | | | Placeholder text for the input |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `title` | `ReactNode` | ✅ | | Title of the label |
| `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once),&#xA;whereas description can describe it in more depth. Can also receive a hintIcon. |
| `description` | `ReactNode` | | | Provides a description for the title. |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/time-field/src/time-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ storiesOf('Components|Fields', module)
}}
onBlur={action('onBlur')}
onFocus={action('onFocus')}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={placeholder === '' ? undefined : placeholder}
Expand Down
6 changes: 6 additions & 0 deletions packages/components/fields/time-field/src/time-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,11 @@ export type TTimeFieldProps = {
*/
placeholder?: string;

/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;

// LabelField
/**
* Title of the label
Expand Down Expand Up @@ -265,6 +270,7 @@ class TimeField extends Component<TTimeFieldProps, TTimeFieldState> {
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
isAutofocussed={this.props.isAutofocussed}
isCondensed={this.props.isCondensed}
isDisabled={this.props.isDisabled}
hasWarning={hasWarning}
hasError={hasError}
Expand Down
9 changes: 9 additions & 0 deletions packages/components/fields/time-field/src/time-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,5 +91,14 @@ export const component = () => (
renderWarning={() => 'Custom warning'}
/>
</Spec>
<Spec label="minimal">
<TimeField
title="Release Time"
isCondensed={true}
horizontalConstraint={7}
value={value}
onChange={() => {}}
/>
</Spec>
</Suite>
);

0 comments on commit 4dbbe80

Please sign in to comment.