feat(react-core): bump core and fix build

package.json

@@ -91,7 +91,7 @@
     "prettier": "node node_modules/.bin/prettier --write \"packages/**/*.{js,jsx,ts,tsx}\" \"scripts/**/*.{js,jsx,ts,tsx}\"",
     "serve:docs": "lerna run serve",
     "serve:integration": "lerna run serve:demo-app",
-    "start": "concurrently --kill-others \"yarn build && yarn build:esm --watch\" \"yarn workspace @patternfly/react-docs develop\"",
+    "start": "concurrently --kill-others \"yarn build && yarn watch\" \"yarn workspace @patternfly/react-docs develop\"",
     "start:cypress": "lerna run cypress:open",
     "start:demo-app": "lerna run start:demo-app --stream",
     "start:pf4": "yarn start",
@@ -102,7 +102,8 @@
     "test:current": "jest --watch",
     "test:integration": "yarn workspace @patternfly/react-integration test:integration",
     "test:watch": "jest --watchAll",
-    "uninstall": "find . -name node_modules -type d | xargs rm -rf"
+    "uninstall": "find . -name node_modules -type d | xargs rm -rf",
+    "watch": "yarn build:esm --watch"
   },
   "config": {
     "commitizen": {

packages/react-catalog-view-extension/package.json

@@ -35,7 +35,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.6.0",
+    "@patternfly/patternfly": "4.8.6",
     "@patternfly/react-core": "^4.6.2",
     "@patternfly/react-styles": "^4.1.1",
     "classnames": "^2.2.5",

packages/react-charts/package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/patternfly": "4.6.0",
+    "@patternfly/patternfly": "4.8.6",
     "@patternfly/react-styles": "^4.1.1",
     "@patternfly/react-tokens": "^4.2.1",
     "hoist-non-react-statics": "^3.3.0",

packages/react-core/package.json

@@ -44,7 +44,7 @@
     "tslib": "^1.11.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.6.0",
+    "@patternfly/patternfly": "4.8.6",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -200,9 +200,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
             sectionClass: styles.appLauncherGroup,
             sectionTitleClass: styles.appLauncherGroupTitle,
             sectionComponent: 'section',
-            disabledClass: styles.modifiers.disabled,
-            hoverClass: styles.modifiers.hover,
-            separatorClass: styles.appLauncherSeparator
+            disabledClass: styles.modifiers.disabled
           }}
         >
           <DropdownWithContext

packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncher.test.tsx.snap

@@ -14,14 +14,12 @@ exports[`ApplicationLauncher should match snapshot (auto-generated) 1`] = `
         "baseClass": "pf-c-app-launcher",
         "baseComponent": "nav",
         "disabledClass": "pf-m-disabled",
-        "hoverClass": "pf-m-hover",
         "itemClass": "pf-c-app-launcher__menu-item",
         "menuClass": "pf-c-app-launcher__menu",
         "onSelect": [Function],
         "sectionClass": "pf-c-app-launcher__group",
         "sectionComponent": "section",
         "sectionTitleClass": "pf-c-app-launcher__group-title",
-        "separatorClass": "pf-c-app-launcher__separator",
         "toggleClass": "pf-c-app-launcher__toggle",
       }
     }

packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap

@@ -219,10 +219,10 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   </button>
                 </li>
                 <li
-                  role="separator"
+                  role="none"
                 >
-                  <div
-                    class="pf-c-app-launcher__separator"
+                  <hr
+                    class="pf-c-divider pf-c-app-launcher__menu-item"
                   />
                 </li>
                 <li
@@ -261,8 +261,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
           id="pf-toggle-id-5"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={true}
           isPlain={false}
           isPrimary={false}
@@ -355,10 +353,10 @@ exports[`ApplicationLauncher custom icon 1`] = `
                     </button>
                   </li>
                   <li
-                    role="separator"
+                    role="none"
                   >
-                    <div
-                      class="pf-c-app-launcher__separator"
+                    <hr
+                      class="pf-c-divider pf-c-app-launcher__menu-item"
                     />
                   </li>
                   <li
@@ -690,8 +688,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
               index={4}
             >
               <InternalDropdownItem
-                className="pf-c-app-launcher__separator"
-                component="div"
+                className=""
+                component={[Function]}
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -704,19 +702,23 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 isHovered={false}
                 isPlainText={false}
                 onClick={[Function]}
