elyra-ai#1970 Replace light prop with Layer component in Carbon compo…

…nents (elyra-ai#1971)
nmgokhale · May 21, 2024 · 62323fa · 62323fa
1 parent 6396271
commit 62323fa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 43 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx
@@ -270,7 +270,6 @@ class EditorForm extends React.Component {
 		return (
 			<Tabs key={"tab." + key}
 				selectedIndex={modalSelected}
-				light={this.props.controller.getLight()}
 			>
 				<TabList className="properties-primaryTabs" aria-label={tabListAriaLabel}>
 					{tabLists}

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
@@ -20,7 +20,7 @@ import { connect } from "react-redux";
 import { setTitle } from "./../../actions";
 import Isvg from "react-inlinesvg";
 import { get } from "lodash";
-import { TextInput, Button } from "@carbon/react";
+import { TextInput, Button, Layer } from "@carbon/react";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
 import * as PropertyUtils from "./../../util/property-utils";
 import classNames from "classnames";
@@ -181,25 +181,26 @@ class TitleEditor extends Component {
 					}
 				)}
 				>
-					<TextInput
-						id={this.id}
-						ref={this.textInputRef}
-						value={this.props.title}
-						onChange={this.handleTitleChange}
-						onKeyDown={(e) => this._handleKeyPress(e)}
-						readOnly={this.props.labelEditable === false} // shows a non editable icon
-						labelText={this.labelText}
-						hideLabel
-						size="sm"
-						onFocus={this.textInputOnFocus}
-						onBlur={this.textInputOnBlur}
-						light={this.props.controller.getLight()}
-						invalid={titleWithErrror}
-						invalidText={get(this.state.titleValidation, "message")}
-						warn={titleWithWarning}
-						warnText={get(this.state.titleValidation, "message")}
-						{... this.state.focused && { className: "properties-title-editor-focused" }}
-					/>
+					<Layer level={this.props.controller.getLight() ? 1 : 0} className="properties-title-editor-layer">
+						<TextInput
+							id={this.id}
+							ref={this.textInputRef}
+							value={this.props.title}
+							onChange={this.handleTitleChange}
+							onKeyDown={(e) => this._handleKeyPress(e)}
+							readOnly={this.props.labelEditable === false} // shows a non editable icon
+							labelText={this.labelText}
+							hideLabel
+							size="sm"
+							onFocus={this.textInputOnFocus}
+							onBlur={this.textInputOnBlur}
+							invalid={titleWithErrror}
+							invalidText={get(this.state.titleValidation, "message")}
+							warn={titleWithWarning}
+							warnText={get(this.state.titleValidation, "message")}
+							{... this.state.focused && { className: "properties-title-editor-focused" }}
+						/>
+					</Layer>
 					{titleValidationTypes.includes(get(this.state.titleValidation, "type")) ? null : propertiesTitleEdit}
 				</div>
 				{!this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")) ? helpButton : null}

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
@@ -53,10 +53,11 @@
 	&.properties-title-editor-with-help {
 		width: calc(100% - #{$spacing-07} - #{$spacing-03}); // subtract the size of the help button and 8px to align with Close icon when applyOnBlur is set
 	}
-	.cds--form-item.cds--text-input-wrapper {
+	.properties-title-editor-layer {
 		// allow edit icon to be at the end of text input
 		width: 100%;
-
+	}
+	.cds--form-item.cds--text-input-wrapper {
 		input { //override styling from carbon
 			@include type-style("productive-heading-02");
 			color: $text-primary;

diff --git a/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx b/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx
@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Add } from "@carbon/react/icons";
 import { Button } from "@carbon/react";
-import { Switch, ContentSwitcher, Dropdown } from "@carbon/react";
+import { Switch, ContentSwitcher, Dropdown, Layer } from "@carbon/react";
 import FlexibleTable from "./../../../components/flexible-table/flexible-table";
 import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip";
 import { MESSAGE_KEYS, EXPRESSION_TABLE_ROWS, SORT_DIRECTION, ROW_SELECTION } from "./../../../constants/constants";
@@ -605,15 +605,16 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		};
 		return (
 			<div className="properties-expression-function-select">
-				<Dropdown
-					id={"properties-expression-function-select-dropdown-" + this.uuid}
-					light={this.props.controller.getLight()}
-					label={label}
-					items={items}
-					onChange={this.onFunctionCatChange}
-					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-					titleText={header}
-				/>
+				<Layer level={this.props.controller.getLight() ? 1 : 0}>
+					<Dropdown
+						id={"properties-expression-function-select-dropdown-" + this.uuid}
+						label={label}
+						items={items}
+						onChange={this.onFunctionCatChange}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						titleText={header}
+					/>
+				</Layer>
 			</div>);
 	}
 
@@ -634,15 +635,16 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		};
 		return (
 			<div className="properties-expression-field-select">
-				<Dropdown
-					id={"properties-expression-field-select-dropdown-" + this.uuid}
-					light={this.props.controller.getLight()}
-					label={label}
-					items={newItems}
-					onChange={this.onFieldCatChange}
-					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-					titleText={header}
-				/>
+				<Layer level={this.props.controller.getLight() ? 1 : 0}>
+					<Dropdown
+						id={"properties-expression-field-select-dropdown-" + this.uuid}
+						label={label}
+						items={newItems}
+						onChange={this.onFieldCatChange}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						titleText={header}
+					/>
+				</Layer>
 			</div>);
 	}
 

diff --git a/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.jsx b/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.jsx
@@ -86,7 +86,6 @@ class Subtabs extends React.Component {
 			>
 				<Tabs
 					selectedIndex={activeTab}
-					light={this.props.controller.getLight()}
 				>
 					<TabList className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })} aria-label={tabListAriaLabel}>
 						{subTabLists}