Include Error and Warning state color border in slider and improve co…

…verage Signed-off-by: srikant <[email protected]>
elyra-ai · Feb 2, 2024 · 21aef26 · 21aef26
1 parent 06f7f35
commit 21aef26
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx
@@ -46,8 +46,8 @@ class SliderControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 
 		return (
-			<div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN })}
-				data-id={ControlUtils.getDataId(this.props.propertyId)}
+			<div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN },
+				this.props.messageInfo ? this.props.messageInfo.type : null)} data-id={ControlUtils.getDataId(this.props.propertyId)}
 			>
 				<Slider
 					{...validationProps}

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+ 
 .properties-slider {
 	.bx--slider-container { 
 		min-width: 100%;
@@ -22,4 +22,24 @@
 			min-width: unset; // Default Carbon Component Slider has a fixed min-width of 12.5rem so unset it to make it responsive
 		}
 	}
+	.bx--number[data-invalid] { // carbon override to not display error
+		.bx--form-requirement { // carbon override to not display error
+			display: none;
+		}
+	}
+	&.error {
+		input {
+			border: 2px solid $support-01;
+		}
+	}
+	&.warning {
+		input:not([disabled]) {
+			border: 2px solid $support-03;
+		}
+	}
+	.bx--text-input--invalid, .bx--text-input {
+		outline: unset;
+		outline-offset: unset;
+		border: unset;
+	}
 }