Adjusts toolbar help menu items (#65)

* Adjusts toolbar help menu items

* remove workaround css for dropdown description text

* fixes formatting

* capitalize menu item

* revert change in variable name

src/PageHeader.tsx

@@ -61,12 +61,7 @@ const ServerInfoDropdownItem = () => {
 const HelpDropdownItem = () => {
   const { t } = useTranslation();
   const help = t("Help");
-  return (
+  return <DropdownItem icon={<HelpIcon />}>{`${help}`}</DropdownItem>;
-    <DropdownItem>
-      <HelpIcon />
-      {` ${help}`}
-    </DropdownItem>
-  );
 };
 
 const kebabDropdownItems = [

src/components/help-enabler/HelpHeader.tsx

@@ -3,6 +3,8 @@ import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
+  Split,
+  SplitItem,
   Switch,
   Text,
   TextVariants,
@@ -10,8 +12,6 @@ import {
 import { Trans, useTranslation } from "react-i18next";
 import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
 
-import style from "./help-header.module.css";
-
 type HelpProps = {
   children: ReactNode;
 };
@@ -46,30 +46,34 @@ export const HelpHeader = () => {
 
   const dropdownItems = [
     <DropdownItem key="link" id="link">
-      {t("Documentation") + " "}
+      <Split>
-      <ExternalLinkAltIcon />
+        <SplitItem isFilled>{t("Documentation")}</SplitItem>
+        <SplitItem>
+          <ExternalLinkAltIcon />
+        </SplitItem>
+      </Split>
     </DropdownItem>,
     <DropdownItem
       key="enable"
       id="enable"
-      component="div"
+      description={
-      className={style.helpDropdownItem}
+        <Trans>
+          This toggle will enable / disable part of the help info in the
+          console. Includes any help text, links and popovers.
+        </Trans>
+      }
     >
-      {t("Enable help mode") + " "}
+      <Split>
-      <Switch
+        <SplitItem isFilled>{t("Enable help mode")}</SplitItem>
-        id="enableHelp"
+        <SplitItem>
-        aria-label="Help is enabled"
+          <Switch
-        isChecked={help.enabled}
+            id="enableHelp"
-        onChange={() => help.toggleHelp()}
+            aria-label="Help is enabled"
-      />
+            isChecked={help.enabled}
-      <div>
+            onChange={() => help.toggleHelp()}
-        <Text component={TextVariants.small} className={style.helpText}>
+          />
-          <Trans>
+        </SplitItem>
-            This toggle will enable / disable part of the help info in the
+      </Split>
-            console. Includes any help text, links and popovers.
-          </Trans>
-        </Text>
-      </div>
     </DropdownItem>,
   ];
   return (

src/components/help-enabler/__snapshots__/HelpHeader.test.tsx.snap

@@ -47,78 +47,104 @@ exports[`<HelpHeader /> enable help 1`] = `
           class="pf-c-dropdown__menu-item"
           tabindex="-1"
         >
-          Documentation 
+          <div
-          <svg
+            class="pf-l-split"
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 512 512"
-            width="1em"
           >
-            <path
+            <div
-              d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+              class="pf-l-split__item pf-m-fill"
-              transform=""
+            >
-            />
+              Documentation
-          </svg>
+            </div>
+            <div
+              class="pf-l-split__item"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+                  transform=""
+                />
+              </svg>
+            </div>
+          </div>
         </a>
       </li>
       <li
         id="enable"
         role="menuitem"
       >
-        <div
+        <a
-          class="pf-c-dropdown__menu-item"
+          aria-disabled="false"
+          class="pf-c-dropdown__menu-item pf-m-description"
           tabindex="-1"
         >
-          Enable help mode 
+          <div
-          <label
+            class="pf-c-dropdown__menu-item-main"
-            class="pf-c-switch"
-            data-ouia-component-id="6"
-            data-ouia-component-type="PF4/Switch"
-            data-ouia-safe="true"
-            for="enableHelp"
           >
-            <input
+            <div
-              aria-label="Help is enabled"
+              class="pf-l-split"
-              checked=""
-              class="pf-c-switch__input"
-              id="enableHelp"
-              type="checkbox"
-            />
-            <span
-              class="pf-c-switch__toggle"
             >
               <div
-                aria-hidden="true"
+                class="pf-l-split__item pf-m-fill"
-                class="pf-c-switch__toggle-icon"
               >
-                <svg
+                Enable help mode
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-                    transform=""
-                  />
-                </svg>
               </div>
-            </span>
+              <div
-          </label>
+                class="pf-l-split__item"
-          <div>
+              >
-            <small
+                <label
-              class=""
+                  class="pf-c-switch"
-              data-pf-content="true"
+                  data-ouia-component-id="6"
-            >
+                  data-ouia-component-type="PF4/Switch"
-              This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+                  data-ouia-safe="true"
-            </small>
+                  for="enableHelp"
+                >
+                  <input
+                    aria-label="Help is enabled"
+                    checked=""
+                    class="pf-c-switch__input"
+                    id="enableHelp"
+                    type="checkbox"
+                  />
+                  <span
+                    class="pf-c-switch__toggle"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="pf-c-switch__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </div>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
-        </div>
+          <div
+            class="pf-c-dropdown__menu-item-description"
+          >
+            This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+          </div>
+        </a>
       </li>
     </ul>
   </div>
@@ -177,78 +203,104 @@ exports[`<HelpHeader /> open dropdown 1`] = `
           class="pf-c-dropdown__menu-item"
           tabindex="-1"
         >
-          Documentation 
+          <div
-          <svg
+            class="pf-l-split"
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 512 512"
-            width="1em"
           >
-            <path
+            <div
-              d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+              class="pf-l-split__item pf-m-fill"
-              transform=""
+            >
-            />
+              Documentation
-          </svg>
+            </div>
+            <div
+              class="pf-l-split__item"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+                  transform=""
+                />
+              </svg>
+            </div>
+          </div>
         </a>
       </li>
       <li
         id="enable"
         role="menuitem"
       >
-        <div
+        <a
-          class="pf-c-dropdown__menu-item"
+          aria-disabled="false"
+          class="pf-c-dropdown__menu-item pf-m-description"
           tabindex="-1"
         >
-          Enable help mode 
+          <div
-          <label
+            class="pf-c-dropdown__menu-item-main"
-            class="pf-c-switch"
-            data-ouia-component-id="3"
-            data-ouia-component-type="PF4/Switch"
-            data-ouia-safe="true"
-            for="enableHelp"
           >
-            <input
+            <div
-              aria-label="Help is enabled"
+              class="pf-l-split"
-              checked=""
-              class="pf-c-switch__input"
-              id="enableHelp"
-              type="checkbox"
-            />
-            <span
-              class="pf-c-switch__toggle"
             >
               <div
-                aria-hidden="true"
+                class="pf-l-split__item pf-m-fill"
-                class="pf-c-switch__toggle-icon"
               >
-                <svg
+                Enable help mode
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-                    transform=""
-                  />
-                </svg>
               </div>
-            </span>
+              <div
-          </label>
+                class="pf-l-split__item"
-          <div>
+              >
-            <small
+                <label
-              class=""
+                  class="pf-c-switch"
-              data-pf-content="true"
+                  data-ouia-component-id="3"
-            >
+                  data-ouia-component-type="PF4/Switch"
-              This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+                  data-ouia-safe="true"
-            </small>
+                  for="enableHelp"
+                >
+                  <input
+                    aria-label="Help is enabled"
+                    checked=""
+                    class="pf-c-switch__input"
+                    id="enableHelp"
+                    type="checkbox"
+                  />
+                  <span
+                    class="pf-c-switch__toggle"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="pf-c-switch__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </div>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
-        </div>
+          <div
+            class="pf-c-dropdown__menu-item-description"
+          >
+            This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+          </div>
+        </a>
       </li>
     </ul>
   </div>

src/components/help-enabler/help-header.module.css

@@ -1,9 +0,0 @@
-
-.helpDropdownItem {
-  background-color: transparent;
-}
-
-.helpText {
-  overflow-wrap: break-word;
-  white-space: normal;
-}