Merge pull request #295 from IgniteUI/apetrov/add-recommended-slots

docs: add slot content recommendations

Author: simeonoff

docs/xplat/src/content/en/components/grids/list.mdx

@@ -24,18 +24,14 @@ The {Platform} Button Component lets you enable clickable elements that trigger
 
 </PlatformBlock>
 
-
 ## {Platform} Button Example
 
 <Sample src="/inputs/button/overview" height={100} alt="{Platform} Button Example" />
 
-
 ## Usage
 
-
 <PlatformBlock for="WebComponents">
 
-
 First, you need to install the {ProductName} by running the following command:
 
 ```cmd
@@ -53,14 +49,10 @@ defineComponents(IgcButtonComponent);
 
 For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
 
-
 </PlatformBlock>
 
-
-
 <PlatformBlock for="React">
 
-
 First, you need to the install the corresponding {ProductName} npm package by running the following command:
 
 ```cmd
@@ -76,12 +68,8 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 </PlatformBlock>
 
-
-
 <PlatformBlock for="Blazor">
 
-
-
 Before using the <ApiLink pkg="core" type="Button" />, you need to register it as follows:
 
 ```razor
@@ -96,10 +84,8 @@ You will also need to link an additional CSS file to apply the styling to the <A
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 ```
 
-
 </PlatformBlock>
 
-
 The simplest way to start using the <ApiLink pkg="core" type="Button" /> is as follows:
 
 <PlatformBlock for="WebComponents">
@@ -130,11 +116,14 @@ The simplest way to start using the <ApiLink pkg="core" type="Button" /> is as f
 
 With `prefix` and `suffix` slots of the <ApiLink pkg="core" type="Button" /> component, we can add different content before and after the main content of the button.
 
+We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots.
+
 <PlatformBlock for="React">
 
 ```tsx
 <IgrButton type="button" variant="contained">
-    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
+    <span slot="prefix">Download</span>
+    <IgrIcon slot="suffix" name="download"></IgrIcon>
 </IgrButton>
 ```
 
@@ -144,7 +133,8 @@ With `prefix` and `suffix` slots of the <ApiLink pkg="core" type="Button" /> com
 
 ```html
 <igc-button type="button" variant="contained">
-    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
+    <span slot="prefix">Download</span>
+    <igc-icon slot="suffix" name="download"></igc-icon>
 </igc-button>
 ```
 
@@ -154,7 +144,8 @@ With `prefix` and `suffix` slots of the <ApiLink pkg="core" type="Button" /> com
 
 ```razor
 <IgbButton Variant="@ButtonVariant.Contained">
-    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
+    <span slot="prefix">Download</span>
+    <IgbIcon slot="suffix" IconName="download"></IgbIcon>
 </IgbButton>
 ```
 
@@ -178,7 +169,7 @@ Use the <ApiLink pkg="core" type="Button" member="variant" label="Variant" /> at
 <PlatformBlock for="React">
 
 ```tsx
-<IgrButton variant="contained"><span>Contained</span></IgrButton>
+<IgrButton variant="contained">Contained</IgrButton>
 ```
 
 </PlatformBlock>
@@ -209,7 +200,7 @@ All you have to do to create an `outlined` button is to change the value of the
 <PlatformBlock for="React">
 
 ```tsx
-<IgrButton variant="outlined"><span>Outlined</span></IgrButton>
+<IgrButton variant="outlined">Outlined</IgrButton>
 ```
 
 </PlatformBlock>
@@ -240,7 +231,7 @@ Analogically, we can switch to `flat` variant.
 <PlatformBlock for="React">
 
 ```tsx
-<IgrButton variant="flat"><span>Flat</span></IgrButton>
+<IgrButton variant="flat">Flat</IgrButton>
 ```
 
 </PlatformBlock>
@@ -271,7 +262,7 @@ We can create a floating action button by setting the <ApiLink pkg="core" type="
 <PlatformBlock for="React">
 
 ```tsx
-<IgrButton variant="fab"><span>Fab</span></IgrButton>
+<IgrButton variant="fab">Fab</IgrButton>
 ```
 
 </PlatformBlock>
