Skip to content

Commit

Permalink
feat(multiline text input): multiple adjustments (#2845)
Browse files Browse the repository at this point in the history 
* feat(multiline text input): multiple adjustments

* feat(multiline text input): use secondary button

* feat(multiline text input): update readme

* feat(multiline text input): add missing dependency

* feat(multiline text input): make maxRows optional

* feat(multiline text input): update vrt

* feat(multiline text input): update package version

* feat(multiline text input): add additional vrt case

* feat(multiline text input): add additional vrt case

* feat(multiline text input): update component cashed measurements

* feat(multiline text input): increase max rows in storybook

---------

Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com>
  • Loading branch information
@ddouglasz
ddouglasz and Ddouglasz authored Jun 25, 2024
1 parent 6b4d378 commit 3df5448
Show file tree
Hide file tree
Showing 10 changed files with 211 additions and 42 deletions.
6 changes: 6 additions & 0 deletions .changeset/two-pigs-flow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@commercetools-uikit/multiline-text-input': minor
'@commercetools-uikit/input-utils': minor
---

Multiple adjustments introduced to the multiline text input which now allows users to be able to add an action icon button of choice to the top right position of the text area, add the condensed feature to accomodate more text and finally, limit text rows as a way of controlling text area height.
1 change: 1 addition & 0 deletions packages/components/inputs/input-utils/src/multiline-input/multiline-input.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const getTextareaStyles = (props: TMultiLineInputProps) => {
word-break: break-word;
white-space: pre-wrap;
resize: none;
overflow: auto;
`,
];
return baseStyles;
Expand Down
3 changes: 2 additions & 1 deletion packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type TMultiLineInputProps = {
isOpen: boolean;
cacheMeasurements?: boolean;
onHeightChange?: (height: number, rowCount: number) => void;
maxRows?: number;
/**
* Indicate if the value entered in the input is invalid.
*/
Expand Down Expand Up @@ -104,7 +105,7 @@ const MultilineInput = (props: TMultiLineInputProps) => {
aria-errormessage={props['aria-errormessage']}
role="textbox"
minRows={MIN_ROW_COUNT}
maxRows={props.isOpen ? undefined : MIN_ROW_COUNT}
maxRows={props.isOpen ? props.maxRows : MIN_ROW_COUNT}
cacheMeasurements={props.cacheMeasurements}
{...filterDataAttributes(props)}
/>
Expand Down
42 changes: 23 additions & 19 deletions packages/components/inputs/multiline-text-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,29 @@ export default Example;

## Properties

| Props | Type | Required | Default | Description |
| ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | | | Used as HTML name of the input component. property |
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `value` | `string` | ✅ | | Value of the input component. |
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `defaultExpandMultilineText` | `boolean` | | `false` | Expands multiline text input initially |
| `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 |
| `hasError` | `boolean` | | | Indicates that input has errors |
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
| Props | Type | Required | Default | Description |
| ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | | | Used as HTML name of the input component. property |
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `value` | `string` | ✅ | | Value of the input component. |
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `defaultExpandMultilineText` | `boolean` | | `false` | Expands multiline text input initially |
| `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 |
| `hasError` | `boolean` | | | Indicates that input has errors |
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
| `rightActionIcon` | `ReactElement` | | | Custom action icon to be displayed on the right side of the input. |
| `rightActionProps` | `TSecondaryButtonIconProps` | | | Props for the right-action icon-button. Required when rightActionIcon is provided.&#xA;At least a `label` and an `onClick` prop/function need to be provided. |
| `isCondensed` | `boolean` | | | Set this to `true` to reduce the paddings of the input allowing the input to display&#xA;more data in less space. |
| `maxRows` | `number` | | | Set this to value to determine the maximum text rows of the text area.&#xA;Any text overflow past this row number would implement a scroll |

## Static methods

Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/multiline-text-input/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@commercetools-uikit/hooks": "19.5.0",
"@commercetools-uikit/icons": "19.5.0",
"@commercetools-uikit/input-utils": "19.5.0",
"@commercetools-uikit/secondary-icon-button": "19.5.0",
"@commercetools-uikit/spacings-inline": "19.5.0",
"@commercetools-uikit/spacings-stack": "19.5.0",
"@commercetools-uikit/tooltip": "19.5.0",
Expand Down
19 changes: 19 additions & 0 deletions packages/components/inputs/multiline-text-input/src/multiline-text-input.story.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { createElement } from 'react';
import { Value } from 'react-value';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
Expand All @@ -6,6 +7,12 @@ import Constraints from '@commercetools-uikit/constraints';
import Section from '../../../../../docs/.storybook/decorators/section';
import Readme from '../README.md';
import MultilineTextInput from './multiline-text-input';
import * as icons from '@commercetools-uikit/icons';

const iconNames = Object.keys(icons);
const rows = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];

storiesOf('Components|Inputs', module)
.addDecorator(withKnobs)
Expand Down Expand Up @@ -43,13 +50,25 @@ storiesOf('Components|Inputs', module)
)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
isCondensed={boolean('isCondensed', false)}
maxRows={select('maxRows', rows, 1)}
hasError={boolean('hasError', false)}
hasWarning={boolean('hasWarning', false)}
value={value}
onChange={(event) => {
action('onChange')(event);
onChange(event.target.value);
}}
rightActionIcon={
boolean('hasRightAction') &&
createElement(
icons[select('rightActionIcon', iconNames, iconNames[0])]
)
}
rightActionProps={{
label: 'Right action',
onClick: action('rightAction onClick'),
}}
/>
)}
/>
Expand Down
27 changes: 27 additions & 0 deletions packages/components/inputs/multiline-text-input/src/multiline-text-input.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { designTokens } from '@commercetools-uikit/design-system';
import { type TMultilineTextInputProps } from './multiline-text-input';

const getMultilineTextInputActionIconStyles = (
props: TMultilineTextInputProps
) => css`
position: absolute;
right: ${designTokens.spacing30};
top: 0;
height: ${props.isCondensed
? `${designTokens.heightForInputAsSmall}`
: `${designTokens.heightForInput}`};
padding: 0;
display: flex;
justify-content: center;
align-items: center;
`;

const MultilineInputWrapper = styled.div`
position: relative;
display: inline-block;
width: 100%;
`;

export { getMultilineTextInputActionIconStyles, MultilineInputWrapper };
Loading

0 comments on commit 3df5448

Please sign in to comment.