fix overlay styling, glob import

patternfly · Jul 8, 2024 · 78a9a25 · 78a9a25
1 parent 590395d
commit 78a9a25
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DragDropContainer.tsx
@@ -25,7 +25,7 @@ import { Draggable } from './Draggable';
 import { DraggableDataListItem } from './DraggableDataListItem';
 import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem';
 import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
-import { canUseDOM } from '@patternfly/react-core';
+import { DataList, canUseDOM } from '@patternfly/react-core';
 
 export type DragDropContainerDragStartEvent = DragStartEvent;
 export type DragDropContainerDragOverEvent = DragOverEvent;
@@ -64,6 +64,8 @@ export interface DragDropContainerProps extends DndContextProps {
    * TableComposable variant wraps the draggable objects in TODO
    * */
   variant?: 'default' | 'DataList' | 'DualListSelectorList' | 'TableComposable';
+  /** Additional classes to apply to the drag overlay */
+  overlayProps?: any;
 }
 
 export const DragDropContainer: React.FunctionComponent<DragDropContainerProps> = ({
@@ -74,6 +76,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   onDrop = () => {},
   onCancel = () => {},
   variant = 'default',
+  overlayProps,
   ...props
 }: DragDropContainerProps) => {
   const itemsCopy = React.useRef<Record<string, DraggableObject[]> | null>(null);
@@ -272,7 +275,13 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
           } as React.CSSProperties
         }
       >
-        {content}
+        {variant === 'DualListSelectorList' && <ul className="pf-v5-c-dual-list-selector">{content}</ul>}
+        {variant === 'DataList' && (
+          <DataList aria-label="draggable overlay" {...overlayProps}>
+            {content}
+          </DataList>
+        )}
+        {variant !== 'DualListSelectorList' && variant !== 'DataList' && content}
       </div>
     );
   };

diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx
@@ -26,6 +26,8 @@ export interface DragDropSortProps extends DndContextProps {
    * TableComposable variant wraps the draggable objects in TODO
    * */
   variant?: 'default' | 'defaultWithHandle' | 'DataList' | 'DualListSelectorList' | 'TableComposable';
+  /** Additional classes to apply to the drag overlay */
+  overlayProps?: string;
 }
 
 export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
@@ -34,6 +36,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
   onDrag = () => {},
   variant = 'default',
   children,
+  overlayProps,
   ...props
 }: DragDropSortProps) => {
   const itemIds = React.useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
@@ -58,6 +61,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
       items={{ [dropZoneId]: items }}
       onDrag={handleDragStart}
       onDrop={handleDragEnd}
+      overlayProps={overlayProps}
     >
       <Droppable items={items} id={dropZoneId} variant={variant} {...(children && { wrapper: children })} />
     </DragDropContainer>

diff --git a/packages/react-drag-drop/src/next/components/DragDrop/examples/DataListDraggable.tsx b/packages/react-drag-drop/src/next/components/DragDrop/examples/DataListDraggable.tsx
@@ -31,6 +31,7 @@ export const DataListDraggable: React.FunctionComponent = (props) => {
         setItems(newItems);
       }}
       variant="DataList"
+      overlayProps={{ isCompact: true }}
     >
       <DataList aria-label="draggable data list example" isCompact {...props} />
     </DragDropSort>

diff --git a/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDropContainerDataList.tsx b/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDropContainerDataList.tsx
@@ -48,6 +48,7 @@ export const DataListDraggable: React.FunctionComponent = (props) => {
         setItems(prevItems);
       }}
       variant="DataList"
+      overlayProps={{ isCompact: true }}
     >
       <Grid hasGutter>
         <GridItem span={6}>

diff --git a/packages/react-styles/scripts/generateClassMaps.mjs b/packages/react-styles/scripts/generateClassMaps.mjs
@@ -1,8 +1,9 @@
 import { camelCase } from 'change-case';
-import { glob } from 'glob';
+import pkg from 'glob';
 import fs from 'node:fs';
 import path from 'node:path';
 import url from 'node:url';
+const { glob } = pkg;
 
 /**
  * @param {string} cssString - CSS string