Skip to content

Commit

Permalink
Merge branch 'main' into SHIELD-1166-remove-unused-old-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@CarlosCortizasCT
CarlosCortizasCT authored Apr 24, 2024
2 parents 7775f7d + cd9c9b0 commit ad3335a
Show file tree
Hide file tree
Showing 28 changed files with 122 additions and 11 deletions.
5 changes: 5 additions & 0 deletions .changeset/loud-moose-invite.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@commercetools-uikit/localized-text-field': minor
---

Add support for isCondensed prop to LocalizedTextField
9 changes: 9 additions & 0 deletions .changeset/modern-berries-deliver.md
View file
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
2 changes: 1 addition & 1 deletion packages/components/fields/date-time-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default Example;
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed. |
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well. |
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email) |
| `defaultDaySelectionTime` | `string` | | | The time that will be used by default when a user selects a calendar day. It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59) |
| `defaultDaySelectionTime` | `string` | | | The time that will be used by default when a user selects a calendar day.&#xA;It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59) |

## Signatures

Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -176,7 +176,8 @@ export type TDateTimeFieldProps = {
*/
badge?: ReactNode;
/**
* The time that will be used by default when a user selects a calendar day
* The time that will be used by default when a user selects a calendar day.
* It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59)
*/
defaultDaySelectionTime?: string;
};
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/localized-text-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default Example;
| `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. |
| `defaultExpandLanguages` | `boolean` | | | Controls whether one or all languages are visible by default |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `isCondensed` | `boolean` | | | Whether the text inputs for each localization should render with condensed paddings. |
| `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` | `Record` | | | Placeholders for each language. Object of the same shape as `value`. |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/localized-text-field/src/localized-text-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ storiesOf('Components|Fields', module)
defaultExpandLanguages || undefined
}
isAutofocussed={boolean('isAutofocussed', false)}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={object('placeholder', { en: 'Placeholder' })}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/localized-text-field/src/localized-text-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@ export type TLocalizedTextFieldProps = {
* Focus the input on initial render
*/
isAutofocussed?: boolean;
/**
* Whether the text inputs for each localization should render with condensed paddings.
*/
isCondensed?: boolean;
/**
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
*/
Expand Down Expand Up @@ -291,6 +295,7 @@ class LocalizedTextField extends Component<
}
defaultExpandLanguages={this.props.defaultExpandLanguages}
isAutofocussed={this.props.isAutofocussed}
isCondensed={this.props.isCondensed}
isDisabled={this.props.isDisabled}
isReadOnly={this.props.isReadOnly}
errors={this.props.errorsByLanguage}
Expand Down
21 changes: 21 additions & 0 deletions packages/components/fields/localized-text-field/src/localized-text-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,27 @@ export const component = () => (
isDisabled={true}
/>
</Spec>
<Spec label="when condensed and open">
<LocalizedTextField
title="Welcome Text"
value={value}
onChange={() => {}}
selectedLanguage="en"
horizontalConstraint={7}
isCondensed={true}
defaultExpandLanguages={true}
/>
</Spec>
<Spec label="when condensed and closed">
<LocalizedTextField
title="Welcome Text"
value={value}
onChange={() => {}}
selectedLanguage="en"
horizontalConstraint={7}
isCondensed={true}
/>
</Spec>
<Spec label="when there is an error and the field is not touched">
<LocalizedTextField
title="Welcome Text"
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/date-input/README.md
View file
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Loading

0 comments on commit ad3335a

Please sign in to comment.