15578173906

Committed 11 Jun 2025 06:58AM UTC coverage: 43.721%. First build

Build # 15578173906

Build Type

Pull #640

github

Committed by

web-flow

Commit Message

Merge e54c6c505 into 36bb792e1

Pull Request Pull Request #640: Transform popup from jest to playwright (#597)

Run Details

223 of 823 branches covered (27.1%)

Branch coverage included in aggregate %.

435 of 682 relevant lines covered (63.78%)

18.43 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

8.2

/src/components/TextField/TextField.jsx

import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../providers/globalProps';
import { classNames } from '../../helpers/classNames/classNames';
import { transferProps } from '../../helpers/transferProps';
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
import { FormLayoutContext } from '../FormLayout';
import { InputGroupContext } from '../InputGroup/InputGroupContext';
import styles from './TextField.module.scss';

const SMALL_INPUT_SIZE = 10;

export const TextField = React.forwardRef((props, ref) => {
  const {
    disabled,
    fullWidth,
    helpText,
    id,
    inputSize,
    isLabelVisible,
    label,
    layout,
    required,
    size,
    type,
    validationState,
    validationText,
    variant,
    ...restProps
  } = props;
  const formLayoutContext = useContext(FormLayoutContext);
  const inputGroupContext = useContext(InputGroupContext);
  const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);

  return (
    <label
      className={classNames(
        styles.root,
        fullWidth && styles.isRootFullWidth,
        hasSmallInput && styles.hasRootSmallInput,
        inputSize && styles.hasRootCustomInputSize,
        formLayoutContext && styles.isRootInFormLayout,
        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
          ? styles.isRootLayoutHorizontal
          : styles.isRootLayoutVertical,
        inputGroupContext && styles.isRootGrouped,
        required && styles.isRootRequired,
        getRootSizeClassName(
          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
          styles,
        ),
        getRootValidationStateClassName(validationState, styles),
        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
      )}
      htmlFor={id}
      id={id && `${id}__label`}
      {...(inputSize ? { style: { '--rui-custom-input-size': inputSize } } : {})}
    >
      <div
        className={classNames(
          styles.label,
          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
        )}
        id={id && `${id}__labelText`}
      >
        {label}
      </div>
      <div className={styles.field}>
        <div className={styles.inputContainer}>
          <input
            {...transferProps(restProps)}
            className={styles.input}
            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
            id={id}
            ref={ref}
            required={required}
            size={type !== 'number' ? inputSize : null}
            type={type}
          />
          {variant === 'filled' && (
            <div className={styles.bottomLine} />
          )}
        </div>
        {helpText && (
          <div
            className={styles.helpText}
            id={id && `${id}__helpText`}
          >
            {helpText}
          </div>
        )}
        {(validationText && !inputGroupContext) && (
          <div
            className={styles.validationText}
            id={id && `${id}__validationText`}
          >
            {validationText}
          </div>
        )}
      </div>
    </label>
  );
});

TextField.defaultProps = {
  disabled: false,
  fullWidth: false,
  helpText: null,
  id: undefined,
  inputSize: null,
  isLabelVisible: true,
  layout: 'vertical',
  required: false,
  size: 'medium',
  type: 'text',
  validationState: null,
  validationText: null,
  variant: 'outline',
};

TextField.propTypes = {
  /**
   * If `true`, the input will be disabled.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the field will span the full width of its parent.
   */
  fullWidth: PropTypes.bool,
  /**
   * Optional help text.
   */
  helpText: PropTypes.node,
  /**
   * ID of the input HTML element. It also serves as a prefix for nested elements:
   * * `<ID>__label`
   * * `<ID>__labelText`
   * * `<ID>__helpText`
   * * `<ID>__validationText`
   */
  id: PropTypes.string,
  /**
   * Width of the input field. Translated as `size` attribute for input types other than `number`.
   */
  inputSize: PropTypes.number,
  /**
   * If `false`, the label will be visually hidden (but remains accessible by assistive
   * technologies).
   *
   * Automatically set to `false` when the component is rendered within `InputGroup` component.
   */
  isLabelVisible: PropTypes.bool,
  /**
   * Text field label.
   */
  label: PropTypes.node.isRequired,
  /**
   * Layout of the field.
   *
   * Ignored if the component is rendered within `FormLayout` component
   * as the value is inherited in such case.
   */
  layout: PropTypes.oneOf(['horizontal', 'vertical']),
  /**
   * If `true`, the input will be required.
   */
  required: PropTypes.bool,
  /**
   * Size of the field.
   *
   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * HTML input type, translated as `type` attribute of the input.
   */
  type: PropTypes.oneOf(['email', 'number', 'password', 'tel', 'text']),
  /**
   * Alter the field to provide feedback based on validation result.
   */
  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
  /**
   * Validation message to be displayed.
   *
   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
   * component itself renders all validation texts of its nested components.
   */
  validationText: PropTypes.node,
  /**
   * Design variant of the field, further customizable with CSS custom properties.
   */
  variant: PropTypes.oneOf(['filled', 'outline']),
};

export const TextFieldWithGlobalProps = withGlobalProps(TextField, 'TextField');

export default TextFieldWithGlobalProps;

