Skip to content

Commit

Permalink
feat(Textarea): add prop to pass data attributes (#3937)
Browse files Browse the repository at this point in the history 
* feat(Textarea): add  prop to pass data attributes

* chore(Textarea): polish SC

---------

Co-authored-by: mainframev <vgenaev@gmail.com>
  • Loading branch information
@RobinCsl @mainframev
RobinCsl and mainframev committed Jul 28, 2023
1 parent f82d116 commit 7089013
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 52 deletions.
1 change: 1 addition & 0 deletions packages/orbit-components/src/Textarea/README.md
View file
Expand Up @@ -18,6 +18,7 @@ Table below contains all types of the props available in Textarea component.

| Name | Type | Default | Description |
| :----------- | :------------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dataAttrs | `Object` | | Optional prop for passing `data-*` attributes to the `textarea` DOM element. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `Textarea` |
| disabled | `boolean` | | If `true`, the Textarea will be disabled. |
Expand Down
5 changes: 5 additions & 0 deletions packages/orbit-components/src/Textarea/__tests__/index.test.tsx
View file
Expand Up @@ -16,6 +16,9 @@ describe("Textarea", () => {
const fullHeight = true;
const onChange = jest.fn();
const spaceAfter = SPACINGS_AFTER.NORMAL;
const dataAttrs = {
"data-sample": "Sample",
};

render(
<Textarea
Expand All @@ -30,6 +33,7 @@ describe("Textarea", () => {
onChange={onChange}
dataTest={dataTest}
spaceAfter={spaceAfter}
dataAttrs={dataAttrs}
/>,
);

Expand All @@ -44,6 +48,7 @@ describe("Textarea", () => {
expect(textarea).toHaveAttribute("maxlength", maxLength.toString());
expect(textarea).toHaveAttribute("rows", "4");
expect(textarea).toHaveAttribute("name", name);
expect(textarea).toHaveAttribute("data-sample", "Sample");
expect(textarea).not.toBeInvalid();
expect(textarea.parentElement).toHaveStyle({ marginBottom: "12px" });
expect(textarea).toHaveStyle({ padding: "12px" });
Expand Down
3 changes: 2 additions & 1 deletion packages/orbit-components/src/Textarea/index.js.flow
View file
Expand Up @@ -4,12 +4,13 @@
*/
import * as React from "react";

import type { Globals, Translation, TranslationString } from "../common/common.js.flow";
import type { Globals, Translation, TranslationString, DataAttrs } from "../common/common.js.flow";
import type { spaceAfter } from "../common/getSpacingToken/index.js.flow";

export type Props = {|
...Globals,
...spaceAfter,
...DataAttrs,
+size?: "small" | "normal",
+name?: string,
+rows?: number,
Expand Down
102 changes: 52 additions & 50 deletions packages/orbit-components/src/Textarea/index.tsx
View file
Expand Up @@ -16,14 +16,16 @@ import type { Props } from "./types";
import useRandomId from "../hooks/useRandomId";

const Field = styled.label<{ fullHeight?: boolean; spaceAfter?: Common.SpaceAfterSizes }>`
font-family: ${({ theme }) => theme.orbit.fontFamily};
display: flex;
width: 100%;
position: relative;
height: ${({ fullHeight }) => fullHeight && "100%"};
flex-direction: column;
flex: ${({ fullHeight }) => fullHeight && "1"};
margin-bottom: ${getSpacingToken};
${({ theme, fullHeight }) => css`
font-family: ${theme.orbit.fontFamily};
display: flex;
width: 100%;
position: relative;
height: ${fullHeight && "100%"};
flex-direction: column;
flex: ${fullHeight && "1"};
margin-bottom: ${getSpacingToken};
`};
`;

Field.defaultProps = {
Expand Down Expand Up @@ -70,50 +72,48 @@ interface StyledTextAreaProps extends Partial<Props> {
}

const StyledTextArea = styled.textarea<StyledTextAreaProps>`
appearance: none;
box-sizing: border-box;
display: block;
width: 100%;
height: ${({ fullHeight }) => fullHeight && "100%"};
padding: ${getPadding};
box-shadow: inset 0 0 0
${({ theme, error }) =>
`${theme.orbit.borderWidthInput} ${
error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput
}`};
background-color: ${({ disabled, theme }) =>
disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput};
color: ${({ disabled, theme }) =>
disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput};
font-size: ${getFontSize};
line-height: ${getLineHeight};
cursor: ${({ disabled }) => (disabled ? "not-allowed" : "text")};
font-family: ${({ theme }) => theme.orbit.fontFamily};
resize: ${({ resize }) => resize};
transition: box-shadow ${({ theme }) => theme.orbit.durationFast} ease-in-out;
min-height: 44px;
/* for usage with Stack */
border-radius: 6px;
${mq.tablet(css`
border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
`)};
flex: ${({ fullHeight }) => fullHeight && "1"};
border: 1px solid transparent;
overflow: auto;
&::placeholder {
color: ${({ theme }) => theme.orbit.colorPlaceholderInput};
}
&:hover {
box-shadow: ${({ disabled, theme, error }) =>
!disabled &&
`inset 0 0 0 ${theme.orbit.borderWidthInput} ${
${({ theme, resize, fullHeight, error, disabled }) => css`
appearance: none;
box-sizing: border-box;
display: block;
width: 100%;
height: ${fullHeight && "100%"};
padding: ${getPadding};
box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput}
${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput};
background-color: ${disabled
? theme.orbit.backgroundInputDisabled
: theme.orbit.backgroundInput};
color: ${disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput};
font-size: ${getFontSize};
line-height: ${getLineHeight};
cursor: ${disabled ? "not-allowed" : "text"};
font-family: ${theme.orbit.fontFamily};
resize: ${resize};
transition: box-shadow ${theme.orbit.durationFast} ease-in-out;
min-height: 44px;
/* for usage with Stack */
border-radius: ${theme.orbit.borderRadiusNormal};
${mq.tablet(css`
border-radius: ${theme.orbit.borderRadiusNormal};
`)};
flex: ${fullHeight && "1"};
border: 1px solid transparent;
overflow: auto;
&::placeholder {
color: ${theme.orbit.colorPlaceholderInput};
}
&:hover {
box-shadow: ${!disabled &&
css`inset 0 0 0 ${theme.orbit.borderWidthInput} ${
error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover
}`};
}
}
`};
`;

StyledTextArea.defaultProps = {
Expand Down Expand Up @@ -144,6 +144,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
rows,
readOnly,
required,
dataAttrs,
}: Props = props;

const forID = useRandomId();
Expand Down Expand Up @@ -203,6 +204,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
ref={ref}
aria-describedby={shown ? `${inputId}-feedback` : undefined}
aria-invalid={error ? true : undefined}
{...dataAttrs}
/>
{hasTooltip && (
<ErrorFormTooltip
Expand Down
2 changes: 1 addition & 1 deletion packages/orbit-components/src/Textarea/types.d.ts
View file
Expand Up @@ -7,7 +7,7 @@ import type * as Common from "../common/types";

type Resize = "vertical" | "none";

export interface Props extends Common.Globals, Common.SpaceAfter {
export interface Props extends Common.Globals, Common.SpaceAfter, Common.DataAttrs {
readonly ref?: React.ForwardedRef<HTMLTextAreaElement>;
readonly size?: Common.InputSize;
readonly name?: string;
Expand Down

0 comments on commit 7089013

Please sign in to comment.