feat(localized-multiline-text-input): add support for isCondensed pro…

.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

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;

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;

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`<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`.                                                                                                                                                                                                                                           |

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: '' })}

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;

packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx

@@ -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}

packages/components/inputs/localized-multiline-text-input/src/translation-input.styles.ts

@@ -9,6 +9,7 @@ import { designTokens } from '@commercetools-uikit/design-system';
 
 type TTranslationInputStylesProps = {
   isCollapsed?: boolean;
+  isCondensed?: boolean;
   isDisabled?: boolean;
   isReadOnly?: boolean;
 };
@@ -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};

packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx

@@ -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;
   };
@@ -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) => {
       <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.
@@ -260,5 +264,8 @@ const TranslationInput = (props: TranslationInputProps) => {
 };
 
 TranslationInput.displayName = 'TranslationInput';
+TranslationInput.defaultProps = {
+  cacheMeasurements: true,
+};
 
 export default TranslationInput;