Skip to content
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

list-group docs #154

Merged
merged 1 commit into from
Jun 11, 2022
Merged

list-group docs #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
157 changes: 10 additions & 147 deletions packages/core/docs/display/list-group/demo/d01-list-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
---
order: 1
---

<EuiText>
<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.
Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
</EuiText>

```hbs template
<EuiFlexGroup>
<EuiFlexItem>
Expand Down Expand Up @@ -47,153 +56,7 @@
<Input @type='checkbox' @checked={{this.flush}} name='flushed' />
<label for='flushed'>Flush</label>
</div>
<div>
<EuiText>Gutter size</EuiText>
<EuiBadge
@color={{if (eq this.gutterSize 'none') 'primary'}}
@onClick={{set this 'gutterSize' 'none'}}
>none</EuiBadge>
<EuiBadge
@color={{if (eq this.gutterSize 's') 'primary'}}
@onClick={{set this 'gutterSize' 's'}}
>small</EuiBadge>
<EuiBadge
@color={{if (eq this.gutterSize 'm') 'primary'}}
@onClick={{set this 'gutterSize' 'm'}}
>medium</EuiBadge>
</div>
<div>
<EuiText>Max width</EuiText>
<EuiBadge
@color={{if (eq this.maxWidthType 'bool') 'primary'}}
@onClick={{pipe
(set this 'maxWidthType' 'bool')
(set this 'maxWidth' false)
}}
>
boolean
</EuiBadge>
<EuiBadge
@color={{if (eq this.maxWidthType 'num') 'primary'}}
@onClick={{pipe
(set this 'maxWidthType' 'num')
(set this 'maxWidth' 400)
}}
>
number
</EuiBadge>
<EuiBadge
@color={{if (eq this.maxWidthType 'string') 'primary'}}
@onClick={{pipe
(set this 'maxWidthType' 'string')
(set this 'maxWidth' '')
}}
>
string
</EuiBadge>
</div>
<div>
{{#if (eq this.maxWidthType 'bool')}}
<Input
@type='checkbox'
@checked={{this.maxWidth}}
name='maxwidth'
/>
<label for='maxwidth'>{{this.maxWidth}}</label>
{{else if (eq this.maxWidthType 'num')}}
<label for='maxwidth'>Enter value</label>
<input
type='number'
value={{this.maxWidth}}
{{on 'input' this.parseToNum}}
name='maxwidth'
/>
{{else}}
<label for='maxwidth'>Enter value</label>
<Input @value={{this.maxWidth}} name='maxwidth' />
{{/if}}
</div>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle @size='xs'>First Item</EuiTitle>
<div>
<Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
<label for='useHref'>use Href</label>
</div>
<div>
<Input
@type='checkbox'
@checked={{this.useOnClick}}
name='useOnClick'
/>
<label for='useOnClick'>use onClick</label>
</div>
<div>
<Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
<label for='isActive'>isActive</label>
</div>
<div>
<Input
@type='checkbox'
@checked={{this.isDisabled}}
name='isDisabled'
/>
<label for='isDisabled'>isDisabled</label>
</div>
<div>
<Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
<label for='wrapText'>wrapText</label>
</div>
<div>
<EuiText>Size</EuiText>
<EuiBadge
@color={{if (eq this.size 'xs') 'primary'}}
@onClick={{set this 'size' 'xs'}}
>extra small</EuiBadge>
<EuiBadge
@color={{if (eq this.size 's') 'primary'}}
@onClick={{set this 'size' 's'}}
>small</EuiBadge>
<EuiBadge
@color={{if (eq this.size 'm') 'primary'}}
@onClick={{set this 'size' 'm'}}
>medium</EuiBadge>
<EuiBadge
@color={{if (eq this.size 'l') 'primary'}}
@onClick={{set this 'size' 'l'}}
>large</EuiBadge>
</div>
<div>
<EuiText>Color</EuiText>
<EuiBadge
@color={{if (eq this.color 'inherit') 'primary'}}
@onClick={{set this 'color' 'inherit'}}
>inherit</EuiBadge>
<EuiBadge
@color={{if (eq this.color 'text') 'primary'}}
@onClick={{set this 'color' 'text'}}
>text</EuiBadge>
<EuiBadge
@color={{if (eq this.color 'subdued') 'primary'}}
@onClick={{set this 'color' 'subdued'}}
>subdued</EuiBadge>
<EuiBadge
@color={{if (eq this.color 'ghost') 'primary'}}
@onClick={{set this 'color' 'ghost'}}
>ghost</EuiBadge>
<EuiBadge
@color={{if (eq this.color 'primary') 'primary'}}
@onClick={{set this 'color' 'primary'}}
>primary</EuiBadge>
</div>
<div>
<Input
@type='checkbox'
@checked={{this.useIconType}}
name='useIconType'
/>
<label for='useIconType'>use iconType</label>
</div>

</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down
47 changes: 47 additions & 0 deletions packages/core/docs/display/list-group/demo/d02-list-of-links.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
order: 2
---

# List of links

<EuiText>
<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>
</EuiText>

```hbs template
<EuiListGroup>
<EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
First link
</EuiListGroupItem>
<EuiListGroupItem
@href='#/display/list-group'
@iconType='clock'
@size='s'
@isActive='true'
>
This is an active link with very long label that truncates
</EuiListGroupItem>
<EuiListGroupItem
@href='#/display/list-group'
@iconType='compute'
@size='s'
@isDisabled='true'
>
Third link is disabled
</EuiListGroupItem>
<EuiListGroupItem
@href='#/display/list-group'
@iconType='copyClipboard'
@size='s'
>
Fourth link
</EuiListGroupItem>
<EuiListGroupItem
@href='#/display/list-group'
@iconType='crosshairs'
@size='s'
>
Fifth link
</EuiListGroupItem>
</EuiListGroup>
```
31 changes: 31 additions & 0 deletions packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
order: 3
---

# Text wrapping and tooltips

<EuiText>
<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>
</EuiText>

```hbs template
<EuiListGroup @showToolTips>
<EuiListGroupItem>
First item
</EuiListGroupItem>

<EuiListGroupItem>
Second item
</EuiListGroupItem>

<EuiListGroupItem>
<span>
Third very, very long item that
<strong>will surely</strong>
force truncation
</span>
</EuiListGroupItem>
<EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
enabled that will not force truncation</EuiListGroupItem>
</EuiListGroup>
```
27 changes: 27 additions & 0 deletions packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
order: 4
---

# List item color and size

<EuiText>
<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>
</EuiText>

```hbs template
<EuiListGroup>
<EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />

<EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />

<EuiListGroupItem @href='#' @label='Text (m)' @color='text' />

<EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
</EuiListGroup>

<EuiSpacer @size='s' />

<EuiListGroup {{style (inline-styles background='black')}}>
<EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
</EuiListGroup>
```