Merge pull request #6093 from IgniteUI/apetrov/add-list-select-vnext

docs(list): update list documentation with the new "selected" property (vnext)

Author: simeonoff

en/components/list.md

@@ -549,46 +549,52 @@ Finally, we need to apply the filtering pipe to our contacts data before we can
 
 ## List Item Selection
 
-As you probably have already noticed, list items do not provide selection states. However, if your application requires your list to keep track of which item is selected, we give you an example of how this can be achieved. All you need to do is keep track of the state somewhere in your component, or in the data the list is bound to.
+The list items have a `selected` property that helps us track which items are "selected". This property allows us to identify and manage the selection status of each item.
 
-Here's an example, in which we apply a background color to the list according to the theme's secondary 500 color, based on state tracking coming from the data the list is bound to:
+Here's an example illustrating how the visual style of the items changes when using the `selected` property:
 
 <code-view style="height: 420px"
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/lists/list-item-selection" >
 </code-view>
 
-What we are doing is we are adding an additional `selected` property to each data member, which defaults to `false`. Upon list item click, we're resetting all the `selected` properties in the data collection and setting the one corresponding to the clicked item to `true`. Based on the selected property, we're applying a css class to the list item which gives it the selected background.
+By default, the `selected` property is set to `false`. We can toggle its value using an inline expression bound to the `(click)` event on each list item, effectively switching the visual state of the item each time it's clicked.
 
 ```html
 <igx-list>
-    <igx-list-item isHeader="true">Contacts</igx-list-item>
-    <igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
-                    (click)="selectItem(contact)"
-                    *ngFor="let contact of contacts | igxFilter: filterContacts;">
+    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+    @for (contact of contacts | igxFilter: filterContacts; track contact) {
+      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
         <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
         <span igxListLineTitle>{{ contact.name }}</span>
         <span igxListLineSubTitle>{{ contact.phone }}</span>
-        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
-    </igx-list-item>
-</igx-list>
-```
-
-```typescript
-public selectItem(item) {
-    if (!item.selected) {
-        this.contacts.forEach(c => c.selected = false);
-        item.selected = true;
+        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+        (mousedown)="mousedown($event)">star</igx-icon>
+      </igx-list-item>
     }
-}
+  </igx-list>
 ```
 
+The list item also exposes a few CSS variables which you can use to style different parts of the selected elements:
+
+- `--item-background-selected`
+- `--item-text-color-selected`
+- `--item-title-color-selected`
+- `--item-action-color-selected`
+- `--item-subtitle-color-selected`
+- `--item-thumbnail-color-selected`
+
 ```scss
-.selected {
-    background-color: hsla(var(--igx-secondary-500))
+igx-list-item {
+  --item-background-selected: var(--ig-secondary-500);
+  --item-title-color-selected: var(--ig-secondary-500-contrast);
+  --item-subtitle-color-selected: var(--ig-info-100);
 }
 ```
 
+If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme)
+
 <div class="divider--half"></div>
 
 ## Chat Component

en/components/themes/palettes.md

@@ -107,11 +107,11 @@ Apart from having a single global palette, you can also create several palettes
 /* styles.css */
 
 .blue-theme {
-    --ig-primary-500: #0008ff;
+  --ig-primary-500: #0008ff;
 }
 
 .red-theme {
-    --ig-primary-500: #ff0400;
+  --ig-primary-500: #ff0400;
 }
 ```
 
@@ -172,12 +172,13 @@ Be mindful when changing the `gray` and `surface` color variants as they are use
 
 So far we've covered the `primary`, `secondary`, `gray`, and `surface` color variants and how you can override them. There are four more colors - `info`, `success`, `warn`, and `error`. They are usually used to set the colors in different states. For example, the `igx-input-group` component uses these colors in its input validation states.
 They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other varints will be generated.
+
 ```css
 :root {
-    --ig-info-500: #1377d5;
-    --ig-success-500: #4eb862;
-    --ig-warn-500: #faa419;
-    --ig-error-500: #ff134a;
+  --ig-info-500: #1377d5;
+  --ig-success-500: #4eb862;
+  --ig-warn-500: #faa419;
+  --ig-error-500: #ff134a;
 }
 ```