Comment out legacy classnames, remove && specificity hack in styles

WordPress · Jul 2, 2024 · 92e358b · 92e358b
1 parent 7fa19ff
commit 92e358b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -66,7 +66,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			const withHint = (
 				<Styled.WithHintItemWrapper>
 					<span>{ name }</span>
-					<Styled.WithHintItemHint className="components-custom-select-control__item-hint">
+					<Styled.WithHintItemHint
+					// TODO: Legacy classname. Add V1 styles are removed from the codebase
+					// className="components-custom-select-control__item-hint"
+					>
 						{ __experimentalHint }
 					</Styled.WithHintItemHint>
 				</Styled.WithHintItemWrapper>
@@ -79,12 +82,13 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 					children={ __experimentalHint ? withHint : name }
 					style={ style }
 					className={ clsx(
-						// Legacy classnames
-						'components-custom-select-control__item',
-						className,
-						{
-							'has-hint': !! __experimentalHint,
-						}
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// 'components-custom-select-control__item',
+						className
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// {
+						// 	'has-hint': __experimentalHint,
+						// }
 					) }
 				/>
 			);
@@ -101,7 +105,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		return (
 			<Styled.SelectedExperimentalHintWrapper>
 				{ currentValue }
-				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
+				<Styled.SelectedExperimentalHintItem
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// className="components-custom-select-control__hint"
+				>
 					{ currentHint?.__experimentalHint }
 				</Styled.SelectedExperimentalHintItem>
 			</Styled.SelectedExperimentalHintWrapper>
@@ -132,7 +139,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			size={ translatedSize }
 			store={ store }
 			className={ clsx(
-				'components-custom-select-control',
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// 'components-custom-select-control',
 				classNameProp
 			) }
 			isLegacy

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -102,27 +102,23 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 `;
 
 export const SelectItem = styled( Ariakit.SelectItem )`
-	// Necessary to override V1 styles passed via the legacy
-	// '.components-custom-select-control__item' class
-	&& {
-		cursor: default;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: ${ ITEM_PADDING };
-		font-size: ${ CONFIG.fontSize };
-		// TODO: reassess line-height for non-legacy v2
-		line-height: 28px;
-		scroll-margin: ${ space( 1 ) };
-		user-select: none;
-
-		&[aria-disabled='true'] {
-			cursor: not-allowed;
-		}
+	cursor: default;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: ${ ITEM_PADDING };
+	font-size: ${ CONFIG.fontSize };
+	// TODO: reassess line-height for non-legacy v2
+	line-height: 28px;
+	scroll-margin: ${ space( 1 ) };
+	user-select: none;
+
+	&[aria-disabled='true'] {
+		cursor: not-allowed;
+	}
 
-		&[data-active-item] {
-			background-color: ${ COLORS.theme.gray[ 300 ] };
-		}
+	&[data-active-item] {
+		background-color: ${ COLORS.theme.gray[ 300 ] };
 	}
 `;