@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

package/src/components/Title/examples/TitleCustomSizes.tsx

@@ -4,22 +4,22 @@ import { Title, TitleSizes } from '@patternfly/react-core';
 export const TitleCustomSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
-      h1 as 4xl
+      4xl title
     </Title>
     <Title headingLevel="h2" size="3xl">
-      h2 as 3xl
+      3xl title
     </Title>
     <Title headingLevel="h3" size={TitleSizes['2xl']}>
-      h3 as 2xl
+      2xl title
     </Title>
     <Title headingLevel="h4" size="xl">
-      h4 as xl
+      xl title
     </Title>
     <Title headingLevel="h5" size={TitleSizes.lg}>
-      h5 as lg
+      lg title
     </Title>
     <Title headingLevel="h6" size="md">
-      h6 as md Title
+      md title
     </Title>
   </React.Fragment>
 );

package/src/components/Title/examples/TitleDefaultSizes.tsx

@@ -3,11 +3,11 @@ import { Title } from '@patternfly/react-core';
 
 export const TitleDefaultSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Title headingLevel="h1">h1 defaults to 2xl</Title>
-    <Title headingLevel="h2">h2 defaults to xl</Title>
-    <Title headingLevel="h3">h3 defaults to lg</Title>
-    <Title headingLevel="h4">h4 defaults to md</Title>
-    <Title headingLevel="h5">h5 defaults to md</Title>
-    <Title headingLevel="h6">h6 defaults to md</Title>
+    <Title headingLevel="h1">H1-styled title</Title>
+    <Title headingLevel="h2">H2-styled title</Title>
+    <Title headingLevel="h3">H3-styled title</Title>
+    <Title headingLevel="h4">H4-styled title</Title>
+    <Title headingLevel="h5">H5-styled title</Title>
+    <Title headingLevel="h6">H6-styled title</Title>
   </React.Fragment>
 );

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -72,12 +72,7 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
 
     return (
       <div
-        className={css(
-          styles.toolbarContent,
-          !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
-          isHidden && styles.modifiers.hidden,
-          className
-        )}
+        className={css(styles.toolbarContent, isHidden && styles.modifiers.hidden, className)}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}
         ref={chipGroupContentRef}
         {...props}

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -61,7 +61,7 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
       >
         <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
