Skip to content

Commit 24fda86

Browse files
fifoosidfifoosid
authored
fix(ui5-card): rename heading/subheading to titleText/subtitleText (#3316)
Part of #3107 BREAKING_CHANGE: rename heading/subheading to titleText/subtitleText
1 parent b0e73ad commit 24fda86

File tree

9 files changed

+107
-105
lines changed

9 files changed

+107
-105
lines changed

‎packages/main/src/Card.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
{{/if}}
2323

2424
<div class="ui5-card-header-text">
25-
{{#if heading}}
26-
<div id="{{_id}}-heading" class="ui5-card-heading" part="heading">{{heading}}</div>
25+
{{#if titleText}}
26+
<div id="{{_id}}-title" class="ui5-card-title" part="title">{{titleText}}</div>
2727
{{/if}}
2828

29-
{{#if subheading}}
30-
<div id="{{_id}}-subheading" class="ui5-card-subheading" part="subheading">{{subheading}}</div>
29+
{{#if subtitleText}}
30+
<div id="{{_id}}-subtitle" class="ui5-card-subtitle" part="subtitle">{{subtitleText}}</div>
3131
{{/if}}
3232
</div>
3333

‎packages/main/src/Card.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,20 @@ const metadata = {
7373
* @type {string}
7474
* @defaultvalue ""
7575
* @public
76+
* @since 1.0.0-rc.15
7677
*/
77-
heading: {
78+
titleText: {
7879
type: String,
7980
},
8081

8182
/**
82-
* Defines the subheading displayed in the component header.
83+
* Defines the subtitle displayed in the component header.
8384
* @type {string}
8485
* @defaultvalue ""
8586
* @public
87+
* @since 1.0.0-rc5
8688
*/
87-
subheading: {
89+
subtitleText: {
8890
type: String,
8991
},
9092

@@ -164,7 +166,7 @@ const metadata = {
164166
* The <code>ui5-card</code> is a component that represents information in the form of a
165167
* tile with separate header and content areas.
166168
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
167-
* The header can be used through several properties, such as: <code>heading</code>, <code>subheading</code>, <code>status</code>
169+
* The header can be used through several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code>
168170
* and two slots: <code>avatar</code> and <code>action</code>.
169171
*
170172
* <h3>Keyboard handling</h3>
@@ -176,8 +178,8 @@ const metadata = {
176178
* <br>
177179
* The <code>ui5-card</code> exposes the following CSS Shadow Parts:
178180
* <ul>
179-
* <li>heading - Used to style the heading of the card</li>
180-
* <li>subheading - Used to style the subheading of the card</li>
181+
* <li>title - Used to style the title of the card</li>
182+
* <li>subtitle - Used to style the subtitle of the card</li>
181183
* <li>status - Used to style the status of the card</li>
182184
* </ul>
183185
*
@@ -246,7 +248,7 @@ class Card extends UI5Element {
246248
}
247249

248250
get hasHeader() {
249-
return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
251+
return !!(this.titleText || this.subtitleText || this.status || this.hasAction || this.avatar);
250252
}
251253

252254
get ariaLabelText() {
@@ -272,8 +274,8 @@ class Card extends UI5Element {
272274
get ariaLabelledByHeader() {
273275
const labels = [];
274276

275-
if (this.subheading) {
276-
labels.push(`${this._id}-subheading`);
277+
if (this.subtitleText) {
278+
labels.push(`${this._id}-subtitle`);
277279
}
278280

279281
if (this.status) {
@@ -288,7 +290,7 @@ class Card extends UI5Element {
288290
}
289291

290292
get ariaLabelledByCard() {
291-
return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
293+
return this.titleText ? `${this._id}-title ${this._id}-desc` : `${this._id}-desc`;
292294
}
293295

294296
get hasAvatar() {

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
outline: none;
3030
}
3131

32-
:host([subheading]) .ui5-card-header {
32+
:host([subtitleText]) .ui5-card-header {
3333
align-items: flex-start;
3434
}
3535

@@ -105,15 +105,15 @@
105105
white-space: nowrap;
106106
}
107107

108-
.ui5-card-header .ui5-card-header-text .ui5-card-heading {
108+
.ui5-card-header .ui5-card-header-text .ui5-card-title {
109109
font-family: "72override", var(--sapFontFamily);
110110
font-size: var(--sapFontHeader5Size);
111111
font-weight: normal;
112112
color: var(--sapTile_TitleTextColor);
113113
max-height: 3.5rem;
114114
}
115115

116-
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
116+
.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
117117
font-family: "72override", var(--sapFontFamily);
118118
font-size: var(--sapFontSize);
119119
font-weight: normal;
@@ -122,8 +122,8 @@
122122
max-height: 2.1rem;
123123
}
124124

125-
.ui5-card-header .ui5-card-header-text .ui5-card-heading,
126-
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
125+
.ui5-card-header .ui5-card-header-text .ui5-card-title,
126+
.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
127127
text-align: left;
128128
text-overflow: ellipsis;
129129
white-space: normal;
@@ -146,10 +146,10 @@
146146
margin-right: auto;
147147
}
148148

149-
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-heading {
149+
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-title {
150150
text-align: right;
151151
}
152152

153-
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subheading {
153+
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
154154
text-align: right;
155155
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<ui5-card
2424
id="card"
2525
status="4 of 10"
26-
heading="Quick Links"
27-
subheading="quick links"
26+
title-text="Quick Links"
27+
subtitle-text="quick links"
2828
header-interactive
2929
class="myCard">
3030
<ui5-list id="myList3" separators="Inner">
@@ -39,8 +39,8 @@
3939
<ui5-card
4040
id="card2"
4141
status="4 of 10"
42-
heading="Quick Links"
43-
subheading="quick links"
42+
title-text="Quick Links"
43+
subtitle-text="quick links"
4444
class="myCard">
4545
<ui5-icon name="group" slot="avatar"></ui5-icon>
4646
<ui5-list id="myList3" separators="Inner">
@@ -49,15 +49,15 @@
4949
</ui5-list>
5050
</ui5-card>
5151

52-
<ui5-card id="card3" heading="Quick Links" subheading="quick links">
52+
<ui5-card id="card3" title-text="Quick Links" subtitle-text="quick links">
5353
<ui5-list id="myList3" separators="Inner">
5454
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
5555
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
5656
</ui5-list>
5757
</ui5-card>
5858

5959

60-
<ui5-card heading="Linked activities (5)" class="myCard" status="4 of 10" id="actionCard">
60+
<ui5-card title-text="Linked activities (5)" class="myCard" status="4 of 10" id="actionCard">
6161
<ui5-list id="myList3" separators="Inner">
6262
<ui5-li icon="horizontal-bullet-chart">
6363
Increase customer satisfaction by 10% using marketing methods
@@ -72,7 +72,7 @@
7272
</ui5-button>
7373
</ui5-card>
7474

75-
<ui5-card heading="Linked activities (5)" class="myCard" subheading="quick links">
75+
<ui5-card title-text="Linked activities (5)" class="myCard" subtitle-text="quick links">
7676
<ui5-list id="myList3" separators="Inner">
7777
<ui5-li icon="horizontal-bullet-chart">
7878
Increase customer satisfaction by 10% using marketing methods
@@ -87,7 +87,7 @@
8787
</ui5-button>
8888
</ui5-card>
8989

90-
<ui5-card heading="Linked activities (5)">
90+
<ui5-card title-text="Linked activities (5)">
9191
<ui5-list id="myList3" separators="Inner">
9292
<ui5-li icon="horizontal-bullet-chart">
9393
Increase customer satisfaction by 10% using marketing methods
@@ -105,8 +105,8 @@
105105
<h3>Test ariaLabel and ariaLabelledBy</h3>
106106
<ui5-card
107107
id="textAreaAriaLabel"
108-
heading="Linked activities (5)"
109-
subheading="quick links"
108+
title-text="Linked activities (5)"
109+
subtitle-text="quick links"
110110
aria-label="Hello World"
111111
class="myCard">
112112
</ui5-card>
@@ -117,8 +117,8 @@ <h3>Test ariaLabel and ariaLabelledBy</h3>
117117
<ui5-card
118118
id="textAreaAriaLabelledBy"
119119
aria-labelledby="infoText"
120-
heading="New jobs (5)"
121-
subheading="find one">
120+
title-text="New jobs (5)"
121+
subtitle-text="find one">
122122
</ui5-card>
123123

124124
<script>

0 commit comments

Comments
 (0)