Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Textarea adjustments #413

Merged
merged 23 commits into from
Dec 7, 2020
Merged

[Feature] Textarea adjustments #413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
54adc57
Fix the problem with aria-describedby: unintentional empty space
ketsappi Nov 23, 2020
3560a58
Add more tests for Textarea
ketsappi Nov 23, 2020
661e7db
Change the test name to be more describing
ketsappi Nov 24, 2020
54bd462
Add test for id prop of Textarea
ketsappi Nov 24, 2020
5a85a53
Move Textarea's logic from components level to core
ketsappi Nov 24, 2020
afc8fb7
Remove the styles and classnames that are no longer used
ketsappi Nov 27, 2020
8cc2cca
Update snapshots of the Textarea
ketsappi Nov 27, 2020
44ee032
Fix tests to reflect use of internal components
ketsappi Nov 27, 2020
e5e7708
Remove Textarea from components level
ketsappi Nov 27, 2020
2ef8893
Change Textarea to use AutoId instead of idGenerator
ketsappi Nov 27, 2020
cf9476b
Add the missing colour tokens
ketsappi Nov 27, 2020
43f59b9
Add status prop for StatusText component
ketsappi Nov 27, 2020
d7af398
Add status type for Textarea based on common InputStatus
ketsappi Nov 30, 2020
e812699
Change the JSDoc of Checkbox's id attribute
ketsappi Nov 30, 2020
b575a15
Remove the renaming of resize prop to indicate the discarding it
ketsappi Nov 30, 2020
330e675
Add aria util for ariaDescribedBy
ketsappi Dec 1, 2020
57e4912
Move aria helpers from components level to utils
ketsappi Dec 1, 2020
64b5525
Add fullWidth prop to Textarea
ketsappi Dec 1, 2020
9b7970e
Add containerProps for Textarea
ketsappi Dec 1, 2020
a418d0c
Add default width to Textarea
ketsappi Dec 4, 2020
d0817a4
Change Textarea to Omit `placeholder` attribute as we have `visualPla…
ketsappi Dec 4, 2020
aaa545d
Update test of aria describedby
ketsappi Dec 7, 2020
c381c40
Change to use string format to tell the width for Textarea
ketsappi Dec 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/core/Form/Textarea/Textarea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,13 @@ import { Textarea } from 'suomifi-ui-components';
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vestibulum iaculis augue, sit amet tincidunt ipsum.
</Textarea>

<Textarea
labelText="Textarea with fixed width of 250px"
containerProps={{ style: { width: 250 } }}
aappoalander marked this conversation as resolved.
Show resolved Hide resolved
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vestibulum iaculis augue, sit amet tincidunt ipsum.
</Textarea>
</>;
```
12 changes: 12 additions & 0 deletions src/core/Form/Textarea/Textarea.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,4 +276,16 @@ describe('props', () => {
expect(container.firstChild).toHaveClass('fi-textarea--full-width');
});
});

describe('containerProps', () => {
it('has the given props on the container', () => {
const { container } = render(
<Textarea
labelText="label"
containerProps={{ style: { width: 100 } }}
aappoalander marked this conversation as resolved.
Show resolved Hide resolved
/>,
);
expect(container.firstChild).toHaveAttribute('style', 'width: 100px;');
});
});
});
11 changes: 10 additions & 1 deletion src/core/Form/Textarea/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import classnames from 'classnames';
import { TokensProp, InternalTokensProp } from '../../theme';
import { baseStyles } from './Textarea.baseStyles';
import { withSuomifiDefaultProps } from '../../theme/utils';
import { HtmlTextarea, HtmlTextareaProps, HtmlDiv } from '../../../reset';
import {
HtmlTextarea,
HtmlTextareaProps,
HtmlDiv,
HtmlDivProps,
} from '../../../reset';
import { AutoId } from '../../../utils/AutoId';
import { LabelText } from '../LabelText/LabelText';
import { HintText } from '../HintText/HintText';
Expand Down Expand Up @@ -69,6 +74,8 @@ export interface TextareaProps extends HtmlTextareaProps, TokensProp {
name?: string;
/** Set components width to 100% */
fullWidth?: boolean;
/** Textarea container div props */
containerProps?: Omit<HtmlDivProps, 'className'>;
ketsappi marked this conversation as resolved.
Show resolved Hide resolved
}

class BaseTextarea extends Component<TextareaProps> {
aappoalander marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -89,6 +96,7 @@ class BaseTextarea extends Component<TextareaProps> {
optionalText,
'aria-describedby': ariaDescribedBy,
fullWidth,
containerProps,
...passProps
} = this.props;

Expand All @@ -98,6 +106,7 @@ class BaseTextarea extends Component<TextareaProps> {

return (
<HtmlDiv
{...containerProps}
aappoalander marked this conversation as resolved.
Show resolved Hide resolved
className={classnames(baseClassName, className, {
[textareaClassNames.disabled]: !!disabled,
[textareaClassNames.error]: status === 'error' && !disabled,
Expand Down