- {error && touched &&
{error}}
- {helpText &&
{helpText}}
+
+ {error && touched && {error}}
+ {helpText && {helpText}}
)}
>
@@ -90,6 +93,7 @@ FieldTextFlex.propTypes = {
className: PropTypes.string,
label: PropTypes.string,
helpText: PropTypes.string,
+ variant: PropTypes.oneOf([LIGHT_VARIANT, DARK_VARIANT]),
};
FieldTextFlex.defaultProps = {
@@ -107,4 +111,5 @@ FieldTextFlex.defaultProps = {
refFunction: () => {},
label: '',
helpText: '',
+ variant: LIGHT_VARIANT,
};
diff --git a/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
index 107254534d..8f282cd5c8 100644
--- a/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
+++ b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
@@ -25,7 +25,6 @@
.text-area {
width: 100%;
min-height: 72px;
- padding: 9px 12px 7px;
outline: none;
border: 1px solid $COLOR--e-200;
border-radius: 3px;
@@ -35,23 +34,6 @@
line-height: 20px;
color: $COLOR--almost-black;
resize: vertical;
-
- &:hover {
- border-color: $COLOR--e-300;
- }
-
- &:focus:not(.error.touched) {
- border: 1px solid $COLOR--topaz-hover-2;
- box-shadow: 0 0 0 1px $COLOR--topaz-hover-2;
- }
-
- &.error.touched {
- border: 1px solid $COLOR--red-failed-2;
- }
-
- &::placeholder {
- color: $COLOR--e-300;
- }
}
.label {
@@ -60,20 +42,83 @@
font-family: $FONT-ROBOTO-MEDIUM;
font-size: 13px;
line-height: 20px;
- color: $COLOR--almost-black;
}
-.additional-content {
- .error-text {
- @include additional-text($COLOR--red-failed-2);
+.light {
+ &.text-area {
+ padding: 9px 12px 7px;
+ border: 1px solid $COLOR--e-200;
+ color: $COLOR--almost-black;
+
+ &:hover {
+ border-color: $COLOR--e-300;
+ }
+
+ &:focus:not(.error.touched) {
+ border: 1px solid $COLOR--topaz-hover-2;
+ box-shadow: 0 0 0 1px $COLOR--topaz-hover-2;
+ }
+
+ &.error.touched {
+ border: 1px solid $COLOR--red-failed-2;
+ }
+
+ &::placeholder {
+ color: $COLOR--e-300;
+ }
}
- .help-text {
- @include additional-text($COLOR--e-300);
+ &.label {
+ color: $COLOR--almost-black;
+ }
+
+ &.additional-content {
+ .error-text {
+ @include additional-text($COLOR--red-failed-2);
+ }
+
+ .help-text {
+ @include additional-text($COLOR--e-300);
+ }
}
}
-.disabled {
- opacity: 0.3;
- pointer-events: none;
+.dark {
+ &.text-area {
+ padding: 7px 12px;
+ border: 1px solid $COLOR--darkmode-gray-200;
+ color: $COLOR--bg-000;
+ background-color: $COLOR--darkmode-bg-solid-96;
+
+ &:hover {
+ border-color: $COLOR--darkmode-gray-150;
+ }
+
+ &:focus:not(.error.touched) {
+ border: 2px solid $COLOR--darkmode-topaz-focused;
+ box-shadow: none;
+ }
+
+ &.error.touched {
+ border: 1px solid $COLOR--red-failed-2;
+ }
+
+ &::placeholder {
+ color: $COLOR--darkmode-gray-200;
+ }
+ }
+
+ &.label {
+ color: $COLOR--darkmode-gray-100;
+ }
+
+ &.additional-content {
+ .error-text {
+ @include additional-text($COLOR--red-failed-2);
+ }
+
+ .help-text {
+ @include additional-text($COLOR--e-300);
+ }
+ }
}
diff --git a/app/src/components/fields/dynamicFieldsSection/constants.js b/app/src/components/fields/dynamicFieldsSection/constants.js
index d24da3c762..412e51bee9 100644
--- a/app/src/components/fields/dynamicFieldsSection/constants.js
+++ b/app/src/components/fields/dynamicFieldsSection/constants.js
@@ -15,6 +15,7 @@
*/
export const TEXT_TYPE = 'text';
+export const MULTILINE_TEXT_TYPE = 'multilineText';
export const ARRAY_TYPE = 'array';
export const DROPDOWN_TYPE = 'dropdown';
export const DATE_TYPE = 'date';
diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js b/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js
index 02fee5fe2a..4a30211fb8 100644
--- a/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js
+++ b/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js
@@ -22,6 +22,7 @@ import {
MultipleAutocompleteField,
CreatableMultipleAutocompleteField,
TextField,
+ MultilineTextField,
} from './fields';
import {
ARRAY_TYPE,
@@ -31,10 +32,12 @@ import {
MULTIPLE_AUTOCOMPLETE_TYPE,
CREATABLE_MULTIPLE_AUTOCOMPLETE_TYPE,
TEXT_TYPE,
+ MULTILINE_TEXT_TYPE,
} from './constants';
export const FIELDS_MAP = {
[TEXT_TYPE]: TextField,
+ [MULTILINE_TEXT_TYPE]: MultilineTextField,
[DROPDOWN_TYPE]: DropdownField,
[DATE_TYPE]: DateField,
[ARRAY_TYPE]: ArrayField,
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/index.js b/app/src/components/fields/dynamicFieldsSection/fields/index.js
index 94c6024f6e..18ca803859 100644
--- a/app/src/components/fields/dynamicFieldsSection/fields/index.js
+++ b/app/src/components/fields/dynamicFieldsSection/fields/index.js
@@ -15,6 +15,7 @@
*/
export { TextField } from './textField';
+export { MultilineTextField } from './multilineTextField';
export { DateField } from './dateField';
export { DropdownField } from './dropdownField';
export { ArrayField } from './arrayField';
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx
new file mode 100644
index 0000000000..cdb35a2afb
--- /dev/null
+++ b/app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldTextFlex } from 'componentLibrary/fieldTextFlex';
+import { DynamicField } from '../dynamicField';
+
+export const MultilineTextField = (props) => {
+ const { field, darkView, ...rest } = props;
+
+ const formatInputValue = (value) => value?.[0];
+
+ const parseInputValue = (value) => (value ? [value] : []);
+
+ return (
+
+
+
+ );
+};
+MultilineTextField.propTypes = {
+ field: PropTypes.object.isRequired,
+ darkView: PropTypes.bool,
+};
+MultilineTextField.defaultProps = {
+ darkView: false,
+};