11859220152

Committed 15 Nov 2024 03:45PM UTC coverage: 89.034% (-0.2%) from 89.269%

Build # 11859220152

Build Type

Pull #1316

github

Committed by

web-flow

Commit Message

Merge cdf0c226f into 146eaf904

Pull Request Pull Request #1316: fix(Pill): bugs in Pill with Enhanced options

Run Details

1404 of 1794 branches covered (78.26%)

Branch coverage included in aggregate %.

14 of 14 new or added lines in 4 files covered. (100.0%)

6 existing lines in 1 file now uncovered.

3451 of 3659 relevant lines covered (94.32%)

60.88 hits per line

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

89.71

/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx

import * as React from 'react';
import DownArrow from '@material-design-icons/svg/round/expand_more.svg';
import UpArrow from '@material-design-icons/svg/round/expand_less.svg';
import Clear from '@material-design-icons/svg/round/cancel.svg';
import { bem } from '../../../utils';
import { ENTER_KEY } from '../../../constants';
import { PillButtonBaseProps } from '../PillButton';
import { DropdownTrigger } from '../../Dropdown';
import { PrioritySelector, PrioritySelectorProps } from '../../PrioritySelector';
import styles from './PillButtonEnhanced.scss';
import { Tooltip } from '../../Tooltip';

export interface Props<PriorityItemValue = unknown> extends PillButtonBaseProps {
    /** Label/indicator in case of multiple selection, such as `+2` for instance */
    additionalContentLabel?: string;
    /** Tooltip content to be shown when multiple selections are shown */
    additionalContentTooltip?: React.ReactNode;
    /** Props needed for rendering optional priority selector */
    priority?: PrioritySelectorProps<PriorityItemValue>;
    /** max width of the button (excluding 20px of the trailing button), e.g. `fit-content`. If undefined will default to 220px */
    maxWidth?: string;
}

const { block, elem } = bem('PillButtonEnhanced', styles);

export const PillButtonEnhanced = React.forwardRef(
    /* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint */
    <PriorityItemValue extends unknown>(
        {
            isOpen = false,
            onClear,
            name,
            content = null,
            downArrowLabel,
            upArrowLabel,
            clearLabel,
            priority,
            additionalContentLabel,
            additionalContentTooltip,
            maxWidth,
            ...rest
        }: Props<PriorityItemValue>,
        ref: React.Ref<HTMLElement>
    ) => {
        const isActive = !!content;
        const propsForBem = { isOpen, isActive };

        const getButtonIconAndHandler = () => {
            if (content) {
                return {
                    icon: (
                        <Clear
                            aria-label={clearLabel}
                            viewBox="0 0 24 24"
                            height="16px"
                            width="16px"
                        />
                    ),
                    onClick: (e: React.MouseEvent) => {
                        e.stopPropagation();
                        e.preventDefault();
                        onClear();
                    },
                };
            }

            if (isOpen) {
                return {
                    icon: (
                        <UpArrow
                            aria-label={upArrowLabel}
                            viewBox="0 0 24 24"
                            height="16px"
                            width="16px"
                        />
                    ),
                    onClick: (e: React.MouseEvent) => {
                        e.stopPropagation();
                        e.preventDefault();
                    },
                };
            }
            return {
                icon: (
                    <DownArrow
                        aria-label={downArrowLabel}
                        viewBox="0 0 24 24"
                        height="16px"
                        width="16px"
                    />
                ),
                onClick: (e) => {
                    e.stopPropagation();
                    e.preventDefault();
                },
            };
        };

        const { icon: buttonIcon, onClick: handleButtonClick } = getButtonIconAndHandler();

        const handleKeyDownOnButton = (e) => {
            if (e.key === ENTER_KEY) {
                handleButtonClick(e);
            }
        };

        const handlePillClick = (e) => {
            e.stopPropagation();
            e.preventDefault();
        };

        const handleKeyDownOnPill = (e) => {
            if (e.key === ENTER_KEY) {
                handlePillClick(e);
            }
        };

        return (
            <div ref={ref} {...rest} {...block({ ...propsForBem, ...rest })}>
                {priority?.list.length && (
                    <PrioritySelector
                        {...priority}
                        size="small"
                        triggerClassName={`${elem('priority').className} ${priority.triggerClassName}`}
                    />
                )}
                <DropdownTrigger>
                    <div
                        role="button"
                        {...elem('main')}
                        onClick={handlePillClick}
                        onKeyDown={handleKeyDownOnPill}
                        tabIndex={0}
                        style={{ maxWidth }}
                    >
                        <span {...elem('name')}>{name}</span>
                        {!!content && (
                            <>
                                <span {...elem('valueSeparator')}>:</span>
                                <span {...elem('content')} title={content}>
                                    {content}
                                </span>
                            </>
                        )}
                        {additionalContentLabel && (
                            <>
                                <span {...elem('contentSeparator')}>,</span>
                                <Tooltip content={additionalContentTooltip}>
                                    <span {...elem('additionalContent')}>
                                        {additionalContentLabel}
                                    </span>
                                </Tooltip>
                            </>
                        )}
                    </div>
                </DropdownTrigger>
                <div
                    role="button"
                    {...elem('button')}
                    onClick={handleButtonClick}
                    onKeyDown={handleKeyDownOnButton}
                    tabIndex={0}
                >
                    {buttonIcon}
                </div>
            </div>
        );
    }
) as <PriorityItemValue>(
    p: Props<PriorityItemValue> & { ref?: React.Ref<HTMLElement> }
) => React.ReactElement;
// See https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref solution 1

