feat(ui5-button): introducing attention type button (#3481)

fixes: #3446

Author: tsanislavgatev

packages/main/src/Button.js

@@ -39,6 +39,7 @@ const metadata = {
 		 * <li><code>Positive</code></li>
 		 * <li><code>Negative</code></li>
 		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
 		 * @type {ButtonDesign}

packages/main/src/themes/Button.css

@@ -202,6 +202,37 @@ bdi {
 	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
+:host([design="Attention"]) {
+	background-color: var(--sapButton_Attention_Background);
+	border-color: var(--sapButton_Attention_BorderColor);
+	color: var(--sapButton_Attention_TextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+	background-color: var(--sapButton_Attention_Hover_Background);
+	border-color: var(--sapButton_Attention_Hover_BorderColor);
+	color: var(--sapButton_Attention_Hover_TextColor);
+}
+
+:host([ui5-button][design="Attention"][active]:not([non-interactive])) {
+	background-color: var(--sapButton_Attention_Active_Background);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
+	text-shadow: none;
+}
+
+:host([design="Attention"][focused]:not([_is-touch])) {
+	outline-color: var(--_ui5_button_attention_border_focus_hover_color);
+	border-color: var(--_ui5_button_attention_focus_border_color);
+}
+
+:host([design="Attention"][active][focused]) {
+	outline-color: var(--sapContent_ContrastFocusColor);
+}
+
 :host([design="Emphasized"]) {
 	background-color: var(--sapButton_Emphasized_Background);
 	border-color: var(--sapButton_Emphasized_BorderColor);

packages/main/src/types/ButtonDesign.js

@@ -39,6 +39,13 @@ const ButtonTypes = {
 	 * @type {Emphasized}
 	 */
 	Emphasized: "Emphasized",
+
+	/**
+	 * attention type
+	 * @public
+	 * @type {Attention}
+	 */
+	Attention: "Attention",
 };
 
 /**

packages/main/test/pages/Button.html

@@ -67,7 +67,9 @@
 	<ui5-button disabled>Inactive</ui5-button>
 	<ui5-button design="Positive">Agree</ui5-button>
 	<ui5-button design="Negative">Decline</ui5-button>
-
+	<ui5-button design="Attention">Warning</ui5-button>
+	<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
+	<ui5-button design="Attention" icon="message-warning"></ui5-button>
 	<br/>
 	<br/>
 	<br/>

packages/main/test/samples/Button.sample.html

@@ -14,6 +14,7 @@ <h3>Basic Button</h3>
 		<ui5-button class="samples-margin" design="Transparent">Cancel</ui5-button>
 		<ui5-button class="samples-margin" design="Positive">Approve</ui5-button>
 		<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
+		<ui5-button class="samples-margin" design="Attention">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Emphasized">Subscribe</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
@@ -22,6 +23,7 @@ <h3>Basic Button</h3>
 <ui5-button design="Transparent">Cancel</ui5-button>
 <ui5-button design="Positive">Approve</ui5-button>
 <ui5-button design="Negative">Decline</ui5-button>
+<ui5-button design="Attention">Warning</ui5-button>
 <ui5-button design="Emphasized">Subscribe</ui5-button>
 	</xmp></pre>
 </section>
@@ -33,13 +35,15 @@ <h3>Button with Icon</h3>
 		<ui5-button class="samples-margin" icon="download" icon-end>Download</ui5-button>
 		<ui5-button class="samples-margin" design="Positive" icon="add">Add</ui5-button>
 		<ui5-button class="samples-margin" design="Negative" icon="delete">Remove</ui5-button>
+		<ui5-button class="samples-margin" design="Attention" icon="message-warning">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Transparent" icon="accept">Accept</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-button icon="employee">Add</ui5-button>
 <ui5-button icon="download" icon-end>Download</ui5-button>
 <ui5-button design="Positive" icon="add">Add</ui5-button>
 <ui5-button design="Negative" icon="delete">Remove</ui5-button>
+<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
 <ui5-button design="Transparent" icon="accept">Transparent</ui5-button>
 	</xmp></pre>
 </section>
@@ -91,13 +95,15 @@ <h3>Button with Design</h3>
 		<ui5-button class="samples-margin" design="Positive">Agree</ui5-button>
 		<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
 		<ui5-button class="samples-margin" design="Default">Default</ui5-button>
+		<ui5-button class="samples-margin" design="Attention">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Transparent">Transparent</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-button design="Emphasized">Submit</ui5-button>
 <ui5-button design="Positive">Agree</ui5-button>
 <ui5-button design="Negative">Decline</ui5-button>
 <ui5-button design="Default">Default</ui5-button>
+<ui5-button design="Attention">Warning</ui5-button>
 <ui5-button design="Transparent">Transparent</ui5-button>
 	</xmp></pre>
 </section>

packages/theme-base/css-vars-usage.json

@@ -25,6 +25,14 @@
   "--sapButton_Active_Background",
   "--sapButton_Active_BorderColor",
   "--sapButton_Active_TextColor",
+  "--sapButton_Attention_Active_Background",
+  "--sapButton_Attention_Active_BorderColor",
+  "--sapButton_Attention_Active_TextColor",
+  "--sapButton_Attention_Background",
+  "--sapButton_Attention_BorderColor",
+  "--sapButton_Attention_Hover_Background",
+  "--sapButton_Attention_Hover_BorderColor",
+  "--sapButton_Attention_TextColor",
   "--sapButton_Background",
   "--sapButton_BorderColor",
   "--sapButton_BorderCornerRadius",