chore: update togglebutton sample page (#587)

SAP · Jun 26, 2019 · ed569ce · ed569ce
1 parent 7127963
commit ed569ce
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 68 deletions.
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ToggleButton.html b/packages/main/test/sap/ui/webcomponents/main/pages/ToggleButton.html
@@ -79,12 +79,12 @@ <h2>ToggleButton states</h2>
 			<ui5-togglebutton class="toggleButton" pressed>Pressed ToggleButton</ui5-togglebutton>
 			<ui5-togglebutton class="toggleButton" disabled id="disabled-toggle-button">Disabled ToggleButton</ui5-togglebutton>
 			<ui5-togglebutton class="toggleButton" disabled pressed>Disabled ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Positive">Accept ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Negative">Reject ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Transparent">Transparent ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="toggleButton" type="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Positive">Accept ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Negative">Reject ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Transparent">Transparent ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="toggleButton" design="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
 		</div>
 	</div>
 	<div class="result">

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/ToggleButton.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/ToggleButton.sample.html
@@ -44,60 +44,42 @@ <h3>ToggleButton States</h3>
 			<ui5-togglebutton class="samples-margin" pressed>Pressed ToggleButton</ui5-togglebutton>
 			<ui5-togglebutton class="samples-margin" disabled>Disabled ToggleButton</ui5-togglebutton>
 			<ui5-togglebutton class="samples-margin" disabled pressed>Disabled ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Positive">Accept ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Negative">Reject ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Transparent">Transparent ToggleButton</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Positive">Accept ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Negative">Reject ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Transparent">Transparent ToggleButton</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-togglebutton>ToggleButton</ui5-togglebutton>
 <ui5-togglebutton pressed>Pressed ToggleButton</ui5-togglebutton>
 <ui5-togglebutton disabled>Disabled ToggleButton</ui5-togglebutton>
 <ui5-togglebutton disabled pressed>Disabled ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Positive">Accept ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Negative">Reject ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Transparent">Transparent ToggleButton</ui5-togglebutton>
-<ui5-togglebutton type="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Positive">Accept ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Positive" pressed>Accept ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Negative">Reject ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Negative" pressed>Reject ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Transparent">Transparent ToggleButton</ui5-togglebutton>
+<ui5-togglebutton design="Transparent" pressed>Transparent ToggleButton</ui5-togglebutton>
 		</xmp></pre>
 	</section>
 
 	<section>
 		<h3>ToggleButton with Icon</h3>
 		<div class="snippet">
 			<ui5-togglebutton class="samples-margin" icon="sap-icon://menu">Menu</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://add">Add</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Emphasized" icon="sap-icon://add">Add</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" design="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-togglebutton icon="sap-icon://menu">Menu</ui5-togglebutton>
-<ui5-togglebutton type="Emphasized" icon="sap-icon://add">Add</ui5-togglebutton>
-<ui5-togglebutton type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
-<ui5-togglebutton type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
-<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
-		</xmp></pre>
-	</section>
-
-	<section>
-		<h3>ToggleButton with Active Icon (press and hold to try)</h3>
-		<div class="snippet">
-			<ui5-togglebutton class="samples-margin" icon="sap-icon://menu">Menu</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
-		</div>
-		<pre class="prettyprint lang-html"><xmp>
-<ui5-togglebutton icon="sap-icon://menu">Menu</ui5-togglebutton>
-<ui5-togglebutton type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
-<ui5-togglebutton type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
-<ui5-togglebutton type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
-<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
+<ui5-togglebutton design="Emphasized" icon="sap-icon://add">Add</ui5-togglebutton>
+<ui5-togglebutton design="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
+<ui5-togglebutton design="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
+<ui5-togglebutton design="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
 		</xmp></pre>
 	</section>
 
@@ -108,24 +90,24 @@ <h3>ToggleButton with Icon Only</h3>
 				<ui5-togglebutton class="samples-margin" icon="sap-icon://action-settings" pressed></ui5-togglebutton>
 				<ui5-togglebutton class="samples-margin" icon="sap-icon://add"></ui5-togglebutton>
 				<ui5-togglebutton class="samples-margin" icon="sap-icon://alert" pressed></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://accept" type="Positive"></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://bookmark" type="Positive" pressed></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://cancel" type="Negative"></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://call" type="Negative" pressed></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://camera" type="Transparent"></ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" icon="sap-icon://cart" type="Transparent" pressed></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://accept" design="Positive"></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://bookmark" design="Positive" pressed></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://cancel" design="Negative"></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://call" design="Negative" pressed></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://camera" design="Transparent"></ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" icon="sap-icon://cart" design="Transparent" pressed></ui5-togglebutton>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-togglebutton icon="sap-icon://accept"></ui5-togglebutton>
 <ui5-togglebutton icon="sap-icon://action-settings" pressed></ui5-togglebutton>
 <ui5-togglebutton icon="sap-icon://add"></ui5-togglebutton>
 <ui5-togglebutton icon="sap-icon://alert" pressed></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://away" type="Positive"></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://bookmark" type="Positive" pressed></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://cancel" type="Negative"></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://call" type="Negative" pressed></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://camera" type="Transparent"></ui5-togglebutton>
-<ui5-togglebutton icon="sap-icon://cart" type="Transparent" pressed></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://away" design="Positive"></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://bookmark" design="Positive" pressed></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://cancel" design="Negative"></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://call" design="Negative" pressed></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://camera" design="Transparent"></ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://cart" design="Transparent" pressed></ui5-togglebutton>
 		</xmp></pre>
 	</section>
 
@@ -136,24 +118,24 @@ <h3>ToggleButton</h3>
 				<ui5-togglebutton class="samples-margin" pressed>Yes/No</ui5-togglebutton>
 				<ui5-togglebutton class="samples-margin">Toggle Button</ui5-togglebutton>
 				<ui5-togglebutton class="samples-margin" pressed>Toggle Button pressed</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Positive">On/Off</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Positive" pressed>On/Off</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Negative">Menu</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Negative" pressed>Menu</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Negative">Transparent</ui5-togglebutton>
-				<ui5-togglebutton class="samples-margin" type="Negative" pressed>Transparent</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Positive">On/Off</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Positive" pressed>On/Off</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Negative">Menu</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Negative" pressed>Menu</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Negative">Transparent</ui5-togglebutton>
+				<ui5-togglebutton class="samples-margin" design="Negative" pressed>Transparent</ui5-togglebutton>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-togglebutton>Yes/No</ui5-togglebutton>
 <ui5-togglebutton pressed>Yes/No</ui5-togglebutton>
 <ui5-togglebutton>Toggle Button</ui5-togglebutton>
 <ui5-togglebutton pressed>Toggle Button pressed</ui5-togglebutton>
-<ui5-togglebutton type="Positive">On/Off</ui5-togglebutton>
-<ui5-togglebutton type="Positive" pressed>On/Off</ui5-togglebutton>
-<ui5-togglebutton type="Negative">Menu</ui5-togglebutton>
-<ui5-togglebutton type="Negative" pressed>Menu</ui5-togglebutton>
-<ui5-togglebutton type="Transparent">Transparent</ui5-togglebutton>
-<ui5-togglebutton type="Transparent" pressed>Transparent</ui5-togglebutton>
+<ui5-togglebutton design="Positive">On/Off</ui5-togglebutton>
+<ui5-togglebutton design="Positive" pressed>On/Off</ui5-togglebutton>
+<ui5-togglebutton design="Negative">Menu</ui5-togglebutton>
+<ui5-togglebutton design="Negative" pressed>Menu</ui5-togglebutton>
+<ui5-togglebutton design="Transparent">Transparent</ui5-togglebutton>
+<ui5-togglebutton design="Transparent" pressed>Transparent</ui5-togglebutton>
 		</xmp></pre>
 	</section>