@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/common-properties/panels/subtabs/subtabs.jsx

@@ -17,10 +17,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { Tabs, Tab } from "carbon-components-react";
+import { Tabs, Tab, TabList, TabPanel, TabPanels } from "@carbon/react";
 import { getDataId } from "./../../util/control-utils";
-import { STATES } from "./../../constants/constants.js";
+import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
 import { v4 as uuid4 } from "uuid";
+import { formatMessage } from "./../../util/property-utils";
 
 class Subtabs extends React.Component {
 	constructor(props) {
@@ -36,10 +37,12 @@ class Subtabs extends React.Component {
 	}
 
 	render() {
-		const subTabs = [];
+		const subTabLists = [];
+		const subTabPanels = [];
 		let activeTab = 0;
 		let tabIdx = 0;
 		const className = this.props.className ? this.props.className : "";
+		const tabListAriaLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.SUBTABS_TABLIST_LABEL);
 		for (let i = 0; i < this.props.tabs.length; i++) {
 			const tab = this.props.tabs[i];
 			// TODO this might not work once we don't rerender on each change
@@ -50,21 +53,23 @@ class Subtabs extends React.Component {
 					activeTab = tabIdx;
 				}
 
-				subTabs.push(
+				subTabLists.push(
 					<Tab
-						id={`subtabs.tab.${i}-${this.uuid}`}
-						key={`subtabs.tab.${i}-${this.uuid}`}
 						disabled={panelState === STATES.DISABLED}
 						className={classNames("properties-subtab", { "properties-leftnav-subtab-item": this.props.leftnav })}
-						tabIndex={tabIdx}
-						label={tab.text}
 						title={tab.text}
 						onClick={this.onClick.bind(this, tab.group)}
 						data-id={getDataId({ name: tab.group })}
 					>
-						{subPanelItems}
+						{tab.text}
 					</Tab>
 				);
+
+				subTabPanels.push(
+					<TabPanel className="properties-subtab-panel">
+						{subPanelItems}
+					</TabPanel>
+				);
 				tabIdx++;
 			}
 		}
@@ -78,12 +83,16 @@ class Subtabs extends React.Component {
 					className
 				)}
 			>
-				<Tabs className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })}
-					selected={activeTab}
+				<Tabs
+					selectedIndex={activeTab}
 					light={this.props.controller.getLight()}
-					tabContentClassName="properties-subtab-panel"
 				>
-					{subTabs}
+					<TabList className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })} aria-label={tabListAriaLabel}>
+						{subTabLists}
+					</TabList>
+					<TabPanels>
+						{subTabPanels}
+					</TabPanels>
 				</Tabs>
 			</div>
 		);

package/src/common-properties/panels/subtabs/subtabs.scss

