@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/src/components/Modal/examples/ModalWithHelp.tsx

@@ -35,9 +35,7 @@ export const ModalWithHelp: React.FunctionComponent = () => {
               }
               footerContent="Popover Footer"
             >
-              <Button variant="plain" aria-label="Help">
-                <HelpIcon />
-              </Button>
+              <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
             </Popover>
           }
         />

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -8,45 +8,57 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
-      <button
-        aria-controls="generated-id-content"
-        aria-expanded="true"
+      <div
         class="pf-v6-c-expandable-section__toggle"
-        id="generated-id-toggle"
-        type="button"
       >
-        <span
-          class="pf-v6-c-expandable-section__toggle-icon"
+        <button
+          aria-controls="generated-id-content"
+          aria-disabled="false"
+          aria-expanded="true"
+          class="pf-v6-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-2"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          id="generated-id-toggle"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
+          <span
+            class="pf-v6-c-button__icon pf-m-start"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-        <span
-          class="pf-v6-c-expandable-section__toggle-text"
-        >
-          <div
-            class="pf-v6-c-multiple-file-upload__status-progress"
+            <span
+              class="pf-v6-c-expandable-section__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
           >
             <div
-              class="pf-v6-c-multiple-file-upload__status-progress-icon"
-            />
-            <div
-              class="pf-v6-c-multiple-file-upload__status-progress-text"
-            />
-          </div>
-        </span>
-      </button>
+              class="pf-v6-c-multiple-file-upload__status-progress"
+            >
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-icon"
+              />
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-text"
+              />
+            </div>
+          </span>
+        </button>
+      </div>
       <div
         aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
@@ -73,38 +85,25 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
-      <button
-        aria-controls="generated-id-content"
-        aria-expanded="true"
+      <div
         class="pf-v6-c-expandable-section__toggle"
-        id="generated-id-toggle"
-        type="button"
       >
-        <span
-          class="pf-v6-c-expandable-section__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-        <span
-          class="pf-v6-c-expandable-section__toggle-text"
+        <button
+          aria-controls="generated-id-content"
+          aria-disabled="false"
+          aria-expanded="true"
+          class="pf-v6-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-4"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          id="generated-id-toggle"
+          type="button"
         >
-          <div
-            class="pf-v6-c-multiple-file-upload__status-progress"
+          <span
+            class="pf-v6-c-button__icon pf-m-start"
           >
-            <div
-              class="pf-v6-c-multiple-file-upload__status-progress-icon"
+            <span
+              class="pf-v6-c-expandable-section__toggle-icon"
             >
               <svg
                 aria-hidden="true"
@@ -112,20 +111,45 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 1024 1024"
+                viewBox="0 0 256 512"
                 width="1em"
               >
                 <path
-                  d="M513.417211,16.013668 L513.417211,112.013668 C513.406007,120.539653 520.082422,127.576718 528.597211,128.013668 C732.697211,136.513668 896.147211,305.013668 896.147211,511.343668 C896.147211,723.013668 724.007211,895.163668 512.417211,895.163668 C437.186239,895.277345 363.602574,873.135095 300.927211,831.523668 C294.58293,827.2982 286.138663,828.135095 280.747211,833.523668 L211.807211,902.353668 C208.502935,905.676185 206.82123,910.280199 207.20607,914.950237 C207.590911,919.620275 210.00361,923.886884 213.807211,926.623668 C300.709573,989.398037 405.213535,1023.13146 512.417211,1023.01398 C794.537211,1023.01398 1023.91724,793.433668 1023.91724,511.413668 C1024.00721,235.103668 804.007211,9.22366802 529.897211,0.00645736761 C525.571205,-0.116171039 521.377128,1.51204372 518.271915,4.52681369 C515.166702,7.54158367 513.415263,11.6857144 513.417211,16.013668 M97.1272107,212.923668 C64.2190689,258.479443 39.0698895,309.162997 22.6972107,362.923668 C21.2705092,367.756559 22.2039184,372.979173 25.2163356,377.018685 C28.2287528,381.058197 32.9681443,383.442545 38.0072107,383.453683 L139.407211,383.453683 C145.970195,383.46249 151.873012,379.462528 154.297211,373.363668 C164.307669,347.593304 177.068112,322.977652 192.357211,299.943668 C196.579666,293.633658 195.741339,285.216847 190.357211,279.863668 L121.497211,211.013668 C118.186635,207.662531 113.567544,205.940538 108.871166,206.30669 C104.174788,206.672841 99.8783994,209.089927 97.1272107,212.913668 M112.907211,511.433663 L17.0072107,511.433663 C12.679257,511.433663 8.5351263,513.183159 5.52035633,516.288373 C2.50558635,519.393586 0.877371594,523.587662 1.00721065,527.913668 C4.13104542,629.408217 37.6085847,727.635936 97.1172107,809.913668 C99.8539943,813.717268 104.120603,816.129968 108.790642,816.514809 C113.46068,816.899649 118.064693,815.217944 121.387211,811.913668 L190.217211,743.073668 C195.605784,737.682216 196.442679,729.237949 192.217211,722.893668 C153.520825,664.580171 131.611534,596.745437 128.887211,526.813668 C128.553964,518.220138 121.487197,511.427209 112.887211,511.433663"
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                 />
               </svg>
