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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e3dbd4
fix(list items): rename info & infoState properties
fifoosid May 17, 2021
140e099
fix failing tests
fifoosid May 17, 2021
22994e6
fix comments
fifoosid May 19, 2021
f37cf7e
merge master branch
fifoosid May 20, 2021
65377a3
fix comments
fifoosid May 20, 2021
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
1 change: 0 additions & 1 deletion packages/main/src/ComboBox.js
View file
Open in desktop
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 <code>ui5-combobox</code>.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ComboBoxPopover.hbs
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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="additionalText" class="ui5-li-info">{{additionalText}}</span>
Copy link
Contributor

@nnaydenow nnaydenow May 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not familiar with part but should we keep its value in camelCase style?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nnaydenow we decided to write the CSS Shadow Parts in kebab-case

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ilhan007 we can submit this when @fifoosid fix this

{{/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="additionalText" class="ui5-li-info">{{additionalText}}</span>
{{/if}}
{{/unless}}
{{/inline}}
Expand Down
14 changes: 7 additions & 7 deletions packages/main/src/StandardListItem.js
View file
Open in desktop
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>additionalText - 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
View file
Open in desktop
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/Tree.hbs
View file
Open in desktop
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
View file
Open in desktop
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
14 changes: 7 additions & 7 deletions packages/main/src/TreeListItem.js
View file
Open in desktop
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
View file
Open in desktop
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
12 changes: 6 additions & 6 deletions packages/main/src/themes/ListItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,27 +32,27 @@
color: var(--sapList_Active_TextColor);
}

/* [ui5-li]: title, description, info state */
/* [ui5-li]: title, description, additionalTextState */
:host([active][actionable]) .ui5-li-title,
:host([active][actionable]) .ui5-li-desc,
:host([active][actionable]) .ui5-li-info {
color: var(--sapList_Active_TextColor);
}

/* [ui5-li]: infoState */
:host([info-state="Warning"]) .ui5-li-info {
/* [ui5-li]: additionalTextState */
:host([additional-text-state="Warning"]) .ui5-li-info {
color: var(--sapCriticalTextColor);
}

:host([info-state="Success"]) .ui5-li-info {
:host([additional-text-state="Success"]) .ui5-li-info {
color: var(--sapPositiveTextColor);
}

:host([info-state="Error"]) .ui5-li-info {
:host([additional-text-state="Error"]) .ui5-li-info {
color: var(--sapNegativeTextColor);
}

:host([info-state="Information"]) .ui5-li-info {
:host([additional-text-state="Information"]) .ui5-li-info {
color: var(--sapInformativeTextColor);
}

Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/themes/TreeListItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,24 +89,24 @@
color: var(--sapList_Active_TextColor);
}

/* [ui5-li]: infoState */
:host([info-state="Warning"]) .ui5-li-tree-info {
/* [ui5-li]: additionalTextState */
:host([additional-text-state="Warning"]) .ui5-li-tree-info {
color: var(--sapCriticalTextColor);
}

:host([info-state="Success"]) .ui5-li-tree-info {
:host([additional-text-state="Success"]) .ui5-li-tree-info {
color: var(--sapPositiveTextColor);
}

:host([info-state="Error"]) .ui5-li-tree-info {
:host([additional-text-state="Error"]) .ui5-li-tree-info {
color: var(--sapNegativeTextColor);
}

:host([info-state="Information"]) .ui5-li-tree-info {
:host([additional-text-state="Information"]) .ui5-li-tree-info {
color: var(--sapInformativeTextColor);
}

/* [ui5-li]: info */
/* [ui5-li]: additionalText */
.ui5-li-tree-info {
margin: 0 0.25rem;
color: var(--sapNeutralTextColor);
Expand Down
Loading