diff --git a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx index c1d985184a..d6be07888c 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx @@ -101,11 +101,11 @@ class TitleEditor extends Component { this.props.titleInfo.Title.actionIds().forEach((actionRef, idx) => { const actionMetadata = this.props.controller.getAction({ name: actionRef }); const action = this.actionFactory.generateAction(`${actionRef}-${idx}`, actionMetadata); - actions.push(
+ actions.push(
{action}
); }); - return (
+ return (
{actions}
); } diff --git a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss index f2c2852dcf..41ff237c77 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss @@ -21,27 +21,45 @@ .properties-title-editor-actions { padding: $spacing-05 0 0 $spacing-05; + display: flex; + flex-flow: wrap; - .properties-action-button { - padding-bottom: $spacing-05; - width: 100%; + .properties-title-editor-action-btn { + margin-right: $spacing-05; - button { - width: 100%; - overflow: hidden; - white-space: nowrap; - display: block; - text-overflow: ellipsis; + .properties-action-button { + padding-bottom: $spacing-05; } - .cds--btn { // Override Carbon padding within a button to allow more text to display - --cds-layout-density-padding-inline-local: 0; - padding: 6px 15px; + .properties-action-image { + padding: 0; } } + } +} + +// Action buttons within a small right flyout will take up 50% width and display 2 buttons per row +.properties-right-flyout.properties-small { + .properties-title-editor-actions { + .properties-title-editor-action-btn { + width: calc(50% - #{$spacing-05}); - .properties-action-image { - padding: 0; + .properties-action-button { + width: 100%; + + button { + width: 100%; + overflow: hidden; + white-space: nowrap; + display: block; + text-overflow: ellipsis; + } + + .cds--btn { // Override Carbon padding within a button to allow more text to display + --cds-layout-density-padding-inline-local: 0; + padding: 6px 15px; + } + } } } } diff --git a/canvas_modules/harness/test_resources/parameterDefs/action_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/action_paramDef.json index 99dd092380..2ad0c9b055 100644 --- a/canvas_modules/harness/test_resources/parameterDefs/action_paramDef.json +++ b/canvas_modules/harness/test_resources/parameterDefs/action_paramDef.json @@ -158,7 +158,8 @@ "title_info": { "action_refs": [ "increment", - "run_action" + "run_action", + "decrement" ] }, "parameter_info": [