Skip to content

fix: Updated drag and drop to use the correct glass theme. #12306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dlabaj wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: Updated drag and drop to use the correct glass theme. #12306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5503d97
fix: Updated drag and drop to use the correct glass theme.
dlabaj Mar 31, 2026
c1e2dc9
chore: updated with review comments.
dlabaj Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@patternfly/react-styles';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import dragButtonStyles from '@patternfly/react-styles/css/components/DataList/data-list';
import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
import RhUiGripVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-grip-vertical-fill-icon';

export interface DragButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'> {
/** Additional classes added to the drag button */
Expand Down Expand Up @@ -29,7 +29,7 @@ export const DragButton: React.FunctionComponent<DragButtonProps> = ({
aria-labelledby={ariaLabelledby}
icon={
<span className={css(dragButtonStyles.dataListItemDraggableIcon)}>
<GripVerticalIcon />
<RhUiGripVerticalFillIcon />
</span>
}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
style={
{
'--pf-v6-c-draggable--m-dragging--BackgroundColor':
'var(--pf-t--global--background--color--primary--default)'
'var(--pf-t--global--background--color--floating--default)'
} as React.CSSProperties
}
>
Expand Down
60 changes: 12 additions & 48 deletions ...es/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,12 @@ exports[`renders some divs 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M12.75 1h-5.5C6.561 1 6 1.561 6 2.25v5.5C6 8.439 6.561 9 7.25 9h5.5C13.439 9 14 8.439 14 7.75v-5.5C14 1.561 13.439 1 12.75 1ZM12 7H8V3h4v4Zm12.75-6h-5.5C18.561 1 18 1.561 18 2.25v5.5c0 .689.561 1.25 1.25 1.25h5.5C25.439 9 26 8.439 26 7.75v-5.5C26 1.561 25.439 1 24.75 1ZM24 7h-4V3h4v4Zm-11.25 5h-5.5C6.561 12 6 12.561 6 13.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 18H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 18h-4v-4h4v4Zm-11.25 5h-5.5C6.561 23 6 23.561 6 24.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 29H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 29h-4v-4h4v4Z"
/>
</svg>
<path
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -86,24 +74,12 @@ exports[`renders some divs 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M12.75 1h-5.5C6.561 1 6 1.561 6 2.25v5.5C6 8.439 6.561 9 7.25 9h5.5C13.439 9 14 8.439 14 7.75v-5.5C14 1.561 13.439 1 12.75 1ZM12 7H8V3h4v4Zm12.75-6h-5.5C18.561 1 18 1.561 18 2.25v5.5c0 .689.561 1.25 1.25 1.25h5.5C25.439 9 26 8.439 26 7.75v-5.5C26 1.561 25.439 1 24.75 1ZM24 7h-4V3h4v4Zm-11.25 5h-5.5C6.561 12 6 12.561 6 13.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 18H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 18h-4v-4h4v4Zm-11.25 5h-5.5C6.561 23 6 23.561 6 24.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 29H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 29h-4v-4h4v4Z"
/>
</svg>
<path
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -138,24 +114,12 @@ exports[`renders some divs 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M12.75 1h-5.5C6.561 1 6 1.561 6 2.25v5.5C6 8.439 6.561 9 7.25 9h5.5C13.439 9 14 8.439 14 7.75v-5.5C14 1.561 13.439 1 12.75 1ZM12 7H8V3h4v4Zm12.75-6h-5.5C18.561 1 18 1.561 18 2.25v5.5c0 .689.561 1.25 1.25 1.25h5.5C25.439 9 26 8.439 26 7.75v-5.5C26 1.561 25.439 1 24.75 1ZM24 7h-4V3h4v4Zm-11.25 5h-5.5C6.561 12 6 12.561 6 13.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 18H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 18h-4v-4h4v4Zm-11.25 5h-5.5C6.561 23 6 23.561 6 24.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM12 29H8v-4h4v4Zm12.75-6h-5.5c-.689 0-1.25.561-1.25 1.25v5.5c0 .689.561 1.25 1.25 1.25h5.5c.689 0 1.25-.561 1.25-1.25v-5.5c0-.689-.561-1.25-1.25-1.25ZM24 29h-4v-4h4v4Z"
/>
</svg>
<path
d="M13.75 2.25v5.5c0 .551-.448 1-1 1h-5.5c-.552 0-1-.449-1-1v-5.5c0-.551.448-1 1-1h5.5c.552 0 1 .449 1 1Zm11-1h-5.5c-.552 0-1 .449-1 1v5.5c0 .551.448 1 1 1h5.5c.552 0 1-.449 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm12 0h-5.5c-.552 0-1 .449-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5c0-.551-.448-1-1-1Zm-12 11h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Zm12 0h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1Z"
/>
</svg>
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-icons/scripts/icons/pfToRhIcons.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const pfToRhIcons = {
FolderIcon: { name: 'rh-ui-folder', icon: getIconData('rh-ui-folder') },
FolderOpenIcon: { name: 'rh-ui-folder-open', icon: getIconData('rh-ui-folder-open') },
GripHorizontalIcon: { name: 'rh-ui-grip-horizontal', icon: getIconData('rh-ui-grip-horizontal') },
GripVerticalIcon: { name: 'rh-ui-grip-vertical', icon: getIconData('rh-ui-grip-vertical') },
GripVerticalIcon: { name: 'rh-ui-grip-vertical-fill', icon: getIconData('rh-ui-grip-vertical-fill') },
Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we update the drag icon used in DragButton to the new RhUiGripVerticalFillIcon directly? We can still keep this update for product team migration.

Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It also looks like the PR needs a snapshot update.

HistoryIcon: { name: 'rh-ui-history', icon: getIconData('rh-ui-history') },
HomeIcon: { name: 'rh-ui-home', icon: getIconData('rh-ui-home') },
ImageIcon: { name: 'rh-ui-image', icon: getIconData('rh-ui-image') },
Expand Down
Loading