diff --git a/.changeset/fuzzy-items-bow.md b/.changeset/fuzzy-items-bow.md new file mode 100644 index 0000000000..1f9db753a6 --- /dev/null +++ b/.changeset/fuzzy-items-bow.md @@ -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 diff --git a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.styles.ts b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.styles.ts index 09698de9fe..63bcc2ce54 100644 --- a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.styles.ts +++ b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.styles.ts @@ -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; diff --git a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx index 18992e7a72..97af7f537e 100644 --- a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx +++ b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx @@ -14,6 +14,7 @@ export type TMultiLineInputProps = { hasWarning?: boolean; id?: string; isAutofocussed?: boolean; + isCondensed?: boolean; isDisabled?: boolean; isReadOnly?: boolean; name?: string; @@ -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. @@ -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; diff --git a/packages/components/inputs/localized-multiline-text-input/README.md b/packages/components/inputs/localized-multiline-text-input/README.md index 01f7c7b54f..7e8f486f91 100644 --- a/packages/components/inputs/localized-multiline-text-input/README.md +++ b/packages/components/inputs/localized-multiline-text-input/README.md @@ -61,9 +61,11 @@ export default Example; | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `onFocus` | `Function`
[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`
[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. | diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js index f1bc418f2c..2e23459d85 100644 --- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js +++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js @@ -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: '' })} diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx index d5b3f2803c..591c8cb523 100644 --- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx +++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx @@ -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`. */ @@ -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. */ @@ -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( @@ -362,6 +372,7 @@ LocalizedMultilineTextInput.getName = getName; LocalizedMultilineTextInput.defaultProps = { horizontalConstraint: 'scale', + cacheMeasurements: true, }; LocalizedMultilineTextInput.createLocalizedString = createLocalizedString; diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx index 66aba9a4a0..d15d74e249 100644 --- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx +++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx @@ -99,6 +99,25 @@ export const component = () => ( isDisabled={true} /> + + {}} + selectedLanguage="en" + horizontalConstraint={7} + isCondensed={true} + defaultExpandLanguages={true} + /> + + + {}} + selectedLanguage="en" + horizontalConstraint={7} + isCondensed={true} + /> + { 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}; diff --git a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx index 25e55d8aee..4fb819692f 100644 --- a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx +++ b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx @@ -60,12 +60,14 @@ type TranslationInputProps = { autoComplete?: string; value: string; onBlur?: FocusEventHandler; + isCondensed?: boolean; isDisabled?: boolean; placeholder?: string; hasWarning?: boolean; hasError?: boolean; isReadOnly?: boolean; isAutofocussed?: boolean; + cacheMeasurements?: boolean; intl: { formatMessage: (messageObject: TMessagesMultilineInput) => string; }; @@ -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 */ @@ -194,7 +198,7 @@ const TranslationInput = (props: TranslationInputProps) => { { }; TranslationInput.displayName = 'TranslationInput'; +TranslationInput.defaultProps = { + cacheMeasurements: true, +}; export default TranslationInput;