-                role="separator"
+                role="none"
                 tooltipProps={Object {}}
                 variant="item"
               >
                 <li
                   className={null}
                   onClick={[Function]}
                   onKeyDown={[Function]}
-                  role="separator"
+                  role="none"
                 >
-                  <div
-                    className="pf-c-app-launcher__separator"
-                  />
+                  <Divider
+                    className="pf-c-app-launcher__menu-item"
+                  >
+                    <hr
+                      className="pf-c-divider pf-c-app-launcher__menu-item"
+                    />
+                  </Divider>
                 </li>
               </InternalDropdownItem>
             </DropdownSeparator>
@@ -1020,8 +1022,6 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
           id="pf-toggle-id-3"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={false}
           isPlain={false}
           isPrimary={false}
@@ -1292,8 +1292,6 @@ exports[`ApplicationLauncher dropup 1`] = `
           id="pf-toggle-id-2"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={false}
           isPlain={false}
           isPrimary={false}
@@ -1602,10 +1600,10 @@ exports[`ApplicationLauncher expanded 1`] = `
                   </button>
                 </li>
                 <li
-                  role="separator"
+                  role="none"
                 >
-                  <div
-                    class="pf-c-app-launcher__separator"
+                  <hr
+                    class="pf-c-divider pf-c-app-launcher__menu-item"
                   />
                 </li>
                 <li
@@ -1644,8 +1642,6 @@ exports[`ApplicationLauncher expanded 1`] = `
           id="pf-toggle-id-4"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={true}
           isPlain={false}
           isPrimary={false}
@@ -1737,10 +1733,10 @@ exports[`ApplicationLauncher expanded 1`] = `
                     </button>
                   </li>
                   <li
-                    role="separator"
+                    role="none"
                   >
-                    <div
-                      class="pf-c-app-launcher__separator"
+                    <hr
+                      class="pf-c-divider pf-c-app-launcher__menu-item"
                     />
                   </li>
                   <li
@@ -2070,8 +2066,8 @@ exports[`ApplicationLauncher expanded 1`] = `
               index={4}
             >
               <InternalDropdownItem
-                className="pf-c-app-launcher__separator"
-                component="div"
+                className=""
+                component={[Function]}
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2084,19 +2080,23 @@ exports[`ApplicationLauncher expanded 1`] = `
                 isHovered={false}
                 isPlainText={false}
                 onClick={[Function]}
-                role="separator"
+                role="none"
                 tooltipProps={Object {}}
                 variant="item"
               >
                 <li
                   className={null}
                   onClick={[Function]}
                   onKeyDown={[Function]}
-                  role="separator"
+                  role="none"
                 >
-                  <div
-                    className="pf-c-app-launcher__separator"
-                  />
+                  <Divider
+                    className="pf-c-app-launcher__menu-item"
+                  >
+                    <hr
+                      className="pf-c-divider pf-c-app-launcher__menu-item"
+                    />
+                  </Divider>
                 </li>
               </InternalDropdownItem>
             </DropdownSeparator>
@@ -2400,8 +2400,6 @@ exports[`ApplicationLauncher regular 1`] = `
           id="pf-toggle-id-0"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={false}
           isPlain={false}
           isPrimary={false}
@@ -2672,8 +2670,6 @@ exports[`ApplicationLauncher right aligned 1`] = `
           id="pf-toggle-id-1"
           isActive={false}
           isDisabled={false}
-          isFocused={false}
-          isHovered={false}
           isOpen={false}
           isPlain={false}
           isPrimary={false}

packages/react-core/src/components/Button/Button.tsx

@@ -32,10 +32,6 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
   isBlock?: boolean;
   /** Disables the button and adds disabled styling */
   isDisabled?: boolean;
-  /** Adds focus styling to the button */
-  isFocus?: boolean;
-  /** Adds hover styling to the button */
-  isHover?: boolean;
   /** Adds inline styling to a link button */
   isInline?: boolean;
   /** Sets button type */
