diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs index d5362f320c3c..d554c403e54e 100644 --- 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"> -
- -
+ {{#if hasAvatar}} +
+ +
+ {{/if}}
{{#if heading}} -
{{heading}}
+
{{heading}}
{{/if}} - {{#if subtitle}} -
{{subtitle}}
+ {{#if subheading}} +
{{subheading}}
{{/if}}
{{status}} diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index d52b9b89e622..d9d60754573e 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -62,12 +62,12 @@ const metadata = { }, /** - * Defines the subtitle displayed in the ui5-card header. + * Defines the subheading displayed in the ui5-card 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 ui5-card can be arbitrary HTML content. * The header can be used through several properties, such as: - * heading, subtitle, status + * heading, subheading, status * and a slot: * avatar. * @@ -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 index cb6e4b746cf6..9599a78dd477 100644 --- 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 index 5c9f09066a79..4d5443d1f808 100644 --- a/packages/main/test/pages/Card.html +++ b/packages/main/test/pages/Card.html @@ -1,7 +1,7 @@ - + @@ -24,6 +24,7 @@ id="card" status="4 of 10" heading="Quick Links" + subheading="quick links" header-interactive class="myCard"> @@ -39,14 +40,16 @@ id="card2" status="4 of 10" heading="Quick Links" + subheading="quick links" class="myCard"> + Template Based Segmentation Segmentation Models - + Template Based Segmentation Segmentation Models diff --git a/packages/main/test/samples/Card.sample.html b/packages/main/test/samples/Card.sample.html index b3b0546f6226..996a785f59e2 100644 --- a/packages/main/test/samples/Card.sample.html +++ b/packages/main/test/samples/Card.sample.html @@ -69,7 +69,7 @@

Card

Card with List

- +
@@ -81,7 +81,7 @@

Card with List

 - +
@@ -103,7 +103,7 @@

Card with List

} - +
Alain Chevalier @@ -113,7 +113,7 @@

Card with List

 - +
Richard Wilson @@ -128,7 +128,7 @@

Card with List

Card with Table

- + @@ -201,7 +201,7 @@

Card with Table

.status-warning {color: #e9730c;} .status-success {color: #107e3e;} - + @@ -244,7 +244,7 @@

Card with Table

Card with Timeline

- + @@ -260,7 +260,7 @@

Card with Timeline


 <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">