-          <ToolbarGroup className={styles.modifiers.chipContainer}>
+          <ToolbarGroup>
             <ToolbarGroup ref={chipContainerRef} />
             {showClearFiltersButton && !customChipGroupContent && (
               <ToolbarItem>

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,15 +6,14 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group',
-  'button-group' = 'button-group'
+  'icon-button-group' = 'icon-button-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group';
+  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -82,7 +81,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,18 +1,13 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
-
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
-  'bulk-select' = 'bulk-select',
-  'overflow-menu' = 'overflow-menu',
   pagination = 'pagination',
-  'search-filter' = 'search-filter',
   label = 'label',
   'chip-group' = 'chip-group',
   'expand-all' = 'expand-all'
@@ -22,16 +17,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar item */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
-  variant?:
-    | ToolbarItemVariant
-    | 'bulk-select'
-    | 'overflow-menu'
-    | 'pagination'
-    | 'search-filter'
-    | 'label'
-    | 'chip-group'
-    | 'separator'
-    | 'expand-all';
+  variant?: ToolbarItemVariant | 'pagination' | 'label' | 'chip-group' | 'separator' | 'expand-all';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -60,15 +46,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
     '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
   };
-  /** Widths at various breakpoints. */
-  widths?: {
-    default?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    '2xl'?: string;
-  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -84,7 +61,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   variant,
   visibility,
   spacer,
-  widths,
   align,
   alignSelf,
   alignItems,
@@ -95,15 +71,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
-  }
-
-  const widthStyles: any = {};
-  if (widths) {
-    Object.entries(widths || {}).map(
-      ([breakpoint, value]) =>
-        (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
-    );
+    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }
 
   return (
@@ -112,16 +80,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
         <div
           className={css(
             styles.toolbarItem,
-            variant &&
-              styles.modifiers[
-                toCamel(variant) as
-                  | 'bulkSelect'
-                  | 'overflowMenu'
-                  | 'pagination'
-                  | 'searchFilter'
-                  | 'label'
-                  | 'chipGroup'
-              ],
+            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
@@ -138,7 +97,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           {...props}
-          {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
         >
           {children}
         </div>

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -149,7 +149,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                           aria-label="Show Filters"
                           {...(_isExpanded && { 'aria-expanded': true })}
                           aria-haspopup={_isExpanded && this.isContentPopup()}
-                          aria-controls={expandableContentId}
+                          aria-controls={_isExpanded ? expandableContentId : undefined}
                           ref={this.toggleRef}
                         >
                           {toggleIcon}
@@ -162,8 +162,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant &&
-                            styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/__tests__/Toolbar.test.tsx

@@ -64,8 +64,8 @@ describe('Toolbar', () => {
           <ToolbarGroup variant="filter-group">
             <ToolbarFilter
               chips={['New', 'Pending']}
-              deleteChip={(category, chip) => {}}
-              deleteChipGroup={(category) => {}}
+              deleteChip={(_category, _chip) => {}}
+              deleteChipGroup={(_category) => {}}
               categoryName="Status"
             >
               test content

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -4,7 +4,11 @@ import { ToolbarGroup } from '../ToolbarGroup';
 
 describe('ToolbarItem', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
-    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    render(
+      <ToolbarGroup data-testid="toolbargroup" isOverflowContainer>
+        Test
+      </ToolbarGroup>
+    );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -3,22 +3,12 @@ import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
-    render(<ToolbarItem data-testid="toolbaritem" isOverflowContainer>Test</ToolbarItem>);
+    render(
+      <ToolbarItem data-testid="toolbaritem" isOverflowContainer>
+        Test
+      </ToolbarItem>
+    );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
   });
 });

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

@@ -69,7 +69,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
             class="pf-v5-c-toolbar__toggle"
           >
             <button
-              aria-controls="toolbar-with-filter-expandable-content-3"
               aria-disabled="false"
               aria-haspopup="false"
               aria-label="Show Filters"

package/src/components/Toolbar/examples/Toolbar.md

@@ -34,16 +34,6 @@ Items are spaced “16px” apart by default. To adjust the size of the space be
 
 ```
 
-### Toolbar items with adjusted widths
-
-You can adjust the width of toolbar items so that they better fit the size of their container.
-
-The default width of a toolbar item is “100px”. To adjust an item’s width, use the `widths` property of the `<ToolbarItem>`. You can set the “px” value at multiple breakpoints, including "default", "sm", "md", "lg, "xl", and "2xl".
-
-```ts file="./ToolbarWidths.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -48,7 +48,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Component toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -53,7 +53,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Consumer toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -189,7 +189,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     <React.Fragment>
       <ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
       <ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
-      <ToolbarGroup variant="button-group">{buttonGroupItems}</ToolbarGroup>
+      <ToolbarGroup>{buttonGroupItems}</ToolbarGroup>
     </React.Fragment>
   );
 

package/src/components/Toolbar/examples/ToolbarItems.tsx

@@ -5,7 +5,7 @@ import { Button, SearchInput } from '@patternfly/react-core';
 export const ToolbarItems: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput aria-label="Items example search input" />
       </ToolbarItem>
       <ToolbarItem>

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -206,7 +206,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
           <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
-          <ToolbarItem variant="overflow-menu">
+          <ToolbarItem>
             <OverflowMenu breakpoint="2xl">
               <OverflowMenuContent>
                 <OverflowMenuGroup groupType="button">
@@ -249,7 +249,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <React.Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarItem variant="bulk-select">
+          <ToolbarItem>
             <Dropdown
               onSelect={onSplitButtonSelect}
               isOpen={isSplitButtonDropdownOpen}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -125,7 +125,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="With filters example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -135,6 +135,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...(ToggleComponent === 'button' && { type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -167,7 +168,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
             {name}
           </button>
         ) : (
@@ -197,7 +198,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <li
       id={id}
       className={css(styles.treeViewListItem, internalIsExpanded && styles.modifiers.expanded)}
-      {...(internalIsExpanded && { 'aria-expanded': 'true' })}
+      aria-expanded={internalIsExpanded}
       role="treeitem"
       tabIndex={-1}
     >
@@ -230,6 +231,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheckbox && { htmlFor: randomId })}
               {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(Component === 'button' && { type: 'button' })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}