♻️ Add prefix to CSS state-classes

modules/ppcp-settings/resources/css/_mixins.scss

@@ -45,7 +45,7 @@
 }
 
 @mixin disabled-state($control-type) {
-	.components-#{$control-type}-control.is-disabled {
+	.components-#{$control-type}-control.ppcp--is-disabled {
 		.components-#{$control-type}-control__input,
 		.components-#{$control-type}-control__label,
 		.components-base-control__help {

modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss

@@ -48,11 +48,11 @@
 				@include font(16, 24, 600);
 				color: var(--color-text);
 
-				.title {
+				.ppcp--title {
 					margin-left: 18px;
 				}
 
-				.big {
+				.ppcp--big {
 					@include font(20, 28, 400);
 				}
 			}
@@ -79,7 +79,7 @@
 		}
 	}
 
-	&.is-scrolled {
+	&.ppcp--is-scrolled {
 		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
 	}
 
@@ -90,7 +90,7 @@
 			row-gap: 8px;
 			white-space: nowrap;
 
-			&--right {
+			.ppcp-r-navigation--right {
 				position: absolute;
 				right: 10px;
 				z-index: 10;
@@ -98,12 +98,12 @@
 				box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
 			}
 
-			&--progress-bar {
+			.ppcp-r-navigation--progress-bar {
 				height: 2px;
 			}
 
 			.components-button.is-title {
-				.title {
+				.ppcp--title {
 					margin-left: 4px;
 				}
 			}

modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss

@@ -16,7 +16,7 @@
 	padding: 24px 16px 24px 16px;
 
 
-	&.selected {
+	&.ppcp--selected {
 		border-color: $color-blueberry;
 		outline-color: $color-blueberry;
 		box-shadow: $shadow-selection-box;

modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss

@@ -27,12 +27,12 @@
 		display: block;
 		text-transform: uppercase;
 
-		&.style-alt {
+		&.ppcp--no-caps {
 			@include font(14, 16, 600);
 			text-transform: none;
 		}
 
-		&.style-big {
+		&.ppcp--big {
 			@include font(16, 20, 600);
 		}
 
@@ -97,7 +97,7 @@
 		margin-left: 5px;
 	}
 
-	+ .ppcp-r-settings-block:not(.no-gap) {
+	+ .ppcp-r-settings-block:not(.ppcp--no-gap) {
 		margin-top: var(--block-separator-gap, 32px);
 		padding-top: var(--block-separator-gap, 32px);
 		border-top: 1px solid var(--color-gray-200);

modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss

@@ -33,7 +33,7 @@
 		}
 
 		// Select-fields have a smaller gap between the header and input field.
-		&.has-select {
+		&.ppcp--has-select {
 			--block-header-gap: 8px;
 		}
 
@@ -58,7 +58,7 @@
 			margin-bottom: 28px;
 			border-bottom: 1px solid var(--color-separators);
 
-			&.no-gap,
+			&.ppcp--no-gap,
 			&:last-child {
 				padding-bottom: 0;
 				margin-bottom: 0;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js

@@ -1,17 +1,16 @@
 import classNames from 'classnames';
 
-const Title = ( {
+const Title = ( { children, noCaps = false, big = false, className = '' } ) => {
-	children,
+	if ( ! children ) {
-	altStyle = false,
+		return null;
-	big = false,
+	}
-	className = '',
+
-} ) => {
 	const elementClasses = classNames(
 		'ppcp-r-settings-block__title',
 		className,
 		{
-			'style-alt': altStyle,
+			'ppcp--no-caps': noCaps,
-			'style-big': big,
+			'ppcp--big': big,
 		}
 	);
 

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/Checkbox.js

@@ -19,7 +19,7 @@ const Checkbox = ( {
 		}
 	}
 
-	const className = classNames( { 'is-disabled': disabled } );
+	const className = classNames( { 'ppcp--is-disabled': disabled } );
 
 	const onChange = ( newState ) => {
 		let newValue;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/SelectableContent.js

@@ -21,7 +21,7 @@ const SelectableContent = ( {
 	}
 
 	const boxClassName = classNames( 'ppcp-r-select-box', {
-		selected: isSelected,
+		'ppcp--selected': isSelected,
 	} );
 
 	const InputField = ( { isRadio } ) => {

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 
 const SettingsBlock = ( { className, children, separatorAndGap = true } ) => {
 	const blockClassName = classNames( 'ppcp-r-settings-block', className, {
-		'no-gap': ! separatorAndGap,
+		'ppcp--no-gap': ! separatorAndGap,
 	} );
 
 	return <div className={ blockClassName }>{ children }</div>;

modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js

@@ -20,10 +20,10 @@ const TopNavigation = ( {
 	const { isScrolled } = useIsScrolled();
 
 	const className = classNames( 'ppcp-r-navigation-container', {
-		'is-scrolled': isScrolled,
+		'ppcp--is-scrolled': isScrolled,
 	} );
-	const titleClassName = classNames( 'title', {
+	const titleClassName = classNames( 'ppcp--title', {
-		big: isMainTitle,
+		'ppcp--big': isMainTitle,
 	} );
 
 	const handleTitleClick = useCallback( () => {

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -54,8 +54,8 @@ const ConnectionButton = ( {
 		removeCompleteHandler,
 	} = useHandleOnboardingButton( isSandbox );
 	const buttonClassName = classNames( 'ppcp-r-connection-button', className, {
-		'sandbox-mode': isSandbox,
+		'ppcp--mode-sandbox': isSandbox,
-		'live-mode': ! isSandbox,
+		'ppcp--mode-live': ! isSandbox,
 	} );
 	const environment = isSandbox ? 'sandbox' : 'production';
 

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js

@@ -157,7 +157,7 @@ const ManualConnectionForm = () => {
 					value={ manualClientId }
 					onChange={ setManualClientId }
 					className={ classNames( {
-						'has-error': ! clientValid,
+						'ppcp--has-error': ! clientValid,
 					} ) }
 				/>
 				{ clientValid || (

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js

@@ -14,7 +14,7 @@ const StylingSectionWithCheckboxes = ( {
 	onChange,
 	children,
 } ) => {
-	className = classNames( 'has-checkboxes', className );
+	className = classNames( 'ppcp--has-checkboxes', className );
 
 	return (
 		<StylingSection

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js

@@ -14,7 +14,7 @@ const StylingSectionWithRadiobuttons = ( {
 	onChange,
 	children,
 } ) => {
-	className = classNames( 'has-radio-buttons', className );
+	className = classNames( 'ppcp--has-radio-buttons', className );
 
 	return (
 		<StylingSection

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js

@@ -13,7 +13,7 @@ const StylingSectionWithSelect = ( {
 	onChange,
 	children,
 } ) => {
-	className = classNames( 'has-select', className );
+	className = classNames( 'ppcp--has-select', className );
 
 	return (
 		<StylingSection