Make design system#42
Conversation
|
|
||
| export type UiCardProps = CardProps | ||
|
|
||
| export const UiCard = Object.assign((props: UiCardProps) => <Card {...props} />, { |
There was a problem hiding this comment.
No need to override Card if no changes to the component needed, we can use Card component from Hero UI directly
| export interface UiModalProps { | ||
| isOpen?: boolean | ||
| defaultOpen?: boolean | ||
| onOpenChange?: (isOpen: boolean) => void | ||
| title?: ReactNode | ||
| children?: ReactNode | ||
| footer?: ReactNode | ||
| trigger?: ReactNode | ||
| size?: ModalContainerProps['size'] | ||
| placement?: ModalContainerProps['placement'] | ||
| isDismissable?: boolean | ||
| showCloseButton?: boolean | ||
| } |
There was a problem hiding this comment.
Let's use ModalProps from Hero UI
| }: UiButtonProps) { | ||
| return ( | ||
| <Button isDisabled={isDisabled || isLoading} {...props}> | ||
| {isLoading ? <Spinner size='sm' color='current' aria-hidden /> : startContent} |
There was a problem hiding this comment.
| <Button isDisabled={isDisabled || isLoading} {...props}> | ||
| {isLoading ? <Spinner size='sm' color='current' aria-hidden /> : startContent} | ||
| {isLoading ? (loadingText ?? children) : children} | ||
| {!isLoading && endContent} |
There was a problem hiding this comment.
startContent and endContent can be passed as children?
|
|
||
| export type UiTableProps = TableProps | ||
|
|
||
| export const UiTable = Object.assign((props: UiTableProps) => <Table {...props} />, { |
| endContent?: ReactNode | ||
| } | ||
|
|
||
| export function UiInput({ |
There was a problem hiding this comment.
Let's name it UitextField to respect Hero UI original name
| export interface UiSelectProps { | ||
| options: UiSelectOption[] | ||
| label?: ReactNode | ||
| placeholder?: string | ||
| description?: ReactNode | ||
| errorMessage?: ReactNode | ||
| isInvalid?: boolean | ||
| isDisabled?: boolean | ||
| isRequired?: boolean | ||
| withSearch?: boolean | ||
| name?: string | ||
| className?: string | ||
| value?: UiSelectKey | null | ||
| defaultValue?: UiSelectKey | null | ||
| onChange?: (key: UiSelectKey | null) => void | ||
| } |
There was a problem hiding this comment.
Check which props we can extend from Hero UI SelectProps
|
|
||
| if (withSearch) { | ||
| return ( | ||
| <ComboBox |
There was a problem hiding this comment.
Let's have is as a separate UiCombobox component
There was a problem hiding this comment.
Check the border radii of components in design system, they are more square in design
| const componentName = | ||
| name | ||
| .toLowerCase() | ||
| .replace(/ /g, '-') | ||
| .replace(/(^\w|-\w)/g, c => c.toUpperCase()) | ||
| .replace(/-/g, '') + 'Icon' | ||
| const filePath = `./src/components/icons/${componentName}.tsx` |
There was a problem hiding this comment.
Can component name actually contain spaces? Looking at existing icons, it seems we always use PascalCase names. If that's true, do we need all this normalization logic?
There was a problem hiding this comment.
And add one-line comment or name regEx describing the component case
| Dashboard: '/', | ||
| Borrow: '/borrow', | ||
| Supply: '/supply', | ||
| DesignSystem: '/design-system', |
There was a problem hiding this comment.
Ensure it is visible only in DEV mode
There was a problem hiding this comment.
Is this hover color from design? It's too heavy, consider using a softer color
There was a problem hiding this comment.
Please add the missing icons:
ArchiveBoxArrowUpandInfo(https://www.figma.com/design/dmps3jYhNR2prZcHeyLzVQ/Lending-UX?node-id=821-5743&m=dev)Bell(https://www.figma.com/design/dmps3jYhNR2prZcHeyLzVQ/Lending-UX?node-id=821-6879&m=dev)USDTandLBTC(https://www.figma.com/design/dmps3jYhNR2prZcHeyLzVQ/Lending-UX?node-id=831-4265&m=dev)- Question mark (https://www.figma.com/design/dmps3jYhNR2prZcHeyLzVQ/Lending-UX?node-id=831-4265&m=dev)
UserandCopyandHourglassIcon(https://www.figma.com/design/dmps3jYhNR2prZcHeyLzVQ/Lending-UX?node-id=959-1278&m=dev)
3 participants
Closes #27