@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.92

package/src/components/DescriptionList/DescriptionList.tsx

@@ -102,19 +102,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+      ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
       ...style,
-      ...{ '--pf-c-description-list__term--width': termWidth }
+      ...{ '--pf-v5-c-description-list__term--width': termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+      ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
     };
   }
 

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

@@ -3,7 +3,7 @@
 exports[`Description List 1 col on all breakpoints 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-1-col pf-m-1-col-on-md pf-m-1-col-on-lg pf-m-1-col-on-xl pf-m-1-col-on-2xl"
+    class="pf-v5-c-description-list pf-m-1-col pf-m-1-col-on-md pf-m-1-col-on-lg pf-m-1-col-on-xl pf-m-1-col-on-2xl"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`Description List 1 col on all breakpoints 1`] = `
 exports[`Description List 2 col on all breakpoints 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-2-col pf-m-2-col-on-md pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-2-col-on-2xl"
+    class="pf-v5-c-description-list pf-m-2-col pf-m-2-col-on-md pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-2-col-on-2xl"
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Description List 2 col on all breakpoints 1`] = `
 exports[`Description List 3 col on all breakpoints 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-3-col pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-3-col-on-xl pf-m-3-col-on-2xl"
+    class="pf-v5-c-description-list pf-m-3-col pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-3-col-on-xl pf-m-3-col-on-2xl"
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Description List 3 col on all breakpoints 1`] = `
 exports[`Description List Auto Column Widths Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-auto-column-widths"
+    class="pf-v5-c-description-list pf-m-auto-column-widths"
   />
 </DocumentFragment>
 `;
@@ -35,7 +35,7 @@ exports[`Description List Auto Column Widths Description List 1`] = `
 exports[`Description List Auto fit Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-auto-fit"
+    class="pf-v5-c-description-list pf-m-auto-fit"
   />
 </DocumentFragment>
 `;
@@ -43,8 +43,8 @@ exports[`Description List Auto fit Description List 1`] = `
 exports[`Description List Auto fit with responsive grid Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-auto-fit"
-    style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
+    class="pf-v5-c-description-list pf-m-auto-fit"
+    style="--pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
   />
 </DocumentFragment>
 `;
@@ -52,7 +52,7 @@ exports[`Description List Auto fit with responsive grid Description List 1`] = `
 exports[`Description List Compact Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-compact"
+    class="pf-v5-c-description-list pf-m-compact"
   />
 </DocumentFragment>
 `;
@@ -60,7 +60,7 @@ exports[`Description List Compact Description List 1`] = `
 exports[`Description List Compact Horizontal Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-horizontal pf-m-compact"
+    class="pf-v5-c-description-list pf-m-horizontal pf-m-compact"
   />
 </DocumentFragment>
 `;
@@ -69,7 +69,7 @@ exports[`Description List Description 1`] = `
 <DocumentFragment>
   <dd
     aria-labelledby="description-1"
-    class="pf-c-description-list__description custom-description-list-description"
+    class="pf-v5-c-description-list__description custom-description-list-description"
   >
     <div
       class="pf-c-description-list__text"
@@ -83,7 +83,7 @@ exports[`Description List Description 1`] = `
 exports[`Description List Fluid Horizontal Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-horizontal pf-m-fluid"
+    class="pf-v5-c-description-list pf-m-horizontal pf-m-fluid"
   />
 </DocumentFragment>
 `;
@@ -92,7 +92,7 @@ exports[`Description List Group 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="group-1"
-    class="pf-c-description-list__group custom-description-list-group"
+    class="pf-v5-c-description-list__group custom-description-list-group"
   >
     test
   </div>
@@ -102,7 +102,7 @@ exports[`Description List Group 1`] = `
 exports[`Description List Horizontal Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-horizontal"
+    class="pf-v5-c-description-list pf-m-horizontal"
   />
 </DocumentFragment>
 `;
@@ -110,7 +110,7 @@ exports[`Description List Horizontal Description List 1`] = `
 exports[`Description List Inline Grid Description List 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-inline-grid"
+    class="pf-v5-c-description-list pf-m-inline-grid"
   />
 </DocumentFragment>
 `;
@@ -119,10 +119,10 @@ exports[`Description List Term default 1`] = `
 <DocumentFragment>
   <dt
     aria-labelledby="term-1"
-    class="pf-c-description-list__term"
+    class="pf-v5-c-description-list__term"
   >
     <span
-      class="pf-c-description-list__text"
+      class="pf-v5-c-description-list__text"
     >
       test
     </span>
@@ -134,10 +134,10 @@ exports[`Description List Term helper text 1`] = `
 <DocumentFragment>
   <dt
     aria-labelledby="term-1"
-    class="pf-c-description-list__term"
+    class="pf-v5-c-description-list__term"
   >
     <span
-      class="pf-c-description-list__text pf-m-help-text"
+      class="pf-v5-c-description-list__text pf-m-help-text"
       role="button"
       tabindex="0"
       type="button"
@@ -151,7 +151,7 @@ exports[`Description List Term helper text 1`] = `
 exports[`Description List alignment breakpoints 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list pf-m-horizontal pf-m-horizontal-on-sm pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
+    class="pf-v5-c-description-list pf-m-horizontal pf-m-horizontal-on-sm pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
   />
 </DocumentFragment>
 `;
@@ -159,7 +159,7 @@ exports[`Description List alignment breakpoints 1`] = `
 exports[`Description List default 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-c-description-list"
+    class="pf-v5-c-description-list"
   />
 </DocumentFragment>
 `;

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

@@ -3,7 +3,7 @@
 exports[`divider using div 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-divider"
+    class="pf-v5-c-divider"
     role="separator"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`divider using div 1`] = `
 exports[`divider using hr 1`] = `
 <DocumentFragment>
   <hr
-    class="pf-c-divider"
+    class="pf-v5-c-divider"
   />
 </DocumentFragment>
 `;
@@ -20,7 +20,7 @@ exports[`divider using hr 1`] = `
 exports[`divider using li 1`] = `
 <DocumentFragment>
   <li
-    class="pf-c-divider"
+    class="pf-v5-c-divider"
     role="separator"
   />
 </DocumentFragment>
@@ -29,7 +29,7 @@ exports[`divider using li 1`] = `
 exports[`vertical divider 1`] = `
 <DocumentFragment>
   <div
-    class="pf-l-flex"
+    class="pf-v5-l-flex"
   >
     <div
       class=""
@@ -37,7 +37,7 @@ exports[`vertical divider 1`] = `
       first item
     </div>
     <hr
-      class="pf-c-divider pf-m-vertical"
+      class="pf-v5-c-divider pf-m-vertical"
     />
     <div
       class=""

package/src/components/DragDrop/Draggable.tsx

@@ -151,7 +151,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
   const onMouseMoveWhileDragging = (ev: MouseEvent, droppableItems: DroppableItem[], blankDivRect: DOMRect) => {
     // Compute each time what droppable node we are hovering over
     hoveringDroppable = null;
-    droppableItems.forEach(droppableItem => {
+    droppableItems.forEach((droppableItem) => {
       const { node, rect, isDraggingHost, draggableNodes, draggableNodesRects } = droppableItem;
       if (overlaps(ev, rect)) {
         // Add valid dropzone style
@@ -204,7 +204,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     // Iterate through sibling draggable nodes to reposition them and store correct hoveringIndex for onDrop
     hoveringIndex = null;
     if (hoveringDroppable) {
-      const { draggableNodes, draggableNodesRects } = droppableItems.find(item => item.node === hoveringDroppable);
+      const { draggableNodes, draggableNodesRects } = droppableItems.find((item) => item.node === hoveringDroppable);
       let lastTranslate = 0;
       draggableNodes.forEach((n, i) => {
         n.style.transition = 'transform 0.5s cubic-bezier(0.2, 1, 0.1, 1) 0s';
@@ -256,8 +256,8 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
         rect: cur.getBoundingClientRect(),
         isDraggingHost,
         // We don't want styles to apply to the left behind div in onMouseMoveWhileDragging
-        draggableNodes: draggableNodes.map(node => (node === dragging ? node.cloneNode(false) : node)),
-        draggableNodesRects: draggableNodes.map(node => node.getBoundingClientRect())
+        draggableNodes: draggableNodes.map((node) => (node === dragging ? node.cloneNode(false) : node)),
+        draggableNodesRects: draggableNodes.map((node) => node.getBoundingClientRect())
       };
       acc.push(droppableItem);
       return acc;
@@ -275,7 +275,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       left: rect.x,
       width: rect.width,
       height: rect.height,
-      '--pf-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
+      '--pf-v5-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
       position: 'fixed',
       zIndex: 5000
     } as any;
@@ -285,7 +285,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     startY = ev.pageY;
     startYOffset = startY - rect.y;
     setIsDragging(true);
-    mouseMoveListener = ev => onMouseMoveWhileDragging(ev as MouseEvent, droppableItems, rect);
+    mouseMoveListener = (ev) => onMouseMoveWhileDragging(ev as MouseEvent, droppableItems, rect);
     mouseUpListener = () => onMouseUpWhileDragging(droppableItems);
     document.addEventListener('mousemove', mouseMoveListener);
     document.addEventListener('mouseup', mouseUpListener);

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

@@ -3,12 +3,12 @@
 exports[`renders some divs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-droppable"
+    class="pf-v5-c-droppable"
     data-pf-droppable="defaultZone"
     data-pf-droppableid="dropzone"
   >
     <div
-      class="pf-c-draggable"
+      class="pf-v5-c-draggable"
       data-pf-draggable-zone="defaultZone"
       draggable="true"
       id="draggable1"
@@ -16,7 +16,7 @@ exports[`renders some divs 1`] = `
       item 1
     </div>
     <div
-      class="pf-c-draggable"
+      class="pf-v5-c-draggable"
       data-pf-draggable-zone="defaultZone"
       draggable="true"
       id="draggable2"

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -163,7 +163,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
@@ -232,19 +232,19 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};
   if (defaultSize) {
-    boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis'] = defaultSize;
+    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis'] = defaultSize;
   }
   if (minSize) {
-    boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--min'] = minSize;
+    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--min'] = minSize;
   }
   if (maxSize) {
-    boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
+    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--max'] = maxSize;
   }
   return (
     <GenerateId prefix="pf-drawer-panel-">
@@ -261,7 +261,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
           )}
           ref={panel}
           onTransitionEnd={(ev) => {
-            if (ev.target as HTMLElement === panel.current) {
+            if ((ev.target as HTMLElement) === panel.current) {
               if (!hidden && ev.nativeEvent.propertyName === 'transform') {
                 onExpand(ev);
               }

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-drawer__main"
+    class="pf-v5-c-drawer__main"
   >
     <div
-      class="pf-c-drawer__content ''"
+      class="pf-v5-c-drawer__content ''"
     >
       <div>
         ReactNode

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-drawer__panel ''"
+    class="pf-v5-c-drawer__panel ''"
     hidden=""
     id="pf-drawer-panel-0"
   />