Skip to content

Commit 4e29250

Browse files
simeonoffsimeonoff
authored
Merge pull request #1078 from IgniteUI/apetrov/update-example-slots
feat(): update sample slots
2 parents 20fa2ef + d230faf commit 4e29250

63 files changed

Lines changed: 258 additions & 312 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎samples/grids/list/add-list-items/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export default class ListAddListItems extends React.Component<any, any> {
1818
<span>Header</span>
1919
</IgrListHeader>
2020
<IgrListItem>
21-
<h2 slot="title">Item 1</h2>
21+
<span slot="title">Item 1</span>
2222
</IgrListItem>
2323
<IgrListItem>
24-
<h2 slot="title">Item 2</h2>
24+
<span slot="title">Item 2</span>
2525
</IgrListItem>
2626
<IgrListItem>
27-
<h2 slot="title">Item 3</h2>
27+
<span slot="title">Item 3</span>
2828
</IgrListItem>
2929
</IgrList>
3030
</div>

‎samples/grids/list/list-item-content/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ export default class ListItemContent extends React.Component<any, any> {
1818
<span>Contacts</span>
1919
</IgrListHeader>
2020
<IgrListItem>
21-
<h2 slot="title">Terrance Orta</h2>
21+
<span slot="title">Terrance Orta</span>
2222
<span slot="subtitle">770-504-2217</span>
2323
</IgrListItem>
2424
<IgrListItem>
25-
<h2 slot="title">Richard Mahoney</h2>
25+
<span slot="title">Richard Mahoney</span>
2626
<span slot="subtitle">423-676-2869</span>
2727
</IgrListItem>
2828
<IgrListItem>
29-
<h2 slot="title">Donna Price</h2>
29+
<span slot="title">Donna Price</span>
3030
<span slot="subtitle">859-496-2817</span>
3131
</IgrListItem>
3232
</IgrList>

‎samples/grids/list/overview/src/index.tsx‎

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -32,55 +32,37 @@ export default class ListOverview extends React.Component<any, any> {
3232
<span>Contacts</span>
3333
</IgrListHeader>
3434
<IgrListItem>
35-
<div slot="start">
36-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle" />
37-
</div>
38-
<h2 slot="title">Terrance Orta</h2>
35+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle" />
36+
<span slot="title">Terrance Orta</span>
3937
<span slot="subtitle">770-504-2217</span>
40-
<div slot="end">
41-
<IgrButton variant="outlined">
42-
<span>Text</span>
43-
</IgrButton>
44-
</div>
45-
<div slot="end">
46-
<IgrButton variant="outlined">
47-
<span>Call</span>
48-
</IgrButton>
49-
</div>
38+
<IgrButton slot="end" variant="outlined">
39+
<span>Text</span>
40+
</IgrButton>
41+
<IgrButton slot="end" variant="outlined">
42+
<span>Call</span>
43+
</IgrButton>
5044
</IgrListItem>
5145
<IgrListItem>
52-
<div slot="start">
53-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle" />
54-
</div>
55-
<h2 slot="title">Richard Mahoney</h2>
46+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle" />
47+
<span slot="title">Richard Mahoney</span>
5648
<span slot="subtitle">423-676-2869</span>
57-
<div slot="end">
58-
<IgrButton variant="outlined">
59-
<span>Text</span>
60-
</IgrButton>
61-
</div>
62-
<div slot="end">
63-
<IgrButton variant="outlined">
64-
<span>Call</span>
65-
</IgrButton>
66-
</div>
49+
<IgrButton slot="end" variant="outlined">
50+
<span>Text</span>
51+
</IgrButton>
52+
<IgrButton slot="end" variant="outlined">
53+
<span>Call</span>
54+
</IgrButton>
6755
</IgrListItem>
6856
<IgrListItem>
69-
<div slot="start">
70-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle" />
71-
</div>
72-
<h2 slot="title">Donna Price</h2>
57+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle" />
58+
<span slot="title">Donna Price</span>
7359
<span slot="subtitle">859-496-2817</span>
74-
<div slot="end">
75-
<IgrButton variant="outlined">
76-
<span>Text</span>
77-
</IgrButton>
78-
</div>
79-
<div slot="end">
80-
<IgrButton variant="outlined">
81-
<span>Call</span>
82-
</IgrButton>
83-
</div>
60+
<IgrButton slot="end" variant="outlined">
61+
<span>Text</span>
62+
</IgrButton>
63+
<IgrButton slot="end" variant="outlined">
64+
<span>Call</span>
65+
</IgrButton>
8466
</IgrListItem>
8567
</IgrList>
8668
</div>

‎samples/grids/list/styling/src/index.css‎

Whitespace-only changes.

‎samples/grids/list/styling/src/index.tsx‎

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
3-
import './index.css';
43
import './ListStyling.css';
54
import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton } from 'igniteui-react';
65
import 'igniteui-webcomponents/themes/light/bootstrap.css';
@@ -19,55 +18,37 @@ export default class ListStyling extends React.Component<any, any> {
1918
<span>Contacts</span>
2019
</IgrListHeader>
2120
<IgrListItem>
22-
<div slot="start">
23-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle" />
24-
</div>
25-
<h2 slot="title">Terrance Orta</h2>
21+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle" />
22+
<span slot="title">Terrance Orta</span>
2623
<span slot="subtitle">770-504-2217</span>
27-
<div slot="end">
28-
<IgrButton variant="contained">
29-
<span>Text</span>
30-
</IgrButton>
31-
</div>
32-
<div slot="end">
33-
<IgrButton variant="contained">
34-
<span>Call</span>
35-
</IgrButton>
36-
</div>
24+
<IgrButton slot="end" variant="contained">
25+
<span>Text</span>
26+
</IgrButton>
27+
<IgrButton slot="end" variant="contained">
28+
<span>Call</span>
29+
</IgrButton>
3730
</IgrListItem>
3831
<IgrListItem>
39-
<div slot="start">
40-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle" />
41-
</div>
42-
<h2 slot="title">Richard Mahoney</h2>
32+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle" />
33+
<span slot="title">Richard Mahoney</span>
4334
<span slot="subtitle">423-676-2869</span>
44-
<div slot="end">
45-
<IgrButton variant="contained">
46-
<span>Text</span>
47-
</IgrButton>
48-
</div>
49-
<div slot="end">
50-
<IgrButton variant="contained">
51-
<span>Call</span>
52-
</IgrButton>
53-
</div>
35+
<IgrButton slot="end" variant="contained">
36+
<span>Text</span>
37+
</IgrButton>
38+
<IgrButton slot="end" variant="contained">
39+
<span>Call</span>
40+
</IgrButton>
5441
</IgrListItem>
5542
<IgrListItem>
56-
<div slot="start">
57-
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle" />
58-
</div>
59-
<h2 slot="title">Donna Price</h2>
43+
<IgrAvatar slot="start" src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle" />
44+
<span slot="title">Donna Price</span>
6045
<span slot="subtitle">859-496-2817</span>
61-
<div slot="end">
62-
<IgrButton variant="contained">
63-
<span>Text</span>
64-
</IgrButton>
65-
</div>
66-
<div slot="end">
67-
<IgrButton variant="contained">
68-
<span>Call</span>
69-
</IgrButton>
70-
</div>
46+
<IgrButton slot="end" variant="contained">
47+
<span>Text</span>
48+
</IgrButton>
49+
<IgrButton slot="end" variant="contained">
50+
<span>Call</span>
51+
</IgrButton>
7152
</IgrListItem>
7253
</IgrList>
7354
</div>

‎samples/inputs/button-group/alignment/src/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ export default function ButtonGroupAlignment() {
1515
<div className="container sample">
1616
<IgrButtonGroup alignment="vertical">
1717
<IgrToggleButton value="sofia">
18-
<span>Sofia</span>
18+
Sofia
1919
<IgrRipple/>
2020
</IgrToggleButton>
2121
<IgrToggleButton value="london">
22-
<span>London</span>
22+
London
2323
<IgrRipple/>
2424
</IgrToggleButton>
2525
<IgrToggleButton value="new york" selected={true}>
26-
<span>New York</span>
26+
New York
2727
<IgrRipple/>
2828
</IgrToggleButton>
2929
<IgrToggleButton value="tokyo" >
30-
<span >Tokio</span>
30+
Tokyo
3131
<IgrRipple />
3232
</IgrToggleButton>
3333
</IgrButtonGroup>

‎samples/inputs/button-group/selection/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export default function ButtonGroupSelectionSample() {
5050
<label>Selection Mode</label>
5151
<IgrRadioGroup alignment="horizontal">
5252
<IgrRadio name="mode" value="single" checked onChange={onRadioChange}>
53-
<span>Single</span>
53+
Single
5454
</IgrRadio>
5555
<IgrRadio name="mode" value="single-required" onChange={onRadioChange}>
56-
<span>Single-Required</span>
56+
Single-Required
5757
</IgrRadio>
5858
<IgrRadio name="mode" value="multiple" onChange={onRadioChange}>
59-
<span>Multiple</span>
59+
Multiple
6060
</IgrRadio>
6161
</IgrRadioGroup>
6262
</div>

‎samples/inputs/button-group/size/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export default function ButtonGroupSize() {
2121
<div className="container sample">
2222
<IgrButtonGroup onSelect={onSelect} style={style}>
2323
<IgrToggleButton value="small">
24-
<span>Small</span>
24+
Small
2525
</IgrToggleButton>
2626
<IgrToggleButton value="medium">
27-
<span>Medium</span>
27+
Medium
2828
</IgrToggleButton>
2929
<IgrToggleButton value="large">
30-
<span>Large</span>
30+
Large
3131
</IgrToggleButton>
3232
</IgrButtonGroup>
3333
</div>

‎samples/inputs/button-group/styling/src/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export default function ButtonGroupStyling() {
1414
<div className="container sample">
1515
<IgrButtonGroup alignment="vertical">
1616
<IgrToggleButton value="sofia">
17-
<span>Sofia</span>
17+
Sofia
1818
<IgrRipple/>
1919
</IgrToggleButton>
2020
<IgrToggleButton value="london">
21-
<span>London</span>
21+
London
2222
<IgrRipple/>
2323
</IgrToggleButton>
2424
<IgrToggleButton value="new york">
25-
<span>New York</span>
25+
New York
2626
<IgrRipple/>
2727
</IgrToggleButton>
2828
<IgrToggleButton value="tokyo" disabled={true}>
29-
<span>Tokio</span>
29+
Tokyo
3030
<IgrRipple/>
3131
</IgrToggleButton>
3232
</IgrButtonGroup>

‎samples/inputs/button/contained/src/index.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
/* shared styles are loaded from: */
2-
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
2+
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
3+
4+
igc-button {
5+
width: 40%;
6+
margin: auto;
7+
}

0 commit comments

Comments
 (0)