Skip to content

Commit

Permalink
feat(localized-multiline-text-input): add support for isCondensed pro… (
Browse files Browse the repository at this point in the history
#2793)

* feat(localized-multiline-text-input): add support for isCondensed property on LocalizedMultilineTextInput

* feat(localized-multiline-text-input): fix height of input when isCondensed by reducing value padding and label line height

* feat(localized-multiline-text-input): turn cacheMeasurements off to allow toggling isCondensed property to affect input height immediately

* feat(localized-multiline-text-input): set value of cacheMeasurements based on whether isCondensed value has been toggled

* feat(localized-multiline-text-input): move cacheMeasurements to prop exposed on LocalizedMultilineTextInput

* refactor(localized-multiline-text-input): use components default props

* feat(localized-multiline-text-input): revert left/right padding on input back to original value and only reduce top/bottom padding when isCondensed

* feat(localized-multiline-text-input): change horizontal padding to be 16px to match other inputs, regardless of isCondensed

---------

Co-authored-by: Carlos Cortizas <[email protected]>
Co-authored-by: Douglas Egiemeh <[email protected]>
  • Loading branch information
3 people authored Apr 29, 2024
1 parent 8bf179b commit d72e043
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 5 deletions.
7 changes: 7 additions & 0 deletions .changeset/fuzzy-items-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@commercetools-uikit/localized-multiline-text-input': minor
'@commercetools-uikit/localized-text-input': minor
'@commercetools-uikit/input-utils': minor
---

Add support for isCondensed property on LocalizedMultilineTextInput
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ const getTextareaStyles = (props: TMultiLineInputProps) => {
const baseStyles = [
getInputStyles(props),
css`
padding: ${designTokens.spacing20};
padding: ${props.isCondensed
? designTokens.spacing10
: designTokens.spacing20}
${designTokens.spacing30};
line-height: ${sizeInputLineHeight};
flex: auto;
word-break: break-word;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export type TMultiLineInputProps = {
hasWarning?: boolean;
id?: string;
isAutofocussed?: boolean;
isCondensed?: boolean;
isDisabled?: boolean;
isReadOnly?: boolean;
name?: string;
Expand All @@ -23,6 +24,7 @@ export type TMultiLineInputProps = {
placeholder?: string;
value: string;
isOpen: boolean;
cacheMeasurements?: boolean;
onHeightChange?: (height: number, rowCount: number) => void;
/**
* Indicate if the value entered in the input is invalid.
Expand Down Expand Up @@ -103,12 +105,15 @@ const MultilineInput = (props: TMultiLineInputProps) => {
role="textbox"
minRows={MIN_ROW_COUNT}
maxRows={props.isOpen ? undefined : MIN_ROW_COUNT}
cacheMeasurements={true}
cacheMeasurements={props.cacheMeasurements}
{...filterDataAttributes(props)}
/>
);
};

MultilineInput.displayName = 'MultilineInput';
MultilineInput.defaultProps = {
cacheMeasurements: true,
};

export default MultilineInput;
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,11 @@ export default Example;
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
| `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. |
| `cacheMeasurements` | `boolean` | | `true` | Use this property to turn off caching input measurements. |
| `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. Pass `true` to show all languages by default. |
| `isAutofocussed` | `boolean` | | | Sets the focus on the first input when `true` is passed. |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `isDisabled` | `boolean` | | | Disables all input fields. |
| `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. |
| `placeholder` | `Object`<br/>[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ storiesOf('Components|Inputs', module)
}
defaultExpandMultilineText={defaultExpandMultilineText}
isAutofocussed={boolean('isAutofocussed', false)}
cacheMeasurements={boolean('cacheMeasurements', false)}
isCondensed={boolean('isCondensed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={object('placeholder', { en: '', de: '' })}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,10 @@ export type TLocalizedMultilineTextInputProps = {
* Expands input components holding multiline values instead of collpasing them by default.
*/
defaultExpandMultilineText?: boolean;
/**
* Use this property to turn off caching input measurements.
*/
cacheMeasurements?: boolean;
/**
* Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.
*/
Expand All @@ -101,6 +105,10 @@ export type TLocalizedMultilineTextInputProps = {
* Sets the focus on the first input when `true` is passed.
*/
isAutofocussed?: boolean;
/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;
/**
* Disables all input fields.
*/
Expand Down Expand Up @@ -309,6 +317,8 @@ const LocalizedMultilineTextInput = (
onBlur={props.onBlur}
onFocus={props.onFocus}
isAutofocussed={index === 0 && props.isAutofocussed}
cacheMeasurements={props.cacheMeasurements}
isCondensed={props.isCondensed}
isDisabled={props.isDisabled}
isReadOnly={props.isReadOnly}
hasError={Boolean(
Expand Down Expand Up @@ -362,6 +372,7 @@ LocalizedMultilineTextInput.getName = getName;

LocalizedMultilineTextInput.defaultProps = {
horizontalConstraint: 'scale',
cacheMeasurements: true,
};

LocalizedMultilineTextInput.createLocalizedString = createLocalizedString;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,25 @@ export const component = () => (
isDisabled={true}
/>
</Spec>
<Spec label="when isCondensed and open">
<LocalizedMultilineTextInput
value={value}
onChange={() => {}}
selectedLanguage="en"
horizontalConstraint={7}
isCondensed={true}
defaultExpandLanguages={true}
/>
</Spec>
<Spec label="when isCondensed and closed">
<LocalizedMultilineTextInput
value={value}
onChange={() => {}}
selectedLanguage="en"
horizontalConstraint={7}
isCondensed={true}
/>
</Spec>
<Spec label="when there is an error for a specific language (first one)">
<LocalizedMultilineTextInput
value={value}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { designTokens } from '@commercetools-uikit/design-system';

type TTranslationInputStylesProps = {
isCollapsed?: boolean;
isCondensed?: boolean;
isDisabled?: boolean;
isReadOnly?: boolean;
};
Expand Down Expand Up @@ -55,14 +56,18 @@ const getLanguageLabelStyles = (props: TTranslationInputStylesProps) => {
color: ${designTokens.colorNeutral60};
cursor: ${props.isDisabled ? 'not-allowed' : 'default'};
line-height: calc(
${designTokens.heightForInput} - 2 * ${designTokens.borderRadius1}
${props.isCondensed
? designTokens.heightForInputAsSmall
: designTokens.heightForInput} - 2 * ${designTokens.borderRadius1}
);
background-color: ${getLanguageLabelBackgroundColor(props)};
border-top-left-radius: ${designTokens.borderRadiusForInput};
border-bottom-left-radius: ${designTokens.borderRadiusForInput};
border: 1px ${getLanguageLabelBorderColor(props)} solid;
padding: 0 ${designTokens.spacing25};
font-size: ${designTokens.fontSize30};
font-size: ${props.isCondensed
? designTokens.fontSize20
: designTokens.fontSize30};
transition: border-color ${designTokens.transitionStandard},
background-color ${designTokens.transitionStandard},
color ${designTokens.transitionStandard};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,14 @@ type TranslationInputProps = {
autoComplete?: string;
value: string;
onBlur?: FocusEventHandler<HTMLLocalizedTextAreaElement>;
isCondensed?: boolean;
isDisabled?: boolean;
placeholder?: string;
hasWarning?: boolean;
hasError?: boolean;
isReadOnly?: boolean;
isAutofocussed?: boolean;
cacheMeasurements?: boolean;
intl: {
formatMessage: (messageObject: TMessagesMultilineInput) => string;
};
Expand Down Expand Up @@ -182,8 +184,10 @@ const TranslationInput = (props: TranslationInputProps) => {
css={getTextareaStyles(props)}
hasError={props.hasError}
hasWarning={props.hasWarning}
isCondensed={props.isCondensed}
isReadOnly={props.isReadOnly}
isAutofocussed={props.isAutofocussed}
cacheMeasurements={props.cacheMeasurements}
isOpen={!props.isCollapsed}
{...filterDataAttributes(props)}
/* ARIA */
Expand All @@ -194,7 +198,7 @@ const TranslationInput = (props: TranslationInputProps) => {
<Row
// NOTE: applying this style withing the `styled` component results in the production
// bundle to apply the style in the wrong order.
// For instance, we need to override the marging of the spacing component, which also
// For instance, we need to override the margin of the spacing component, which also
// uses `!important`.
// Anyway, apparently by passing the style as a `css` prop to the `styled` component
// does the trick.
Expand Down Expand Up @@ -260,5 +264,8 @@ const TranslationInput = (props: TranslationInputProps) => {
};

TranslationInput.displayName = 'TranslationInput';
TranslationInput.defaultProps = {
cacheMeasurements: true,
};

export default TranslationInput;

0 comments on commit d72e043

Please sign in to comment.