@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/components/Select/examples/Select.md

@@ -41,7 +41,7 @@ class SingleSelectInput extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -170,7 +170,7 @@ class SingleSelectDescription extends React.Component {
       isDisabled: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -248,7 +248,7 @@ class GroupedSingleSelectInput extends React.Component {
 
     this.toggleRef = React.createRef();
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -340,7 +340,7 @@ class ValidatedSelect extends React.Component {
       validated: 'default'
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -426,7 +426,7 @@ class CheckboxSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -504,7 +504,7 @@ class CheckboxSelectWithCounts extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -581,7 +581,7 @@ class CheckboxSelectInputNoBadge extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -657,7 +657,7 @@ class GroupedCheckboxSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -761,7 +761,7 @@ class FilteringSingleSelectInput extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({ isOpen });
     };
 
@@ -900,7 +900,7 @@ class FilteringCheckboxSelectInput extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1005,7 +1005,7 @@ class FilteringCheckboxSelectInputWithPlaceholder extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1112,7 +1112,7 @@ class FilteringCheckboxSelectInputWithBadging extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1236,7 +1236,7 @@ class TypeaheadSelectInput extends React.Component {
       resetOnSelect: true
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1451,7 +1451,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
       hasOnCreateOption: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1570,7 +1570,7 @@ class TypeaheadSelectInput extends React.Component {
       selected: null
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1665,7 +1665,7 @@ class MultiTypeaheadSelectInput extends React.Component {
       });
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1814,7 +1814,7 @@ class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1902,7 +1902,7 @@ class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2024,7 +2024,7 @@ class MultiTypeaheadSelectInputCustomObjects extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2106,7 +2106,7 @@ class PlainSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2182,7 +2182,7 @@ class SingleSelectInput extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2291,13 +2291,13 @@ class SelectDocumentBodyVsParent extends React.Component {
       parentSelected: null
     };
 
-    this.onBodyToggle = isBodyOpen => {
+    this.onBodyToggle = (_event, isBodyOpen) => {
       this.setState({
         isBodyOpen
       });
     };
 
-    this.onParentToggle = isParentOpen => {
+    this.onParentToggle = (_event, isParentOpen) => {
       this.setState({
         isParentOpen
       });
@@ -2383,7 +2383,7 @@ class FavoritesSelect extends React.Component {
       favorites: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2490,7 +2490,7 @@ class SelectWithFooter extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2576,7 +2576,7 @@ class SelectWithFooterCheckbox extends React.Component {
       <SelectOption key={5} value="Restarted" />
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2663,7 +2663,7 @@ class SelectViewMore extends React.Component {
       isLoading: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2763,7 +2763,7 @@ class SelectViewMoreCheckbox extends React.Component {
       <SelectOption key={9} value="Degraded " />
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2852,7 +2852,7 @@ function SelectWithPlaceholderStyle() {
     <SelectOption key={2} value="Paused" />
   ];
 
-  const onToggle = isOpen => setIsOpen(isOpen);
+  const onToggle = (_event, isOpen) => setIsOpen(isOpen);
 
   const onSelect = (event, selection, isPlaceholder) => {
     setSelected(selection);
@@ -2907,7 +2907,7 @@ function SelectWithPlaceholderStyle() {
     <SelectOption key={3} value="Paused" />
   ];
 
-  const onToggle = isOpen => setIsOpen(isOpen);
+  const onToggle = (_event, isOpen) => setIsOpen(isOpen);
 
   const onSelect = (event, selection, isPlaceholder) => {
     setSelected(selection);

package/src/components/Toolbar/ToolbarContent.tsx

@@ -17,14 +17,8 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
-  };
+  /** Vertical alignment of children */
+  alignItems?: 'center' | 'default';
   /** Content to be rendered as children of the content row */
   children?: React.ReactNode;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
@@ -57,7 +51,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
-      alignment,
+      alignItems,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
@@ -71,7 +65,6 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
             className={css(
               styles.toolbarContent,
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
               className
             )}
             {...props}
@@ -93,7 +86,14 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                       chipContainerRef: this.chipContainerRef
                     }}
                   >
-                    <div className={css(styles.toolbarContentSection)}>{children}</div>
+                    <div
+                      className={css(
+                        styles.toolbarContentSection,
+                        alignItems === 'center' && styles.modifiers.alignItemsCenter
+                      )}
+                    >
+                      {children}
+                    </div>
                     <ToolbarExpandableContent
                       id={expandableContentId}
                       isExpanded={isExpanded}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -23,14 +23,18 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
+  /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
+  align?: {
     default?: 'alignRight' | 'alignLeft';
     md?: 'alignRight' | 'alignLeft';
     lg?: 'alignRight' | 'alignLeft';
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment of children */
+  alignItems?: 'center' | 'baseline' | 'default';
+  /** Vertical alignment */
+  alignSelf?: 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -55,7 +59,19 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   render() {
-    const { visibility, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;
+    const {
+      visibility,
+      align,
+      alignItems,
+      alignSelf,
+      spacer,
+      spaceItems,
+      className,
+      variant,
+      children,
+      innerRef,
+      ...props
+    } = this.props;
 
     return (
       <PageContext.Consumer>
@@ -65,9 +81,13 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               styles.toolbarGroup,
               variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              alignItems === 'center' && styles.modifiers.alignItemsCenter,
+              alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+              alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+              alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
               className
             )}
             {...props}

package/src/components/Toolbar/ToolbarItem.tsx

@@ -39,14 +39,16 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
+  /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
+  align?: {
     default?: 'alignRight' | 'alignLeft';
     md?: 'alignRight' | 'alignLeft';
     lg?: 'alignRight' | 'alignLeft';
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment */
+  alignSelf?: 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -76,9 +78,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  alignment,
   spacer,
   widths,
+  align,
+  alignSelf,
   id,
   children,
   isAllExpanded,
@@ -114,8 +117,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
               ],
             isAllExpanded && styles.modifiers.expanded,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+            alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
             className
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}

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

@@ -36,7 +36,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
     setInputValue(newValue);
   };
 
-  const onStatusToggle = (isExpanded: boolean) => {
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
     setStatusIsExpanded(isExpanded);
   };
 
@@ -57,7 +57,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
     setStatusIsExpanded(false);
   };
 
-  const onRiskToggle = (isExpanded: boolean) => {
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
     setRiskIsExpanded(isExpanded);
   };
 

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

@@ -41,7 +41,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
     setInputValue(newValue);
   };
 
-  const onStatusToggle = (isExpanded: boolean) => {
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
     setStatusIsExpanded(isExpanded);
   };
 
@@ -62,7 +62,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
     setStatusIsExpanded(false);
   };
 
-  const onRiskToggle = (isExpanded: boolean) => {
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
     setRiskIsExpanded(isExpanded);
   };
 

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

@@ -82,7 +82,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           <Select
             variant={SelectVariant.checkbox}
             aria-label="Status"
-            onToggle={(isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
+            onToggle={(_event: any, isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
             onSelect={(event, selection) => onSelect('Status', event, selection as string)}
             selections={filters.status}
             isOpen={statusIsExpanded}
@@ -100,7 +100,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           <Select
             variant={SelectVariant.checkbox}
             aria-label="Risk"
-            onToggle={(isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
+            onToggle={(_event: any, isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
             onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
             selections={filters.risk}
             isOpen={riskIsExpanded}

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

@@ -34,7 +34,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
   const [thirdSelected, setThirdSelected] = React.useState<string | SelectOptionObject>();
 
-  const onFirstToggle = (isExpanded: boolean) => {
+  const onFirstToggle = (_event: any, isExpanded: boolean) => {
     setFirstIsExpanded(isExpanded);
   };
 
@@ -43,7 +43,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     setFirstIsExpanded(false);
   };
 
-  const onSecondToggle = (isExpanded: boolean) => {
+  const onSecondToggle = (_event: any, isExpanded: boolean) => {
     setSecondIsExpanded(isExpanded);
   };
 
@@ -52,7 +52,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     setSecondIsExpanded(false);
   };
 
-  const onThirdToggle = (isExpanded: boolean) => {
+  const onThirdToggle = (_event: any, isExpanded: boolean) => {
     setThirdIsExpanded(isExpanded);
   };
 

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

@@ -52,11 +52,11 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
-  const onKebabToggle = (isOpen: boolean) => {
+  const onKebabToggle = (_event: any, isOpen: boolean) => {
     setKebabIsOpen(isOpen);
   };
 
-  const onResourceToggle = (isExpanded: boolean) => {
+  const onResourceToggle = (_event: any, isExpanded: boolean) => {
     setResourceIsExpanded(isExpanded);
   };
 
@@ -70,7 +70,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setResourceIsExpanded(false);
   };
 
-  const onStatusToggle = (isExpanded: boolean) => {
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
     setStatusIsExpanded(isExpanded);
   };
 
@@ -92,7 +92,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setPerPage(perPage);
   };
 
-  const onSplitButtonToggle = (isOpen: boolean) => {
+  const onSplitButtonToggle = (_event: any, isOpen: boolean) => {
     setSplitButtonDropdownIsOpen(isOpen);
   };
 
@@ -228,7 +228,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               dropdownItems={splitButtonDropdownItems}
             />
           </ToolbarItem>
-          <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             <Pagination
               itemCount={37}
               perPage={perPage}

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

@@ -80,15 +80,15 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     }
   };
 
-  const onStatusToggle = (isExpanded: boolean) => {
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
     setStatusIsExpanded(isExpanded);
   };
 
-  const onRiskToggle = (isExpanded: boolean) => {
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
     setRiskIsExpanded(isExpanded);
   };
 
-  const onKebabToggle = (isOpen: boolean) => {
+  const onKebabToggle = (_event: any, isOpen: boolean) => {
     setKebabIsOpen(isOpen);
   };
 

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

@@ -23,7 +23,6 @@ test('tooltip renders in strict mode', () => {
   const { asFragment } = render(
     <React.StrictMode>
       <Tooltip
-        removeFindDomNode
         position="top"
         content={
           <div>

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

@@ -2309,11 +2309,11 @@ exports[`tree view renders icons successfully 1`] = `
                   height="1em"
                   role="img"
                   style="vertical-align: -0.125em;"
-                  viewBox="0 0 576 512"
+                  viewBox="0 0 1217 1024"
                   width="1em"
                 >
                   <path
-                    d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
+                    d="M1199.6,520.6 C1187.8,514.9 1174.4,512 1159.3,512 L412.7,512 C288.5,512 236.7,593.1 236.7,593.1 L75.6,810.6 L150,552.2 C162,520.1 187.3,492.8 225.6,470.4 C263.9,448 304.1,448 345.8,448 L1089,448 L1089,256 C1089,256 1089,192 1025,192 L503.3,192 L470.6,130.1 C470.6,130.1 440,64 374.7,64 L65,64 C1,64 1,128 1,128 L1,960 L807.7,960 C837,960 868.9,952.166667 903.4,936.5 C937.9,920.8 964.6,901.5 983.7,879 L1196.4,593.2 C1210.2,577.7 1217,561.41 1217,549.3 C1217,537.19 1211.3,526.3 1199.6,520.6"
                   />
                 </svg>
               </span>
@@ -2720,11 +2720,11 @@ exports[`tree view renders individual flag options successfully 1`] = `
                   height="1em"
                   role="img"
                   style="vertical-align: -0.125em;"
-                  viewBox="0 0 576 512"
+                  viewBox="0 0 1217 1024"
                   width="1em"
                 >
                   <path
-                    d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
+                    d="M1199.6,520.6 C1187.8,514.9 1174.4,512 1159.3,512 L412.7,512 C288.5,512 236.7,593.1 236.7,593.1 L75.6,810.6 L150,552.2 C162,520.1 187.3,492.8 225.6,470.4 C263.9,448 304.1,448 345.8,448 L1089,448 L1089,256 C1089,256 1089,192 1025,192 L503.3,192 L470.6,130.1 C470.6,130.1 440,64 374.7,64 L65,64 C1,64 1,128 1,128 L1,960 L807.7,960 C837,960 868.9,952.166667 903.4,936.5 C937.9,920.8 964.6,901.5 983.7,879 L1196.4,593.2 C1210.2,577.7 1217,561.41 1217,549.3 C1217,537.19 1211.3,526.3 1199.6,520.6"
                   />
                 </svg>
               </span>

package/src/components/TreeView/examples/TreeView.md

@@ -875,7 +875,7 @@ class IconTreeView extends React.Component {
       }
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });

package/src/demos/Card/Card.md

@@ -113,13 +113,13 @@ class CardViewBasic extends React.Component {
       return selected === total;
     };
 
-    this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
+    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
       this.setState(prevState => ({
         isLowerToolbarDropdownOpen
       }));
     };
 
-    this.onToolbarKebabDropdownToggle = isLowerToolbarKebabDropdownOpen => {
+    this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen
       });
@@ -163,7 +163,7 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onSplitButtonToggle = isOpen => {
+    this.onSplitButtonToggle = (_event, isOpen) => {
       this.setState({
         splitButtonDropdownIsOpen: isOpen
       });
@@ -431,8 +431,7 @@ class CardViewBasic extends React.Component {
               </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
-          >
-          </DropdownToggle>
+          ></DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}
         dropdownItems={splitButtonDropdownItems}
@@ -532,7 +531,7 @@ class CardViewBasic extends React.Component {
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+        <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
           {this.renderPagination()}
         </ToolbarItem>
       </React.Fragment>
@@ -605,7 +604,7 @@ class CardViewBasic extends React.Component {
                         onSelect={e => this.onCardKebabDropdownSelect(key, e)}
                         toggle={
                           <KebabToggle
-                            onToggle={isCardKebabDropdownOpen =>
+                            onToggle={(_event, isCardKebabDropdownOpen) =>
                               this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
                             }
                           />