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

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -34,23 +34,32 @@ exports[`With popover opened 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
+            aria-disabled="false"
+            aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-4"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
             type="button"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
+            <span
+              class="pf-v6-c-button__icon"
             >
-              <path
-                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                />
+              </svg>
+            </span>
           </button>
         </div>
       </div>
@@ -95,7 +104,7 @@ exports[`With popover opened 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__icon pf-m-start"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"
@@ -201,7 +210,7 @@ exports[`With popover opened 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__icon pf-m-start"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"
@@ -820,24 +829,33 @@ exports[`disabled date picker 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
+            aria-disabled="false"
+            aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
             disabled=""
             type="button"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
+            <span
+              class="pf-v6-c-button__icon"
             >
-              <path
-                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                />
+              </svg>
+            </span>
           </button>
         </div>
       </div>

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -20,9 +20,7 @@ export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>
   ...props
 }: DrawerCloseButtonProps) => (
   <div className={css(styles.drawerClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
-      <TimesIcon />
-    </Button>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
   </div>
 );
 DrawerCloseButton.displayName = 'DrawerCloseButton';

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -43,7 +43,7 @@ exports[`Drawer expands from bottom 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"
@@ -136,7 +136,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__text"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"
@@ -231,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__text"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"
@@ -360,7 +360,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"
@@ -434,7 +434,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"
@@ -508,7 +508,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -13,7 +13,6 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData'
   ]
-beta: true
 ---
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -6,6 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -228,21 +229,25 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     );
 
     const expandableToggle = !isDetached && (
-      <button
-        className={css(styles.expandableSectionToggle)}
-        type="button"
-        aria-expanded={propOrStateIsExpanded}
-        aria-controls={uniqueContentId}
-        id={uniqueToggleId}
-        onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-      >
-        {variant !== ExpandableSectionVariant.truncate && (
-          <span className={css(styles.expandableSectionToggleIcon)}>
-            <AngleRightIcon aria-hidden />
-          </span>
-        )}
-        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
-      </button>
+      <div className={`${styles.expandableSection}__toggle`}>
+        <Button
+          variant="link"
+          {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
+          aria-expanded={propOrStateIsExpanded}
+          aria-controls={uniqueContentId}
+          id={uniqueToggleId}
+          onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
+          {...(variant !== ExpandableSectionVariant.truncate && {
+            icon: (
+              <span className={css(styles.expandableSectionToggleIcon)}>
+                <AngleRightIcon aria-hidden />
+              </span>
+            )
+          })}
+        >
+          {toggleContent || computedToggleText}
+        </Button>
+      </div>
     );
 
     return (

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { Button } from '../Button';
 
 /** Acts as the toggle sub-component when the main expandable section component has the isDetached
  * property passed in. Allows for more custom control over the expandable section's toggle.
@@ -50,26 +51,30 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
     )}
     {...props}
   >
-    <button
-      className={css(styles.expandableSectionToggle)}
-      type="button"
-      aria-expanded={isExpanded}
-      aria-controls={contentId}
-      onClick={() => onToggle(!isExpanded)}
-      id={toggleId}
-    >
-      {!hasTruncatedContent && (
-        <span
-          className={css(
-            styles.expandableSectionToggleIcon,
-            isExpanded && direction === 'up' && styles.modifiers.expandTop
-          )}
-        >
-          <AngleRightIcon aria-hidden />
-        </span>
-      )}
-      <span className={css(styles.expandableSectionToggleText)}>{children}</span>
-    </button>
+    <div className={`${styles.expandableSection}__toggle`}>
+      <Button
+        variant="link"
+        {...(hasTruncatedContent && { isInline: true })}
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        onClick={() => onToggle(!isExpanded)}
+        id={toggleId}
+        {...(!hasTruncatedContent && {
+          icon: (
+            <span
+              className={css(
+                styles.expandableSectionToggleIcon,
+                isExpanded && direction === 'up' && styles.modifiers.expandTop
+              )}
+            >
+              <AngleRightIcon aria-hidden />
+            </span>
+          )
+        })}
+      >
+        {children}
+      </Button>
+    </div>
   </div>
 );