Adding avatar and onClose() on <Citation/> #2562
Conversation
lasryaric
changed the title
sparkle/src/components/Citation.tsx
Outdated
| @@ -13,6 +13,8 @@ interface CitationProps { | |||
| index?: ReactNode; | |||
| isBlinking?: boolean; | |||
| href?: string; | |||
| action?: React.ReactNode; | |||
There was a problem hiding this comment.
What's the purpose of action?
There was a problem hiding this comment.
Asking because this is unclear from just reading the code given the very limited typing directive which I think is not ideal for a design system?
There was a problem hiding this comment.
the existing href property does not let you add a "close" or "delete" action, so we added "action".
I think it makes the API of citation not the best but @Duncid thinks we should keep it as one component as much as we can (vs creating a new component).
We can also create a base component like "Card" and have two other components ContentFragment and Citation that use this one. LMK what you think @spolu .
There was a problem hiding this comment.
Note that there is an alternative that both conserve single component and API clarity by replacing href and action by a single "action" prop that is defined out of sparkle. However it requires some more work.
<Citation action={<Citation.Action onClick={} href whatEver/>} />
action can be a Citation.Action or a Button or whatever is requirered.
Citation.Action is just used to privide a "recommendation" of what action should be.
In our case a .
There was a problem hiding this comment.
I tried the onClose solution suggested on Slack, happy to revert if you are not happy with it @Duncid but just did that as a "branch prediction" in case you like it.
I updated the code, it still looks the same but I am adding a screenshot to help everybody with context:
lasryaric
changed the title
…ment v1).