Fix Inconsistent className prop in Components

The components are using an inconsistent class name prefix. Instead of using `wp-entities-search` which is too long as a prefix or the `wz-` which is unrelated to the project, the `wes-` seems to better fit the purpose of a class name prefix in such situation. Fix #25
Spaghetti-Dojo · Feb 15, 2024 · 4734a3b · 4734a3b
1 parent aedf515
commit 4734a3b
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 54 deletions.
diff --git a/sources/client/src/components/no-options-message.tsx b/sources/client/src/components/no-options-message.tsx
@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 
 export function NoOptionsMessage(): JSX.Element {
 	return (
-		<p className="wp-entities-search-no-option-message">
+		<p className="wes-no-option-message">
 			{__('No options', 'wp-entities-search')}
 		</p>
 	);

diff --git a/sources/client/src/components/plural-select-control.tsx b/sources/client/src/components/plural-select-control.tsx
@@ -13,8 +13,8 @@ export function PluralSelectControl(
 	const [selected, setSelected] = React.useState(props.value);
 	const className = classnames(
 		props.className,
-		'wz-select-control',
-		'wz-select-control--plural'
+		'wes-select-control',
+		'wes-select-control--plural'
 	);
 
 	const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -47,7 +47,7 @@ export function PluralSelectControl(
 			{props.options.map((option) => (
 				<option
 					key={option.value}
-					className={`wz-select-control-item wz-select-control-item--${option.value}`}
+					className={`wes-select-control-item wes-select-control-item--${option.value}`}
 					value={option.value}
 				>
 					{option.label}

diff --git a/sources/client/src/components/radio-control.tsx b/sources/client/src/components/radio-control.tsx
@@ -7,7 +7,7 @@ export function RadioControl(
 		className?: string;
 	}
 ): JSX.Element {
-	const className = classnames(props.className, 'wz-radio-control');
+	const className = classnames(props.className, 'wes-radio-control');
 
 	const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		const { target } = event;
@@ -27,14 +27,14 @@ export function RadioControl(
 			{props.options.map((option) => (
 				<div
 					key={option.value}
-					className={`wz-radio-control-item wz-radio-control-item--${option.value}`}
+					className={`wes-radio-control-item wes-radio-control-item--${option.value}`}
 				>
 					<label
-						htmlFor={`wz-radio-control-item__input-${option.value}`}
+						htmlFor={`wes-radio-control-item__input-${option.value}`}
 					>
 						<input
 							type="radio"
-							id={`wz-radio-control-item__input-${option.value}`}
+							id={`wes-radio-control-item__input-${option.value}`}
 							checked={props.value === option.value}
 							value={option.value}
 							onChange={onChange}

diff --git a/sources/client/src/components/search-control.tsx b/sources/client/src/components/search-control.tsx
@@ -10,7 +10,7 @@ export function SearchControl(
 
 	const Container = useCallback(
 		(containerProps: PropsWithChildren) => (
-			<div className="wz-search-control">{containerProps.children}</div>
+			<div className="wes-search-control">{containerProps.children}</div>
 		),
 		[]
 	);
@@ -23,7 +23,7 @@ export function SearchControl(
 	const inputProps = {
 		type: 'search',
 		value: searchValue,
-		className: 'wz-search-control__input',
+		className: 'wes-search-control__input',
 		onChange,
 	};
 

diff --git a/sources/client/src/components/singular-select-control.tsx b/sources/client/src/components/singular-select-control.tsx
@@ -11,8 +11,8 @@ export function SingularSelectControl(
 ): JSX.Element {
 	const className = classnames(
 		props.className,
-		'wz-select-control',
-		'wz-select-control--singular'
+		'wes-select-control',
+		'wes-select-control--singular'
 	);
 
 	if (props.options.length() <= 0) {
@@ -37,7 +37,7 @@ export function SingularSelectControl(
 			{props.options.map((option) => (
 				<option
 					key={option.value}
-					className={`wz-select-control-item wz-select-control-item--${option.value}`}
+					className={`wes-select-control-item wes-select-control-item--${option.value}`}
 					value={option.value}
 				>
 					{option.label}

diff --git a/sources/client/src/components/toggle-control.tsx b/sources/client/src/components/toggle-control.tsx
@@ -10,7 +10,7 @@ export function ToggleControl(
 		className?: string;
 	}
 ): JSX.Element {
-	const className = classnames(props.className, 'wz-toggle-control');
+	const className = classnames(props.className, 'wes-toggle-control');
 
 	if (props.options.length() <= 0) {
 		return <NoOptionsMessage />;
@@ -42,13 +42,13 @@ export function ToggleControl(
 				return (
 					<div
 						key={value}
-						className={`wz-toggle-control-item wz-toggle-control-item--${option.value}`}
+						className={`wes-toggle-control-item wes-toggle-control-item--${option.value}`}
 					>
 						<label htmlFor={id}>
 							<input
 								type="checkbox"
 								id={id}
-								className={`wz-toggle-control-item__input-${option.value}`}
+								className={`wes-toggle-control-item__input-${option.value}`}
 								checked={props.value?.has(option.value)}
 								value={value}
 								onChange={onChange}
@@ -67,5 +67,5 @@ function idByControlOption<V>(
 ): string {
 	const { value } = controlOption;
 	const label = slugifyOptionLabel(controlOption);
-	return `wz-toggle-control-item__input-${label}-${value}`;
+	return `wes-toggle-control-item__input-${label}-${value}`;
 }
diff --git a/tests/client/integration/components/composite-entities-by-kind.test.tsx b/tests/client/integration/components/composite-entities-by-kind.test.tsx
@@ -56,7 +56,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const kindSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		await userEvent.selectOptions(kindSelect, 'page');
@@ -95,7 +95,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const entitiesSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		await userEvent.selectOptions(entitiesSelect, ['post-2']);
@@ -149,10 +149,10 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const kindSelect = rendered.container.querySelector(
-			'.wz-select-control--singular'
+			'.wes-select-control--singular'
 		) as HTMLSelectElement;
 		const entitiesSelect = rendered.container.querySelector(
-			'.wz-select-control--plural'
+			'.wes-select-control--plural'
 		) as HTMLSelectElement;
 
 		await userEvent.selectOptions(entitiesSelect, ['post-2']);
@@ -219,7 +219,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const kindSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		expect(expectedEntities.length()).toBe(2);
@@ -287,7 +287,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const kindSelect = rendered.container.querySelector(
-			'.wz-select-control--singular'
+			'.wes-select-control--singular'
 		) as HTMLSelectElement;
 
 		await userEvent.selectOptions(kindSelect, 'page');
@@ -334,7 +334,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const entitiesSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		expect(selectedEntities.length()).toBe(2);
@@ -453,7 +453,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const entitiesSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		await userEvent.selectOptions(entitiesSelect, ['post-1']);
@@ -490,7 +490,7 @@ describe('CompositeEntitiesByKind', () => {
 		);
 
 		const postTypeSelect = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		await userEvent.deselectOptions(postTypeSelect, ['post']);

diff --git a/tests/client/unit/components/__snapshots__/plural-select-control.test.tsx.snap b/tests/client/unit/components/__snapshots__/plural-select-control.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Posts Select Render the NoOptionsMessage component 1`] = `
 <DocumentFragment>
   <p
-    class="wp-entities-search-no-option-message"
+    class="wes-no-option-message"
   >
     No options
   </p>

diff --git a/tests/client/unit/components/__snapshots__/radio-control.test.tsx.snap b/tests/client/unit/components/__snapshots__/radio-control.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`KindRadioControl renders the NoOptionsMessage when there are no options 1`] = `
 <div
-  class="test-class wz-radio-control"
+  class="test-class wes-radio-control"
 />
 `;
 
 exports[`KindRadioControl renders the component 1`] = `
 <input
   checked=""
-  id="wz-radio-control-item__input-option-one"
+  id="wes-radio-control-item__input-option-one"
   type="radio"
   value="option-one"
 />

diff --git a/tests/client/unit/components/__snapshots__/search-control.test.tsx.snap b/tests/client/unit/components/__snapshots__/search-control.test.tsx.snap
@@ -2,15 +2,15 @@
 
 exports[`SearchControl renders the input outside the label if the id prop is not passed 1`] = `
 <input
-  class="wz-search-control__input"
+  class="wes-search-control__input"
   type="search"
   value=""
 />
 `;
 
 exports[`SearchControl renders the input within the label if the id prop is passed 1`] = `
 <input
-  class="wz-search-control__input"
+  class="wes-search-control__input"
   id="search"
   type="search"
   value=""

diff --git a/tests/client/unit/components/__snapshots__/toggle-control.test.tsx.snap b/tests/client/unit/components/__snapshots__/toggle-control.test.tsx.snap
@@ -2,48 +2,48 @@
 
 exports[`EntitiesToggleControl renders correctly 1`] = `
 <div
-  class="test-class wz-toggle-control"
+  class="test-class wes-toggle-control"
 >
   <div
-    class="wz-toggle-control-item wz-toggle-control-item--1"
+    class="wes-toggle-control-item wes-toggle-control-item--1"
   >
     <label
-      for="wz-toggle-control-item__input-option-1-1"
+      for="wes-toggle-control-item__input-option-1-1"
     >
       <input
         checked=""
-        class="wz-toggle-control-item__input-1"
-        id="wz-toggle-control-item__input-option-1-1"
+        class="wes-toggle-control-item__input-1"
+        id="wes-toggle-control-item__input-option-1-1"
         type="checkbox"
         value="1"
       />
       Option 1
     </label>
   </div>
   <div
-    class="wz-toggle-control-item wz-toggle-control-item--2"
+    class="wes-toggle-control-item wes-toggle-control-item--2"
   >
     <label
-      for="wz-toggle-control-item__input-option-2-2"
+      for="wes-toggle-control-item__input-option-2-2"
     >
       <input
-        class="wz-toggle-control-item__input-2"
-        id="wz-toggle-control-item__input-option-2-2"
+        class="wes-toggle-control-item__input-2"
+        id="wes-toggle-control-item__input-option-2-2"
         type="checkbox"
         value="2"
       />
       Option 2
     </label>
   </div>
   <div
-    class="wz-toggle-control-item wz-toggle-control-item--3"
+    class="wes-toggle-control-item wes-toggle-control-item--3"
   >
     <label
-      for="wz-toggle-control-item__input-option-3-3"
+      for="wes-toggle-control-item__input-option-3-3"
     >
       <input
-        class="wz-toggle-control-item__input-3"
-        id="wz-toggle-control-item__input-option-3-3"
+        class="wes-toggle-control-item__input-3"
+        id="wes-toggle-control-item__input-option-3-3"
         type="checkbox"
         value="3"
       />
@@ -55,7 +55,7 @@ exports[`EntitiesToggleControl renders correctly 1`] = `
 
 exports[`EntitiesToggleControl renders the NoOptionsMessage when there are no options 1`] = `
 <p
-  class="wp-entities-search-no-option-message"
+  class="wes-no-option-message"
 >
   No options
 </p>

diff --git a/tests/client/unit/components/plural-select-control.test.tsx b/tests/client/unit/components/plural-select-control.test.tsx
@@ -32,7 +32,7 @@ describe('Posts Select', () => {
 
 		const valuesToSelect = [option.value, String(options.last()?.value)];
 		const select = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		/*
@@ -64,7 +64,7 @@ describe('Posts Select', () => {
 
 		const valuesToSelect = [option.value, String(options.last()?.value)];
 		const select = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		/*

diff --git a/tests/client/unit/components/singular-select-control.test.tsx b/tests/client/unit/components/singular-select-control.test.tsx
@@ -36,7 +36,7 @@ describe('Post Types Select', () => {
 		);
 
 		const select = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		userEvent.selectOptions(select, option.value).then(() => {
@@ -55,9 +55,7 @@ describe('Post Types Select', () => {
 		);
 
 		expect(
-			rendered.container.querySelector(
-				'.wp-entities-search-no-option-message'
-			)
+			rendered.container.querySelector('.wes-no-option-message')
 		).toBeInTheDocument();
 	});
 
@@ -79,11 +77,11 @@ describe('Post Types Select', () => {
 		const rendered = render(<SingularSelectControl {...props} />);
 
 		const select = rendered.container.querySelector(
-			'.wz-select-control'
+			'.wes-select-control'
 		) as HTMLSelectElement;
 
 		const option = select.querySelector(
-			'.wz-select-control-item--option-one'
+			'.wes-select-control-item--option-one'
 		) as HTMLOptionElement;
 		option.value = 'option-3';
 

diff --git a/tests/client/unit/components/toggle-control.test.tsx b/tests/client/unit/components/toggle-control.test.tsx
@@ -93,7 +93,7 @@ describe('EntitiesToggleControl', () => {
 		const rendered = render(<ToggleControl {...props} />);
 
 		const option = rendered.container.querySelector(
-			'.wz-toggle-control-item__input-option-one'
+			'.wes-toggle-control-item__input-option-one'
 		) as HTMLOptionElement;
 		option.value = 'option-3';