-            </div>
+            </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
+          >
             <div
-              class="pf-v6-c-multiple-file-upload__status-progress-text"
-            />
-          </div>
-        </span>
-      </button>
+              class="pf-v6-c-multiple-file-upload__status-progress"
+            >
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M513.417211,16.013668 L513.417211,112.013668 C513.406007,120.539653 520.082422,127.576718 528.597211,128.013668 C732.697211,136.513668 896.147211,305.013668 896.147211,511.343668 C896.147211,723.013668 724.007211,895.163668 512.417211,895.163668 C437.186239,895.277345 363.602574,873.135095 300.927211,831.523668 C294.58293,827.2982 286.138663,828.135095 280.747211,833.523668 L211.807211,902.353668 C208.502935,905.676185 206.82123,910.280199 207.20607,914.950237 C207.590911,919.620275 210.00361,923.886884 213.807211,926.623668 C300.709573,989.398037 405.213535,1023.13146 512.417211,1023.01398 C794.537211,1023.01398 1023.91724,793.433668 1023.91724,511.413668 C1024.00721,235.103668 804.007211,9.22366802 529.897211,0.00645736761 C525.571205,-0.116171039 521.377128,1.51204372 518.271915,4.52681369 C515.166702,7.54158367 513.415263,11.6857144 513.417211,16.013668 M97.1272107,212.923668 C64.2190689,258.479443 39.0698895,309.162997 22.6972107,362.923668 C21.2705092,367.756559 22.2039184,372.979173 25.2163356,377.018685 C28.2287528,381.058197 32.9681443,383.442545 38.0072107,383.453683 L139.407211,383.453683 C145.970195,383.46249 151.873012,379.462528 154.297211,373.363668 C164.307669,347.593304 177.068112,322.977652 192.357211,299.943668 C196.579666,293.633658 195.741339,285.216847 190.357211,279.863668 L121.497211,211.013668 C118.186635,207.662531 113.567544,205.940538 108.871166,206.30669 C104.174788,206.672841 99.8783994,209.089927 97.1272107,212.913668 M112.907211,511.433663 L17.0072107,511.433663 C12.679257,511.433663 8.5351263,513.183159 5.52035633,516.288373 C2.50558635,519.393586 0.877371594,523.587662 1.00721065,527.913668 C4.13104542,629.408217 37.6085847,727.635936 97.1172107,809.913668 C99.8539943,813.717268 104.120603,816.129968 108.790642,816.514809 C113.46068,816.899649 118.064693,815.217944 121.387211,811.913668 L190.217211,743.073668 C195.605784,737.682216 196.442679,729.237949 192.217211,722.893668 C153.520825,664.580171 131.611534,596.745437 128.887211,526.813668 C128.553964,518.220138 121.487197,511.427209 112.887211,511.433663"
+                  />
+                </svg>
+              </div>
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-text"
+              />
+            </div>
+          </span>
+        </button>
+      </div>
       <div
         aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
@@ -152,47 +176,59 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
-      <button
-        aria-controls="generated-id-content"
-        aria-expanded="true"
+      <div
         class="pf-v6-c-expandable-section__toggle"
-        id="generated-id-toggle"
-        type="button"
       >
-        <span
-          class="pf-v6-c-expandable-section__toggle-icon"
+        <button
+          aria-controls="generated-id-content"
+          aria-disabled="false"
+          aria-expanded="true"
+          class="pf-v6-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-3"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          id="generated-id-toggle"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
+          <span
+            class="pf-v6-c-button__icon pf-m-start"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-        <span
-          class="pf-v6-c-expandable-section__toggle-text"
-        >
-          <div
-            class="pf-v6-c-multiple-file-upload__status-progress"
+            <span
+              class="pf-v6-c-expandable-section__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
           >
             <div