1	import * as React from 'react';	3✔
2	import DownArrow from '@material-design-icons/svg/round/expand_more.svg';	3✔
3	import UpArrow from '@material-design-icons/svg/round/expand_less.svg';	3✔
4	import Clear from '@material-design-icons/svg/round/cancel.svg';	3✔
5	import { bem } from '../../../utils';	3✔
6	import { ENTER_KEY } from '../../../constants';	3✔
7	import { PillButtonBaseProps } from '../PillButton';
8	import { DropdownTrigger } from '../../Dropdown';	3✔
9	import { PrioritySelector, PrioritySelectorProps } from '../../PrioritySelector';	3✔
10	import styles from './PillButtonEnhanced.scss';	3✔
11	import { Tooltip } from '../../Tooltip';	3✔
12
13	export interface Props<PriorityItemValue = unknown> extends PillButtonBaseProps {
14	/** Label/indicator in case of multiple selection, such as `+2` for instance */
15	additionalContentLabel?: string;
16	/** Tooltip content to be shown when multiple selections are shown */
17	additionalContentTooltip?: React.ReactNode;
18	/** Props needed for rendering optional priority selector */
19	priority?: PrioritySelectorProps<PriorityItemValue>;
20	/** max width of the button (excluding 20px of the trailing button), e.g. `fit-content`. If undefined will default to 220px */
21	maxWidth?: string;
22	}
23
24	const { block, elem } = bem('PillButtonEnhanced', styles);	3✔
25
26	export const PillButtonEnhanced = React.forwardRef(	3✔
27	/* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint */
28	<PriorityItemValue extends unknown>(
29	{
30	isOpen = false,	22✔
31	onClear,	22✔
32	name,	22✔
33	content = null,	22✔
34	downArrowLabel,	22✔
35	upArrowLabel,	22✔
36	clearLabel,	22✔
37	priority,	22✔
38	additionalContentLabel,	22✔
39	additionalContentTooltip,	22✔
40	maxWidth,	22✔
41	...rest	22✔
42	}: Props<PriorityItemValue>,
43	ref: React.Ref<HTMLElement>
44	) => {
45	const isActive = !!content;	22✔
46	const propsForBem = { isOpen, isActive };	22✔
47
48	const getButtonIconAndHandler = () => {	22✔
49	if (content) {	22✔
50	return {	20✔
51	icon: (
52	<Clear
53	aria-label={clearLabel}
54	viewBox="0 0 24 24"
55	height="16px"
56	width="16px"
57	/>
58	),
59	onClick: (e: React.MouseEvent) => {
60	e.stopPropagation();	5✔
61	e.preventDefault();	5✔
62	onClear();	5✔
63	},
64	};
65	}
66
67	if (isOpen) {	2✔
68	return {	1✔
69	icon: (
70	<UpArrow
71	aria-label={upArrowLabel}
72	viewBox="0 0 24 24"
73	height="16px"
74	width="16px"
75	/>
76	),
77	onClick: (e: React.MouseEvent) => {
UNCOV 78	e.stopPropagation();	×
UNCOV 79	e.preventDefault();	×
80	},
81	};
82	}
83	return {	1✔
84	icon: (
85	<DownArrow
86	aria-label={downArrowLabel}
87	viewBox="0 0 24 24"
88	height="16px"
89	width="16px"
90	/>
91	),
92	onClick: (e) => {
UNCOV 93	e.stopPropagation();	×
UNCOV 94	e.preventDefault();	×
95	},
96	};
97	};
98
99	const { icon: buttonIcon, onClick: handleButtonClick } = getButtonIconAndHandler();	22✔
100
101	const handleKeyDownOnButton = (e) => {	22✔
102	if (e.key === ENTER_KEY) {	2✔
103	handleButtonClick(e);	2✔
104	}
105	};
106
107	const handlePillClick = (e) => {	22✔
108	e.stopPropagation();	2✔
109	e.preventDefault();	2✔
110	};
111
112	const handleKeyDownOnPill = (e) => {	22✔
UNCOV 113	if (e.key === ENTER_KEY) {	×
UNCOV 114	handlePillClick(e);	×
115	}
116	};
117
118	return (	22✔
119	<div ref={ref} {...rest} {...block({ ...propsForBem, ...rest })}>
120	{priority?.list.length && (	89✔
121	<PrioritySelector
122	{...priority}
123	size="small"
124	triggerClassName={`${elem('priority').className} ${priority.triggerClassName}`}
125	/>
126	)}
127	<DropdownTrigger>
128	<div
129	role="button"
130	{...elem('main')}
131	onClick={handlePillClick}
132	onKeyDown={handleKeyDownOnPill}
133	tabIndex={0}
134	style={{ maxWidth }}
135	>
136	<span {...elem('name')}>{name}</span>
137	{!!content && (	42✔
138	<>
139	<span {...elem('valueSeparator')}>:</span>
140	<span {...elem('content')} title={content}>
141	{content}
142	</span>
143	</>
144	)}
145	{additionalContentLabel && (	23✔
146	<>
147	<span {...elem('contentSeparator')}>,</span>
148	<Tooltip content={additionalContentTooltip}>
149	<span {...elem('additionalContent')}>
150	{additionalContentLabel}
151	</span>
152	</Tooltip>
153	</>
154	)}
155	</div>
156	</DropdownTrigger>
157	<div
158	role="button"
159	{...elem('button')}
160	onClick={handleButtonClick}
161	onKeyDown={handleKeyDownOnButton}
162	tabIndex={0}
163	>
164	{buttonIcon}
165	</div>
166	</div>
167	);
168	}
169	) as <PriorityItemValue>(
170	p: Props<PriorityItemValue> & { ref?: React.Ref<HTMLElement> }
171	) => React.ReactElement;
172	// See https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref solution 1

textkernel / oneui / 11859220152

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