chore(drag-drop): consume core classes (#6377)

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

@@ -35,7 +35,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "@patternfly/react-core": "^4.158.1",
     "@patternfly/react-styles": "^4.12.0",
     "classnames": "^2.2.5"

packages/react-console/package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@novnc/novnc": "^1.2.0",
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "@patternfly/react-core": "^4.158.1",
     "@spice-project/spice-html5": "^0.2.1",
     "@types/file-saver": "^2.0.1",

packages/react-core/package.json

@@ -43,7 +43,7 @@
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",

packages/react-core/src/components/DragDrop/Draggable.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
 
@@ -58,7 +60,8 @@ interface DroppableItem {
 // Reset per-element state
 function resetDroppableItem(droppableItem: DroppableItem) {
   removeBlankDiv(droppableItem.node);
-  droppableItem.node.style.boxShadow = '';
+  droppableItem.node.classList.remove(styles.modifiers.dragging);
+  droppableItem.node.classList.remove(styles.modifiers.dragOutside);
   droppableItem.draggableNodes.forEach((n, i) => {
     n.style.transform = '';
     n.style.transition = '';
@@ -83,6 +86,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
   let [style, setStyle] = React.useState(styleProp);
   /* eslint-enable prefer-const */
   const [isDragging, setIsDragging] = React.useState(false);
+  const [isValidDrag, setIsValidDrag] = React.useState(true);
   const { zone, droppableId } = React.useContext(DroppableContext);
   const { onDrag, onDragMove, onDrop } = React.useContext(DragDropContext);
   // Some state is better just to leave as vars passed around between various callbacks
@@ -151,7 +155,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       const { node, rect, isDraggingHost, draggableNodes, draggableNodesRects } = droppableItem;
       if (overlaps(ev, rect)) {
         // Add valid dropzone style
-        node.style.boxShadow = '0px 0px 0px 1px blue, 0px 2px 5px rgba(0, 0, 0, 0.2)';
+        node.classList.remove(styles.modifiers.dragOutside);
         hoveringDroppable = node;
         // Check if we need to add a blank div row
         if (node.getAttribute('blankDiv') !== 'true' && !isDraggingHost) {
@@ -185,17 +189,17 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
         }
       } else {
         resetDroppableItem(droppableItem);
-        node.style.boxShadow = '0px 0px 0px 1px red, 0px 2px 5px rgba(0, 0, 0, 0.2)';
+        node.classList.add(styles.modifiers.dragging);
+        node.classList.add(styles.modifiers.dragOutside);
       }
     });
 
     // Move hovering draggable and style it based on cursor position
     setStyle({
       ...style,
-      boxShadow: `0px 0px 0px 1px ${hoveringDroppable ? 'blue' : 'red'}, 0px 2px 5px rgba(0, 0, 0, 0.2)`,
-      transform: `translate(${ev.pageX - startX}px, ${ev.pageY - startY}px)`,
-      cursor: !hoveringDroppable && 'not-allowed'
+      transform: `translate(${ev.pageX - startX}px, ${ev.pageY - startY}px)`
     });
+    setIsValidDrag(Boolean(hoveringDroppable));
 
     // Iterate through sibling draggable nodes to reposition them and store correct hoveringIndex for onDrop
     hoveringIndex = null;
@@ -241,6 +245,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     const rect = dragging.getBoundingClientRect();
     const droppableNodes = Array.from(document.querySelectorAll(`[data-pf-droppable="${zone}"]`)) as HTMLElement[];
     const droppableItems = droppableNodes.reduce((acc, cur) => {
+      cur.classList.add(styles.modifiers.dragging);
       const draggableNodes = Array.from(cur.querySelectorAll(`[data-pf-draggable-zone="${zone}"]`)) as HTMLElement[];
       const isDraggingHost = cur.contains(dragging);
       if (isDraggingHost) {
@@ -266,15 +271,14 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     // Set initial style so future style mods take effect
     style = {
       ...style,
-      position: 'fixed',
       top: rect.y,
       left: rect.x,
       width: rect.width,
       height: rect.height,
-      background: getInheritedBackgroundColor(dragging),
-      boxShadow: '0px 0px 0px 1px blue, 0px 2px 5px rgba(0, 0, 0, 0.2)',
+      '--pf-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
+      position: 'fixed',
       zIndex: 5000
-    };
+    } as any;
     setStyle(style);
     // Store event details
     startX = ev.pageX;
@@ -292,7 +296,12 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
   const childProps = {
     'data-pf-draggable-zone': isDragging ? null : zone,
     draggable: true,
-    className,
+    className: css(
+      styles.draggable,
+      isDragging && styles.modifiers.dragging,
+      !isValidDrag && styles.modifiers.dragOutside,
+      className
+    ),
     onDragStart,
     onTransitionEnd,
     style,

packages/react-core/src/components/DragDrop/Droppable.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 
 interface DroppableProps extends React.HTMLProps<HTMLDivElement> {
@@ -25,7 +27,7 @@ export const Droppable: React.FunctionComponent<DroppableProps> = ({
   const childProps = {
     'data-pf-droppable': zone,
     'data-pf-droppableid': droppableId,
-    className,
+    className: css(styles.droppable, className),
     ...props
   };
 

packages/react-docs/package.json

@@ -22,7 +22,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "@patternfly/react-catalog-view-extension": "^4.13.1",
     "@patternfly/react-charts": "^6.15.25",
     "@patternfly/react-code-editor": "^4.3.68",

packages/react-icons/package.json

@@ -32,7 +32,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",

packages/react-tokens/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.135.4",
+    "@patternfly/patternfly": "4.139.2",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",

yarn.lock

@@ -2915,10 +2915,10 @@
     puppeteer-cluster "^0.22.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@4.135.4":
-  version "4.135.4"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.135.4.tgz#b5517333450a67943f9da1df7238b43e5b1b6648"
-  integrity sha512-GzbbGvCzHot597FOJjBH9O0cfmxSdiV09IHWiPURKX826lYAC4ezXZV/mTvgG+2QWehX2XCmGuLhaNDbdivgUg==
+"@patternfly/patternfly@4.139.2":
+  version "4.139.2"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.139.2.tgz#c09b02e1d42e960d039ebb091393227ffe30f5f2"
+  integrity sha512-d4sD2jpjv3kWR8MhlXp+GaRgZsSaEo3fZVWojyzlf004hlXPNTqYFC/1A6R+SCFmyaBmSDD510XXi3wLTsMS8Q==
 
 "@reach/router@^1.3.4":
   version "1.3.4"