Skip to content

Commit 2f7e30c

Browse files
betocantu93betocantu93
authored
Merge pull request #154 from prysmex/docs2
list-group docs
2 parents 530ce74 + 1500783 commit 2f7e30c

File tree

4 files changed

+115
-147
lines changed

4 files changed

+115
-147
lines changed

‎packages/core/docs/display/list-group/demo/d01-list-group.md‎

Lines changed: 10 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
---
2+
order: 1
3+
---
4+
5+
<EuiText>
6+
<p>The <strong>EuiListGroup</strong> component is used to present <strong>EuiListGroupItems</strong> in a neatly formatted list. Use the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode> properties for full-width and bordered presentations, respectively.
7+
Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
8+
</EuiText>
9+
110
```hbs template
211
<EuiFlexGroup>
312
<EuiFlexItem>
@@ -47,153 +56,7 @@
4756
<Input @type='checkbox' @checked={{this.flush}} name='flushed' />
4857
<label for='flushed'>Flush</label>
4958
</div>
50-
<div>
51-
<EuiText>Gutter size</EuiText>
52-
<EuiBadge
53-
@color={{if (eq this.gutterSize 'none') 'primary'}}
54-
@onClick={{set this 'gutterSize' 'none'}}
55-
>none</EuiBadge>
56-
<EuiBadge
57-
@color={{if (eq this.gutterSize 's') 'primary'}}
58-
@onClick={{set this 'gutterSize' 's'}}
59-
>small</EuiBadge>
60-
<EuiBadge
61-
@color={{if (eq this.gutterSize 'm') 'primary'}}
62-
@onClick={{set this 'gutterSize' 'm'}}
63-
>medium</EuiBadge>
64-
</div>
65-
<div>
66-
<EuiText>Max width</EuiText>
67-
<EuiBadge
68-
@color={{if (eq this.maxWidthType 'bool') 'primary'}}
69-
@onClick={{pipe
70-
(set this 'maxWidthType' 'bool')
71-
(set this 'maxWidth' false)
72-
}}
73-
>
74-
boolean
75-
</EuiBadge>
76-
<EuiBadge
77-
@color={{if (eq this.maxWidthType 'num') 'primary'}}
78-
@onClick={{pipe
79-
(set this 'maxWidthType' 'num')
80-
(set this 'maxWidth' 400)
81-
}}
82-
>
83-
number
84-
</EuiBadge>
85-
<EuiBadge
86-
@color={{if (eq this.maxWidthType 'string') 'primary'}}
87-
@onClick={{pipe
88-
(set this 'maxWidthType' 'string')
89-
(set this 'maxWidth' '')
90-
}}
91-
>
92-
string
93-
</EuiBadge>
94-
</div>
95-
<div>
96-
{{#if (eq this.maxWidthType 'bool')}}
97-
<Input
98-
@type='checkbox'
99-
@checked={{this.maxWidth}}
100-
name='maxwidth'
101-
/>
102-
<label for='maxwidth'>{{this.maxWidth}}</label>
103-
{{else if (eq this.maxWidthType 'num')}}
104-
<label for='maxwidth'>Enter value</label>
105-
<input
106-
type='number'
107-
value={{this.maxWidth}}
108-
{{on 'input' this.parseToNum}}
109-
name='maxwidth'
110-
/>
111-
{{else}}
112-
<label for='maxwidth'>Enter value</label>
113-
<Input @value={{this.maxWidth}} name='maxwidth' />
114-
{{/if}}
115-
</div>
116-
</EuiFlexItem>
117-
<EuiFlexItem>
118-
<EuiTitle @size='xs'>First Item</EuiTitle>
119-
<div>
120-
<Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
121-
<label for='useHref'>use Href</label>
122-
</div>
123-
<div>
124-
<Input
125-
@type='checkbox'
126-
@checked={{this.useOnClick}}
127-
name='useOnClick'
128-
/>
129-
<label for='useOnClick'>use onClick</label>
130-
</div>
131-
<div>
132-
<Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
133-
<label for='isActive'>isActive</label>
134-
</div>
135-
<div>
136-
<Input
137-
@type='checkbox'
138-
@checked={{this.isDisabled}}
139-
name='isDisabled'
140-
/>
141-
<label for='isDisabled'>isDisabled</label>
142-
</div>
143-
<div>
144-
<Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
145-
<label for='wrapText'>wrapText</label>
146-
</div>
147-
<div>
148-
<EuiText>Size</EuiText>
149-
<EuiBadge
150-
@color={{if (eq this.size 'xs') 'primary'}}
151-
@onClick={{set this 'size' 'xs'}}
152-
>extra small</EuiBadge>
153-
<EuiBadge
154-
@color={{if (eq this.size 's') 'primary'}}
155-
@onClick={{set this 'size' 's'}}
156-
>small</EuiBadge>
157-
<EuiBadge
158-
@color={{if (eq this.size 'm') 'primary'}}
159-
@onClick={{set this 'size' 'm'}}
160-
>medium</EuiBadge>
161-
<EuiBadge
162-
@color={{if (eq this.size 'l') 'primary'}}
163-
@onClick={{set this 'size' 'l'}}
164-
>large</EuiBadge>
165-
</div>
166-
<div>
167-
<EuiText>Color</EuiText>
168-
<EuiBadge
169-
@color={{if (eq this.color 'inherit') 'primary'}}
170-
@onClick={{set this 'color' 'inherit'}}
171-
>inherit</EuiBadge>
172-
<EuiBadge
173-
@color={{if (eq this.color 'text') 'primary'}}
174-
@onClick={{set this 'color' 'text'}}
175-
>text</EuiBadge>
176-
<EuiBadge
177-
@color={{if (eq this.color 'subdued') 'primary'}}
178-
@onClick={{set this 'color' 'subdued'}}
179-
>subdued</EuiBadge>
180-
<EuiBadge
181-
@color={{if (eq this.color 'ghost') 'primary'}}
182-
@onClick={{set this 'color' 'ghost'}}
183-
>ghost</EuiBadge>
184-
<EuiBadge
185-
@color={{if (eq this.color 'primary') 'primary'}}
186-
@onClick={{set this 'color' 'primary'}}
187-
>primary</EuiBadge>
188-
</div>
189-
<div>
190-
<Input
191-
@type='checkbox'
192-
@checked={{this.useIconType}}
193-
name='useIconType'
194-
/>
195-
<label for='useIconType'>use iconType</label>
196-
</div>
59+
19760
</EuiFlexItem>
19861
</EuiFlexGroup>
19962
</EuiFlexItem>

‎packages/core/docs/display/list-group/demo/d02-list-of-links.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
order: 2
3+
---
4+
5+
# List of links
6+
7+
<EuiText>
8+
<p>Display <strong>EuiListGroupItems</strong> as links by providing an <EuiCode>href</EuiCode> value and change their state with the <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode> properties.</p><p>As is done in this example, the <strong>EuiListGroup</strong> component can also accept an array of items via the <EuiCode>listItems</EuiCode> property.</p>
9+
</EuiText>
10+
11+
```hbs template
12+
<EuiListGroup>
13+
<EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
14+
First link
15+
</EuiListGroupItem>
16+
<EuiListGroupItem
17+
@href='#/display/list-group'
18+
@iconType='clock'
19+
@size='s'
20+
@isActive='true'
21+
>
22+
This is an active link with very long label that truncates
23+
</EuiListGroupItem>
24+
<EuiListGroupItem
25+
@href='#/display/list-group'
26+
@iconType='compute'
27+
@size='s'
28+
@isDisabled='true'
29+
>
30+
Third link is disabled
31+
</EuiListGroupItem>
32+
<EuiListGroupItem
33+
@href='#/display/list-group'
34+
@iconType='copyClipboard'
35+
@size='s'
36+
>
37+
Fourth link
38+
</EuiListGroupItem>
39+
<EuiListGroupItem
40+
@href='#/display/list-group'
41+
@iconType='crosshairs'
42+
@size='s'
43+
>
44+
Fifth link
45+
</EuiListGroupItem>
46+
</EuiListGroup>
47+
```

‎packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
order: 3
3+
---
4+
5+
# Text wrapping and tooltips
6+
7+
<EuiText>
8+
<p>Optional props <EuiCode>showToolTip</EuiCode> and <EuiCode>wrapLines</EuiCode> can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.</p>
9+
</EuiText>
10+
11+
```hbs template
12+
<EuiListGroup @showToolTips>
13+
<EuiListGroupItem>
14+
First item
15+
</EuiListGroupItem>
16+
17+
<EuiListGroupItem>
18+
Second item
19+
</EuiListGroupItem>
20+
21+
<EuiListGroupItem>
22+
<span>
23+
Third very, very long item that
24+
<strong>will surely</strong>
25+
force truncation
26+
</span>
27+
</EuiListGroupItem>
28+
<EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
29+
enabled that will not force truncation</EuiListGroupItem>
30+
</EuiListGroup>
31+
```

‎packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
order: 4
3+
---
4+
5+
# List item color and size
6+
7+
<EuiText>
8+
<p><strong>EuiListGroupItems</strong> will inherit the color from their element type whether it is a <EuiCode>button</EuiCode>, <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can enforce a different color of <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop. Or provide the prop directly to <strong>EuiListGroup</strong>.</p><p>They also accept options for text size; <EuiCode><span class="token string">'xs'</span> <span class="token operator">|</span> <span class="token string">'s'</span> <span class="token operator">|</span> <span class="token string">'m'</span> <span class="token operator">|</span> <span class="token string">'l'</span></EuiCode>.</p>
9+
</EuiText>
10+
11+
```hbs template
12+
<EuiListGroup>
13+
<EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />
14+
15+
<EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />
16+
17+
<EuiListGroupItem @href='#' @label='Text (m)' @color='text' />
18+
19+
<EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
20+
</EuiListGroup>
21+
22+
<EuiSpacer @size='s' />
23+
24+
<EuiListGroup {{style (inline-styles background='black')}}>
25+
<EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
26+
</EuiListGroup>
27+
```

0 commit comments

Comments
 (0)