059c8b55-5adf-41de-bd7c-982aac16578c

Committed 04 Mar 2024 06:52PM UTC coverage: 96.018%. First build

Build # 059c8b55-5adf-41de-bd7c-982aac16578c

Build Type

Pull #1730

circleci

Committed by

geotrev

Commit Message

feat: deprecates table exports and adds sub-component mapping

Pull Request Pull Request #1730: feat: adds Table sub-component mapping + deprecates stand-alone exports

Run Details

3251 of 3597 branches covered (90.38%)

Branch coverage included in aggregate %.

25 of 25 new or added lines in 1 file covered. (100.0%)

9915 of 10115 relevant lines covered (98.02%)

221.03 hits per line

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

61.29

/packages/forms/src/elements/common/Label.tsx

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { composeEventHandlers } from '@zendeskgarden/container-utilities';
import useFieldContext from '../../utils/useFieldContext';
import useFieldsetContext from '../../utils/useFieldsetContext';
import useInputContext from '../../utils/useInputContext';
import {
  StyledLabel,
  StyledCheckLabel,
  StyledCheckSvg,
  StyledDashSvg,
  StyledRadioLabel,
  StyledRadioSvg,
  StyledToggleLabel,
  StyledToggleSvg
} from '../../styled';
import { ILabelProps } from '../../types';

/**
 * @extends LabelHTMLAttributes<HTMLLabelElement>
 */
export const Label = React.forwardRef<HTMLLabelElement, ILabelProps>((props, ref) => {
  const fieldContext = useFieldContext();
  const fieldsetContext = useFieldsetContext();
  const type = useInputContext();

  let combinedProps = props;

  if (fieldContext) {
    combinedProps = fieldContext.getLabelProps(combinedProps);

    if (type === undefined) {
      const { setIsLabelActive, setIsLabelHovered } = fieldContext;

      combinedProps = {
        ...combinedProps,
        onMouseUp: composeEventHandlers(props.onMouseUp, () => {
          setIsLabelActive(false);
        }),
        onMouseDown: composeEventHandlers(props.onMouseDown, () => {
          setIsLabelActive(true);
        }),
        onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
          setIsLabelHovered(true);
        }),
        onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
          setIsLabelHovered(false);
        })
      };
    }
  }

  if (fieldsetContext) {
    combinedProps = {
      ...combinedProps,
      isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
    };
  }

  if (type === 'radio') {
    return (
      <StyledRadioLabel ref={ref} {...(combinedProps as any)}>
        <StyledRadioSvg />
        {props.children}
      </StyledRadioLabel>
    );
  } else if (type === 'checkbox') {
    /**
     * `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox
     * See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506
     */
    const onLabelSelect = (e: React.KeyboardEvent<HTMLInputElement>) => {
      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

      if (fieldContext && isFirefox && e.target instanceof Element) {
        const inputId = e.target.getAttribute('for');

        if (!inputId) return;

        const input = document.getElementById(inputId) as HTMLInputElement | null;

        if (input && input.type === 'checkbox') {
          if (e.shiftKey) {
            input.click();
            input.checked = true;
          }
          input.focus();
        }
      }
    };

    combinedProps = {
      ...combinedProps,
      onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
    };

    return (
      <StyledCheckLabel ref={ref} {...(combinedProps as any)}>
        <StyledCheckSvg />
        <StyledDashSvg />
        {props.children}
      </StyledCheckLabel>
    );
  } else if (type === 'toggle') {
    return (
      <StyledToggleLabel ref={ref} {...(combinedProps as any)}>
        <StyledToggleSvg />
        {props.children}
      </StyledToggleLabel>
    );
  }

  return <StyledLabel ref={ref} {...(combinedProps as any)} />;
});

Label.displayName = 'Label';

