Use Codex Field + TextInput instead of Wikit TextInput

src/components/LemmaInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TextInput } from '@wmde/wikit-vue-components';
+import { CdxField, CdxTextInput, ValidationMessages, ValidationStatusType } from '@wikimedia/codex';
 import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
@@ -21,23 +21,33 @@ const messages = useMessages();
 const config = useConfig();
 const exampleLemma = config.placeholderExampleData.lemma;
 const store = useStore();
-const error = computed( () => {
+const error = computed( (): {
+	status: ValidationStatusType;
+	messages: ValidationMessages;
+} => {
 	const inputLength = Array.from( props.modelValue ).length;
 	if ( inputLength > config.maxLemmaLength ) {
 		return {
-			type: 'error',
-			message: messages.getUnescaped(
-				'wikibaselexeme-newlexeme-lemma-too-long-error',
-				config.maxLemmaLength.toString(),
-			),
+			status: 'error',
+			messages: {
+				error: messages.getUnescaped(
+					'wikibaselexeme-newlexeme-lemma-too-long-error',
+					config.maxLemmaLength.toString(),
+				),
+			},
 		};
 	}
 	if ( !store.state.perFieldErrors.lemmaErrors.length ) {
-		return null;
+		return {
+			status: 'default',
+			messages: {},
+		};
 	}
 	return {
-		type: 'error',
-		message: messages.getUnescaped( store.state.perFieldErrors.lemmaErrors[ 0 ].messageKey ),
+		status: 'error',
+		messages: {
+			error: messages.getUnescaped( store.state.perFieldErrors.lemmaErrors[ 0 ].messageKey ),
+		},
 	};
 } );
 </script>
@@ -51,31 +61,33 @@ export default {
 </script>
 
 <template>
-	<text-input
+	<cdx-field
 		class="wbl-snl-lemma-input"
-		:label="messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' )"
-		:placeholder="messages.getUnescaped(
-			'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
-			exampleLemma
-		)"
-		name="lemma"
-		aria-required="true"
-		:error="error"
-		:value="modelValue"
-		@input="$emit( 'update:modelValue', $event )"
+		:status="error.status"
+		:messages="error.messages"
 	>
-		<template #suffix>
-			<required-asterisk />
+		<!-- eslint-disable vue/v-on-event-hyphenation -->
+		<cdx-text-input
+			:placeholder="messages.getUnescaped(
+				'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
+				exampleLemma
+			)"
+			name="lemma"
+			aria-required="true"
+			:model-value="modelValue"
+			@update:modelValue="$emit( 'update:modelValue', $event )"
+		/>
+		<!-- eslint-enable -->
+		<template #label>
+			{{ messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' ) }}<required-asterisk />
 		</template>
-	</text-input>
+	</cdx-field>
 </template>
 
 <style lang="scss">
 @import '@wmde/wikit-tokens/variables';
 
-/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
-.wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+.wbl-snl-required-asterisk {
+	margin-inline-start: $dimension-spacing-xsmall;
 }
-/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
 </style>

tests/integration/NewLexemeForm.test.ts

@@ -309,11 +309,11 @@ describe( 'NewLexemeForm', () => {
 			await wrapper.trigger( 'submit' );
 
 			const lemmaInputWrapper = wrapper.get( '.wbl-snl-lemma-input' );
-			expect( lemmaInputWrapper.get( '.wikit-ValidationMessage--error' ).text() ).toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-lemma-empty-error' ) );
+			expect( lemmaInputWrapper.get( '.cdx-message--error' ).text() ).toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-lemma-empty-error' ) );
 
 			await lemmaInputWrapper.get( 'input' ).setValue( 'foo' );
 
-			expect( lemmaInputWrapper.find( '.wikit-ValidationMessage--error' ).exists() ).toBe( false );
+			expect( lemmaInputWrapper.find( '.cdx-message--error' ).exists() ).toBe( false );
 
 			expect( createLexeme ).not.toHaveBeenCalled();
 		} );

tests/unit/components/LemmaInput.test.ts

@@ -71,7 +71,7 @@ describe( 'LemmaInput', () => {
 			store.state.perFieldErrors.lemmaErrors.push( { messageKey: 'wikibaselexeme-newlexeme-lemma-empty-error' } );
 			await nextTick();
 
-			expect( lemmaInputWrapper.get( '.wikit-ValidationMessage--error' ).text() ).toContain( '⧼wikibaselexeme-newlexeme-lemma-empty-error⧽' );
+			expect( lemmaInputWrapper.get( '.cdx-message--error' ).text() ).toContain( '⧼wikibaselexeme-newlexeme-lemma-empty-error⧽' );
 		} );
 
 		it( 'displays an error message when input is too longer than configured', async () => {
@@ -82,8 +82,8 @@ describe( 'LemmaInput', () => {
 				global: { provide: { [ MessagesKey as symbol ]: { getUnescaped: messageGet } } },
 			} );
 
-			expect( lemmaInputWrapper.get( '.wikit-ValidationMessage--error' ).text() ).toContain( '⧼wikibaselexeme-newlexeme-lemma-too-long-error⧽' );
-			expect( messageGet ).toHaveBeenNthCalledWith( 3, 'wikibaselexeme-newlexeme-lemma-too-long-error', '8' );
+			expect( lemmaInputWrapper.get( '.cdx-message--error' ).text() ).toContain( '⧼wikibaselexeme-newlexeme-lemma-too-long-error⧽' );
+			expect( messageGet ).toHaveBeenNthCalledWith( 1, 'wikibaselexeme-newlexeme-lemma-too-long-error', '8' );
 		} );
 
 		it( 'counts multi-byte characters as code points', async () => {