@atom-learning/components 2.16.0 → 2.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -7
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/data-table/DataTableContext.d.ts +4 -2
- package/dist/components/data-table/DataTableContext.js +1 -1
- package/dist/components/divider/Divider.js +1 -1
- package/dist/components/stack-content/StackContent.js +1 -1
- package/dist/docgen.json +1 -1
- package/dist/docs/Badge.mdx +20 -3
- package/dist/docs/DataTable.mdx +2 -2
- package/dist/index.cjs.js +1 -1
- package/package.json +1 -1
package/dist/docs/Badge.mdx
CHANGED
|
@@ -7,7 +7,7 @@ category: Feedback
|
|
|
7
7
|
|
|
8
8
|
The `Badge` component can be used to highlight a short piece of information, like a status.
|
|
9
9
|
|
|
10
|
-
```
|
|
10
|
+
```tsx preview
|
|
11
11
|
<Badge>New Data</Badge>
|
|
12
12
|
```
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@ The `Badge` component can be used to highlight a short piece of information, lik
|
|
|
15
15
|
|
|
16
16
|
These are the available `theme`s for this component: `success`, `warning`, `danger`, `neutral` and `info`. The default is `info`
|
|
17
17
|
|
|
18
|
-
```
|
|
18
|
+
```tsx preview
|
|
19
19
|
<>
|
|
20
20
|
<Badge>Info</Badge>
|
|
21
21
|
<Badge theme="neutral">Neutral</Badge>
|
|
@@ -29,10 +29,27 @@ These are the available `theme`s for this component: `success`, `warning`, `dang
|
|
|
29
29
|
|
|
30
30
|
These are the available `size`s for this component: `xs`, `sm` and `md`. The default is `sm`
|
|
31
31
|
|
|
32
|
-
```
|
|
32
|
+
```tsx preview
|
|
33
33
|
<>
|
|
34
34
|
<Badge size="xs">extra small</Badge>
|
|
35
35
|
<Badge size="sm">small</Badge>
|
|
36
36
|
<Badge size="md">medium</Badge>
|
|
37
37
|
</>
|
|
38
38
|
```
|
|
39
|
+
|
|
40
|
+
## With icons
|
|
41
|
+
|
|
42
|
+
An `<Icon />` can be passed as a child to show alongside text.
|
|
43
|
+
|
|
44
|
+
```tsx preview
|
|
45
|
+
<>
|
|
46
|
+
<Badge>
|
|
47
|
+
<Icon is={Wifi} />
|
|
48
|
+
Info with icon
|
|
49
|
+
</Badge>
|
|
50
|
+
<Badge theme="neutral">
|
|
51
|
+
Info with icon
|
|
52
|
+
<Icon is={Wifi} />
|
|
53
|
+
</Badge>
|
|
54
|
+
</>
|
|
55
|
+
```
|
package/dist/docs/DataTable.mdx
CHANGED
|
@@ -11,7 +11,7 @@ category: Content
|
|
|
11
11
|
|
|
12
12
|
## Anatomy
|
|
13
13
|
|
|
14
|
-
The root `DataTable` component manages the table's state and exposes it via the React Context API. This state can be accessed by any child components by calling `useDataTable`.
|
|
14
|
+
The root `DataTable` component manages the table's state and exposes it via the React Context API. This state can be accessed by any child components by calling `useDataTable`. You can pass an `initialState` prop to `DataTable` as described in the [`@tanstack/react-table` docs](https://tanstack.com/table/v8/docs/api/core/table#initialstate).
|
|
15
15
|
|
|
16
16
|
Other `DataTable` components call `useDataTable` and provide useful default implementations for common patterns. For example, `DataTable.Head` will render a header for every column defined in the parent `DataTable`. `DataTable.Body` will render a row for every data item. `DataTable.Table` combines both `DataTable.Head` and `DataTable.Body`.
|
|
17
17
|
|
|
@@ -153,4 +153,4 @@ If `DataTable`'s `isSortable` state is `true`, then `DataTable.Header` will be c
|
|
|
153
153
|
|
|
154
154
|
### Pagination
|
|
155
155
|
|
|
156
|
-
`DataTable.Pagination` can be passed as a child to `DataTable` to render the pagination UI and configure the parent `DataTable` to paginate its data.
|
|
156
|
+
`DataTable.Pagination` can be passed as a child to `DataTable` to render the pagination UI and configure the parent `DataTable` to paginate its data. Note: there is currently a bug where `DataTable` will render all rows on the initial render, even when paginated. There is no visible effect, but it can cause performance issues on large tables. The workaround for this is to pass an `initialState` prop to `DataTable`. E.g. `initialState={pagination: {pageSize: 5, pageIndex: 0}}`. This will force pagination to apply properly on the initial render. Make sure the `pagination` prop matches the config you use in `DataTable.Pagination`, as the latter will take precedence after the initial render.
|