@@ -59,8 +55,6 @@ export const Button: React.FunctionComponent<ButtonProps & OUIAProps> = ({
   isActive = false,
   isBlock = false,
   isDisabled = false,
-  isFocus = false,
-  isHover = false,
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
@@ -84,8 +78,6 @@ export const Button: React.FunctionComponent<ButtonProps & OUIAProps> = ({
         isBlock && styles.modifiers.block,
         isDisabled && !isButtonElement && styles.modifiers.disabled,
         isActive && styles.modifiers.active,
-        isFocus && styles.modifiers.focus,
-        isHover && styles.modifiers.hover,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         className
       )}

packages/react-core/src/components/Button/__tests__/Generated/__snapshots__/Button.test.tsx.snap

@@ -9,6 +9,8 @@ exports[`Button should match snapshot (auto-generated) 1`] = `
   data-ouia-component-type="PF4/Button"
   data-ouia-safe={true}
   disabled={false}
+  isFocus={false}
+  isHover={false}
   tabIndex={null}
   type="button"
 >

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -112,11 +112,12 @@ exports[`isFocus 1`] = `
   <button
     aria-disabled={null}
     aria-label={null}
-    className="pf-c-button pf-m-primary pf-m-focus"
+    className="pf-c-button pf-m-primary"
     data-ouia-component-id={null}
     data-ouia-component-type="PF4/Button"
     data-ouia-safe={true}
     disabled={false}
+    isFocus={true}
     tabIndex={null}
     type="button"
   >
@@ -132,11 +133,12 @@ exports[`isHover 1`] = `
   <button
     aria-disabled={null}
     aria-label={null}
-    className="pf-c-button pf-m-primary pf-m-hover"
+    className="pf-c-button pf-m-primary"
     data-ouia-component-id={null}
     data-ouia-component-type="PF4/Button"
     data-ouia-safe={true}
     disabled={false}
+    isHover={true}
     tabIndex={null}
     type="button"
   >

packages/react-core/src/components/Card/examples/Card.md

@@ -6,7 +6,7 @@ typescript: true
 propComponents: ['Card', 'CardHeadMain', 'CardHeader', 'CardBody', 'CardFooter']
 ---
 
-import { Brand, Card, CardActions, CardHead, CardHeadMain, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core';
+import { Brand, Card, CardActions, CardHead, CardHeadMain, CardHeader, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import pfLogo from './pfLogo.svg'; 
 
 ## Examples
@@ -25,7 +25,7 @@ SimpleCard = () => (
 
 ```js title=With-image-and-actions
 import React from 'react'; 
-import { Brand, Card, CardHead, CardHeadMain, CardActions, CardHeader, CardBody, CardFooter, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, } from '@patternfly/react-core'; 
+import { Brand, Card, CardHead, CardHeadMain, CardActions, CardHeader, CardBody, CardFooter, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle } from '@patternfly/react-core'; 
 import pfLogo from './pfLogo.svg'; 
 
 class KebabDropdown extends React.Component {

packages/react-core/src/components/ChipGroup/Chip.tsx

@@ -77,11 +77,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
     if (this.state.isTooltipVisible) {
       return (
         <Tooltip position={tooltipPosition} content={children}>
-          <Component
-            className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
-            tabIndex="0"
-            {...getOUIAProps('Chip', ouiaId)}
-          >
+          <Component className={css(styles.chip, className)} tabIndex="0" {...getOUIAProps('Chip', ouiaId)}>
             <span ref={this.span} className={css(styles.chipText)} id={randomId}>
               {children}
             </span>
@@ -100,10 +96,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
       );
     }
     return (
-      <Component
-        className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
-        {...getOUIAProps('Chip', ouiaId)}
-      >
+      <Component className={css(styles.chip, className)} {...getOUIAProps('Chip', ouiaId)}>
         <span ref={this.span} className={css(styles.chipText)} id={randomId}>
           {children}
         </span>

packages/react-core/src/components/ChipGroup/ChipGroupToolbarItem.tsx

@@ -71,7 +71,7 @@ export class ChipGroupToolbarItem extends React.Component<ChipGroupToolbarItemPr
 
     if (React.Children.count(children)) {
       const renderChipGroup = (id: string, HeadingLevel: any) => (
-        <ul className={css(styles.chipGroup, styles.modifiers.toolbar, className)} {...rest}>
+        <ul className={css(styles.chipGroup, styles.modifiers.category, className)} {...rest}>
           <li>
             {this.state.isTooltipVisible ? (
               <Tooltip position={tooltipPosition} content={categoryName}>

packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -243,7 +243,7 @@ exports[`Chip readonly 1`] = `
     prefix="pf-random-id-"
   >
     <div
-      className="pf-c-chip pf-m-read-only my-chp-cls"
+      className="pf-c-chip my-chp-cls"
       data-ouia-component-id={7}
       data-ouia-component-type="PF4/Chip"
       data-ouia-safe={true}