refactor(ui5-card): update API and correct visual (#1145)

- refactor: rename subtitle proeprty to subheading to match the heading property - fix: don`t allocate space for the avatar if avatar is not present BREAKING CHANGE: the proeprty subtitle has been renamed to subheading
SAP · Jan 22, 2020 · 6733de9 · 6733de9
1 parent 2bd2204
commit 6733de9
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs
@@ -9,22 +9,24 @@
 			@keydown="{{_headerKeydown}}"
 			@keyup="{{_headerKeyup}}"
 			role="{{ariaHeaderRole}}"
-			aria-labelledby="{{_id}}-subtitle {{_id}}-status"
+			aria-labelledby="{{_id}}-subheading {{_id}}-status"
 			aria-level="{{ariaLevel}}"
 			aria-roledescription="{{ariaCardHeaderRoleDescription}}"
 			tabindex="0">
 
-			<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
-				<slot name="avatar"></slot>
-			</div>
+			{{#if hasAvatar}}
+				<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
+					<slot name="avatar"></slot>
+				</div>
+			{{/if}}
 
 			<div class="ui5-card-header-text">
 				{{#if heading}}
-					<div id="{{_id}}-heading" class="ui5-card-heading">{{heading}}</div>
+					<div id="{{_id}}-heading" class="ui5-card-heading" part="heading">{{heading}}</div>
 				{{/if}}
 
-				{{#if subtitle}}
-					<div id="{{_id}}-subtitle" class="ui5-card-subtitle ">{{subtitle}}</div>
+				{{#if subheading}}
+					<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>

diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
@@ -62,12 +62,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the subtitle displayed in the <code>ui5-card</code> header.
+		 * Defines the subheading displayed in the <code>ui5-card</code> header.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		subtitle: {
+		subheading: {
 			type: String,
 		},
 
@@ -120,7 +120,7 @@ const metadata = {
  * 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>subtitle</code>, <code>status</code>
+ * <code>heading</code>, <code>subheading</code>, <code>status</code>
  * and a slot:
  * <code>avatar</code>.
  *
@@ -192,7 +192,7 @@ class Card extends UI5Element {
 	}
 
 	get hasHeader() {
-		return !!(this.heading || this.subtitle || this.status || this.avatar);
+		return !!(this.heading || this.subheading || this.status || this.avatar);
 	}
 
 	get rtl() {
@@ -215,6 +215,10 @@ class Card extends UI5Element {
 		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
+	get hasAvatar() {
+		return !!this.avatar.length;
+	}
+
 	static async define(...params) {
 		await Promise.all([
 			Icon.define(),

diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css
@@ -105,7 +105,7 @@
 	max-height: 3.5rem;
 }
 
-.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
+.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontMediumSize);
 	font-weight: normal;
@@ -115,7 +115,7 @@
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-heading,
-.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
+.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
 	text-align: left;
 	text-overflow: ellipsis;
 	white-space: normal;
@@ -142,6 +142,6 @@
 	text-align: right;
 }
 
-[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
+[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subheading {
 	text-align: right;
 }
diff --git a/packages/main/test/pages/Card.html b/packages/main/test/pages/Card.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 
@@ -24,6 +24,7 @@
 	id="card"
 	status="4 of 10"
 	heading="Quick Links"
+	subheading="quick links"
 	header-interactive
 	class="myCard">
 	<ui5-list id="myList3" separators="Inner">
@@ -39,14 +40,16 @@
 	id="card2"
 	status="4 of 10"
 	heading="Quick Links"
+	subheading="quick links"
 	class="myCard">
+	<ui5-icon name="group" slot="avatar"></ui5-icon>
 	<ui5-list id="myList3" separators="Inner">
 		<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
 		<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
 	</ui5-list>
 </ui5-card>
 
-<ui5-card>
+<ui5-card heading="Quick Links" subheading="quick links">
 	<ui5-list id="myList3" separators="Inner">
 		<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
 		<ui5-li icon="opportunity" >Segmentation Models</ui5-li>

diff --git a/packages/main/test/samples/Card.sample.html b/packages/main/test/samples/Card.sample.html
@@ -69,7 +69,7 @@ <h2 class="control-header">Card</h2>
 <section>
 	<h3>Card with List</h3>
 	<div class="snippet card-container">
-		<ui5-card heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
+		<ui5-card heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
 			<ui5-icon name="group" slot="avatar"></ui5-icon>
 
 			<div class="card-content">
@@ -81,7 +81,7 @@ <h3>Card with List</h3>
 
 			</div>
 		</ui5-card>
-		<ui5-card heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
+		<ui5-card heading="This header is interactive" header-interactive subheading="Click, press Enter or Space" status="3 of 6" class="medium">
 				<ui5-icon name="group" slot="avatar"></ui5-icon>
 
 			<div class="card-content">
@@ -103,7 +103,7 @@ <h3>Card with List</h3>
 }
 </style>
 
-<ui5-card avatar="group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
+<ui5-card avatar="group" heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
 	<div class="card-content">
 		<ui5-list separators="None" class="card-content-child" style="width: 100%">
 			<ui5-li image="../../../assets/images/avatars/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
@@ -113,7 +113,7 @@ <h3>Card with List</h3>
 
 	</div>
 </ui5-card>
-<ui5-card avatar="group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
+<ui5-card avatar="group" heading="This header is interactive" header-interactive subheading="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="../../../assets/images/avatars/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
@@ -128,7 +128,7 @@ <h3>Card with List</h3>
 <section>
 	<h3>Card with Table</h3>
 	<div class="snippet card-container">
-		<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15">
+		<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15">
 			<ui5-table class="demo-table content-padding">
 				<!-- Columns -->
 				<ui5-table-column slot="columns">
@@ -201,7 +201,7 @@ <h3>Card with Table</h3>
 .status-warning {color: #e9730c;}
 .status-success {color: #107e3e;}
 </style>
-<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15" class="medium">
+<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15" class="medium">
 	<ui5-table class="demo-table content-padding">
 		<!-- Columns -->
 		<ui5-table-column slot="columns">
@@ -244,7 +244,7 @@ <h3>Card with Table</h3>
 <section>
 	<h3>Card with Timeline</h3>
 	<div class="snippet card-container">
-		<ui5-card heading="Upcoming Activities" subtitle="For Today" class="medium">
+		<ui5-card heading="Upcoming Activities" subheading="For Today" class="medium">
 			<ui5-timeline>
 				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
 				<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
@@ -260,7 +260,7 @@ <h3>Card with Timeline</h3>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-card
 	heading="Upcoming Activities"
-	subtitle="For Today"
+	subheading="For Today"
 	class="meidum">
 	<ui5-timeline>
 		<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
@@ -278,7 +278,7 @@ <h3>Card with Timeline</h3>
 <section>
 	<h3>More Cards</h3>
 	<div class="snippet card-container">
-		<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
+		<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
 			<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
 
 			<ui5-list separators="Inner" class="content-padding">
@@ -290,7 +290,7 @@ <h3>More Cards</h3>
 
 		<ui5-card
 			heading="Project Cloud Transformation"
-			subtitle="Revenue per Product | EUR"
+			subheading="Revenue per Product | EUR"
 			status="3 of 3"
 			class="small">
 			<ui5-list separators="None" class="content-padding">
@@ -332,7 +332,7 @@ <h3>More Cards</h3>
 			</ui5-list>
 		</ui5-card>
 
-		<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
+		<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
 			<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
 
 			<div class="content content-padding">
@@ -357,7 +357,7 @@ <h3>More Cards</h3>
 	</div>
 
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
+<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
 	<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
 
 	<ui5-list separators="Inner" class="content-padding">
@@ -386,7 +386,7 @@ <h3>More Cards</h3>
 .status-success {color: #107e3e;}
 </style>
 
-<ui5-card heading="Project Cloud Transformation" subtitle="Revenue per Product | EUR" status="3 of 3" class="small">
+<ui5-card heading="Project Cloud Transformation" subheading="Revenue per Product | EUR" status="3 of 3" class="small">
 	<ui5-list separators="None" class="content-padding">
 		<ui5-li-custom>
 			<div class="item">
@@ -403,7 +403,7 @@ <h3>More Cards</h3>
 	</ui5-list>
 </ui5-card>
 
-<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
+<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
 	<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
 
 	<div class="content content-padding">