Skip to content

Commit a3dd305

Browse files
ilhan007ilhan007
authored
refactor(ui5-table): more(sub)Text replaced by growingButton(sub)Text (#3273)
Change moreText and moreSubtext to growingButtonText and growingButtonSubtext. Part of: #3107 BREAKING_CHANGE: The properties "moreText" and "moreSubtext" have been removed, use "growingButtonText" and "growingButtonSubtext" instead.
1 parent 18ea76d commit a3dd305

24 files changed

+55
-55
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
VtcT3O0SUP+WFCXL1txQutIxxPY=
1+
b4zDkzbz6y2cYEqj8FVnMvuMEvg=

‎packages/main/src/List.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -66,20 +66,20 @@
6666

6767

6868
{{#*inline "moreRow"}}
69-
<div load-more>
69+
<div growing-button>
7070
<div
7171
tabindex="0"
7272
role="button"
73-
aria-labelledby="{{_id}}-showMore-text"
73+
aria-labelledby="{{_id}}-growingButton-text"
7474
?active="{{_loadMoreActive}}"
7575
@click="{{_onLoadMoreClick}}"
7676
@keydown="{{_onLoadMoreKeydown}}"
7777
@keyup="{{_onLoadMoreKeyup}}"
7878
@mousedown="{{_onLoadMoreMousedown}}"
7979
@mouseup="{{_onLoadMoreMouseup}}"
80-
load-more-inner
80+
growing-button-inner
8181
>
82-
<span id="{{_id}}-showMore-text" load-more-text>{{_moreText}}</span>
82+
<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
8383
</div>
8484
</div>
8585
{{/inline}}

‎packages/main/src/List.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@ class List extends UI5Element {
535535
return this.growing === ListGrowingMode.Button;
536536
}
537537

538-
get _moreText() {
538+
get _growingButtonText() {
539539
return this.i18nBundle.getText(LOAD_MORE_TEXT);
540540
}
541541

‎packages/main/src/Table.hbs

+5-5
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
{{#*inline "moreRow"}}
5656
<tr>
5757
<td colspan="{{visibleColumnsCount}}">
58-
<div load-more>
58+
<div growing-button>
5959
<div
6060
tabindex="0"
6161
role="button"
@@ -64,12 +64,12 @@
6464
@click="{{_onLoadMoreClick}}"
6565
@keydown="{{_onLoadMoreKeydown}}"
6666
@keyup="{{_onLoadMoreKeyup}}"
67-
load-more-inner
67+
growing-button-inner
6868
>
69-
<span id="{{_id}}-showMore-text" load-more-text>{{_moreText}}</span>
69+
<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
7070

71-
{{#if moreSubtext}}
72-
<span id="{{_id}}-showMore-desc" load-more-subtext>{{moreSubtext}}</span>
71+
{{#if growingButtonSubtext}}
72+
<span id="{{_id}}-growingButton-subtext" growing-button-subtext>{{growingButtonSubtext}}</span>
7373
{{/if}}
7474
</div>
7575
</div>

‎packages/main/src/Table.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const metadata = {
8282
},
8383

8484
/**
85-
* Defines the text that will be displayed inside the <code>More</code> button at the bottom of the table,
85+
* Defines the text that will be displayed inside the growing button at the bottom of the table,
8686
* meant for loading more rows upon press.
8787
*
8888
* <br><br>
@@ -92,25 +92,25 @@ const metadata = {
9292
*
9393
* @type {string}
9494
* @defaultvalue ""
95-
* @since 1.0.0-rc.11
95+
* @since 1.0.0-rc.15
9696
* @public
9797
*/
98-
moreText: {
98+
growingButtonText: {
9999
type: String,
100100
},
101101

102102
/**
103-
* Defines the subtext that will be displayed under the <code>moreText</code>.
103+
* Defines the subtext that will be displayed under the <code>growingButtonText</code>.
104104
*
105105
* <br><br>
106106
* <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.
107107
*
108108
* @type {string}
109109
* @defaultvalue ""
110-
* @since 1.0.0-rc.11
110+
* @since 1.0.0-rc.15
111111
* @public
112112
*/
113-
moreSubtext: {
113+
growingButtonSubtext: {
114114
type: String,
115115
},
116116

@@ -691,8 +691,8 @@ class Table extends UI5Element {
691691
return !isIE() && this.growing === TableGrowingMode.Scroll;
692692
}
693693

694-
get _moreText() {
695-
return this.moreText || this.i18nBundle.getText(LOAD_MORE_TEXT);
694+
get _growingButtonText() {
695+
return this.growingButtonText || this.i18nBundle.getText(LOAD_MORE_TEXT);
696696
}
697697

698698
get ariaLabelText() {
@@ -710,10 +710,10 @@ class Table extends UI5Element {
710710

711711
get loadMoreAriaLabelledBy() {
712712
if (this.moreDataText) {
713-
return `${this._id}-showMore-text ${this._id}-showMore-desc`;
713+
return `${this._id}-growingButton-text ${this._id}-growingButton-subtext`;
714714
}
715715

716-
return `${this._id}-showMore-text`;
716+
return `${this._id}-growingButton-text`;
717717
}
718718

719719
get tableEndDOM() {

‎packages/main/src/themes/LoadMoreRow.css renamed to ‎packages/main/src/themes/GrowingButton.css

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[load-more] {
1+
[growing-button] {
22
display: flex;
33
align-items: center;
44
padding: var(--_ui5_load_more_padding);
@@ -8,7 +8,7 @@
88
outline: none;
99
}
1010

11-
[load-more-inner] {
11+
[growing-button-inner] {
1212
display: flex;
1313
align-items: center;
1414
justify-content: center;
@@ -22,29 +22,29 @@
2222
box-sizing: border-box;
2323
}
2424

25-
[load-more-inner]:focus {
25+
[growing-button-inner]:focus {
2626
outline: var(--_ui5_load_more_outline_width) dotted var(--sapContent_FocusColor);
2727
outline-offset: -0.125rem;
2828
border-color: transparent;
2929
}
3030

31-
[load-more-inner]:hover {
31+
[growing-button-inner]:hover {
3232
background-color: var(--sapList_Hover_Background);
3333
}
3434

35-
[load-more-inner]:active,
36-
[load-more-inner][active] {
35+
[growing-button-inner]:active,
36+
[growing-button-inner][active] {
3737
background-color: var(--sapList_Active_Background);
3838
border-color: var(--sapList_Active_Background);
3939
}
4040

41-
[load-more-inner]:active > *,
42-
[load-more-inner][active] > * {
41+
[growing-button-inner]:active > *,
42+
[growing-button-inner][active] > * {
4343
color: var(--sapList_Active_TextColor);
4444
}
4545

46-
[load-more-text],
47-
[load-more-subtext] {
46+
[growing-button-text],
47+
[growing-button-subtext] {
4848
width: 100%;
4949
text-align: center;
5050
font-family: "72override", var(--sapFontFamily);
@@ -54,14 +54,14 @@
5454
box-sizing: border-box;
5555
}
5656

57-
[load-more-text] {
57+
[growing-button-text] {
5858
height: var(--_ui5_load_more_text_height);
5959
padding: 0.875rem 1rem 0 1rem;
6060
font-size: var(--_ui5_load_more_text_font_size);
6161
font-weight: bold;
6262
}
6363

64-
[load-more-subtext] {
64+
[growing-button-subtext] {
6565
font-size: var(--sapFontSize);
6666
padding: var(--_ui5_load_more_desc_padding);
6767
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "./LoadMoreRow.css";
1+
@import "./GrowingButton.css";
22

33
:host(:not([hidden])) {
44
display: block;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "./LoadMoreRow.css";
1+
@import "./GrowingButton.css";
22

33
:host(:not([hidden])) {
44
display: inline-block;
@@ -70,7 +70,7 @@ tr {
7070
z-index: 1;
7171
}
7272

73-
:host([busy]) [load-more] {
73+
:host([busy]) [growing-button] {
7474
opacity: 0.72;
7575
}
7676

‎packages/main/src/themes/base/LoadMoreRow-parameters.css renamed to ‎packages/main/src/themes/base/GrowingButton-parameters.css

File renamed without changes.

‎packages/main/src/themes/sap_belize/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@import "./TabContainer-parameters.css";
2828
@import "./Table-parameters.css";
2929
@import "../base/TableRow-parameters.css";
30-
@import "../base/LoadMoreRow-parameters.css";
30+
@import "../base/GrowingButton-parameters.css";
3131
@import "../base/TextArea-parameters.css";
3232
@import "./TimePicker-parameters.css";
3333
@import "../base/Title-parameters.css";

‎packages/main/src/themes/sap_fiori_3_hcw/LoadMoreRow-parameters.css renamed to ‎packages/main/src/themes/sap_belize_hcb/GrowingButton-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../base/LoadMoreRow-parameters.css";
1+
@import "../base/GrowingButton-parameters.css";
22

33
:root {
44
--_ui5_load_more_padding: 0.25rem;

‎packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@import "./TabContainer-parameters.css";
2828
@import "./Table-parameters.css";
2929
@import "./TableRow-parameters.css";
30-
@import "./LoadMoreRow-parameters.css";
30+
@import "./GrowingButton-parameters.css";
3131
@import "./TextArea-parameters.css";
3232
@import "../base/Title-parameters.css";
3333
@import "../base/Toast-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/LoadMoreRow-parameters.css renamed to ‎packages/main/src/themes/sap_belize_hcw/GrowingButton-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../base/LoadMoreRow-parameters.css";
1+
@import "../base/GrowingButton-parameters.css";
22

33
:root {
44
--_ui5_load_more_padding: 0.25rem;

‎packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@import "./TabContainer-parameters.css";
2828
@import "./Table-parameters.css";
2929
@import "./TableRow-parameters.css";
30-
@import "./LoadMoreRow-parameters.css";
30+
@import "./GrowingButton-parameters.css";
3131
@import "./TextArea-parameters.css";
3232
@import "../base/Title-parameters.css";
3333
@import "../base/Toast-parameters.css";

‎packages/main/src/themes/sap_fiori_3/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
@import "./CalendarHeader-parameters.css";
3434
@import "../base/Table-parameters.css";
3535
@import "../base/TableRow-parameters.css";
36-
@import "../base/LoadMoreRow-parameters.css";
36+
@import "../base/GrowingButton-parameters.css";
3737
@import "../base/Title-parameters.css";
3838
@import "./Token-parameters.css";
3939
@import "../base/ValueStateMessage-parameters.css";

‎packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
@import "./CalendarHeader-parameters.css";
3333
@import "../base/Table-parameters.css";
3434
@import "../base/TableRow-parameters.css";
35-
@import "../base/LoadMoreRow-parameters.css";
35+
@import "../base/GrowingButton-parameters.css";
3636
@import "../base/Title-parameters.css";
3737
@import "./Token-parameters.css";
3838
@import "../base/ValueStateMessage-parameters.css";

‎packages/main/src/themes/sap_belize_hcw/LoadMoreRow-parameters.css renamed to ‎packages/main/src/themes/sap_fiori_3_hcb/GrowingButton-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../base/LoadMoreRow-parameters.css";
1+
@import "../base/GrowingButton-parameters.css";
22

33
:root {
44
--_ui5_load_more_padding: 0.25rem;

‎packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@import "./TabContainer-parameters.css";
2828
@import "./Table-parameters.css";
2929
@import "./TableRow-parameters.css";
30-
@import "./LoadMoreRow-parameters.css";
30+
@import "./GrowingButton-parameters.css";
3131
@import "./TextArea-parameters.css";
3232
@import "./TimePicker-parameters.css";
3333
@import "../base/Title-parameters.css";

‎packages/main/src/themes/sap_fiori_3_hcb/LoadMoreRow-parameters.css renamed to ‎packages/main/src/themes/sap_fiori_3_hcw/GrowingButton-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../base/LoadMoreRow-parameters.css";
1+
@import "../base/GrowingButton-parameters.css";
22

33
:root {
44
--_ui5_load_more_padding: 0.25rem;

‎packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@import "./TabContainer-parameters.css";
2828
@import "./Table-parameters.css";
2929
@import "./TableRow-parameters.css";
30-
@import "./LoadMoreRow-parameters.css";
30+
@import "./GrowingButton-parameters.css";
3131
@import "./TextArea-parameters.css";
3232
@import "./TimePicker-parameters.css";
3333
@import "../base/Title-parameters.css";

‎packages/main/test/pages/TableLoadMore.html renamed to ‎packages/main/test/pages/TableGrowingWithButton.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</ui5-table>
4343

4444
<h3>Custom texts</h3>
45-
<ui5-table id="tbl2" growing="Button" more-text="Load more" more-subtext="4 of 123">
45+
<ui5-table id="tbl2" growing="Button" growing-button-text="Load more" growing-button-subtext="4 of 123">
4646
<ui5-table-column id="column-1" slot="columns" width="350px">
4747
<ui5-label>Product</ui5-label>
4848
</ui5-table-column>
@@ -778,7 +778,7 @@ <h3>Custom texts</h3>
778778

779779
tbl.insertAdjacentHTML('beforeend', html);
780780

781-
tbl.setAttribute("more-subtext", "[" + loadMoreTracker * ROWS + " / 123]");
781+
tbl.setAttribute("growing-button-subtext", "[" + loadMoreTracker * ROWS + " / 123]");
782782
inputLoadMoreCounter.value = loadMoreTracker - 1;
783783

784784
setTimeout(function() {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ <h3>Table with No Data</h3>
506506
<section>
507507
<h3>Growing Table with "More" button</h3>
508508
<div class="snippet">
509-
<ui5-table id="myTbl" growing="Button" more-subtext="[4 / 12]">
509+
<ui5-table id="myTbl" growing="Button" growing-button-subtext="[4 / 12]">
510510
<ui5-table-column id="column-1" slot="columns" width="350px">
511511
<ui5-label>Product</ui5-label>
512512
</ui5-table-column>
@@ -531,7 +531,7 @@ <h3>Growing Table with "More" button</h3>
531531
</ui5-table>
532532
</div>
533533
<pre class="prettyprint lang-html"><xmp>
534-
<ui5-table id="tbl" growing="Button" more-subtext="[4 / 12]"></ui5-table>
534+
<ui5-table id="tbl" growing="Button" growing-button-subtext="[4 / 12]"></ui5-table>
535535

536536
<script>
537537
tbl.addEventListener("load-more", function() {
@@ -804,7 +804,7 @@ <h3>Growing Table with "More" button</h3>
804804
if (loads === 3) {
805805
growingTable.growing = "None";
806806
} else {
807-
growingTable.setAttribute("more-subtext", loads * rows + " of 12");
807+
growingTable.setAttribute("growing-button-subtext", loads * rows + " of 12");
808808
}
809809
}
810810

‎packages/main/test/specs/List.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@ describe("List Tests", () => {
369369
});
370370

371371
it('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
372-
const growingListButton = $('#growingListButton').shadow$("div[load-more-inner]");
372+
const growingListButton = $('#growingListButton').shadow$("div[growing-button-inner]");
373373
const nextInteractiveElement = $('#nextInteractiveElement');
374374

375375
growingListButton.click() // focus growing button

‎packages/main/test/specs/Table.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@ describe("Table general interaction", () => {
7777

7878
describe("Growing Table on 'More' button press", () => {
7979
it("tests the 'load-more' event", () => {
80-
browser.url(`http://localhost:${PORT}/test-resources/pages/TableLoadMore.html`);
80+
browser.url(`http://localhost:${PORT}/test-resources/pages/TableGrowingWithButton.html`);
8181

8282
const inputResult = browser.$("#inputLoadMoreCounter");
83-
const loadMoreTrigger = browser.$("#tbl").shadow$("[load-more-inner]");
83+
const loadMoreTrigger = browser.$("#tbl").shadow$("[growing-button-inner]");
8484

8585
// act
8686
loadMoreTrigger.click();

0 commit comments

Comments
 (0)