fix(table): correct alignment with a table cell that contains a button by sg00dwin · Pull Request #7551 · patternfly/patternfly

sg00dwin · 2025-05-28T14:30:05Z

Adds a new html example of table td cells that contain a button. A new modifier class sets cell padding so the button is aligned within the row of elements.

https://patternfly-pr-7551.surge.sh/components/table/html/table-with-buttons-and-actions/

patternfly-build · 2025-05-28T14:34:10Z

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

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

srambach

WDYT about mobile view? @andrew-ronaldson

andrew-ronaldson · 2025-05-29T18:34:21Z

Good question. I'd prefer if the button wasvertical-align:center Would that make that row look weird?

sg00dwin · 2025-06-10T22:07:29Z

@andrew-ronaldson I updated the mobile view so that the td cell content are align-items: center

srambach · 2025-06-12T15:33:09Z

The only thing is, at mobile width, anything that wraps is now going to be centered vertically.

Since you have the .#{$table}__td-button class, can you scope the vertical alignment just to that?

sg00dwin · 2025-06-12T18:23:41Z

Targeted .#{$table}__td-button with specificity to align center!

srambach

Just one nit on the name - if that's good then it all looks good to me!

srambach · 2025-06-13T13:21:12Z

src/patternfly/components/Table/examples/Table.md

 | `.pf-v6-c-table__check` | `<th>`, `<td>` | Initiates a checkbox or radio input table cell. |
 | `.pf-v6-c-table__action` | `<th>`, `<td>` | Initiates an action table cell. |
 | `.pf-v6-c-table__inline-edit-action` | `<th>`, `<td>` | Initiates an inline edit action table cell. |
+| `.pf-v6-c-table__td-button` | `<td>` | Initiates an table cell with button. |


Just want to get @mcoker's thought about the name of this element - this is a tough one and I feel like it should be pf-v6-c-table__td--button (double hyphen) but I am not sure.

mcoker

I would probably call that "action" instead of button since it can hold anything form-element size, which would most likely be buttons and menu toggles, and we generally refer to those as actions instead of buttons. We already have __action as the action cell, but I think .pf-m-action would work since it's more generic to denote any cell has an action (or actions), and you can have multiple of them, compared to __action which is the action cell for the row. wdyt?

srambach · 2025-06-16T13:24:36Z

I would probably call that "action" instead of button since it can hold anything form-element size, which would most likely be buttons and menu toggles, and we generally refer to those as actions instead of buttons. We already have __action as the action cell, but I think .pf-m-action would work since it's more generic to denote any cell has an action (or actions), and you can have multiple of them, compared to __action which is the action cell for the row. wdyt?

Yeah, I think that makes sense to me

sg00dwin · 2025-06-16T14:17:58Z

@mcoker @srambach Updated modifier class name
8cebd30

srambach · 2025-06-16T14:45:14Z

src/patternfly/components/Table/table.scss

+  --#{$table}__td-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__td-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+
+  // * Table compact cell with button
+  --#{$table}--m-compact__td-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-compact__td-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);


Should these variable names also change to --m-action ?

These are now updated with modifier name

sg00dwin · 2025-06-18T14:53:06Z

@mcoker @srambach PR has been updated addressing latest comments and ready for another review.

srambach

L 🥳 TM!

mcoker

lgtm! Just a couple of small comments

mcoker · 2025-06-18T15:04:55Z

src/patternfly/components/Table/table.scss

    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__action--PaddingBlockEnd);
  }

+  .pf-m-action {


Can you tie this modifier class to the table element it applies to?

Suggested change

.pf-m-action {

.#{$table}__td.pf-m-action {

mcoker · 2025-06-18T15:08:15Z

src/patternfly/components/Table/examples/Table.md

+        6
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span class="pf-v6-c-table__text">


Can you make this a regular ? the __text element works, but it's more intended for use with the modifiers that manipulate text (nowrap, truncate, etc)

Suggested change

mcoker · 2025-06-18T15:08:28Z

src/patternfly/components/Table/examples/Table.md

+        2
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span class="pf-v6-c-table__text">


Suggested change

mcoker · 2025-06-18T15:08:40Z

src/patternfly/components/Table/examples/Table.md

+        7
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span class="pf-v6-c-table__text">


Suggested change

mcoker

🎃

patternfly-build · 2025-06-18T19:21:53Z

🎉 This PR is included in version 6.3.0-prerelease.36 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(table): correct alignment with a table cell that contains a button

71125d7

sg00dwin assigned mcoker May 28, 2025

srambach reviewed May 29, 2025

View reviewed changes

kmcfaul linked an issue Jun 4, 2025 that may be closed by this pull request

Bug - Table - Actions dropdown misaligned with button #7534

Closed

3 tasks

fix(table): center td contents so buttons align with text at mobile view

5aa786f

sg00dwin force-pushed the 7534-table-actions-button-alignment-bug branch from c324ea9 to 5aa786f Compare June 12, 2025 19:52

srambach approved these changes Jun 13, 2025

View reviewed changes

mcoker reviewed Jun 13, 2025

View reviewed changes

fix(table): rename table cell modifier class

8cebd30

srambach reviewed Jun 16, 2025

View reviewed changes

fix(table): rename custom property with -m-action

a170611

srambach approved these changes Jun 18, 2025

View reviewed changes

mcoker requested changes Jun 18, 2025

View reviewed changes

mcoker mentioned this pull request Jun 18, 2025

Table - add "action" variant for cells with actions patternfly/patternfly-react#11875

Closed

fix(table): remove class from example and tie modifier to table element

3728284

mcoker approved these changes Jun 18, 2025

View reviewed changes

mcoker merged commit 3bb2df2 into patternfly:main Jun 18, 2025
4 checks passed

patternfly-build added the released on @prerelease label Jun 18, 2025

mcoker mentioned this pull request Jul 16, 2025

fix(table): fix animation style conflicts #7663

Merged

Conversation

sg00dwin commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson commented May 29, 2025

Uh oh!

sg00dwin commented Jun 10, 2025

Uh oh!

srambach commented Jun 12, 2025

Uh oh!

sg00dwin commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

srambach Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

srambach commented Jun 16, 2025

Uh oh!

sg00dwin commented Jun 16, 2025

Uh oh!

srambach Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

sg00dwin Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

sg00dwin commented Jun 18, 2025

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sg00dwin commented May 28, 2025 •

edited

Loading

patternfly-build commented May 28, 2025 •

edited

Loading

sg00dwin commented Jun 12, 2025 •

edited

Loading