From c641ffdb2b786154b7a6ef793a27d5c6a3460eb4 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 23 Sep 2024 17:46:45 +0200
Subject: [PATCH 1/2] Use Codex Field + TextInput instead of Wikit TextInput
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change the lemma to not use Wikit anymore. In Codex, this corresponds to
two components, so use both.

The spacing of the “required” asterisk is done differently – it’s no
longer in a flex container, so establish the spacing using margin
instead. The asterisk is now also part of the actual <label> element,
which isn’t ideal but I think can’t be avoided within Codex. (Note that
Codex doesn’t want us to indicate required fields at all; see also
T374432.)

Bug: T370054
---
 src/components/LemmaInput.vue            | 40 +++++++++++++-----------
 tests/integration/NewLexemeForm.test.ts  |  4 +--
 tests/unit/components/LemmaInput.test.ts |  6 ++--
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
index addb0515..7833aceb 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TextInput } from '@wmde/wikit-vue-components';
+import { CdxField, CdxTextInput } from '@wikimedia/codex';
 import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
@@ -51,31 +51,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 !== null ? 'error' : 'default'"
+		:messages="error !== null ? { error: error.message } : {}"
 	>
-		<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>
diff --git a/tests/integration/NewLexemeForm.test.ts b/tests/integration/NewLexemeForm.test.ts
index 613013a6..085a2305 100644
--- a/tests/integration/NewLexemeForm.test.ts
+++ b/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();
 		} );
diff --git a/tests/unit/components/LemmaInput.test.ts b/tests/unit/components/LemmaInput.test.ts
index 6ff548db..94515960 100644
--- a/tests/unit/components/LemmaInput.test.ts
+++ b/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 () => {

From 318077e2c854e93594706213557b4ed0fdedb889 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 23 Sep 2024 18:10:58 +0200
Subject: [PATCH 2/2] Restructure error computation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since Codex wants the status and messages as separate props, but we
compute them at the same time, let’s have the computed return an object
with both props.

Bug: T370054
---
 src/components/LemmaInput.vue | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
index 7833aceb..7f77697a 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CdxField, CdxTextInput } from '@wikimedia/codex';
+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>
@@ -53,8 +63,8 @@ export default {
 <template>
 	<cdx-field
 		class="wbl-snl-lemma-input"
-		:status="error !== null ? 'error' : 'default'"
-		:messages="error !== null ? { error: error.message } : {}"
+		:status="error.status"
+		:messages="error.messages"
 	>
 		<!-- eslint-disable vue/v-on-event-hyphenation -->
 		<cdx-text-input