-              class="pf-v6-c-multiple-file-upload__status-progress-icon"
-            />
-            <div
-              class="pf-v6-c-multiple-file-upload__status-progress-text"
+              class="pf-v6-c-multiple-file-upload__status-progress"
             >
-              test
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-icon"
+              />
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-text"
+              >
+                test
+              </div>
             </div>
-          </div>
-        </span>
-      </button>
+          </span>
+        </button>
+      </div>
       <div
         aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
@@ -219,45 +255,57 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
-      <button
-        aria-controls="generated-id-content"
-        aria-expanded="true"
+      <div
         class="pf-v6-c-expandable-section__toggle"
-        id="generated-id-toggle"
-        type="button"
       >
-        <span
-          class="pf-v6-c-expandable-section__toggle-icon"
+        <button
+          aria-controls="generated-id-content"
+          aria-disabled="false"
+          aria-expanded="true"
+          class="pf-v6-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-1"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          id="generated-id-toggle"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
+          <span
+            class="pf-v6-c-button__icon pf-m-start"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-        <span
-          class="pf-v6-c-expandable-section__toggle-text"
-        >
-          <div
-            class="pf-v6-c-multiple-file-upload__status-progress"
+            <span
+              class="pf-v6-c-expandable-section__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
           >
             <div
-              class="pf-v6-c-multiple-file-upload__status-progress-icon"
-            />
-            <div
-              class="pf-v6-c-multiple-file-upload__status-progress-text"
-            />
-          </div>
-        </span>
-      </button>
+              class="pf-v6-c-multiple-file-upload__status-progress"
+            >
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-icon"
+              />
+              <div
+                class="pf-v6-c-multiple-file-upload__status-progress-text"
+              />
+            </div>
+          </span>
+        </button>
+      </div>
       <div
         aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -98,7 +98,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -215,7 +215,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -334,7 +334,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -453,7 +453,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -589,7 +589,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -708,7 +708,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -825,7 +825,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -944,7 +944,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx

@@ -53,6 +53,8 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<H
     | 'right-end';
   /** Sets the heading level to use for the list item header title. Default is h2. */
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Removes the offset of the notification drawer actions. */
+  actionHasNoOffset?: boolean;
 }
 
 export const NotificationDrawerListItemHeader: React.FunctionComponent<NotificationDrawerListItemHeaderProps> = ({
@@ -65,6 +67,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
   truncateTitle = 0,
   tooltipPosition,
   headingLevel: HeadingLevel = 'h2',
+  actionHasNoOffset = false,
   ...props
 }: NotificationDrawerListItemHeaderProps) => {
   const titleRef = React.useRef(null);
@@ -103,7 +106,11 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
           Title
         )}
       </div>
-      {children && <div className={css(styles.notificationDrawerListItemAction)}>{children}</div>}
+      {children && (
+        <div className={css(styles.notificationDrawerListItemAction, actionHasNoOffset && styles.modifiers.noOffset)}>
+          {children}
+        </div>
+      )}
     </React.Fragment>
   );
 };

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -5,6 +5,7 @@ import '@testing-library/jest-dom';
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import { NotificationDrawerListItemHeader } from '../NotificationDrawerListItemHeader';
+import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 
 describe('NotificationDrawerListItemHeader', () => {
   test('renders with PatternFly Core styles', () => {
@@ -48,4 +49,27 @@ describe('NotificationDrawerListItemHeader', () => {
 
     expect(screen.getByText('Pod quit unexpectedly')).toHaveClass('pf-m-truncate');
   });
+
+  test(`renders with ${styles.modifiers.noOffset} if actionHasNoOffset={true} is passed`, () => {
+    render(
+      <NotificationDrawerListItemHeader title="Pod quit unexpectedly" actionHasNoOffset>
+        test
+      </NotificationDrawerListItemHeader>
+    );
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noOffset);
+  });
+
+  test(`does not render with ${styles.modifiers.noOffset} if actionHasNoOffset={false} is passed`, () => {
+    render(
+      <NotificationDrawerListItemHeader title="Pod quit unexpectedly" actionHasNoOffset={false}>
+        test
+      </NotificationDrawerListItemHeader>
+    );
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noOffset);
+  });
+
+  test(`does not render with ${styles.modifiers.noOffset} if actionHasNoOffset is not passed`, () => {
+    render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly">test</NotificationDrawerListItemHeader>);
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noOffset);
+  });
 });

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -64,9 +64,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{dropdownItems}</DropdownList>
@@ -92,9 +91,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -122,9 +120,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -154,9 +151,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -185,9 +181,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -215,9 +210,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -241,9 +235,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>