feat(ui5-card): add "headerInteractive" property (#439)

ilhan007 · web-flow · commit 98f7075c4090 · 2019-06-17T10:36:15.000+03:00
diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs
@@ -6,7 +6,8 @@
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeydown}}"
 		@keyup="{{_headerKeyup}}"
-		tabindex="0">
+		tabindex="{{tabindex}}"
+		role="{{role}}">
 		{{#if image}}
 			<img src="{{avatar}}" aria-label="Avatar" class="sapFCardAvatar sapFCardHeaderImg">
 		{{/if}}
diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
@@ -64,6 +64,17 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines if the <code>ui5-card</code> header would be interactive,
+		 * e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		headerInteractive: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines image source URI or built-in icon font URI.
 		 * </br></br>
@@ -75,7 +86,6 @@ const metadata = {
 		 */
 		avatar: {
 			type: String,
-			defaultValue: null,
 		},
 
 		_headerActive: {
@@ -87,7 +97,8 @@ const metadata = {
 		/**
 		 * Fired when the <code>ui5-card</code> header is pressed
 		 * by click/tap or by using the Enter or Space key.
-		 *
+		 * <br><br>
+		 * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
 		 * @event
 		 * @public
 		 * @since 0.10.0
@@ -106,6 +117,9 @@ const metadata = {
  * The header can be used through several properties, such as:
  * <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
  *
+ * <h3>Keyboard handling</h3>
+ * In case you enable <code>headerInteractive</cdoe> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Card";</code>
@@ -142,7 +156,8 @@ class Card extends UI5Element {
 			},
 			header: {
 				"sapFCardHeader": true,
-				"sapFCardHeaderActive": this._headerActive,
+				"sapFCardHeaderInteractive": this.headerInteractive,
+				"sapFCardHeaderActive": this.headerInteractive && this._headerActive,
 			},
 		};
 	}
@@ -155,17 +170,31 @@ class Card extends UI5Element {
 		return !!this.avatar && !this.icon;
 	}
 
+	get role() {
+		return this.headerInteractive ? "button" : undefined;
+	}
+
+	get tabindex() {
+		return this.headerInteractive ? "0" : undefined;
+	}
+
 	static async define(...params) {
 		await Icon.define();
 
 		super.define(...params);
 	}
 
 	_headerClick() {
-		this.fireEvent("headerPress");
+		if (this.headerInteractive) {
+			this.fireEvent("headerPress");
+		}
 	}
 
 	_headerKeydown(event) {
+		if (!this.headerInteractive) {
+			return;
+		}
+
 		const enter = isEnter(event);
 		const space = isSpace(event);
 
@@ -182,6 +211,10 @@ class Card extends UI5Element {
 	}
 
 	_headerKeyup(event) {
+		if (!this.headerInteractive) {
+			return;
+		}
+
 		const space = isSpace(event);
 
 		this._headerActive = false;
diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css
@@ -43,7 +43,7 @@ ui5-card:not([hidden]) {
 	outline: none;
 }
 
-.sapFCardHeader:focus:before {
+.sapFCardHeader.sapFCardHeaderInteractive:focus:before {
 	content: "";
 	position: absolute;
 	border: var(--_ui5_card_header_focus_border);
@@ -54,13 +54,13 @@ ui5-card:not([hidden]) {
 	bottom: 1px;
 }
 
-.sapFCardHeader:hover {
+.sapFCardHeader.sapFCardHeaderInteractive:hover {
 	cursor: pointer;
 	background: var(--_ui5_card_header_hover_bg);
 }
 
 .sapFCardHeader.sapFCardHeaderActive,
-.sapFCardHeader:active {
+.sapFCardHeader.sapFCardHeaderInteractive:active {
 	background: var(--_ui5_card_header_active_bg);
 }
 
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Card.html b/packages/main/test/sap/ui/webcomponents/main/pages/Card.html
@@ -23,26 +23,36 @@
 		}
 	</style>
 </head>
-<body>
+
+<body role="application">
 
 <ui5-card
 	id="card"
 	status="4 of 10"
 	heading="Quick Links"
+	header-interactive
 	class="myCard">
 	<ui5-list id="myList3" separators="Inner">
 		<ui5-li icon="sap-icon://horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
 		<ui5-li icon="sap-icon://opportunity" >Segmentation Models</ui5-li>
 		<ui5-li icon="sap-icon://line-charts" >Marketing plans</ui5-li>
-		<ui5-li icon="sap-icon://horizontal-bar-chart" >Target Groups</ui5-li>
-		<ui5-li icon="sap-icon://org-chart" >Program Structure</ui5-li>
-		<ui5-li icon="sap-icon://bar-chart" >AdWords Campaigns</ui5-li>
-		<ui5-li icon="sap-icon://tools-opportunity" >Winter Campaign Results</ui5-li>
 	</ui5-list>
 
 	<ui5-input id="field" value="0"></ui5-input>
 </ui5-card>
 
+<ui5-card
+	id="card2"
+	status="4 of 10"
+	heading="Quick Links"
+	class="myCard">
+	<ui5-list id="myList3" separators="Inner">
+		<ui5-li icon="sap-icon://horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
+		<ui5-li icon="sap-icon://opportunity" >Segmentation Models</ui5-li>
+	</ui5-list>
+
+</ui5-card>
+
 <script>
 	card.addEventListener("ui5-headerPress", function (event) {
 		console.log(event);
diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Card.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Card.sample.html
@@ -103,14 +103,19 @@ <h2 class="control-header">Card</h2>
 	<section>
 		<h3>Card with List</h3>
 		<div class="snippet card-container">
-			<ui5-card avatar="sap-icon://group" heading="Team 6" subtitle="Direct Reports" status="6 of 6" class="medium" >
+			<ui5-card avatar="sap-icon://group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
 				<div class="card-content">
-					<ui5-list separators="None" class="card-content-child">
+					<ui5-list separators="None" class="card-content-child" style="width: 100%">
 						<ui5-li image="../../../../../../www/samples/images/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
 						<ui5-li image="../../../../../../www/samples/images/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
 						<ui5-li image="../../../../../../www/samples/images/woman_avatar_2.png" description="UX Specialist">Michael Adams</ui5-li>
 					</ui5-list>
-					<ui5-list separators="None" class="card-content-child">
+					
+				</div>
+			</ui5-card>
+			<ui5-card avatar="sap-icon://group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
+				<div class="card-content">
+					<ui5-list separators="None" class="card-content-child" style="width: 100%">
 						<ui5-li image="../../../../../../www/samples/images/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
 						<ui5-li image="../../../../../../www/samples/images/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
 						<ui5-li image="../../../../../../www/samples/images/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
@@ -129,18 +134,19 @@ <h3>Card with List</h3>
 }
 </style>
 
-<ui5-card avatar="sap-icon://group"
-	heading="Team 6"
-	subtitle="Direct Reports"
-	status="6 of 6"
-	class="medium">
+<ui5-card avatar="sap-icon://group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
 	<div class="card-content">
-		<ui5-list separators="None" class="card-content-child">
+		<ui5-list separators="None" class="card-content-child" style="width: 100%">
 			<ui5-li image="../../../../../../www/samples/images/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
 			<ui5-li image="../../../../../../www/samples/images/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
 			<ui5-li image="../../../../../../www/samples/images/woman_avatar_2.png" description="UX Specialist">Michael Adams</ui5-li>
 		</ui5-list>
-		<ui5-list separators="None" class="card-content-child">
+		
+	</div>
+</ui5-card>
+<ui5-card avatar="sap-icon://group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
+	<div class="card-content">
+		<ui5-list separators="None" class="card-content-child" style="width: 100%">
 			<ui5-li image="../../../../../../www/samples/images/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
 			<ui5-li image="../../../../../../www/samples/images/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
 			<ui5-li image="../../../../../../www/samples/images/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
diff --git a/packages/main/test/specs/Card.spec.js b/packages/main/test/specs/Card.spec.js
@@ -4,12 +4,20 @@ describe("Card general interaction", () => {
 
 	it("fires headerPress upon click, Enter and Space", () => {
 		const cardHeader = browser.findElementDeep("#card >>> .sapFCardHeader");
+		const cardHeader2 = browser.findElementDeep("#card2 >>> .sapFCardHeader");
 		const field = browser.$("#field");
 
 		cardHeader.click();
 		cardHeader.keys("Space");
 		cardHeader.keys("Enter");
 
 		assert.strictEqual(field.getProperty("value"), "3", "headerPress 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.");
 	});
 });

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ ui5-card:not([hidden]) {`
`43`	`43`	`outline: none;`
`44`	`44`	`}`
`45`	`45`
`46`		`-.sapFCardHeader:focus:before {`
	`46`	`+.sapFCardHeader.sapFCardHeaderInteractive:focus:before {`
`47`	`47`	`content: "";`
`48`	`48`	`position: absolute;`
`49`	`49`	`border: var(--_ui5_card_header_focus_border);`
`@@ -54,13 +54,13 @@ ui5-card:not([hidden]) {`
`54`	`54`	`bottom: 1px;`
`55`	`55`	`}`
`56`	`56`
`57`		`-.sapFCardHeader:hover {`
	`57`	`+.sapFCardHeader.sapFCardHeaderInteractive:hover {`
`58`	`58`	`cursor: pointer;`
`59`	`59`	`background: var(--_ui5_card_header_hover_bg);`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`.sapFCardHeader.sapFCardHeaderActive,`
`63`		`-.sapFCardHeader:active {`
	`63`	`+.sapFCardHeader.sapFCardHeaderInteractive:active {`
`64`	`64`	`background: var(--_ui5_card_header_active_bg);`
`65`	`65`	`}`
`66`	`66`