Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(data-list): center align the drag icon within the row of core example #7582

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

Jump to bottom
Open
sg00dwin wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(data-list): center align the drag icon within the row of core example #7582

sg00dwin wants to merge 2 commits into from

Conversation

@sg00dwin
Copy link
Contributor

@sg00dwin sg00dwin commented Jun 26, 2025 •
edited by mcoker
Loading

@patternfly-build
Copy link
Collaborator

patternfly-build commented Jun 26, 2025 •
edited
Loading

Preview: https://patternfly-pr-7582.surge.sh

A11y report: https://patternfly-pr-7582-a11y.surge.sh

srambach
srambach reviewed Jun 27, 2025
View reviewed changes
Copy link
Member

@srambach srambach left a comment

Choose a reason for hiding this comment

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

These changes look good to me. A couple of notes -

  • @mcoker does this qualify as a breaking change? We've added pf-v6-c-button and pf-m-plain which I think would be ok? But also removed pf-v6-c-data-list__item-draggable-icon
  • if removing pf-v6-c-data-list__item-draggable-icon is ok, then I think we can remove the styling for it (just icon color) and remove it from the docs. Otherwise, I guess we need to add that back onto the icon span?

mcoker
mcoker requested changes Jun 27, 2025
View reviewed changes
Copy link
Contributor

@mcoker mcoker left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Looks good, just a couple of updates please. I left a comment about removing the disabled attribute from an hbs block - we should also replace disabled with data-list-item-draggable-button--IsDisabled=true on this line, too

patternfly/src/patternfly/components/DataList/examples/DataList.md

Line 910 in cb3fa15

{{> data-list-item-draggable-button data-list-item-draggable-button--attribute=(concat 'id="' data-list--id '-draggable-button-3" aria-describedby="draggable-help" aria-labelledby="' data-list--id '-draggable-button-3 ' data-list--id '-item-3" disabled')}}

Will answer @srambach's comments in another comment

src/patternfly/components/Button/button.hbs Outdated
button--IsBlock='pf-m-block'
button--IsSettings='pf-m-settings'
button--IsHamburger='pf-m-hamburger'
button--IsDraggable='pf-v6-c-data-list__item-draggable-button'
Copy link
Contributor

@mcoker mcoker Jun 27, 2025

Choose a reason for hiding this comment

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

This this is a class specific to data-list, can you take this out and move it to data-list-item-draggable-button?

I would just remove this line, then in data-list-item-draggable-button.hbs, just pass button--modifier=(concat pfv "data-list__item-draggable-button"). My concat syntax may be wrong 😅 Just want to get the hard-coded pf-v6-c- part out of the string.

src/patternfly/components/DataList/examples/DataList.md Outdated
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{> data-list-item-draggable-button data-list-item-draggable-button--modifier="pf-m-disabled" data-list-item-draggable-button--attribute=(concat 'id="' data-list--id '-draggable-button-1" aria-describedby="draggable-help" aria-labelledby="' data-list--id '-draggable-button-1 ' data-list--id '-item-1" disabled')}}
{{> data-list-item-draggable-button data-list-item-draggable-button--IsDisabled=true data-list-item-draggable-button--attribute=(concat 'id="' data-list--id '-draggable-button-1" aria-describedby="draggable-help" aria-labelledby="' data-list--id '-draggable-button-1 ' data-list--id '-item-1" disabled')}}
Copy link
Contributor

@mcoker mcoker Jun 27, 2025

Choose a reason for hiding this comment

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

Suggested change
{{> data-list-item-draggable-button data-list-item-draggable-button--IsDisabled=true data-list-item-draggable-button--attribute=(concat 'id="' data-list--id '-draggable-button-1" aria-describedby="draggable-help" aria-labelledby="' data-list--id '-draggable-button-1 ' data-list--id '-item-1" disabled')}}
{{> data-list-item-draggable-button data-list-item-draggable-button--IsDisabled=true data-list-item-draggable-button--attribute=(concat 'id="' data-list--id '-draggable-button-1" aria-describedby="draggable-help" aria-labelledby="' data-list--id '-draggable-button-1 ' data-list--id '-item-1"')}}

Just a nit, but you can remove the disabled attr here now that you're passing button--IsDisabled to the button. That will add the disabled attr

patternfly/src/patternfly/components/Button/button.hbs

Lines 73 to 77 in cb3fa15

{{#if button--IsDisabled}}
{{#unless (concat button--type button--IsSpan button--IsAnchor)}}
disabled
{{/unless}}
{{/if}}

@mcoker
Copy link
Contributor

mcoker commented Jun 27, 2025

@srambach good catches!

@mcoker does this qualify as a breaking change? We've added pf-v6-c-button and pf-m-plain which I think would be ok? But also removed pf-v6-c-data-list__item-draggable-icon

The button classes are in the react component, so IMO that part of the update just fixes a bug in the core docs and shouldn't be breaking. However we do need to add .pf-v6-c-data-list__item-draggable-icon back to match the react component. And I think we should remove the styles that set the icon color, too, and just use the button's icon colors. Though we'll want to leave the vars in place, so if a user has set them, they'll continue to work as they did before.

I think that update would be this:

if removing pf-v6-c-data-list__item-draggable-icon is ok, then I think we can remove the styling for it (just icon color) and remove it from the docs. Otherwise, I guess we need to add that back onto the icon span?

Yep! Need to add it back.

@sg00dwin
Copy link
Contributor Author

sg00dwin commented Jun 30, 2025

@mcoker Addressed comments

  • add data-list-item-draggable-icon back
  • remove/replace disabled attributes in .md
  • move class from button to draggable-button as a button--modifier
  • remove the styles that set the icon color and just use the button's icon colors

@github-actions
Copy link

github-actions bot commented Sep 11, 2025

This PR has been automatically marked as stale because it has not had activity in the last 60 days.

@github-actions github-actions bot added the Stale label Sep 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@srambach srambach srambach left review comments

@mcoker mcoker mcoker requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@mcoker mcoker

Labels

Stale

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - data-list - compact button for draggable element isn't spaced correctly

4 participants

@sg00dwin @patternfly-build @mcoker @srambach