Skip to content

fix(list items): rename info & infoState properties #3259

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions packages/fiori/test/pages/FCL.html
Original file line number Diff line number Diff line change
Expand Up @@ -526,26 +526,26 @@

<br><br>
<ui5-list id="col1list" header-text="Products (13)" mode="SingleSelect">
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="47.00 EUR">10 inch Portable DVD
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="47.00 EUR">10 inch Portable DVD
</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="249.00 EUR">7 inch Widescreen
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="249.00 EUR">7 inch Widescreen
Portable DVD Player w MP3</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end info="947.00 EUR">Astro Laptop 1516
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="947.00 EUR">Astro Laptop 1516
</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end info="647.00 EUR">Astro Phone 6</ui5-li>
<ui5-li description=HT-1252 icon='slim-arrow-right' icon-end info="27.99 EUR">Audio/Video Cable Kit - 4m
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="647.00 EUR">Astro Phone 6</ui5-li>
<ui5-li description=HT-1252 icon='slim-arrow-right' icon-end additional-text="27.99 EUR">Audio/Video Cable Kit - 4m
</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="447.90 EUR">Beam Breaker B-1</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="647.50 EUR">Beam Breaker B-2</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="847.80 EUR">Beam Breaker B-3</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="1,250.00 EUR">Beam Breaker B-4
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="447.90 EUR">Beam Breaker B-1</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="647.50 EUR">Beam Breaker B-2</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="847.80 EUR">Beam Breaker B-3</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="1,250.00 EUR">Beam Breaker B-4
</ui5-li>
<ui5-li description=HT-8001 icon='slim-arrow-right' icon-end info="1,288.00 EUR">Camcorder View</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="996.00 EUR">Benda Laptop 1408
<ui5-li description=HT-8001 icon='slim-arrow-right' icon-end additional-text="1,288.00 EUR">Camcorder View</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="996.00 EUR">Benda Laptop 1408
</ui5-li>
<ui5-li description=HT-0003 icon='slim-arrow-right' icon-end info="147.00 EUR">Cepat Tablet 10.5
<ui5-li description=HT-0003 icon='slim-arrow-right' icon-end additional-text="147.00 EUR">Cepat Tablet 10.5
</ui5-li>
<ui5-li description=HT-1001 icon='slim-arrow-right' icon-end info="87.90 EUR">Gladiator MX</ui5-li>
<ui5-li description=HT-1001 icon='slim-arrow-right' icon-end additional-text="87.90 EUR">Gladiator MX</ui5-li>
</ui5-list>
</div>

Expand Down
28 changes: 14 additions & 14 deletions packages/fiori/test/pages/ShellBar.html
Original file line number Diff line number Diff line change
Expand Up @@ -189,20 +189,20 @@ <h3>ShellBar in Compact</h3>
<ui5-shellbar>
<ui5-input id="mySearch" slot="searchField" show-suggestions value-state="Information">
<div slot="valueStateMessage">Instructions</div>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">1</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">2</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">3</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">4</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">5</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">6</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">7</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">8</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">9</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">10</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">11</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">12</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">13</ui5-li>
<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">14</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">1</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">2</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">3</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">4</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">5</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">6</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">7</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">8</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">9</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">10</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">11</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">12</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">13</ui5-li>
<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">14</ui5-li>
</ui5-input>
</ui5-shellbar>

Expand Down
26 changes: 13 additions & 13 deletions packages/fiori/test/samples/FlexibleColumnLayout.sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,19 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>

<br><br>
<ui5-list id="col1list" header-text="Products (13)" mode="SingleSelect">
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="47.00 EUR">10 inch Portable DVD</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="249.00 EUR">7 inch WidescreenPortable DVD Player w MP3</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end info="947.00 EUR">Astro Laptop 1516</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end info="647.00 EUR">Astro Phone 6</ui5-li>
<ui5-li description=HT-1252 icon='slim-arrow-right' icon-end info="27.99 EUR">Audio/Video Cable Kit - 4m</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="447.90 EUR">Beam Breaker B-1</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="647.50 EUR">Beam Breaker B-2</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end info="847.80 EUR">Beam Breaker B-3</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="1,250.00 EUR">Beam Breaker B-4</ui5-li>
<ui5-li description=HT-8001 icon='slim-arrow-right' icon-end info="1,288.00 EUR">Camcorder View</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end info="996.00 EUR">Benda Laptop 1408</ui5-li>
<ui5-li description=HT-0003 icon='slim-arrow-right' icon-end info="147.00 EUR">Cepat Tablet 10.5</ui5-li>
<ui5-li description=HT-1001 icon='slim-arrow-right' icon-end info="87.90 EUR">Gladiator MX</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="47.00 EUR">10 inch Portable DVD</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="249.00 EUR">7 inch WidescreenPortable DVD Player w MP3</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="947.00 EUR">Astro Laptop 1516</ui5-li>
<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="647.00 EUR">Astro Phone 6</ui5-li>
<ui5-li description=HT-1252 icon='slim-arrow-right' icon-end additional-text="27.99 EUR">Audio/Video Cable Kit - 4m</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="447.90 EUR">Beam Breaker B-1</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="647.50 EUR">Beam Breaker B-2</ui5-li>
<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="847.80 EUR">Beam Breaker B-3</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="1,250.00 EUR">Beam Breaker B-4</ui5-li>
<ui5-li description=HT-8001 icon='slim-arrow-right' icon-end additional-text="1,288.00 EUR">Camcorder View</ui5-li>
<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="996.00 EUR">Benda Laptop 1408</ui5-li>
<ui5-li description=HT-0003 icon='slim-arrow-right' icon-end additional-text="147.00 EUR">Cepat Tablet 10.5</ui5-li>
<ui5-li description=HT-1001 icon='slim-arrow-right' icon-end additional-text="87.90 EUR">Gladiator MX</ui5-li>
</ui5-list>
</div>

