feat(ui5-card): add 'action' slot (#1915)

Provides a new slot, called "action", displayed in the right most part of the header
to enable users add a action, in most cases single button. When the action slot is used, the status text would not be displayed (if present).

FIXES: #1913

Author: ilhan007

packages/main/src/Card.hbs

@@ -29,7 +29,12 @@
 					<div id="{{_id}}-subheading" class="ui5-card-subheading" part="subheading">{{subheading}}</div>
 				{{/if}}
 			</div>
-			<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>
+
+			{{#if hasAction}}
+				<slot name="action"></slot>
+			{{else}}
+				<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>
+			{{/if}}
 		</div>
 	{{/if}}
 

packages/main/src/Card.js

@@ -50,6 +50,20 @@ const metadata = {
 		avatar: {
 			type: HTMLElement,
 		},
+
+		/**
+		 * Defines an action, displayed in the right most part of the header.
+		 * <br><br>
+		 * <b>Note:</b> If set, the <code>status</code> text will not be displayed,
+		 * you can either have <code>action</code>, or <code>status</code>.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		action: {
+			type: HTMLElement,
+		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -75,6 +89,9 @@ const metadata = {
 
 		/**
 		 * Defines the status displayed in the <code>ui5-card</code> header.
+		 * <br><br>
+		 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
+		 * you can either have <code>action</code>, or <code>status</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -121,10 +138,8 @@ const metadata = {
  * The <code>ui5-card</code> is a component that represents information in the form of a
  * tile with separate header and content areas.
  * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through several properties, such as:
- * <code>heading</code>, <code>subheading</code>, <code>status</code>
- * and a slot:
- * <code>avatar</code>.
+ * The header can be used through several properties, such as: <code>heading</code>, <code>subheading</code>, <code>status</code>
+ * and two slots: <code>avatar</code> and <code>action</code>.
  *
  * <h3>Keyboard handling</h3>
  * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
@@ -194,7 +209,7 @@ class Card extends UI5Element {
 	}
 
 	get hasHeader() {
-		return !!(this.heading || this.subheading || this.status || this.avatar);
+		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
 	get ariaCardRoleDescription() {
@@ -217,6 +232,10 @@ class Card extends UI5Element {
 		return !!this.avatar.length;
 	}
 
+	get hasAction() {
+		return !!this.action.length;
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			Icon.define(),

packages/main/src/themes/Card.css

@@ -22,13 +22,17 @@
 .ui5-card-header {
 	position: relative;
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	background: var(--sapTile_Background);
 	border-bottom: 1px solid var(--_ui5_card_header_border_color);
 	padding: var(--_ui5_card_content_padding);
 	outline: none;
 }
 
+:host([subheading]) .ui5-card-header {
+	align-items: flex-start;
+}
+
 /* Card with no content */
 .ui5-card-root.ui5-card--nocontent {
 	height: auto;

packages/main/test/pages/Card.html

@@ -56,6 +56,52 @@
 	</ui5-list>
 </ui5-card>
 
+
+<ui5-card heading="Linked activities (5)" class="myCard" status="4 of 10" id="actionCard">
+	<ui5-list id="myList3" separators="Inner">
+		<ui5-li icon="horizontal-bullet-chart">
+			Increase customer satisfaction by 10% using marketing methods
+		</ui5-li>
+		<ui5-li icon="opportunity">
+			Get 1000 survey responses to annual employee survey
+		</ui5-li>
+	</ui5-list>
+
+	<ui5-button icon="add" slot="action" design="Transparent">
+		Add activity
+	</ui5-button>
+</ui5-card>
+
+<ui5-card heading="Linked activities (5)" class="myCard" subheading="quick links">
+	<ui5-list id="myList3" separators="Inner">
+		<ui5-li icon="horizontal-bullet-chart">
+			Increase customer satisfaction by 10% using marketing methods
+		</ui5-li>
+		<ui5-li icon="opportunity">
+			Get 1000 survey responses to annual employee survey
+		</ui5-li>
+	</ui5-list>
+
+	<ui5-button icon="add" slot="action" design="Transparent">
+		Add activity
+	</ui5-button>
+</ui5-card>
+
+<ui5-card heading="Linked activities (5)">
+	<ui5-list id="myList3" separators="Inner">
+		<ui5-li icon="horizontal-bullet-chart">
+			Increase customer satisfaction by 10% using marketing methods
+		</ui5-li>
+		<ui5-li icon="opportunity">
+			Get 1000 survey responses to annual employee survey
+		</ui5-li>
+	</ui5-list>
+
+	<ui5-icon name="group" slot="avatar"></ui5-icon>
+
+	<ui5-button icon="overflow" slot="action" design="Transparent"></ui5-button>
+</ui5-card>
+
 <script>
 	card.addEventListener("ui5-headerClick", function (event) {
 		console.log(event);

packages/main/test/specs/Card.spec.js

@@ -6,10 +6,16 @@ describe("Card general interaction", () => {
 	it("tests initial rendering", () => {
 		const card = browser.$("#card");
 
-		assert.ok(card, "Has shadow root");
+		assert.ok(card.isExisting(), "The component has shadow root.");
 	});
 
-	it("fires headerPress upon click, Enter and Space", () => {
+	it("tests status not rendered, when action is set", () => {
+		const status = browser.$("#actionCard").shadow$(".ui5-card-status");
+
+		assert.notOk(status.isExisting(), "The status DOM is not rendered.");
+	});
+
+	it("tests headerPress upon click, Enter and Space", () => {
 		const cardHeader = browser.$("#card").shadow$(".ui5-card-header");
 		const cardHeader2 = browser.$("#card2").shadow$(".ui5-card-header");
 		const field = browser.$("#field");
@@ -18,13 +24,12 @@ describe("Card general interaction", () => {
 		cardHeader.keys("Space");
 		cardHeader.keys("Enter");
 
-		assert.strictEqual(field.getProperty("value"), "3", "headerPress should be called 3 times");
-
+		assert.strictEqual(field.getProperty("value"), "3", "The headerPress event should be called 3 times.");
 
 		cardHeader2.click();
 		cardHeader2.keys("Space");
 		cardHeader2.keys("Enter");
 
-		assert.strictEqual(field.getProperty("value"), "3", "events count should remain 3 as the header is not interactive.");
+		assert.strictEqual(field.getProperty("value"), "3", "The events count should remain 3 as the header is not interactive.");
 	});
 });