This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new cb8e648917f kie-tools#2093: [@kie-tools/uniforms-patternfly] Add
description icon (#2114)
cb8e648917f is described below
commit cb8e648917f0ca1fc052e0a499324a10a23a2873
Author: Luiz João Motta <[email protected]>
AuthorDate: Wed Jan 10 20:00:25 2024 -0300
kie-tools#2093: [@kie-tools/uniforms-patternfly] Add description icon
(#2114)
---
.../uniforms-patternfly/src/schemas/json-schema.ts | 1 +
packages/uniforms-patternfly/src/wrapField.tsx | 31 +++++++++++++++++++++-
2 files changed, 31 insertions(+), 1 deletion(-)
diff --git a/examples/uniforms-patternfly/src/schemas/json-schema.ts
b/examples/uniforms-patternfly/src/schemas/json-schema.ts
index 7cf28115903..d74a2049f15 100644
--- a/examples/uniforms-patternfly/src/schemas/json-schema.ts
+++ b/examples/uniforms-patternfly/src/schemas/json-schema.ts
@@ -55,6 +55,7 @@ const schema = {
type: "string",
format: "date-time",
max: "2000-04-04T10:30:00.000Z",
+ description: "this is date and time field",
},
},
disabled: false,
diff --git a/packages/uniforms-patternfly/src/wrapField.tsx
b/packages/uniforms-patternfly/src/wrapField.tsx
index eaa32386c9a..ba646aa5731 100644
--- a/packages/uniforms-patternfly/src/wrapField.tsx
+++ b/packages/uniforms-patternfly/src/wrapField.tsx
@@ -19,6 +19,8 @@
import * as React from "react";
import { FormGroup, FormGroupProps } from
"@patternfly/react-core/dist/js/components/Form";
+import { Popover } from "@patternfly/react-core/dist/js/components/Popover";
+import { HelpIcon } from "@patternfly/react-icons/dist/js/icons/help-icon";
import { filterDOMProps } from "uniforms";
declare module "uniforms" {
@@ -50,10 +52,23 @@ type WrapperProps = {
errorMessage?: string;
help?: string;
showInlineError?: boolean;
+ description?: React.ReactNode;
} & Omit<FormGroupProps, "onChange" | "fieldId">;
export default function wrapField(
- { id, label, type, disabled, error, errorMessage, showInlineError, help,
required, ...props }: WrapperProps,
+ {
+ id,
+ label,
+ type,
+ disabled,
+ error,
+ errorMessage,
+ showInlineError,
+ help,
+ required,
+ description,
+ ...props
+ }: WrapperProps,
children: React.ReactNode
) {
return (
@@ -61,6 +76,20 @@ export default function wrapField(
data-testid={"wrapper-field"}
fieldId={id}
label={label}
+ labelIcon={
+ description ? (
+ <Popover bodyContent={description}>
+ <button
+ type="button"
+ aria-label="field description"
+ onClick={(e) => e.preventDefault()}
+ className="pf-c-form__group-label-help"
+ >
+ <HelpIcon noVerticalAlign />
+ </button>
+ </Popover>
+ ) : undefined
+ }
isRequired={required}
validated={error ? "error" : "default"}
type={type}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
