Skip to content

Commit 6733de9

Browse files
ilhan007ilhan007
authored
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
1 parent 2bd2204 commit 6733de9

File tree

5 files changed

+39
-30
lines changed

5 files changed

+39
-30
lines changed

‎packages/main/src/Card.hbs

+9-7
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,24 @@
99
@keydown="{{_headerKeydown}}"
1010
@keyup="{{_headerKeyup}}"
1111
role="{{ariaHeaderRole}}"
12-
aria-labelledby="{{_id}}-subtitle {{_id}}-status"
12+
aria-labelledby="{{_id}}-subheading {{_id}}-status"
1313
aria-level="{{ariaLevel}}"
1414
aria-roledescription="{{ariaCardHeaderRoleDescription}}"
1515
tabindex="0">
1616

17-
<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
18-
<slot name="avatar"></slot>
19-
</div>
17+
{{#if hasAvatar}}
18+
<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
19+
<slot name="avatar"></slot>
20+
</div>
21+
{{/if}}
2022

2123
<div class="ui5-card-header-text">
2224
{{#if heading}}
23-
<div id="{{_id}}-heading" class="ui5-card-heading">{{heading}}</div>
25+
<div id="{{_id}}-heading" class="ui5-card-heading" part="heading">{{heading}}</div>
2426
{{/if}}
2527

26-
{{#if subtitle}}
27-
<div id="{{_id}}-subtitle" class="ui5-card-subtitle ">{{subtitle}}</div>
28+
{{#if subheading}}
29+
<div id="{{_id}}-subheading" class="ui5-card-subheading" part="subheading">{{subheading}}</div>
2830
{{/if}}
2931
</div>
3032
<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>

‎packages/main/src/Card.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,12 @@ const metadata = {
6262
},
6363

6464
/**
65-
* Defines the subtitle displayed in the <code>ui5-card</code> header.
65+
* Defines the subheading displayed in the <code>ui5-card</code> header.
6666
* @type {string}
6767
* @defaultvalue ""
6868
* @public
6969
*/
70-
subtitle: {
70+
subheading: {
7171
type: String,
7272
},
7373

@@ -120,7 +120,7 @@ const metadata = {
120120
* tile with separate header and content areas.
121121
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
122122
* The header can be used through several properties, such as:
123-
* <code>heading</code>, <code>subtitle</code>, <code>status</code>
123+
* <code>heading</code>, <code>subheading</code>, <code>status</code>
124124
* and a slot:
125125
* <code>avatar</code>.
126126
*
@@ -192,7 +192,7 @@ class Card extends UI5Element {
192192
}
193193

194194
get hasHeader() {
195-
return !!(this.heading || this.subtitle || this.status || this.avatar);
195+
return !!(this.heading || this.subheading || this.status || this.avatar);
196196
}
197197

198198
get rtl() {
@@ -215,6 +215,10 @@ class Card extends UI5Element {
215215
return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
216216
}
217217

218+
get hasAvatar() {
219+
return !!this.avatar.length;
220+
}
221+
218222
static async define(...params) {
219223
await Promise.all([
220224
Icon.define(),

‎packages/main/src/themes/Card.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
max-height: 3.5rem;
106106
}
107107

108-
.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
108+
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
109109
font-family: var(--sapFontFamily);
110110
font-size: var(--sapFontMediumSize);
111111
font-weight: normal;
@@ -115,7 +115,7 @@
115115
}
116116

117117
.ui5-card-header .ui5-card-header-text .ui5-card-heading,
118-
.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
118+
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
119119
text-align: left;
120120
text-overflow: ellipsis;
121121
white-space: normal;
@@ -142,6 +142,6 @@
142142
text-align: right;
143143
}
144144

145-
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
145+
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subheading {
146146
text-align: right;
147147
}

‎packages/main/test/pages/Card.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width">
77

@@ -24,6 +24,7 @@
2424
id="card"
2525
status="4 of 10"
2626
heading="Quick Links"
27+
subheading="quick links"
2728
header-interactive
2829
class="myCard">
2930
<ui5-list id="myList3" separators="Inner">
@@ -39,14 +40,16 @@
3940
id="card2"
4041
status="4 of 10"
4142
heading="Quick Links"
43+
subheading="quick links"
4244
class="myCard">
45+
<ui5-icon name="group" slot="avatar"></ui5-icon>
4346
<ui5-list id="myList3" separators="Inner">
4447
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
4548
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
4649
</ui5-list>
4750
</ui5-card>
4851

49-
<ui5-card>
52+
<ui5-card heading="Quick Links" subheading="quick links">
5053
<ui5-list id="myList3" separators="Inner">
5154
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
5255
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>

‎packages/main/test/samples/Card.sample.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2 class="control-header">Card</h2>
6969
<section>
7070
<h3>Card with List</h3>
7171
<div class="snippet card-container">
72-
<ui5-card heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
72+
<ui5-card heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
7373
<ui5-icon name="group" slot="avatar"></ui5-icon>
7474

7575
<div class="card-content">
@@ -81,7 +81,7 @@ <h3>Card with List</h3>
8181

8282
</div>
8383
</ui5-card>
84-
<ui5-card heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
84+
<ui5-card heading="This header is interactive" header-interactive subheading="Click, press Enter or Space" status="3 of 6" class="medium">
8585
<ui5-icon name="group" slot="avatar"></ui5-icon>
8686

8787
<div class="card-content">
@@ -103,7 +103,7 @@ <h3>Card with List</h3>
103103
}
104104
</style>
105105

106-
<ui5-card avatar="group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
106+
<ui5-card avatar="group" heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
107107
<div class="card-content">
108108
<ui5-list separators="None" class="card-content-child" style="width: 100%">
109109
<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>
113113

114114
</div>
115115
</ui5-card>
116-
<ui5-card avatar="group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
116+
<ui5-card avatar="group" heading="This header is interactive" header-interactive subheading="Click, press Enter or Space" status="3 of 6" class="medium">
117117
<div class="card-content">
118118
<ui5-list separators="None" class="card-content-child" style="width: 100%">
119119
<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>
128128
<section>
129129
<h3>Card with Table</h3>
130130
<div class="snippet card-container">
131-
<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15">
131+
<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15">
132132
<ui5-table class="demo-table content-padding">
133133
<!-- Columns -->
134134
<ui5-table-column slot="columns">
@@ -201,7 +201,7 @@ <h3>Card with Table</h3>
201201
.status-warning {color: #e9730c;}
202202
.status-success {color: #107e3e;}
203203
</style>
204-
<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15" class="medium">
204+
<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15" class="medium">
205205
<ui5-table class="demo-table content-padding">
206206
<!-- Columns -->
207207
<ui5-table-column slot="columns">
@@ -244,7 +244,7 @@ <h3>Card with Table</h3>
244244
<section>
245245
<h3>Card with Timeline</h3>
246246
<div class="snippet card-container">
247-
<ui5-card heading="Upcoming Activities" subtitle="For Today" class="medium">
247+
<ui5-card heading="Upcoming Activities" subheading="For Today" class="medium">
248248
<ui5-timeline>
249249
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
250250
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
@@ -260,7 +260,7 @@ <h3>Card with Timeline</h3>
260260
<pre class="prettyprint lang-html"><xmp>
261261
<ui5-card
262262
heading="Upcoming Activities"
263-
subtitle="For Today"
263+
subheading="For Today"
264264
class="meidum">
265265
<ui5-timeline>
266266
<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>
278278
<section>
279279
<h3>More Cards</h3>
280280
<div class="snippet card-container">
281-
<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
281+
<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
282282
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
283283

284284
<ui5-list separators="Inner" class="content-padding">
@@ -290,7 +290,7 @@ <h3>More Cards</h3>
290290

291291
<ui5-card
292292
heading="Project Cloud Transformation"
293-
subtitle="Revenue per Product | EUR"
293+
subheading="Revenue per Product | EUR"
294294
status="3 of 3"
295295
class="small">
296296
<ui5-list separators="None" class="content-padding">
@@ -332,7 +332,7 @@ <h3>More Cards</h3>
332332
</ui5-list>
333333
</ui5-card>
334334

335-
<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
335+
<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
336336
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
337337

338338
<div class="content content-padding">
@@ -357,7 +357,7 @@ <h3>More Cards</h3>
357357
</div>
358358

359359
<pre class="prettyprint lang-html"><xmp>
360-
<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
360+
<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
361361
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
362362

363363
<ui5-list separators="Inner" class="content-padding">
@@ -386,7 +386,7 @@ <h3>More Cards</h3>
386386
.status-success {color: #107e3e;}
387387
</style>
388388

389-
<ui5-card heading="Project Cloud Transformation" subtitle="Revenue per Product | EUR" status="3 of 3" class="small">
389+
<ui5-card heading="Project Cloud Transformation" subheading="Revenue per Product | EUR" status="3 of 3" class="small">
390390
<ui5-list separators="None" class="content-padding">
391391
<ui5-li-custom>
392392
<div class="item">
@@ -403,7 +403,7 @@ <h3>More Cards</h3>
403403
</ui5-list>
404404
</ui5-card>
405405

406-
<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
406+
<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
407407
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
408408

409409
<div class="content content-padding">

0 commit comments

Comments
 (0)