@@ -15,7 +15,11 @@
  */
 
 .properties-sub-tab-container {
-	.bx--tab-content {
+	.cds--tab--list {
+		width: inherit;
+	}
+
+	.cds--tab-content {
 		// override carbon padding
 		padding-left: 0;
 		padding-right: 0;
@@ -28,57 +32,54 @@ $selected-tab-width: 3px;
 
 .properties-leftnav-container {
 	display: flex;
-	border-top: px solid $ui-03;
+	border-top: px solid $layer-accent-01;
 	height: calc(100% + #{$parent-padding}); // Include padding from parent
 	margin-top: -$spacing-05;
 	margin-left: -$spacing-05;
 	margin-bottom: calc(-1 * #{$parent-padding});
 
+	// TODO: Height of this class will be fixed in issue https://github.ibm.com/NGP-TWC/wdp-abstract-canvas/issues/3699
 	.properties-leftnav-subtabs {
 		width: 282px;
-		background-color: $ui-01;
-		border-right: 1px solid $ui-03;
+		background-color: $layer-01;
+		border-right: 1px solid $layer-accent-01;
 		padding-top: $spacing-02;
 		height: 100%;
 
-		ul.bx--tabs--scrollable__nav {
+		.cds--tab--list {
 			flex-direction: column;
 			width: 282px;
+			height: fit-content;
 		}
 
-		li.bx--tabs--scrollable__nav-item--selected {
-			border-left: $selected-tab-width solid $interactive-04;
-			border-bottom: 0;
-			background-color: $selected-ui;
-
+		button.properties-leftnav-subtab-item {
 			&:hover {
-				background-color: $hover-row;
+				border-bottom: 0;
 			}
 
-			&.properties-leftnav-subtab-item button {
-				border-left: 0;
-			}
-		}
+			border-left: $selected-tab-width solid transparent;
+			border-bottom: 0;
+			transition: none; // Prevent border/outline from flickering
 
-		li.properties-leftnav-subtab-item {
-			&:hover button {
-				border-bottom: 0;
-			}
-			button {
-				border-left: $selected-tab-width solid transparent;
+			&:focus, &:active {
+				outline: 0;
 				border-bottom: 0;
 				transition: none; // Prevent border/outline from flickering
+			}
+		}
 
-				&:focus, &:active {
-					outline: 0;
-					border-bottom: 0;
-					transition: none; // Prevent border/outline from flickering
-				}
+		button.cds--tabs__nav-item--selected {
+			border-left: $selected-tab-width solid $border-interactive;
+			border-bottom: 0;
+			background-color: $layer-selected-01;
+
+			&:hover {
+				background-color: $layer-hover-01;
 			}
 		}
 	}
 
-	div.bx--tab-content {
+	div.cds--tab-content {
 		width: 100%;
 		padding: $spacing-05; // Override padding set by subtab
 	}

package/src/common-properties/panels/summary/summary.jsx

@@ -18,8 +18,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button } from "carbon-components-react";
-import { Add16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { Add } from "@carbon/react/icons";
 import WideFlyout from "./../../components/wide-flyout";
 import Icon from "./../../../icons/icon.jsx";
 
@@ -281,9 +281,9 @@ class SummaryPanel extends React.Component {
 			<Button
 				className="properties-summary-link-button"
 				onClick={this.handleLinkClicked}
-				size="small"
+				size="sm"
 				kind="ghost"
-				renderIcon={Add16}
+				renderIcon={Add}
 			>
 				{this.props.panel.label}
 			</Button>

package/src/common-properties/panels/summary/summary.scss

@@ -33,13 +33,13 @@
 }
 
 .properties-summary-values {
-	border-top: 1px solid $ui-03;
+	border-top: 1px solid $layer-accent-01;
 	padding: $spacing-05 0;
 }
 
 .properties-summary-table {
-	@include carbon--type-style("body-short-01");
-	color: $text-01;
+	@include type-style("body-short-01");
+	color: $text-primary;
 	max-height: 270px;
 	width: 100%;
 	display: flex;
@@ -51,8 +51,8 @@
 }
 
 .properties-summary-label {
-	@include carbon--type-style("productive-heading-01");
-	color: $text-01;
+	@include type-style("productive-heading-01");
+	color: $text-primary;
 	margin-bottom: $spacing-05;
 }
 

package/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -19,7 +19,7 @@ import PropTypes from "prop-types";
 import { injectIntl } from "react-intl";
 import classNames from "classnames";
 import { formatMessage } from "./../../util/property-utils";
-import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
+import { ComposedModal, ModalHeader, ModalBody } from "@carbon/react";
 import { Portal } from "react-portal";
 import { MESSAGE_KEYS } from "./../../constants/constants";
 import PropertiesButtons from "../../components/properties-buttons";

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -16,63 +16,63 @@
 
 $properties-buttons-height: $spacing-10;
 
-.properties-tearsheet-panel.properties-tearsheet-stacked.bx--modal {
-	.bx--modal-container {
+.properties-tearsheet-panel.properties-tearsheet-stacked.cds--modal {
+	.cds--modal-container {
 		max-height: calc(100% - 104px);
 		width: calc(100% - 96px);
 	}
 }
 
-.properties-tearsheet-panel.bx--modal {
+.properties-tearsheet-panel.cds--modal {
 	align-items: flex-end;
 	&.is-visible {
-		.bx--modal-container {
+		.cds--modal-container {
 			transform: translate3d(0, 0, 0);
 			transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
 		}
 	}
-	.bx--modal-container {
+	.cds--modal-container {
 		max-height: calc(100% - 88px);
 		height: 100%;
 		width: calc(100% - 128px);
 		transform: translate3d(0, 500px, 0);
 		transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
-		background-color: $ui-background;
+		background-color: $background;
 	}
 
 	// Start:: These styles are to display only parameters in a Tearsheet
 	.properties-tearsheet-header {
 		padding: $spacing-06 $spacing-07;
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 		margin-bottom: 0;
 		h3 {
-			@include carbon--type-style("productive-heading-04");
+			@include type-style("productive-heading-04");
 		}
 		p {
 			margin-top: $spacing-03;
-			@include carbon--type-style("body-short-01");
+			@include type-style("body-short-01");
 		}
-		background-color: $ui-01;
+		background-color: $layer-01;
 	}
 
 	.properties-tearsheet-body {
 		padding: $spacing-06 $spacing-07;
 		margin-bottom: 0;
-		.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area, .bx--date-picker__input {	// override carbon's modal
-			background-color: $ui-01;
+		.cds--multi-select, .cds--dropdown, .cds--number input[type=number], .cds--text-input, .cds--text-area, .cds--date-picker__input {	// override carbon's modal
+			background-color: $layer-01;
 		}
 	}
 	// End:: These styles are to display only parameters in a Tearsheet
 }
 
 // These styles are to display editor-form in a Tearsheet
-.properties-tearsheet-panel.bx--modal {
+.properties-tearsheet-panel.cds--modal {
 	.properties-tearsheet-header.with-tabs {
 		border-bottom: 0;
 	}
 
 	.properties-tearsheet-header.hide-close-button {
-		button.bx--modal-close {
+		button.cds--modal-close {
 			display: none;
 		}
 	}
@@ -86,8 +86,8 @@ $properties-buttons-height: $spacing-10;
 			}
 
 			.properties-primaryTabs {
-				background-color: $ui-01;
-				border-bottom: 1px solid $ui-03;
+				background-color: $layer-01;
+				border-bottom: 1px solid $layer-accent-01;
 				margin-bottom: $spacing-05;
 				padding-left: $spacing-05;
 			}
@@ -96,7 +96,7 @@ $properties-buttons-height: $spacing-10;
 
 	.properties-tearsheet-body.with-buttons {
 		height: calc(100% - #{$properties-buttons-height});
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 	}
 
 	.properties-tearsheet-body.with-tabs {

package/src/common-properties/panels/text-panel/text-panel.scss

@@ -16,13 +16,13 @@
 
 .properties-text-panel {
 	.panel-label {
-		@include carbon--type-style("productive-heading-01");
-		color: $text-01;
+		@include type-style("productive-heading-01");
+		color: $text-primary;
 		padding-bottom: $spacing-03;
 	}
 	.panel-description {
-		@include carbon--type-style("body-short-01");
-		color: $text-01;
+		@include type-style("body-short-01");
+		color: $text-primary;
 		padding-bottom: $spacing-05;
 	}
 	.tooltip-container {

package/src/common-properties/panels/twisty/twisty.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classNames from "classnames";
-import { Accordion, AccordionItem } from "carbon-components-react";
+import { Accordion, AccordionItem } from "@carbon/react";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
 

package/src/common-properties/panels/twisty/twisty.scss

@@ -18,14 +18,17 @@
 	&.hide {
 		display: none;
 	}
-	.bx--accordion__item {
+	.cds--accordion__item {
 		border-top: 0;
 		margin: 0 -1rem; // Remove 16px outer padding for accordion title and content
 	}
-	.bx--accordion__item--active .bx--accordion__content {
+	.cds--accordion__item--active .cds--accordion__content {
 		// 24px padding between accordion title and content (issue #3106)
 		padding: $spacing-06 $spacing-05 $spacing-05;
 	}
+	.cds--accordion__wrapper {
+		padding: 0;
+	}
 }
 
 .properties-twisty-panel + .properties-control-panel {

package/src/common-properties/properties-main/properties-main.jsx

@@ -30,7 +30,7 @@ import { Size } from "./../constants/form-constants";
 import { validateParameterDefAgainstSchema } from "../schema-validator/properties-schema-validator.js";
 import { has, isEqual, omit, pick, cloneDeep } from "lodash";
 import Icon from "./../../icons/icon.jsx";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import { Provider } from "react-redux";
 import logger from "../../../utils/logger";
 import TitleEditor from "./../components/title-editor";

package/src/common-properties/properties-main/properties-main.scss

@@ -23,7 +23,7 @@ $properties-modal-buttons-height: $spacing-10;
 	width: 0;
 	height: 100%;
 	overflow: hidden;
-	border-left: 1px solid $ui-03;
+	border-left: 1px solid $layer-accent-01;
 	outline: none;
 	&.properties-small {
 		width: $common-properties-small-flyout-width;
@@ -44,7 +44,7 @@ $properties-modal-buttons-height: $spacing-10;
 		}
 	}
 	.properties-btn-resize {
-		transition: visibility $duration--moderate-02, opacity $duration--moderate-02;
+		transition: visibility $duration-moderate-01, opacity $duration-moderate-01;
 		opacity: 0;
 		visibility: hidden;
 		position: absolute;
@@ -53,15 +53,15 @@ $properties-modal-buttons-height: $spacing-10;
 		z-index: 1; // needs to sit on top of common-properties div
 		min-height: 24px;
 		min-width: 24px;
-		background-color: $ui-01;
-		border: 1px $ui-04 solid;
+		background-color: $layer-01;
+		border: 1px $border-strong-01 solid;
 		padding: 2px;
 		justify-content: center;
 		&:hover {
-			background-color: $ui-03;
+			background-color: $layer-accent-01;
 		}
 		svg {
-			fill: $icon-01;
+			fill: $icon-primary;
 			width: 16px;
 			height: 16px;
 		}
@@ -86,9 +86,9 @@ $properties-modal-buttons-height: $spacing-10;
 }
 
 .properties-light-enabled {
-	background-color: $ui-01; // Override theme background-color when light option is true
+	background-color: $layer-01; // Override theme background-color when light option is true
 }
 
 .properties-light-disabled {
-	background-color: $ui-background;
+	background-color: $background;
 }

package/src/context-menu/common-context-menu.jsx

@@ -17,7 +17,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { ChevronRight16 } from "@carbon/icons-react";
+import { ChevronRight } from "@carbon/react/icons";
 import ColorPicker from "../color-picker";
 
 // context-menu sizing
@@ -206,7 +206,7 @@ class CommonContextMenu extends React.Component {
 		const subMenuPosStyle = this.buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect, rtl);
 		const menuItem = menuDefinition[index];
 
-		const icon = (<ChevronRight16 />);
+		const icon = (<ChevronRight />);
 		const menuItemContent = <div>{menuItem.label}{icon} </div>;
 		const menuItemClass = "context-menu-item " + (disabled ? " disabled" : "");
 		const subMenuClass = "context-menu-popover context-menu-submenu" +

package/src/context-menu/context-menu.scss

@@ -15,12 +15,11 @@
  */
 
 /* Context Menu styles - used by react-contextmenu module */
-@import "carbon-components/scss/globals/scss/typography";
 
 .context-menu-popover {
 	cursor: pointer;
 	min-width: 160px;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 0;
@@ -47,7 +46,7 @@
 	height: 30px;
 	padding: 0 1em;
 	clear: both;
-	color: $text-01;
+	color: $text-primary;
 	text-align: inherit;
 	white-space: nowrap;
 	background: 0 0;
@@ -64,7 +63,7 @@
 	&:active,
 	&:focus,
 	&:hover {
-		background: $hover-ui;
+		background: $layer-hover-01;
 		text-decoration: none;
 		border: 0;
 		outline: none; /* Suppress Chrome's blue active border */
@@ -72,7 +71,7 @@
 
 	/* Style for the chevron '>' in menu item that opens a submenu. */
 	& svg {
-		color: $text-01;
+		color: $text-primary;
 		position: absolute;
 		right: 12px;
 	}
@@ -82,6 +81,6 @@
 	height: 1px;
 	display: block;
 	overflow: hidden;
-	background-color: $ui-03;
+	background-color: $layer-accent-01;
 	padding: 0;
 }

package/src/icons/icon.jsx

@@ -23,15 +23,15 @@ import Double from "./../../assets/images/double.svg";
 import Integer from "./../../assets/images/integer.svg";
 import StringIcon from "./../../assets/images/string.svg";
 
-import { WarningFilled16, ErrorFilled16, CheckmarkFilled16, InformationFilled16, Information16,
-	ChevronDown16, ChevronUp16, ChevronLeft16, ChevronRight16,
-	AddAlt16,
-	Settings16,
-	Search16,
-	Warning16,
-	Edit16,
-	CircleDash16, RulerAlt16, ListNumbered16, ListBulleted16, Flag16, ChartVennDiagram16,
-	Calendar16, Time16, EventSchedule16 } from "@carbon/icons-react";
+import { WarningFilled, ErrorFilled, CheckmarkFilled, InformationFilled, Information,
+	ChevronDown, ChevronUp, ChevronLeft, ChevronRight,
+	AddAlt,
+	Settings,
+	Search,
+	Warning,
+	Edit,
+	CircleDash, RulerAlt, ListNumbered, ListBulleted, Flag, ChartVennDiagram,
+	Calendar, Time, EventSchedule } from "@carbon/react/icons";
 
 import { ERROR, WARNING, INFO, SUCCESS, CANVAS_CARBON_ICONS, CONTEXT_MENU_CARBON_ICONS } from "../common-canvas/constants/canvas-constants";
 import { CONDITION_MESSAGE_TYPE, CARBON_ICONS, DATA_TYPE } from "../common-properties/constants/constants";
@@ -54,61 +54,61 @@ export default class Icon extends React.Component {
 		switch (type) {
 		case (ERROR):
 		case (CONDITION_MESSAGE_TYPE.ERROR):
-			return <ErrorFilled16 className={classNames("canvas-state-icon-error", className)} disabled={this.props.disabled} />;
+			return <ErrorFilled className={classNames("canvas-state-icon-error", className)} disabled={this.props.disabled} />;
 		case (WARNING):
 		case (CONDITION_MESSAGE_TYPE.WARNING):
-			return <WarningFilled16 className={classNames("canvas-state-icon-warning", className)} disabled={this.props.disabled} />;
+			return <WarningFilled className={classNames("canvas-state-icon-warning", className)} disabled={this.props.disabled} />;
 		case (SUCCESS):
 		case (CONDITION_MESSAGE_TYPE.SUCCESS):
-			return <CheckmarkFilled16 className={classNames("canvas-state-icon-success", className)} disabled={this.props.disabled} />;
+			return <CheckmarkFilled className={classNames("canvas-state-icon-success", className)} disabled={this.props.disabled} />;
 		case (CONDITION_MESSAGE_TYPE.INFO):
-			return <InformationFilled16 className={classNames("canvas-state-icon-info", className)} disabled={this.props.disabled} />;
+			return <InformationFilled className={classNames("canvas-state-icon-info", className)} disabled={this.props.disabled} />;
 
 		case (INFO):
 		case (CARBON_ICONS.INFORMATION):
-			return <Information16 className={classNames("canvas-state-icon-information-hollow", className)} disabled={this.props.disabled} />;
+			return <Information className={classNames("canvas-state-icon-information-hollow", className)} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.CHEVRONARROWS.UP):
-			return <ChevronUp16 className={className} disabled={this.props.disabled} />;
+			return <ChevronUp className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.CHEVRONARROWS.DOWN):
-			return <ChevronDown16 className={className} disabled={this.props.disabled} />;
+			return <ChevronDown className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.CHEVRONARROWS.LEFT):
-			return <ChevronLeft16 className={className} disabled={this.props.disabled} />;
+			return <ChevronLeft className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.CHEVRONARROWS.RIGHT):
-			return <ChevronRight16 className={className} disabled={this.props.disabled} />;
+			return <ChevronRight className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.ADD):
-			return <AddAlt16 className={className} disabled={this.props.disabled} />;
+			return <AddAlt className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.SETTINGS):
-			return <Settings16 className={className} disabled={this.props.disabled} />;
+			return <Settings className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.EDIT):
-			return <Edit16 className={className} disabled={this.props.disabled} />;
+			return <Edit className={className} disabled={this.props.disabled} />;
 
 		case (CANVAS_CARBON_ICONS.SEARCH):
-			return <Search16 className={className} disabled={this.props.disabled} />;
+			return <Search className={className} disabled={this.props.disabled} />;
 		case (CANVAS_CARBON_ICONS.WARNING_UNFILLED):
-			return <Warning16 className={className} disabled={this.props.disabled} />;
+			return <Warning className={className} disabled={this.props.disabled} />;
 
 		case (CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT):
-			return <ChevronRight16 className={className} disabled={this.props.disabled} />;
+			return <ChevronRight className={className} disabled={this.props.disabled} />;
 
 		case (CARBON_ICONS.MEASUREMENTS.EMPTY):
-			return <CircleDash16 className={className} disabled={this.props.disabled} />;
+			return <CircleDash className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.SCALE):
-			return <RulerAlt16 className={className} disabled={this.props.disabled} />;
+			return <RulerAlt className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.ORDINAL):
-			return <ListNumbered16 className={className} disabled={this.props.disabled} />;
+			return <ListNumbered className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.NOMINAL):
-			return <ListBulleted16 className={className} disabled={this.props.disabled} />;
+			return <ListBulleted className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.FLAG):
-			return <Flag16 className={className} disabled={this.props.disabled} />;
+			return <Flag className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.DISCRETE):
-			return <ChartVennDiagram16 className={className} disabled={this.props.disabled} />;
+			return <ChartVennDiagram className={className} disabled={this.props.disabled} />;
 
 		case (DATA_TYPE.DATE):
-			return <Calendar16 className={className} disabled={this.props.disabled} />;
+			return <Calendar className={className} disabled={this.props.disabled} />;
 		case (DATA_TYPE.TIME):
-			return <Time16 className={className} disabled={this.props.disabled} />;
+			return <Time className={className} disabled={this.props.disabled} />;
 		case (DATA_TYPE.TIMESTAMP):
-			return <EventSchedule16 className={className} disabled={this.props.disabled} />;
+			return <EventSchedule className={className} disabled={this.props.disabled} />;
 
 		default: return null;
 		}