Expand Down
14 changes: 7 additions & 7 deletions packages/main/src/AvatarGroup.hbs
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="ui5-avatar-group-root">
<div
class="ui5-avatar-group-items"
@keyup="{{_onkeyup}}"
@keydown="{{_onkeydown}}"
@focusin="{{_onfocusin}}"
<div
class="ui5-avatar-group-items"
@keyup="{{_onkeyup}}"
@keydown="{{_onkeydown}}"
@focusin="{{_onfocusin}}"
tabindex="{{_groupTabIndex}}"
@click="{{_onClick}}"
@ui5-click="{{_onUI5Click}}"
Expand All @@ -16,8 +16,8 @@
{{#if _customOverflowButton}}
<slot name="overflowButton"></slot>
{{else}}
<ui5-button
._buttonAccInfo="{{_overflowButtonAccInfo}}"
<ui5-button
._buttonAccInfo="{{_overflowButtonAccInfo}}"
aria-label="{{_overflowButtonAriaLabelText}}"
?hidden="{{_overflowBtnHidden}}"
?non-interactive={{_isGroup}}
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/ComboBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ import StandardListItem from "./StandardListItem.js";
const metadata = {
tag: "ui5-combobox",
languageAware: true,
defaultSlot: "items",
properties: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */ {
/**
* Defines the value of the component.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ComboBoxPopover.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
{{#each _filteredItems}}
<ui5-li
type="Active"
info={{this.additionalText}}
additional-text={{this.additionalText}}
._tabIndex={{itemTabIndex}}
.mappedItem={{this}}
?selected={{this.selected}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/InputPopover.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,9 @@
<ui5-li-suggestion-item
image="{{this.image}}"
icon="{{this.icon}}"
info="{{this.info}}"
additionalText="{{this.additionalText}}"
type="{{this.type}}"
info-state="{{this.infoState}}"
additional-text-state="{{this.additionalText}}"
@ui5-_item-press="{{ fnOnSuggestionItemPress }}"
data-ui5-key="{{key}}"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiComboBoxPopover.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
{{#each _filteredItems}}
<ui5-li
type="{{../_listItemsType}}"
info={{this.additionalText}}
additional-text={{this.additionalText}}
?selected={{this.selected}}
data-ui5-token-id="{{this._id}}"
data-ui5-stable="{{this.stableDomRef}}"
Expand Down
8 changes: 4 additions & 4 deletions packages/main/src/StandardListItem.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<div class="ui5-li-description-info-wrapper">
<span part="description" class="ui5-li-desc">{{description}}</span>

{{#if info}}
<span part="info" class="ui5-li-info">{{info}}</span>
{{#if additionalText}}
<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
{{/if}}
</div>
{{/if}}
Expand All @@ -17,8 +17,8 @@
{{/unless}}
</div>
{{#unless description}}
{{#if info}}
<span part="info" class="ui5-li-info">{{info}}</span>
{{#if additionalText}}
<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
{{/if}}
{{/unless}}
{{/inline}}
Expand Down
14 changes: 7 additions & 7 deletions packages/main/src/StandardListItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,25 +62,25 @@ const metadata = {
},

/**
* Defines the <code>info</code>, displayed in the end of the list item.
* Defines the <code>additionalText</code>, displayed in the end of the list item.
* @type {string}
* @public
* @since 0.13.0
* @since 1.0.0-rc.15
*/
info: {
additionalText: {
type: String,
},

/**
* Defines the state of the <code>info</code>.
* Defines the state of the <code>additionalText</code>.
* <br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
* @type {ValueState}
* @defaultvalue "None"
* @public
* @since 0.13.0
* @since 1.0.0-rc.15
*/
infoState: {
additionalTextState: {
type: ValueState,
defaultValue: ValueState.None,
},
Expand Down Expand Up @@ -126,7 +126,7 @@ const metadata = {
* <ul>
* <li>title - Used to style the title of the list item</li>
* <li>description - Used to style the description of the list item</li>
* <li>info - Used to style the info of the list item</li>
* <li>additional-text - Used to style the additionalText of the list item</li>
* <li>icon - Used to style the icon of the list item</li>
* </ul>
*
Expand Down
10 changes: 6 additions & 4 deletions packages/main/src/SuggestionItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,23 +89,25 @@ const metadata = {
},

/**
* Defines the <code>info</code>, displayed in the end of the item.
* Defines the <code>additionalText</code>, displayed in the end of the item.
* @type {string}
* @since 1.0.0-rc.15
* @public
*/
info: {
additionalText: {
type: String,
},

/**
* Defines the state of the <code>info</code>.
* Defines the state of the <code>additionalText</code>.
* <br><br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
* @type {ValueState}
* @defaultvalue "None"
* @since 1.0.0-rc.15
* @public
*/
infoState: {
additionalTextState: {
type: ValueState,
defaultValue: ValueState.None,
},
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/SuggestionListItem.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</span>

{{#if info}}
<span part="info" class="ui5-li-info">{{info}}</span>
<span part="info" class="ui5-li-additional-text">{{info}}</span>
{{/if}}
</div>
{{/if}}
Expand All @@ -26,7 +26,7 @@
</div>
{{#unless hasDescription}}
{{#if info}}
<span part="info" class="ui5-li-info">{{info}}</span>
<span part="info" class="ui5-li-additional-text">{{info}}</span>
{{/if}}
{{/unless}}
{{/inline}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Tree.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
type="Active"
level="{{this.level}}"
icon="{{this.treeItem.icon}}"
info="{{this.treeItem.info}}"
info-state="{{this.treeItem.infoState}}"
additional-text="{{this.treeItem.additionalText}}"
additional-text-state="{{this.treeItem.additionalTextState}}"
?_toggle-button-end="{{ ../_toggleButtonEnd}}"
?_minimal="{{../_minimal}}"
.treeItem="{{this.treeItem}}"
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/TreeItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,25 +69,25 @@ const metadata = {
},

/**
* Defines the <code>info</code>, displayed in the end of the tree item.
* Defines the <code>additionalText</code>, displayed in the end of the tree item.
* @type {string}
* @public
* @since 1.0.0-rc.12
* @since 1.0.0-rc.15
*/
info: {
additionalText: {
type: String,
},

/**
* Defines the state of the <code>info</code>.
* Defines the state of the <code>additionalText</code>.
* <br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
* @type {ValueState}
* @defaultvalue "None"
* @public
* @since 1.0.0-rc.12
* @since 1.0.0-rc.15
*/
infoState: {
additionalTextState: {
type: ValueState,
defaultValue: ValueState.None,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TreeListItem.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
{{/if}}

{{#if info}}
<span part="info" class="ui5-li-info">{{info}}</span>
<span part="info" class="ui5-li-additional-text">{{info}}</span>
{{/if}}
</div>
{{/inline}}
Expand Down
14 changes: 7 additions & 7 deletions packages/main/src/TreeListItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,25 +73,25 @@ const metadata = {
},

/**
* Defines the <code>info</code>, displayed in the end of the tree item.
* Defines the <code>additionalText</code>, displayed in the end of the tree item.
* @type {string}
* @public
* @since 1.0.0-rc.12
* @since 1.0.0-rc.15
*/
info: {
additionalText: {
type: String,
},

/**
* Defines the state of the <code>info</code>.
* Defines the state of the <code>additionalText</code>.
* <br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
* @type {ValueState}
* @defaultvalue "None"
* @public
* @since 1.0.0-rc.12
* @since 1.0.0-rc.15
*/
infoState: {
additionalTextState: {
type: ValueState,
defaultValue: ValueState.None,
},
Expand Down Expand Up @@ -207,7 +207,7 @@ const metadata = {
* The <code>ui5-li-tree</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>title - Used to style the title of the tree list item</li>
* <li>info - Used to style the info of the tree list item</li>
* <li>additionalText - Used to style the additionalText of the tree list item</li>
* <li>icon - Used to style the icon of the tree list item</li>
* </ul>
*
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/features/InputSuggestions.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ class Suggestions {
image: suggestion.image || undefined,
icon: suggestion.icon || undefined,
type: suggestion.type || undefined,
info: suggestion.info || undefined,
infoState: suggestion.infoState,
additionalText: suggestion.additionalText || undefined,
additionalTextState: suggestion.additionalTextState,
group: suggestion.group,
key: idx,
});
Expand Down
Loading