1	import PropTypes from 'prop-types';
2	import React, { useContext } from 'react';
3	import { withGlobalProps } from '../../providers/globalProps';
4	import { classNames } from '../../helpers/classNames/classNames';
5	import { transferProps } from '../../helpers/transferProps';
6	import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
7	import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
8	import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
9	import { FormLayoutContext } from '../FormLayout';
10	import { InputGroupContext } from '../InputGroup/InputGroupContext';
11	import styles from './TextField.module.scss';
12
13	const SMALL_INPUT_SIZE = 10;	2✔
14
15	export const TextField = React.forwardRef((props, ref) => {	2✔
16	const {
17	disabled,
18	fullWidth,
19	helpText,
20	id,
21	inputSize,
22	isLabelVisible,
23	label,
24	layout,
25	required,
26	size,
27	type,
28	validationState,
29	validationText,
30	variant,
31	...restProps
32	} = props;	×
33	const formLayoutContext = useContext(FormLayoutContext);	×
34	const inputGroupContext = useContext(InputGroupContext);	×
35	const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);	×
36
37	return (	×
38	<label
39	className={classNames(
40	styles.root,
41	fullWidth && styles.isRootFullWidth,	×
42	hasSmallInput && styles.hasRootSmallInput,	×
43	inputSize && styles.hasRootCustomInputSize,	×
44	formLayoutContext && styles.isRootInFormLayout,	×
45	resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,	×
46	resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'	×
47	? styles.isRootLayoutHorizontal
48	: styles.isRootLayoutVertical,
49	inputGroupContext && styles.isRootGrouped,	×
50	required && styles.isRootRequired,	×
51	getRootSizeClassName(
52	resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),	×
53	styles,
54	),
55	getRootValidationStateClassName(validationState, styles),
56	variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,	×
57	)}
58	htmlFor={id}
59	id={id && `${id}__label`}	×
60	{...(inputSize ? { style: { '--rui-custom-input-size': inputSize } } : {})}	×
61	>
62	<div
63	className={classNames(
64	styles.label,
65	(!isLabelVisible \|\| inputGroupContext) && styles.isLabelHidden,	×
66	)}
67	id={id && `${id}__labelText`}	×
68	>
69	{label}
70	</div>
71	<div className={styles.field}>
72	<div className={styles.inputContainer}>
73	<input
74	{...transferProps(restProps)}
75	className={styles.input}
76	disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}	×
77	id={id}
78	ref={ref}
79	required={required}
80	size={type !== 'number' ? inputSize : null}	×
81	type={type}
82	/>
83	{variant === 'filled' && (	×
84	<div className={styles.bottomLine} />
85	)}
86	</div>
87	{helpText && (	×
88	<div
89	className={styles.helpText}
90	id={id && `${id}__helpText`}	×
91	>
92	{helpText}
93	</div>
94	)}
95	{(validationText && !inputGroupContext) && (	×
96	<div
97	className={styles.validationText}
98	id={id && `${id}__validationText`}	×
99	>
100	{validationText}
101	</div>
102	)}
103	</div>
104	</label>
105	);
106	});
107
108	TextField.defaultProps = {	2✔
109	disabled: false,
110	fullWidth: false,
111	helpText: null,
112	id: undefined,
113	inputSize: null,
114	isLabelVisible: true,
115	layout: 'vertical',
116	required: false,
117	size: 'medium',
118	type: 'text',
119	validationState: null,
120	validationText: null,
121	variant: 'outline',
122	};
123
124	TextField.propTypes = {	2✔
125	/**
126	* If `true`, the input will be disabled.
127	*/
128	disabled: PropTypes.bool,
129	/**
130	* If `true`, the field will span the full width of its parent.
131	*/
132	fullWidth: PropTypes.bool,
133	/**
134	* Optional help text.
135	*/
136	helpText: PropTypes.node,
137	/**
138	* ID of the input HTML element. It also serves as a prefix for nested elements:
139	* * `<ID>__label`
140	* * `<ID>__labelText`
141	* * `<ID>__helpText`
142	* * `<ID>__validationText`
143	*/
144	id: PropTypes.string,
145	/**
146	* Width of the input field. Translated as `size` attribute for input types other than `number`.
147	*/
148	inputSize: PropTypes.number,
149	/**
150	* If `false`, the label will be visually hidden (but remains accessible by assistive
151	* technologies).
152	*
153	* Automatically set to `false` when the component is rendered within `InputGroup` component.
154	*/
155	isLabelVisible: PropTypes.bool,
156	/**
157	* Text field label.
158	*/
159	label: PropTypes.node.isRequired,
160	/**
161	* Layout of the field.
162	*
163	* Ignored if the component is rendered within `FormLayout` component
164	* as the value is inherited in such case.
165	*/
166	layout: PropTypes.oneOf(['horizontal', 'vertical']),
167	/**
168	* If `true`, the input will be required.
169	*/
170	required: PropTypes.bool,
171	/**
172	* Size of the field.
173	*
174	* Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
175	*/
176	size: PropTypes.oneOf(['small', 'medium', 'large']),
177	/**
178	* HTML input type, translated as `type` attribute of the input.
179	*/
180	type: PropTypes.oneOf(['email', 'number', 'password', 'tel', 'text']),
181	/**
182	* Alter the field to provide feedback based on validation result.
183	*/
184	validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
185	/**
186	* Validation message to be displayed.
187	*
188	* Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
189	* component itself renders all validation texts of its nested components.
190	*/
191	validationText: PropTypes.node,
192	/**
193	* Design variant of the field, further customizable with CSS custom properties.
194	*/
195	variant: PropTypes.oneOf(['filled', 'outline']),
196	};
197
198	export const TextFieldWithGlobalProps = withGlobalProps(TextField, 'TextField');	2✔
199
200	export default TextFieldWithGlobalProps;

react-ui-org / react-ui / 15578173906

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous