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

package/src/components/Content/examples/ContentEditorial.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+export const ContentEditorial: React.FunctionComponent = () => (
+  <>
+    <Content component={ContentVariants.h1} isEditorial>
+      Example of editorial content via components
+    </Content>
+    <Content component={ContentVariants.p} isEditorial>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+      erat vel, interdum mattis neque. Sub works as well!
+    </Content>
+    <br />
+    <Content isEditorial>
+      <h1>Example of editorial content via wrapper</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+        erat vel, interdum mattis neque. Sub works as well!
+      </p>
+    </Content>
+  </>
+);

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`Renders to match snapshot 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

package/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
+import { Button } from '../Button';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
@@ -325,17 +325,15 @@ const DatePickerBase = (
               />
             </InputGroupItem>
             <InputGroupItem>
-              <button
+              <Button
                 ref={buttonRef}
-                // TODO: Removed style follow up work with issue #8457
-                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                variant="control"
                 aria-label={buttonAriaLabel}
-                type="button"
                 onClick={() => setPopoverOpen(!popoverOpen)}
-                disabled={isDisabled}
-              >
-                <OutlinedCalendarAltIcon />
-              </button>
+                isDisabled={isDisabled}
+                icon={<OutlinedCalendarAltIcon />}
+                aria-haspopup="dialog"
+              />
             </InputGroupItem>
           </InputGroup>
         </div>

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>
 );