-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
32a1b2f
commit de9c0a0
Showing
9 changed files
with
267 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@chakra-ui/react": minor | ||
--- | ||
|
||
Add `DataList` component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import { Badge, DataList, For, useSlotRecipe } from "../src" | ||
import { PlaygroundTable } from "./shared/playground-table" | ||
|
||
export default { | ||
title: "Components / Data List", | ||
} | ||
|
||
export const Sizes = () => { | ||
const recipe = useSlotRecipe("DataList") | ||
return ( | ||
<PlaygroundTable> | ||
<thead> | ||
<tr> | ||
<td /> | ||
<For each={recipe.variantMap.size}>{(v) => <td>{v}</td>}</For> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td /> | ||
<For each={recipe.variantMap.size}> | ||
{(v) => ( | ||
<td> | ||
<DataList.Root size={v}> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Name</DataList.ItemLabel> | ||
<DataList.ItemValue>John Doe</DataList.ItemValue> | ||
</DataList.Item> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Email</DataList.ItemLabel> | ||
<DataList.ItemValue>john@test.com</DataList.ItemValue> | ||
</DataList.Item> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Status</DataList.ItemLabel> | ||
<DataList.ItemValue> | ||
<Badge colorPalette="teal">Active</Badge> | ||
</DataList.ItemValue> | ||
</DataList.Item> | ||
</DataList.Root> | ||
</td> | ||
)} | ||
</For> | ||
</tr> | ||
</tbody> | ||
</PlaygroundTable> | ||
) | ||
} | ||
|
||
export const Orientation = () => { | ||
const recipe = useSlotRecipe("DataList") | ||
return ( | ||
<PlaygroundTable> | ||
<thead> | ||
<tr> | ||
<td /> | ||
<For each={recipe.variantMap.size}>{(v) => <td>{v}</td>}</For> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td /> | ||
<For each={recipe.variantMap.size}> | ||
{(v) => ( | ||
<td> | ||
<DataList.Root orientation="horizontal" size={v}> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Name</DataList.ItemLabel> | ||
<DataList.ItemValue>John Doe</DataList.ItemValue> | ||
</DataList.Item> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Email</DataList.ItemLabel> | ||
<DataList.ItemValue>john@test.com</DataList.ItemValue> | ||
</DataList.Item> | ||
<DataList.Item> | ||
<DataList.ItemLabel>Status</DataList.ItemLabel> | ||
<DataList.ItemValue> | ||
<Badge colorPalette="teal">Active</Badge> | ||
</DataList.ItemValue> | ||
</DataList.Item> | ||
</DataList.Root> | ||
</td> | ||
)} | ||
</For> | ||
</tr> | ||
</tbody> | ||
</PlaygroundTable> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { | ||
type HTMLChakraProps, | ||
type SlotRecipeProps, | ||
type UnstyledProp, | ||
createStyleContext, | ||
} from "../../styled-system" | ||
|
||
//////////////////////////////////////////////////////////////////////////////////// | ||
|
||
const { | ||
withProvider, | ||
withContext, | ||
useStyles: useDataListStyles, | ||
} = createStyleContext("DataList") | ||
|
||
export { useDataListStyles } | ||
|
||
//////////////////////////////////////////////////////////////////////////////////// | ||
|
||
export interface DataListRootProps | ||
extends HTMLChakraProps<"dl", SlotRecipeProps<"DataList">>, | ||
UnstyledProp {} | ||
|
||
export const DataListRoot = withProvider<HTMLDListElement, DataListRootProps>( | ||
"dl", | ||
"root", | ||
) | ||
|
||
//////////////////////////////////////////////////////////////////////////////////// | ||
|
||
export interface DataListItemProps extends HTMLChakraProps<"div"> {} | ||
|
||
export const DataListItem = withContext<HTMLDivElement, DataListItemProps>( | ||
"div", | ||
"item", | ||
) | ||
|
||
//////////////////////////////////////////////////////////////////////////////////// | ||
|
||
export interface DataListItemLabelProps extends HTMLChakraProps<"dt"> {} | ||
|
||
export const DataListItemLabel = withContext< | ||
HTMLDivElement, | ||
DataListItemLabelProps | ||
>("dt", "itemLabel") | ||
|
||
//////////////////////////////////////////////////////////////////////////////////// | ||
|
||
export interface DataListItemValueProps extends HTMLChakraProps<"dd"> {} | ||
|
||
export const DataListItemValue = withContext< | ||
HTMLDivElement, | ||
DataListItemValueProps | ||
>("dd", "itemValue") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
export { | ||
DataListItem, | ||
DataListItemLabel, | ||
DataListItemValue, | ||
DataListRoot, | ||
} from "./data-list" | ||
|
||
export type { | ||
DataListItemLabelProps, | ||
DataListItemProps, | ||
DataListItemValueProps, | ||
DataListRootProps, | ||
} from "./data-list" | ||
|
||
export { useDataListStyles } from "./data-list" | ||
|
||
export * as DataList from "./namespace" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export { | ||
DataListRoot as Root, | ||
DataListItem as Item, | ||
DataListItemLabel as ItemLabel, | ||
DataListItemValue as ItemValue, | ||
} from "./data-list" | ||
|
||
export type { | ||
DataListRootProps as RootProps, | ||
DataListItemProps as ItemProps, | ||
DataListItemLabelProps as ItemLabelProps, | ||
DataListItemValueProps as ItemValueProps, | ||
} from "./data-list" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import { defineSlotRecipe } from "../../styled-system" | ||
|
||
export const dataListSlotRecipe = defineSlotRecipe({ | ||
slots: ["root", "item", "itemLabel", "itemValue"], | ||
base: { | ||
itemLabel: { | ||
color: "fg.subtle", | ||
lineClamp: 1, | ||
}, | ||
itemValue: { | ||
display: "flex", | ||
minWidth: "0", | ||
flex: "1", | ||
}, | ||
}, | ||
variants: { | ||
orientation: { | ||
horizontal: { | ||
root: { | ||
display: "flex", | ||
flexDirection: "column", | ||
}, | ||
item: { | ||
display: "inline-flex", | ||
alignItems: "center", | ||
gap: "4", | ||
}, | ||
itemLabel: { | ||
minWidth: "120px", | ||
}, | ||
}, | ||
vertical: { | ||
root: { | ||
display: "flex", | ||
flexDirection: "column", | ||
}, | ||
item: { | ||
display: "flex", | ||
flexDirection: "column", | ||
gap: "1", | ||
}, | ||
}, | ||
}, | ||
size: { | ||
sm: { | ||
root: { | ||
gap: "2", | ||
}, | ||
item: { | ||
fontSize: "xs", | ||
}, | ||
}, | ||
md: { | ||
root: { | ||
gap: "4", | ||
}, | ||
item: { | ||
fontSize: "sm", | ||
}, | ||
}, | ||
lg: { | ||
root: { | ||
gap: "5", | ||
}, | ||
item: { | ||
fontSize: "md", | ||
}, | ||
}, | ||
}, | ||
}, | ||
defaultVariants: { | ||
size: "sm", | ||
orientation: "vertical", | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters