Update not clickable element to a div

Automattic · Jun 25, 2024 · bf1fb34 · bf1fb34
1 parent 8ad032f
commit bf1fb34
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/packages/launchpad/src/checklist-item/index.tsx b/packages/launchpad/src/checklist-item/index.tsx
@@ -54,29 +54,32 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 		null !== task.repetition_count &&
 		undefined !== task.repetition_count;
 
+	// Make sure the button keeps the button styles if it is not clickable.
+	const buttonClassName = isClickable ? '' : 'components-button';
+	const ButtonElement = isClickable ? Button : 'div';
+
 	return (
 		<li
 			className={ clsx( 'checklist-item__task', {
 				completed: completed,
 				pending: ! completed,
 				enabled: ! disabled,
 				disabled: disabled,
-				clickable: isClickable,
 				expanded: expandable && expandable.isOpen,
 			} ) }
 		>
 			{ isPrimaryAction ? (
-				<Button
-					className="checklist-item__checklist-primary-button"
+				<ButtonElement
+					className={ clsx( 'checklist-item__checklist-primary-button', buttonClassName ) }
 					data-task={ id }
 					onClick={ onClickHandler }
 					{ ...buttonProps }
 				>
 					{ title }
-				</Button>
+				</ButtonElement>
 			) : (
-				<Button
-					className="checklist-item__task-content"
+				<ButtonElement
+					className={ clsx( 'checklist-item__task-content', buttonClassName ) }
 					data-task={ id }
 					onClick={ onClickHandler }
 					{ ...buttonProps }
@@ -108,7 +111,7 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 						/>
 					) }
 					{ subtitle && <p className="checklist-item__subtext">{ subtitle }</p> }
-				</Button>
+				</ButtonElement>
 			) }
 			{ expandable && expandable.isOpen && (
 				<div className="checklist-item__expanded-content">

diff --git a/packages/launchpad/src/checklist-item/style.scss b/packages/launchpad/src/checklist-item/style.scss
@@ -16,7 +16,6 @@
 	margin: 0;
 	color: var(--color-neutral-100);
 	height: auto;
-	cursor: pointer;
 	font-family: $sans;
 	font-size: $font-body-small;
 	line-height: 22px;
@@ -25,6 +24,14 @@
 	text-decoration: none;
 	padding-left: 2px;
 
+	&:is(button, a) {
+		cursor: pointer;
+	}
+
+	&:is(div) {
+		cursor: default;
+	}
+
 	&:visited {
 		color: var(--color-neutral-100);
 	}
@@ -80,17 +87,13 @@
 
 .checklist-item__task-content.components-button:hover:not([disabled]),
 .checklist-item__task-content.components-button:focus:not([disabled]) {
-	&.clickable {
+	&:is(button, a) {
 		fill: var(--studio-blue-50);
 		color: var(--studio-blue-50);
 	}
 	border-bottom: 1px solid var(--studio-gray-5);
 }
 
-.checklist-item__task:not(.clickable) .components-button {
-	cursor: default;
-}
-
 .checklist-item__task-content.components-button[disabled],
 .checklist-item__task-content.components-button[disabled]:focus {
 	background-color: transparent;
@@ -198,10 +201,10 @@
 }
 
 // pending tasks and completed enabled
-.checklist-item__task.clickable.completed.enabled button:hover,
-.checklist-item__task.clickable.pending button:hover,
-.checklist-item__task.clickable.completed.enabled > a:focus,
-.checklist-item__task.clickable.pending > a:focus {
+.checklist-item__task.completed.enabled > button:hover,
+.checklist-item__task.pending > button:hover,
+.checklist-item__task.completed.enabled > a:focus,
+.checklist-item__task.pending > a:focus {
 	.checklist-item__text {
 		color: var(--studio-blue-50);
 	}