AI Assistant: Add namespace to Breve CSS classes (#38795)

* add namespace to breve css classes * changelog
Automattic · Aug 9, 2024 · f448165 · f448165
1 parent b7a5de7
commit f448165
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 31 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-css-namespace b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-css-namespace
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Add namespace to Breve CSS classes
diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts b/...k/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts
@@ -18,7 +18,7 @@ export const COMPLEX_WORDS: BreveFeatureConfig = {
 	name: 'complex-words',
 	title: __( 'Complex words', 'jetpack' ),
 	tagName: 'span',
-	className: 'has-proofread-highlight--complex-words',
+	className: 'jetpack-ai-breve__has-proofread-highlight--complex-words',
 	defaultEnabled: true,
 };
 

diff --git a/.../extensions/plugins/ai-assistant-plugin/components/breve/features/long-sentences/index.ts b/.../extensions/plugins/ai-assistant-plugin/components/breve/features/long-sentences/index.ts
@@ -15,7 +15,7 @@ export const LONG_SENTENCES: BreveFeatureConfig = {
 	name: 'long-sentences',
 	title: __( 'Long sentences', 'jetpack' ),
 	tagName: 'span',
-	className: 'has-proofread-highlight--long-sentences',
+	className: 'jetpack-ai-breve__has-proofread-highlight--long-sentences',
 	defaultEnabled: false,
 };
 

diff --git a/...tensions/plugins/ai-assistant-plugin/components/breve/features/unconfident-words/index.ts b/...tensions/plugins/ai-assistant-plugin/components/breve/features/unconfident-words/index.ts
@@ -16,7 +16,7 @@ export const UNCONFIDENT_WORDS: BreveFeatureConfig = {
 	name: 'unconfident-words',
 	title: __( 'Unconfident words', 'jetpack' ),
 	tagName: 'span',
-	className: 'has-proofread-highlight--unconfident-words',
+	className: 'jetpack-ai-breve__has-proofread-highlight--unconfident-words',
 	defaultEnabled: true,
 };
 

diff --git a/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx
@@ -213,44 +213,48 @@ export default function Highlight() {
 				<Popover
 					anchor={ virtual }
 					placement="bottom"
-					className="highlight-popover"
+					className="jetpack-ai-breve__highlight-popover"
 					variant="tooltip"
 					animate={ false }
 					focusOnMount={ false }
 					onMouseEnter={ handleMouseEnter }
 					onMouseLeave={ handleMouseLeave }
 				>
 					<div
-						className={ clsx( 'highlight-content', {
-							'has-suggestions': hasSuggestions,
+						className={ clsx( 'jetpack-ai-breve__highlight-content', {
+							'jetpack-ai-breve__has-suggestions': hasSuggestions,
 						} ) }
 					>
-						<div className="header-container">
-							<div className="title">
-								<div className="color" data-type={ feature } />
+						<div className="jetpack-ai-breve__header-container">
+							<div className="jetpack-ai-breve__title">
+								<div className="jetpack-ai-breve__color" data-type={ feature } />
 								<div>{ title }</div>
 							</div>
 							{ ! hasSuggestions && (
-								<div className="action">
+								<div className="jetpack-ai-breve__action">
 									{ loading ? (
-										<div className="loading">
+										<div className="jetpack-ai-breve__loading">
 											<Spinner />
 										</div>
 									) : (
-										<Button className="suggest" icon={ AiSVG } onClick={ handleSuggestions }>
+										<Button
+											className="jetpack-ai-breve__suggest"
+											icon={ AiSVG }
+											onClick={ handleSuggestions }
+										>
 											{ __( 'Suggest', 'jetpack' ) }
 										</Button>
 									) }
 								</div>
 							) }
 						</div>
-						<div className="bottom-container">
+						<div className="jetpack-ai-breve__bottom-container">
 							{ hasSuggestions && (
 								<Button variant="tertiary" onClick={ handleApplySuggestion }>
 									{ suggestions?.suggestion }
 								</Button>
 							) }
-							<div className="helper">
+							<div className="jetpack-ai-breve__helper">
 								{ hasSuggestions ? (
 									__( 'Click on the suggestion to insert it.', 'jetpack' )
 								) : (

diff --git a/...gins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss b/...gins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss
@@ -1,14 +1,14 @@
 @import '../features/features.colors';
 
-[class^='has-proofread-highlight'] {
+[class^='jetpack-ai-breve__has-proofread-highlight'] {
 	border-bottom: 3px solid;
 	@include features-colors( ( 'border-bottom-color' ) );
-	&.is-loading {
+	&.jetpack-ai-breve__is-loading {
 		@include pulse();
 	}
 }
 
-.highlight-popover {
+.jetpack-ai-breve__highlight-popover {
 	color: black;
 	cursor: default;
 	font-size: 13px;
@@ -17,29 +17,29 @@
 	line-height: 18px;
 	width: auto;
 
-	.highlight-content {
+	.jetpack-ai-breve__highlight-content {
 		align-items: center;
 		display: flex;
 		flex-direction: column;
 
-		&.has-suggestions {
+		&.jetpack-ai-breve__has-suggestions {
 			align-items: flex-start;
 			padding-top: 8px;
 			gap: 8px;
 		}
 
-		.header-container {
+		.jetpack-ai-breve__header-container {
 			display: flex;
 			width: 100%;
 			justify-content: space-between;
 			gap: 32px;
 
-			.title,
-			.action {
+			.jetpack-ai-breve__title,
+			.jetpack-ai-breve__action {
 				padding: 8px 12px;
 			}
 
-			.title {
+			.jetpack-ai-breve__title {
 				display: flex;
 				align-items: center;
 				justify-content: flex-start;
@@ -48,22 +48,22 @@
 				font-weight: 500;
 				white-space: nowrap;
 
-				.color {
+				.jetpack-ai-breve__color {
 					width: 10px;
 					height: 10px;
 					border-radius: 50%;
 					@include features-colors( ( 'background-color' ) );
 				}
 			}
 
-			.action {
+			.jetpack-ai-breve__action {
 				font-size: 13px;
 				display: flex;
 				align-items: center;
 				justify-content: flex-end;
 				gap: 4px;
 
-				.suggest.components-button {
+				.jetpack-ai-breve__suggest.components-button {
 					padding-top: 0px;
 					padding-bottom: 0px;
 					padding-right: 0px;
@@ -77,13 +77,13 @@
 			}
 		}
 
-		.bottom-container {
+		.jetpack-ai-breve__bottom-container {
 			display: flex;
 			flex-direction: column;
 			border-top: 1px solid #dcdcde;
 			width: 100%;
 
-			.helper {
+			.jetpack-ai-breve__helper {
 				padding: 4px 8px;
 				background-color: #f6f7f7;
 				white-space: nowrap;

diff --git a/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts b/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts
@@ -90,7 +90,7 @@ export function setSuggestions( {
 	occurrence: string;
 } ) {
 	return ( { dispatch } ) => {
-		anchor?.classList?.add( 'is-loading' );
+		anchor?.classList?.add( 'jetpack-ai-breve__is-loading' );
 
 		dispatch( {
 			type: 'SET_SUGGESTIONS_LOADING',
@@ -113,7 +113,7 @@ export function setSuggestions( {
 			}
 		)
 			.then( response => {
-				anchor?.classList?.remove( 'is-loading' );
+				anchor?.classList?.remove( 'jetpack-ai-breve__is-loading' );
 
 				try {
 					const suggestions = JSON.parse( response );
@@ -135,7 +135,7 @@ export function setSuggestions( {
 				}
 			} )
 			.catch( () => {
-				anchor?.classList?.remove( 'is-loading' );
+				anchor?.classList?.remove( 'jetpack-ai-breve__is-loading' );
 
 				dispatch( {
 					type: 'SET_SUGGESTIONS_LOADING',