Label.propTypes = {
  isRegular: PropTypes.bool
};

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import React from 'react';	8✔
9	import PropTypes from 'prop-types';	8✔
10	import { composeEventHandlers } from '@zendeskgarden/container-utilities';	8✔
11	import useFieldContext from '../../utils/useFieldContext';	8✔
12	import useFieldsetContext from '../../utils/useFieldsetContext';	8✔
13	import useInputContext from '../../utils/useInputContext';	8✔
14	import {
15	StyledLabel,
16	StyledCheckLabel,
17	StyledCheckSvg,
18	StyledDashSvg,
19	StyledRadioLabel,
20	StyledRadioSvg,
21	StyledToggleLabel,
22	StyledToggleSvg
23	} from '../../styled';	8✔
24	import { ILabelProps } from '../../types';
25
26	/**
27	* @extends LabelHTMLAttributes<HTMLLabelElement>
28	*/
29	export const Label = React.forwardRef<HTMLLabelElement, ILabelProps>((props, ref) => {	15✔
30	const fieldContext = useFieldContext();	20✔
31	const fieldsetContext = useFieldsetContext();	20✔
32	const type = useInputContext();	20✔
33
34	let combinedProps = props;	20✔
35
36	if (fieldContext) {	20✔
37	combinedProps = fieldContext.getLabelProps(combinedProps);	20✔
38
39	if (type === undefined) {	20✔
40	const { setIsLabelActive, setIsLabelHovered } = fieldContext;	16✔
41
42	combinedProps = {	16✔
43	...combinedProps,
44	onMouseUp: composeEventHandlers(props.onMouseUp, () => {
45	setIsLabelActive(false);	×
46	}),
47	onMouseDown: composeEventHandlers(props.onMouseDown, () => {
48	setIsLabelActive(true);	×
49	}),
50	onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
51	setIsLabelHovered(true);	×
52	}),
53	onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
54	setIsLabelHovered(false);	×
55	})
56	};
57	}
58	}
59
60	if (fieldsetContext) {	20✔
61	combinedProps = {	1✔
62	...combinedProps,
63	isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular	1!
64	};
65	}
66
67	if (type === 'radio') {	20✔
68	return (	2✔
69	<StyledRadioLabel ref={ref} {...(combinedProps as any)}>
70	<StyledRadioSvg />
71	{props.children}
72	</StyledRadioLabel>
73	);
74	} else if (type === 'checkbox') {	18✔
75	/**
76	* `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox
77	* See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506
78	*/
79	const onLabelSelect = (e: React.KeyboardEvent<HTMLInputElement>) => {	1✔
80	const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;	×
81
82	if (fieldContext && isFirefox && e.target instanceof Element) {	×
83	const inputId = e.target.getAttribute('for');	×
84
85	if (!inputId) return;	×
86
87	const input = document.getElementById(inputId) as HTMLInputElement \| null;	×
88
89	if (input && input.type === 'checkbox') {	×
90	if (e.shiftKey) {	×
91	input.click();	×
92	input.checked = true;	×
93	}
94	input.focus();	×
95	}
96	}
97	};
98
99	combinedProps = {	1✔
100	...combinedProps,
101	onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
102	};
103
104	return (	1✔
105	<StyledCheckLabel ref={ref} {...(combinedProps as any)}>
106	<StyledCheckSvg />
107	<StyledDashSvg />
108	{props.children}
109	</StyledCheckLabel>
110	);
111	} else if (type === 'toggle') {	17✔
112	return (	1✔
113	<StyledToggleLabel ref={ref} {...(combinedProps as any)}>
114	<StyledToggleSvg />
115	{props.children}
116	</StyledToggleLabel>
117	);
118	}
119
120	return <StyledLabel ref={ref} {...(combinedProps as any)} />;
121	});
122
123	Label.displayName = 'Label';	8✔
124
125	Label.propTypes = {	8✔
126	isRegular: PropTypes.bool
127	};

zendeskgarden / react-components / 059c8b55-5adf-41de-bd7c-982aac16578c

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