Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Introduce List component family #516

Merged
merged 22 commits into from
Jul 22, 2020
Merged

Introduce List component family #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c8ef70d
feat: first pass at List component family
alexpaxton Jul 8, 2020
5ab98ec
feat: write documentation for List family
alexpaxton Jul 8, 2020
3f34fd4
fix: ensure link items receive transition styles
alexpaxton Jul 8, 2020
c1ee785
feat: document value & onClick pattern
alexpaxton Jul 8, 2020
a37f582
Make some color utils more flexible
alexpaxton Jul 10, 2020
995f9fd
Use backgroundColor and gradient instead of ComponentColor
alexpaxton Jul 10, 2020
2b23ecd
Cleanup
alexpaxton Jul 10, 2020
ab82afc
formatting
alexpaxton Jul 14, 2020
3b03dbf
Ensure gradient list items with checkboxes are styled according to gr…
alexpaxton Jul 15, 2020
ad17e4a
Update docs for List + Popover example
alexpaxton Jul 15, 2020
86d9971
Use linkElement prop instead of separate component for links
alexpaxton Jul 15, 2020
69e73ae
Ensure list item dots contrast consistently as text
alexpaxton Jul 15, 2020
0a5ac75
Enable specification of maxHeight in List
alexpaxton Jul 15, 2020
8ee6067
Changelog
alexpaxton Jul 15, 2020
1506da0
Remove unused documentation
alexpaxton Jul 21, 2020
656dd0b
Rename "ListEmpty" to "ListEmptyState"
alexpaxton Jul 21, 2020
3115796
Make opacity into a variable
alexpaxton Jul 21, 2020
5bbebf2
Remove unused styles
alexpaxton Jul 21, 2020
5617a9c
Ensure list items always have a highlight color
alexpaxton Jul 21, 2020
a7dac67
Include id attribute when cloning
alexpaxton Jul 21, 2020
7e5857c
Use null instead of undefined and change typing to match
alexpaxton Jul 22, 2020
cd3cdc6
Revert "Use null instead of undefined and change typing to match"
alexpaxton Jul 22, 2020
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

#### 2.2.2 (Unreleased)

- [#516](https://github.com/influxdata/clockface/pull/516): Introduce `List` component family

#### 2.2.1 (2020-06-11)

- [#508](https://github.com/influxdata/clockface/pull/508): Add `testID` to thumb elements in `DapperScrollbars`
Expand Down
36 changes: 36 additions & 0 deletions src/Components/List/Documentation/List.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# List

List is the parent component of the List Family; every member of the component family can be accessed from this single import. The List family offers a set of components that can be composed to display items in lists, hence the name. It is generic enough to work with selectable lists or static lists. `List` pairs especially well with `Popover`

### Usage

```tsx
import {List} from '@influxdata/clockface'
```

```tsx
<List style={{width: '250px', height: '100%'}}>
<List.Item>Hey there,</List.Item>
<List.Item>It's me</List.Item>
<List.Divider />
<List.Item>Your pal List!</List.Item>
</List>
```

### Scrolling

Use the `style` prop to control scrolling. By default `List` will fill the width of its parent, but we recommend giving it at least a `width` and `height` style.

### Customization

List children can be customized individually and are composable to encourage extension.

### Example

<!-- STORY -->

<!-- STORY HIDE START -->

<!-- STORY HIDE END -->

<!-- PROPS -->
Loading