@telegraph/data-list 0.1.0 → 0.1.1
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 +6 -0
- package/README.md +1 -24
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/data-list
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#701](https://github.com/knocklabs/telegraph/pull/701) [`16e678c`](https://github.com/knocklabs/telegraph/commit/16e678c5e8bc7f13613116954bc15099a8694bb7) Thanks [@ksorathia](https://github.com/ksorathia)! - Add surface-3 background color for interactive outlined variants.
|
|
8
|
+
|
|
3
9
|
## 0.1.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -45,7 +45,7 @@ Container component that wraps data list items.
|
|
|
45
45
|
| ------------- | ---------------------- | ---------- | ------------------------------------- |
|
|
46
46
|
| `direction` | `"column" \| "row"` | `"column"` | Layout direction of list items |
|
|
47
47
|
| `gap` | `keyof tokens.spacing` | `"4"` | Gap between list items |
|
|
48
|
-
| All
|
|
48
|
+
| All Stack props | - | - | Inherits all Stack component properties |
|
|
49
49
|
|
|
50
50
|
### `<DataList.Item>`
|
|
51
51
|
|
|
@@ -335,29 +335,6 @@ export const InteractiveList = () => {
|
|
|
335
335
|
};
|
|
336
336
|
```
|
|
337
337
|
|
|
338
|
-
### Responsive Layout
|
|
339
|
-
|
|
340
|
-
```tsx
|
|
341
|
-
import { DataList } from "@telegraph/data-list";
|
|
342
|
-
import { Text } from "@telegraph/typography";
|
|
343
|
-
import { useMediaQuery } from "your-hooks";
|
|
344
|
-
|
|
345
|
-
export const ResponsiveList = () => {
|
|
346
|
-
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
347
|
-
|
|
348
|
-
return (
|
|
349
|
-
<DataList.List>
|
|
350
|
-
<DataList.Item
|
|
351
|
-
label="Description"
|
|
352
|
-
direction={isMobile ? "column" : "row"}
|
|
353
|
-
>
|
|
354
|
-
<Text as="span">This switches to column layout on mobile devices</Text>
|
|
355
|
-
</DataList.Item>
|
|
356
|
-
</DataList.List>
|
|
357
|
-
);
|
|
358
|
-
};
|
|
359
|
-
```
|
|
360
|
-
|
|
361
338
|
### User Settings Example
|
|
362
339
|
|
|
363
340
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/data-list",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Flexible data list component for displaying label-value pairs in a structured, composable format.",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/data-list",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@telegraph/helpers": "^0.0.15",
|
|
34
34
|
"@telegraph/icon": "^0.4.0",
|
|
35
35
|
"@telegraph/layout": "^0.4.0",
|
|
36
|
-
"@telegraph/tooltip": "^0.1.
|
|
36
|
+
"@telegraph/tooltip": "^0.1.2",
|
|
37
37
|
"@telegraph/typography": "^0.2.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@telegraph/prettier-config": "^0.0.7",
|
|
44
44
|
"@telegraph/vite-config": "^0.0.15",
|
|
45
45
|
"@types/react": "^19.2.9",
|
|
46
|
-
"eslint": "^
|
|
46
|
+
"eslint": "^10.0.2",
|
|
47
47
|
"react": "^19.2.4",
|
|
48
48
|
"react-dom": "^19.2.4",
|
|
49
49
|
"typescript": "^5.9.3",
|