docs: add props-table into button docs#446
Conversation
|
raymondanythings
force-pushed
the
docs/button-api
branch
2 times, most recently
from
0257ed0 to
dc76fd8
Compare
raymondanythings
force-pushed
the
docs/button-api
branch
from
dc76fd8 to
5c9853f
Compare
| export function Table() { | ||
| return <></> | ||
| } |
| return <Box as="th" padding="0.5rem 1rem" textAlign="left" {...props} /> | ||
| } | ||
|
|
||
| export { TableBody, TableCell, TableHead, TableHeaderCell, TableRoot, TableRow } |
There was a problem hiding this comment.
Add export with function declaration
| return ( | ||
| <Box | ||
| as="thead" | ||
| {...props} |
There was a problem hiding this comment.
Devup UI Works with static analysis.
So props for stying can not be applied...
|
@owjs3901 I've committed the changes to address the current issues. However, I'd like to raise a concern about the The existing lint rule enforces that each file must export a component with the same name as the file. While I understand this rule was likely designed to prevent namespace component patterns (which devup-ui doesn't support), it's inadvertently blocking the compound component pattern, which devup-ui does support.
This structure makes it difficult to use the compound component pattern. I suggest that modify the |
|
I agree with your point to some extent. That said, since the design allows exporting other functions from the same file as long as the main exported function matches the file name, I believe the pattern you mentioned can still be fully implemented. |
| return ( | ||
| <Box | ||
| as="code" | ||
| bg="var(--containerBackground)" |
There was a problem hiding this comment.
using $containerBackground
| import { Box } from '@devup-ui/react' | ||
| import { ComponentPropsWithoutRef } from 'react' | ||
|
|
||
| export const TableRoot = ({ ...props }: ComponentPropsWithoutRef<'table'>) => { |
There was a problem hiding this comment.
I’m just curious why did you exclude the ref props?
Why aren’t you using ComponentProps?
There was a problem hiding this comment.
Thanks for pointing that out!
If your question about ref of React 19, I actually missed that — I was assuming a pre-React-19 environment when implementing this. I’ll update it accordingly.
Otherwise, the reason is that ref isn’t treated as a normal prop in React.
To pass it down to a child component, forwardRef must be used.
Since this component doesn’t need to handle a ref, I didn’t include it.
| @@ -0,0 +1,10 @@ | |||
| import { Box } from '@devup-ui/react' | |||
| import { ComponentPropsWithoutRef } from 'react' | |||
…and update PropsTable accordingly
Codecov Report✅ All modified and coverable lines are covered by tests. 🚀 New features to boost your workflow:
|
2 participants
docs: add props-table into button docs
Summary
PropsTableMDX component that composes the shared table primitives and renders prop metadata with markdown-aware code blocks@devup-ui/react