15251092091

Committed 26 May 2025 10:01AM UTC coverage: 61.218%. First build

Build # 15251092091

Build Type

Pull #643

github

Committed by

web-flow

Commit Message

Merge c74417d87 into 38424df08

Pull Request Pull Request #643: Transform Modal jest tests into playwright (#596)

Run Details

228 of 431 branches covered (52.9%)

Branch coverage included in aggregate %.

315 of 456 relevant lines covered (69.08%)

21.92 hits per line

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

12.5

/src/components/FormLayout/FormLayoutCustomField.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { FormLayoutContext } from './FormLayoutContext';
import styles from './FormLayoutCustomField.module.scss';

const renderLabel = (id, label, labelForId) => {
  if (labelForId && label) {
    return (
      <label
        className={styles.label}
        htmlFor={labelForId}
        id={id && `${id}__label`}
      >
        {label}
      </label>
    );
  }

  if (label) {
    return (
      <div
        className={styles.label}
        id={id && `${id}__label`}
      >
        {label}
      </div>
    );
  }

  return null;
};

export const FormLayoutCustomField = ({
  children,
  fullWidth,
  id,
  disabled,
  innerFieldSize,
  label,
  labelForId,
  required,
  validationState,
  ...restProps
}) => {
  const context = useContext(FormLayoutContext);

  if (isChildrenEmpty(children)) {
    return null;
  }

  return (
    <div
      {...transferProps(restProps)}
      className={classNames(
        styles.root,
        fullWidth && styles.isRootFullWidth,
        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
        disabled && styles.isRootDisabled,
        required && styles.isRootRequired,
        getRootSizeClassName(innerFieldSize, styles),
        getRootValidationStateClassName(validationState, styles),
      )}
      id={id}
    >
      {renderLabel(id, label, labelForId)}
      <div
        className={styles.field}
        id={id && `${id}__field`}
      >
        {children}
      </div>
    </div>
  );
};

FormLayoutCustomField.defaultProps = {
  children: null,
  disabled: false,
  fullWidth: false,
  id: undefined,
  innerFieldSize: null,
  label: null,
  labelForId: undefined,
  required: false,
  validationState: null,
};

FormLayoutCustomField.propTypes = {
  /**
   * Custom HTML or React component(s). If none are provided nothing is rendered.
   */
  children: PropTypes.node,
  /**
   * If `true`, label will be shown as disabled.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the field will span the full width of its parent.
   */
  fullWidth: PropTypes.bool,
  /**
   * ID of the root HTML element.
   *
   * Also serves as base for ids of nested elements:
   * * `<ID>__field`
   * * `<ID>__label`
   */
  id: PropTypes.string,
  /**
   * Size of contained form field used to properly align label.
   */
  innerFieldSize: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * Optional label of the field.
   */
  label: PropTypes.string,
  /**
   * Optional ID of labeled field to keep accessibility features. Only available if `label` is set.
   */
  labelForId: PropTypes.string,
  /**
   * If `true`, label will be styled as required.
   */
  required: PropTypes.bool,
  /**
   * Alter the field to provide feedback based on validation result.
   */
  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
};

export const FormLayoutCustomFieldWithGlobalProps = withGlobalProps(FormLayoutCustomField, 'FormLayoutCustomField');

export default FormLayoutCustomFieldWithGlobalProps;

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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
9	import { FormLayoutContext } from './FormLayoutContext';
10	import styles from './FormLayoutCustomField.module.scss';
11
12	const renderLabel = (id, label, labelForId) => {	2✔
13	if (labelForId && label) {	×
14	return (	×
15	<label
16	className={styles.label}
17	htmlFor={labelForId}
18	id={id && `${id}__label`}	×
19	>
20	{label}
21	</label>
22	);
23	}
24
25	if (label) {	×
26	return (	×
27	<div
28	className={styles.label}
29	id={id && `${id}__label`}	×
30	>
31	{label}
32	</div>
33	);
34	}
35
36	return null;	×
37	};
38
39	export const FormLayoutCustomField = ({	2✔
40	children,
41	fullWidth,
42	id,
43	disabled,
44	innerFieldSize,
45	label,
46	labelForId,
47	required,
48	validationState,
49	...restProps
50	}) => {
51	const context = useContext(FormLayoutContext);	×
52
53	if (isChildrenEmpty(children)) {	×
54	return null;	×
55	}
56
57	return (	×
58	<div
59	{...transferProps(restProps)}
60	className={classNames(
61	styles.root,
62	fullWidth && styles.isRootFullWidth,	×
63	context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,	×
64	disabled && styles.isRootDisabled,	×
65	required && styles.isRootRequired,	×
66	getRootSizeClassName(innerFieldSize, styles),
67	getRootValidationStateClassName(validationState, styles),
68	)}
69	id={id}
70	>
71	{renderLabel(id, label, labelForId)}
72	<div
73	className={styles.field}
74	id={id && `${id}__field`}	×
75	>
76	{children}
77	</div>
78	</div>
79	);
80	};
81
82	FormLayoutCustomField.defaultProps = {	2✔
83	children: null,
84	disabled: false,
85	fullWidth: false,
86	id: undefined,
87	innerFieldSize: null,
88	label: null,
89	labelForId: undefined,
90	required: false,
91	validationState: null,
92	};
93
94	FormLayoutCustomField.propTypes = {	2✔
95	/**
96	* Custom HTML or React component(s). If none are provided nothing is rendered.
97	*/
98	children: PropTypes.node,
99	/**
100	* If `true`, label will be shown as disabled.
101	*/
102	disabled: PropTypes.bool,
103	/**
104	* If `true`, the field will span the full width of its parent.
105	*/
106	fullWidth: PropTypes.bool,
107	/**
108	* ID of the root HTML element.
109	*
110	* Also serves as base for ids of nested elements:
111	* * `<ID>__field`
112	* * `<ID>__label`
113	*/
114	id: PropTypes.string,
115	/**
116	* Size of contained form field used to properly align label.
117	*/
118	innerFieldSize: PropTypes.oneOf(['small', 'medium', 'large']),
119	/**
120	* Optional label of the field.
121	*/
122	label: PropTypes.string,
123	/**
124	* Optional ID of labeled field to keep accessibility features. Only available if `label` is set.
125	*/
126	labelForId: PropTypes.string,
127	/**
128	* If `true`, label will be styled as required.
129	*/
130	required: PropTypes.bool,
131	/**
132	* Alter the field to provide feedback based on validation result.
133	*/
134	validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
135	};
136
137	export const FormLayoutCustomFieldWithGlobalProps = withGlobalProps(FormLayoutCustomField, 'FormLayoutCustomField');	2✔
138
139	export default FormLayoutCustomFieldWithGlobalProps;

react-ui-org / react-ui / 15251092091

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