refactor(ui5-switch): rename type property to graphical (#506)

BREAKING CHANGE: type property is renamed to boolean property graphical
SAP · Jun 19, 2019 · 0040e85 · 0040e85
1 parent 9d81d32
commit 0040e85
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 53 deletions.
diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js
@@ -8,7 +8,7 @@ import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js
 
 // Template
 import SwitchTemplate from "./build/compiled/SwitchTemplate.lit.js";
-import SwitchType from "./types/SwitchType.js";
+
 
 // Styles
 import switchCss from "./themes/Switch.css.js";
@@ -77,18 +77,15 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-switch</code> type.
 		 * <br>
-		 * Available options are <code>Textual</code> and <code>Graphical</code>.
 		 *
-		 * <br><br>
-		 * <b>Note:</b> If <code>Graphical</code> type is set,
+		 * <b>Note:</b> If <code>graphical</code> type is set,
 		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
 		 * @type {string}
-		 * @defaultvalue "Textual"
+		 * @defaultvalue false
 		 * @public
 		 */
-		type: {
-			type: String,
-			defaultValue: SwitchType.Textual,
+		graphical: {
+			type: Boolean,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
@@ -176,30 +173,27 @@ class Switch extends UI5Element {
 	}
 
 	get textOn() {
-		const graphical = this.type === SwitchType.Graphical;
-		return graphical ? "" : this.textOn;
+		return this.graphical ? "" : this.textOn;
 	}
 
 	get textOff() {
-		const graphical = this.type === SwitchType.Graphical;
-		return graphical ? "" : this.textOff;
+		return this.graphical ? "" : this.textOff;
 	}
 
 	get tabIndex() {
 		return this.disabled ? undefined : "0";
 	}
 
 	get classes() {
-		const graphical = this.type === SwitchType.Graphical;
-		const hasLabel = graphical || this.textOn || this.textOff;
+		const hasLabel = this.graphical || this.textOn || this.textOff;
 
 		return {
 			main: {
 				"ui5-switch-wrapper": true,
 				"ui5-switch-desktop": isDesktop(),
 				"ui5-switch--disabled": this.disabled,
 				"ui5-switch--checked": this.checked,
-				"ui5-switch--semantic": graphical,
+				"ui5-switch--semantic": this.graphical,
 				"ui5-switch--no-label": !hasLabel,
 				"sapUiSizeCompact": getCompactSize(),
 			},

diff --git a/packages/main/src/types/SwitchType.js b/packages/main/src/types/SwitchType.js
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Switch.html b/packages/main/test/sap/ui/webcomponents/main/pages/Switch.html
@@ -48,10 +48,10 @@ <h3>Default Switch</h3>
 
 	<h3>Graphical Switch</h3>
 	<div style="display: flex">
-		<ui5-switch type="Graphical" text-on="On" text-off="Off"></ui5-switch>
-		<ui5-switch type="Graphical" checked text-on="Yes" text-off="No"></ui5-switch>
-		<ui5-switch type="Graphical" text-on="On" text-off="Off" disabled></ui5-switch>
-		<ui5-switch type="Graphical" checked text-on="Yes" text-off="No" disabled></ui5-switch>
+		<ui5-switch graphical text-on="On" text-off="Off"></ui5-switch>
+		<ui5-switch graphical checked text-on="Yes" text-off="No"></ui5-switch>
+		<ui5-switch graphical text-on="On" text-off="Off" disabled></ui5-switch>
+		<ui5-switch graphical checked text-on="Yes" text-off="No" disabled></ui5-switch>
 	</div>
 
 	<h3>Custom Switch</h3>

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Switch.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Switch.sample.html
@@ -71,16 +71,16 @@ <h3>Basic Switch</h3>
 	<section>
 	<h3>Graphical Switch</h3>
 		<div class="snippet">
-			<ui5-switch type="Graphical"></ui5-switch>
-			<ui5-switch type="Graphical" checked></ui5-switch>
-			<ui5-switch type="Graphical" disabled></ui5-switch>
-			<ui5-switch type="Graphical" checked disabled></ui5-switch>
+			<ui5-switch graphical></ui5-switch>
+			<ui5-switch graphical checked></ui5-switch>
+			<ui5-switch graphical disabled></ui5-switch>
+			<ui5-switch graphical checked disabled></ui5-switch>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
-<ui5-switch type="Graphical"></ui5-switch>
-<ui5-switch type="Graphical" checked></ui5-switch>
-<ui5-switch type="Graphical" disabled></ui5-switch>
-<ui5-switch type="Graphical" checked disabled></ui5-switch>
+<ui5-switch graphical></ui5-switch>
+<ui5-switch graphical checked></ui5-switch>
+<ui5-switch graphical disabled></ui5-switch>
+<ui5-switch graphical checked disabled></ui5-switch>
 		</xmp></pre>
 	</section>