Apply localization to placeholder and before text

Closes #25114

Signed-off-by: John Gomersall <thegoms@gmail.com>
This commit is contained in:
john-gom 2024-04-15 16:58:22 +01:00 committed by GitHub
parent 0205262c91
commit 12b263c029
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 20 additions and 7 deletions

View file

@ -54,7 +54,10 @@ test.describe("Personal info with userprofile enabled", async () => {
await expect(page.locator("#select")).toBeVisible();
await expect(page.getByTestId("help-label-select")).toBeVisible();
expect(page.getByText("Alternative email")).toBeDefined();
expect(page.getByText("Alternative email")).toHaveCount(1);
expect(page.getByPlaceholder("Deutsch")).toHaveCount(1);
page.getByTestId("help-label-email2").click();
await expect(page.getByText("Español")).toHaveCount(1);
});
test("save user profile", async ({ page }) => {

View file

@ -214,7 +214,10 @@
]
},
"annotations": {
"inputType": "html5-email"
"inputType": "html5-email",
"inputHelperTextBefore": "${locale_es}",
"inputHelperTextAfter": "${locale_fr}",
"inputTypePlaceholder": "${locale_de}"
},
"validations": {
"email": {}

View file

@ -2,7 +2,7 @@ import { TextInput, TextInputTypes } from "@patternfly/react-core";
import { UserProfileFieldProps } from "./UserProfileFields";
import { UserProfileGroup } from "./UserProfileGroup";
import { fieldName, isRequiredAttribute } from "./utils";
import { fieldName, isRequiredAttribute, label } from "./utils";
export const TextComponent = (props: UserProfileFieldProps) => {
const { form, inputType, attribute } = props;
@ -17,7 +17,10 @@ export const TextComponent = (props: UserProfileFieldProps) => {
id={attribute.name}
data-testid={attribute.name}
type={type}
placeholder={attribute.annotations?.["inputTypePlaceholder"] as string}
placeholder={label(
props.t,
attribute.annotations?.["inputTypePlaceholder"] as string,
)}
readOnly={attribute.readOnly}
isRequired={isRequired}
{...form.register(fieldName(attribute.name))}

View file

@ -11,6 +11,7 @@ import {
UserFormFields,
fieldName,
isRequiredAttribute,
label,
labelAttribute,
} from "./utils";
@ -28,7 +29,10 @@ export const UserProfileGroup = ({
renderer,
children,
}: PropsWithChildren<UserProfileGroupProps>) => {
const helpText = attribute.annotations?.["inputHelperTextBefore"] as string;
const helpText = label(
t,
attribute.annotations?.["inputHelperTextBefore"] as string,
);
const {
formState: { errors },
} = form;

View file

@ -92,7 +92,7 @@
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
<#if attribute.readOnly>disabled</#if>
<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>
<#if attribute.annotations.inputTypePlaceholder??>placeholder="${attribute.annotations.inputTypePlaceholder}"</#if>
<#if attribute.annotations.inputTypePlaceholder??>placeholder="${advancedMsg(attribute.annotations.inputTypePlaceholder)}"</#if>
<#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}"</#if>
<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>

View file

@ -109,7 +109,7 @@
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
<#if attribute.readOnly>disabled</#if>
<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>
<#if attribute.annotations.inputTypePlaceholder??>placeholder="${attribute.annotations.inputTypePlaceholder}"</#if>
<#if attribute.annotations.inputTypePlaceholder??>placeholder="${advancedMsg(attribute.annotations.inputTypePlaceholder)}"</#if>
<#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}"</#if>
<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>