Page MenuHomePhabricator

[WtC-M3] [QB] Port Validation message to Query Builder
Open, Needs TriagePublic

Assigned To
None
Authored By
Sarai-WMDE
Jul 11 2024, 4:16 PM
Referenced Files
F56654671: image.png
Jul 24 2024, 6:15 PM
F56641282: image.png
Jul 24 2024, 11:42 AM
F56620771: image.png
Jul 23 2024, 5:02 PM
F56466404: Screenshot 2024-07-16 at 21.07.01.png
Jul 16 2024, 7:07 PM

Description

Problem

The Validation message component was implemented to incorporate inline validation within WiKit fields. Some of the Wikibase specific components that we need to port to the Query builder repository in order to deprecate WiKit make use of the Validation messaga component. These are: ExtendedNumberInput, InputWithExtender, Lookup, DateInput and QuantityInpu.

Solution

In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit ValidationMessage component to the Query Builder repository. We'll apply all necessary changes to make the element compatible with the new version of the tool and Codex's standards.

Considerations
  • Styles: We should replace all WiKit tokens used currently to style the ValidationMessage. We could use both discrete values or Codex tokens. It might be a slightly better idea to do the latter in order to ensure consistency.

image.png (1×1 px, 141 KB)

Creating only design specs to indicate style adjustments sounded like a limited and error-prone handover method. Replacing tokens directly seemed like a more effective way to proceed in this case:

<style lang="scss">
.wikit-ValidationMessage {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight-bold;
	line-height: $line-height-medium;
	padding-block-start: $spacing-50;
	display: inline-flex;
	align-items: flex-start;

	&--error {
		color: $color-error;
	}

	&--warning {
		color: $color-base;
	}

	&__icon {
		//TODO: only introducing the following variable to work around exceeding stylelint max-len.
		//`stylelint-disable` is also not working for some reason. Fixing this in a follow-up.
		padding-top: ( $line-height-medium - $font-size-medium ) / 2;
		padding-block-start: $padding-top;
		margin-inline-end: $spacing-50;
	}
}
</style>
Acceptance criteria
  • ValidationMessage is ported to Query builder for its reusage by other components
  • Any necessary adjustments are applied to make the component compatible with Vue3
  • Any WiKit building blocks, dependencies or styles are replaced

Event Timeline

Sarai-WMDE renamed this task from [SW] Port Validation message to Query Builder to [SW] [WtC-M3] [QB] Port Validation message to Query Builder.Jul 16 2024, 11:25 AM
Sarai-WMDE updated the task description. (Show Details)
Arian_Bozorg renamed this task from [SW] [WtC-M3] [QB] Port Validation message to Query Builder to [WtC-M3] [QB] Port Validation message to Query Builder.Jul 30 2024, 8:37 AM