Merge pull request #6211 from pat270/LPD-71044

fix(@clayui/drop-down): LPD-71044 Items should use `title` instead of deprecated `label`

Author: ethib137

packages/clay-drop-down/docs/drop-down.mdx

@@ -388,21 +388,21 @@ To render a cascading menu it is necessary to set the `type` of the item to `con
 
 ```js
 const items = [
-	{label: 'Folder'},
+	{title: 'Folder'},
 	{type: 'divider'},
 	{
 		items: [
-			{label: 'Basic Document'},
-			{label: 'Contract'},
-			{label: 'Marketing Banner'},
-			{label: 'Spreadsheet'},
-			{label: 'Presentation'},
+			{title: 'Basic Document'},
+			{title: 'Contract'},
+			{title: 'Marketing Banner'},
+			{title: 'Spreadsheet'},
+			{title: 'Presentation'},
 		],
-		label: 'Document',
+		title: 'Document',
 		type: 'contextual',
 	},
-	{label: 'Shortcut'},
-	{label: 'Repository'},
+	{title: 'Shortcut'},
+	{title: 'Repository'},
 ];
 ```
 

packages/clay-drop-down/src/Items.tsx

@@ -52,6 +52,7 @@ interface IInternalItem {
 const Checkbox = ({
 	checked = false,
 	onChange = () => {},
+	title,
 	...otherProps
 }: Item & IInternalItem) => {
 	const [value, setValue] = useState<boolean>(checked);
@@ -63,6 +64,7 @@ const Checkbox = ({
 			<ClayCheckbox
 				{...otherProps}
 				checked={value}
+				label={title}
 				onChange={() => {
 					setValue((val) => !val);
 					onChange(!value);
@@ -76,7 +78,7 @@ const Checkbox = ({
 type Context = {
 	back?: () => void;
 	close: () => void;
-	onForward?: (label: string, id: string) => void;
+	onForward?: (title: string, id: string) => void;
 	messages?: Record<string, string>;
 };
 
@@ -89,17 +91,20 @@ const Item = ({
 	label,
 	onClick,
 	spritemap,
+	title,
 	...props
 }: Omit<Item, 'onChange'> & IInternalItem) => {
 	const {back, close, messages, onForward} = useContext(ClayDropDownContext);
 
+	title = label || title;
+
 	return (
 		<DropDown.Item
 			{...props}
 			onClick={(event) => {
-				if (onForward && child && label) {
+				if (onForward && child && title) {
 					event.preventDefault();
-					onForward(label, child);
+					onForward(title, child);
 
 					return;
 				}
@@ -117,13 +122,13 @@ const Item = ({
 			}}
 			spritemap={spritemap}
 		>
-			{label}
+			{title}
 
 			{child && (
 				<span
-					aria-label={`${messages!['goTo']} ${label}`}
+					aria-label={`${messages!['goTo']} ${title}`}
 					className="dropdown-item-indicator-end"
-					title={`${messages!['goTo']} ${label}`}
+					title={`${messages!['goTo']} ${title}`}
 				>
 					<Icon spritemap={spritemap} symbol="angle-right" />
 				</span>
@@ -132,18 +137,20 @@ const Item = ({
 	);
 };
 
-const Group = ({items, label, spritemap}: Item & IInternalItem) => {
+const Group = ({items, label, spritemap, title}: Item & IInternalItem) => {
+	title = label || title;
+
 	warning(
 		typeof items !== 'undefined',
-		`ClayDropDownWithItems -> The '${label}' group contains no items to render.`
+		`ClayDropDownWithItems -> The '${title}' group contains no items to render.`
 	);
 
 	if (typeof items === 'undefined') {
 		return null;
 	}
 
 	return (
-		<DropDownGroup header={label}>
+		<DropDownGroup header={title}>
 			{items && <Items items={items} spritemap={spritemap} />}
 		</DropDownGroup>
 	);
@@ -180,6 +187,7 @@ const Contextual = ({
 	items,
 	label,
 	spritemap,
+	title,
 	...otherProps
 }: Omit<Item, 'onChange'> & IInternalItem) => {
 	const [visible, setVisible] = useState(false);
@@ -215,6 +223,8 @@ const Contextual = ({
 		[]
 	);
 
+	title = label || title;
+
 	return (
 		<DropDown.Item
 			{...otherProps}
@@ -263,7 +273,7 @@ const Contextual = ({
 			spritemap={spritemap}
 			symbolRight="angle-right"
 		>
-			{label}
+			{title}
 
 			{items && (
 				<DropDown.Menu
@@ -331,7 +341,7 @@ interface IRadioContext {
 
 const RadioGroupContext = React.createContext({} as IRadioContext);
 
-const Radio = ({value = '', ...otherProps}: Item & IInternalItem) => {
+const Radio = ({title, value = '', ...otherProps}: Item & IInternalItem) => {
 	const {checked, name, onChange} = useContext(RadioGroupContext);
 
 	const {tabFocus} = useContext(DropDownContext);
@@ -342,6 +352,7 @@ const Radio = ({value = '', ...otherProps}: Item & IInternalItem) => {
 				{...otherProps}
 				checked={checked === value}
 				inline
+				label={title}
 				name={name}
 				onChange={() => onChange(value as string)}
 				tabIndex={!tabFocus ? -1 : undefined}
@@ -357,6 +368,7 @@ const RadioGroup = ({
 	name,
 	onChange = () => {},
 	spritemap,
+	title,
 	value: defaultValue = '',
 }: Item & IInternalItem) => {
 	const [value, setValue] = useState(defaultValue);
@@ -370,13 +382,15 @@ const RadioGroup = ({
 		},
 	};
 
+	title = label || title;
+
 	warning(
 		items && items.filter((item) => item.type !== 'radio').length === 0,
 		'ClayDropDownWithItems -> Items of type `radiogroup` should be used `radio` if you need to use others, it is recommended to use type `group`.'
 	);
 
 	return (
-		<DropDownGroup header={label} role="radiogroup">
+		<DropDownGroup header={title} role="radiogroup">
 			{items && (
 				<RadioGroupContext.Provider value={params}>
 					<Items items={items} spritemap={spritemap} />

packages/clay-drop-down/src/__tests__/DropDownWithItems.tsx

@@ -5,7 +5,7 @@
 
 import {ClayDropDownWithItems} from '..';
 import ClayButton from '@clayui/button';
-import {cleanup, render} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
 import React from 'react';
 
 const spritemap = 'icons.svg';
@@ -178,4 +178,59 @@ describe('ClayDropDownWithItems', () => {
 
 		expect(document.body).toMatchSnapshot();
 	});
+
+	it('renders a DropDownWithItems using title', () => {
+		render(
+			<ClayDropDownWithItems
+				items={[
+					{
+						href: '#',
+						title: 'linkable',
+					},
+					{
+						items: [
+							{
+								checked: true,
+								title: 'checkbox',
+								type: 'checkbox' as const,
+							},
+							{
+								checked: false,
+								title: 'checkbox 1',
+								type: 'checkbox' as const,
+							},
+						],
+						title: 'checkbox',
+						type: 'group' as const,
+					},
+					{
+						items: [
+							{
+								title: 'one',
+								type: 'radio' as const,
+								value: 'one',
+							},
+							{
+								title: 'two',
+								type: 'radio' as const,
+								value: 'two',
+							},
+						],
+						name: 'radio',
+						title: 'radio',
+						type: 'radiogroup' as const,
+					},
+				]}
+				renderMenuOnClick
+				spritemap={spritemap}
+				trigger={<ClayButton>Click Me</ClayButton>}
+			/>
+		);
+
+		const toggleButton = document.querySelector('.dropdown-toggle');
+
+		fireEvent.click(toggleButton as HTMLButtonElement, {});
+
+		expect(screen.getByText('linkable')).toBeDefined();
+	});
 });