added unwrap so that HelpItem can be on a button (#540)

fixing: #539
This commit is contained in:
Erik Jan de Wit 2021-04-20 10:06:20 +02:00 committed by GitHub
parent 820af6abca
commit 3332bd1a01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions

View file

@ -408,6 +408,7 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
forLabel={t("effectiveProtocolMappers")}
helpText="clients-help:effectiveProtocolMappers"
noVerticalAlign={false}
unWrap
/>
</TabTitleText>
}
@ -425,6 +426,7 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
forLabel={t("effectiveRoleScopeMappings")}
helpText="clients-help:effectiveRoleScopeMappings"
noVerticalAlign={false}
unWrap
/>
</TabTitleText>
}
@ -442,6 +444,7 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
forLabel={t("generatedAccessToken")}
helpText="clients-help:generatedAccessToken"
noVerticalAlign={false}
unWrap
/>
</TabTitleText>
}

View file

@ -9,6 +9,7 @@ type HelpItemProps = {
forLabel: string;
forID: string;
noVerticalAlign?: boolean;
unWrap?: boolean;
};
export const HelpItem = ({
@ -16,6 +17,7 @@ export const HelpItem = ({
forLabel,
forID,
noVerticalAlign = true,
unWrap = false,
}: HelpItemProps) => {
const { t } = useTranslation();
const { enabled } = useContext(HelpContext);
@ -23,15 +25,20 @@ export const HelpItem = ({
<>
{enabled && (
<Popover bodyContent={t(helpText)}>
<button
id={helpText}
aria-label={t(`helpLabel`, { label: forLabel })}
onClick={(e) => e.preventDefault()}
aria-describedby={forID}
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign={noVerticalAlign} />
</button>
<>
{!unWrap && (
<button
id={helpText}
aria-label={t(`helpLabel`, { label: forLabel })}
onClick={(e) => e.preventDefault()}
aria-describedby={forID}
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign={noVerticalAlign} />
</button>
)}
{unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
</>
</Popover>
)}
</>