Skip to content

Conversation

@nmgokhale
Copy link
Member

Fixes #2827

Before -
Action button used to show next to inaccessible controls. This is inconsistent as the action button shows up on next line for accessible controls.
Screenshot 2025-12-05 at 12 30 16 PM

Screenshot 2025-12-05 at 12 43 45 PM

Now -
Action button shows up on next line for both accessible and inaccessible controls.

Screenshot 2025-12-05 at 12 30 21 PM

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

@nmgokhale nmgokhale self-assigned this Dec 5, 2025
const className = classNames(
"properties-control-item",
{ "hide": hidden },
{ "properties-ci-action-item": action && this.props.control.action.actionType === ActionType.IMAGE }
Copy link
Member Author

Choose a reason for hiding this comment

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

This class was added to fix alignment issue for Action image in this PR - #2258

But it was being applied to Action button and custom actions as well. Fixed the condition to add this class for Action image only.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks @nmgokhale, can you add a comment in the code or css that mentions only images will be displayed flex inline and all other actions will be inline by itself?

Copy link
Member Author

Choose a reason for hiding this comment

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

Action buttons have display: inline-block.

For Custom actions, we add display: flex on the parent div. We don't add any CSS for .properties-custom-action class because host app can add a custom class on this div and specify their own CSS.
This is added in documentation -

Common-properties provide a placeholder to add a custom action. Host application should add appropriate CSS for custom action to match with design specs.

Screenshot 2025-12-08 at 12 00 04 PM

@nmgokhale nmgokhale requested a review from caritaou December 5, 2025 20:46
Signed-off-by: Neha Gokhale <[email protected]>
@nmgokhale nmgokhale merged commit a041c5e into elyra-ai:main Dec 8, 2025
3 checks passed
@nmgokhale nmgokhale deleted the action-btn-next-to-table branch December 8, 2025 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

parameters of type table and custom place actions to the right by default

2 participants