@@ -352,28 +343,28 @@ const onRadioChange = (e: IgrRadioChangeEventArgs) => {
 
 <IgrRadioGroup alignment="horizontal" style={{ display: "flex", margin: "0 auto", width: "15%" }}>
     <IgrRadio name="size" value="small" labelPosition="after" checked={size === "small"} onChange={onRadioChange}>
-        <span>Small</span>
+        Small
     </IgrRadio>
     <IgrRadio name="size" value="medium" labelPosition="after" onChange={onRadioChange}>
-        <span>Medium</span>
+        Medium
     </IgrRadio>
     <IgrRadio name="size" value="large" labelPosition="after" onChange={onRadioChange}>
-        <span>Large</span>
+        Large
     </IgrRadio>
 </IgrRadioGroup>
 
 <div className="button-container">
     <IgrButton className={"size-" + size} variant="flat">
-        <span>Flat</span>
+        Flat
     </IgrButton>
     <IgrButton className={"size-" + size} variant="contained">
-        <span>Contained</span>
+        Contained
     </IgrButton>
     <IgrButton className={"size-" + size} variant="outlined">
-        <span>Outlined</span>
+        Outlined
     </IgrButton>
     <IgrButton className={"size-" + size} variant="fab">
-        <span>Like</span>
+        Fab
     </IgrButton>
 </div>
 ```
@@ -419,9 +410,6 @@ The result of implementing the above code should look like the following:
 
 <Sample src="/inputs/button/size" height={200} alt="{Platform} Button Sizing Example" />
 
-
-
-
 ### Download
 
 Setting the <ApiLink pkg="core" type="Button" member="download" label="Download" /> property will prompt the user to save the linked URL instead of navigating to it.
@@ -434,7 +422,7 @@ Setting the <ApiLink pkg="core" type="Button" member="download" label="Download"
     variant="contained"
     download="url"
     target="_blank" >
-    <span>Download</span>
+    Download
 </IgrButton>
 ```
 
@@ -489,7 +477,6 @@ igc-button::part(base) {
 
 <Sample src="/inputs/button/styling" height={100} alt="{Platform} Button Styling Example" />
 
-
 ## API References
 <ApiLink pkg="core" type="Button" />
 <ApiLink pkg="core" type="RadioGroup" />

docs/xplat/src/content/en/components/inputs/button.mdx

@@ -18,15 +18,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <Sample src="/inputs/chip/overview" height={80} alt="{Platform} Chip Example" />
 
-
 <igc-divider></igc-divider>
 
 ## Usage
 
-
 <PlatformBlock for="WebComponents">
 
-
 First, you need to install the {ProductName} by running the following command:
 
 ```cmd
@@ -44,14 +41,10 @@ defineComponents(IgcChipComponent);
 
 For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
 
-
 </PlatformBlock>
 
-
-
 <PlatformBlock for="React">
 
-
 First, you need to the install the corresponding {ProductName} npm package by running the following command:
 
 ```cmd
@@ -67,12 +60,8 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 </PlatformBlock>
 
-
-
 <PlatformBlock for="Blazor">
 
-
-
 Before using the <ApiLink pkg="core" type="Chip" />, you need to register it as follows:
 
 ```razor
@@ -87,10 +76,8 @@ You will also need to link an additional CSS file to apply the styling to the <A
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 ```
 
-
 </PlatformBlock>
 
-
 The simplest way to start using the <ApiLink pkg="core" type="Chip" /> is as follows:
 
 <PlatformBlock for="WebComponents">
@@ -212,9 +199,6 @@ The {ProductName} chip supports several pre-defined stylistic variants. You can
 
 <Sample src="/inputs/chip/variants" height={80} alt="{Platform} Chip Variants Example" />
 
-
-
-
 ### Disabled
 
 The {ProductName} chip can be disabled by using the <ApiLink pkg="core" type="Chip" member="disabled" label="Disabled" /> property.
@@ -235,28 +219,55 @@ The {ProductName} chip can be disabled by using the <ApiLink pkg="core" type="Ch
 
 </PlatformBlock>
 
-### Prefix / Suffix
+### Slots
 
-With the `Prefix` and `Suffix` parts of the <ApiLink pkg="core" type="Chip" /> component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the <ApiLink pkg="core" type="Select" /> and `Remove` slots. You can add additional content before or after the main content, using the `Start` and `End` slots.
+With the exposed component slots, you can add custom content to different parts of the <ApiLink pkg="core" type="Chip" />. The component provides default select and remove icons, but you can customize them using the `select` and `remove` slots. You can also add additional content before or after the main content using the `start` and `end` slots.
+
+We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `remove`, `select`, `start`, and `end` slots.
 
 <PlatformBlock for="WebComponents">
 
 ```html
 <igc-chip selectable removable>
-  <span slot="select"><igc-icon name="verified-account"></igc-icon></span>
-  <span slot="start"><igc-icon name="brush"></igc-icon></span>
+    <igc-icon slot="select" name="verified-account"></igc-icon>
+    <igc-icon slot="start" name="brush"></igc-icon>
     Chip
-  <span slot="end"><igc-icon name="blood"></igc-icon></span>
-  <span slot="remove"><igc-icon name="pacifier"></igc-icon></span>
+    <igc-icon slot="end" name="blood"></igc-icon>
+    <igc-icon slot="remove" name="pacifier"></igc-icon>
 </igc-chip>
 ```
 
 </PlatformBlock>
 
-<Sample src="/inputs/chip/multiple" height={80} alt="{Platform} Chip Multiple Example" />
+<PlatformBlock for="Blazor">
+
+```razor
+<IgbChip Selectable="true" Removable="true">
+    <IgbIcon slot="select" IconName="verified-account" Collection="material"></IgbIcon>
+    <IgbIcon slot="start" IconName="brush" Collection="material"></IgbIcon>
+    Chip
+    <IgbIcon slot="end" IconName="blood" Collection="material"></IgbIcon>
+    <IgbIcon slot="remove" IconName="pacifier" Collection="material"></IgbIcon>
+</IgbChip>
+```
+
+</PlatformBlock>
+
+<PlatformBlock for="React">
 
+```tsx
+<IgrChip selectable={true} removable={true}>
+    <IgrIcon slot="select" name="verified-account"></IgrIcon>
+    <IgrIcon slot="start" name="brush"></IgrIcon>
+    <span>Chip</span>
+    <IgrIcon slot="end" name="blood"></IgrIcon>
+    <IgrIcon slot="remove" name="pacifier"></IgrIcon>
+</IgrChip>
+```
 
+</PlatformBlock>
 
+<Sample src="/inputs/chip/multiple" height={80} alt="{Platform} Chip Multiple Example" />
 
 ## Size
 
@@ -294,8 +305,6 @@ We allow the user to choose the size of the <ApiLink pkg="core" type="Chip" /> b
 
 <Sample src="/inputs/chip/size" height={80} alt="{Platform} Chip Size Example" />
 
-
-
 ## Styling
 
 The <ApiLink pkg="core" type="Chip" /> component exposes a `base`, `prefix`, `suffix` CSS parts that can be used to change all of its style properties.
@@ -313,7 +322,6 @@ igc-chip::part(suffix) {
 
 <Sample src="/inputs/chip/styling" height={80} alt="{Platform} Chip Styling Example" />
 
-
 ## API References
 <ApiLink pkg="core" type="Chip" />
 ## Additional Resources