#2112 Title action buttons style updates (#2113)

Signed-off-by: Carita Ou <[email protected]>
elyra-ai · Aug 26, 2024 · 62b5521 · 62b5521
1 parent f5f341d
commit 62b5521
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
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
@@ -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(<div className="cds--css-grid-column cds--col-span-50" key={`${actionRef}-${idx}`}>
+				actions.push(<div className="properties-title-editor-action-btn" key={`${actionRef}-${idx}`}>
 					{action}
 				</div>);
 			});
-			return (<div className="properties-title-editor-actions cds--css-grid cds--css-grid--narrow">
+			return (<div className="properties-title-editor-actions">
 				{actions}
 			</div>);
 		}

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
@@ -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
@@ -158,7 +158,8 @@
     "title_info": {
       "action_refs": [
         "increment",
-        "run_action"
+        "run_action",
+        "decrement"
       ]
     },
     "parameter_info": [