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

fixing: #539

src/clients/scopes/EvaluateScopes.tsx

@@ -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>
               }

src/components/help-enabler/HelpItem.tsx

@@ -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,6 +25,8 @@ export const HelpItem = ({
     <>
       {enabled && (
         <Popover bodyContent={t(helpText)}>
+          <>
+            {!unWrap && (
               <button
                 id={helpText}
                 aria-label={t(`helpLabel`, { label: forLabel })}
@@ -32,6 +36,9 @@ export const HelpItem = ({
               >
                 <HelpIcon noVerticalAlign={noVerticalAlign} />
               </button>
+            )}
+            {unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
+          </>
         </Popover>
       )}
     </>