From 6eb54203bb586060e5cc046f39754d26316872b2 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sat, 29 Oct 2022 14:57:24 +0800 Subject: [PATCH 01/55] [ui][collapsible] allow label to be react nodes --- packages/ui/src/Collapsible/Collapsible.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/Collapsible/Collapsible.tsx b/packages/ui/src/Collapsible/Collapsible.tsx index 211c54fd..7c58d172 100644 --- a/packages/ui/src/Collapsible/Collapsible.tsx +++ b/packages/ui/src/Collapsible/Collapsible.tsx @@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'; type Props = Readonly<{ children: ReactNode; defaultOpen?: boolean; - label: string; + label: ReactNode; }>; export default function Collapsible({ children, defaultOpen, label }: Props) { @@ -14,10 +14,10 @@ export default function Collapsible({ children, defaultOpen, label }: Props) { {({ open }) => ( <> - + From 960bbcbb0a6bca59c8351ba5f183f7c8da43aede Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sat, 29 Oct 2022 15:24:26 +0800 Subject: [PATCH 02/55] [ui][text input] set entire input bg color --- packages/ui/src/TextInput/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/TextInput/TextInput.tsx b/packages/ui/src/TextInput/TextInput.tsx index f13dd8bd..87f7179c 100644 --- a/packages/ui/src/TextInput/TextInput.tsx +++ b/packages/ui/src/TextInput/TextInput.tsx @@ -143,7 +143,7 @@ function TextInput(
{(() => { From 2f5e4982821fa94b0e02d794ab06b0a0cc516d5a Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sat, 29 Oct 2022 16:03:36 +0800 Subject: [PATCH 03/55] [ui][badge] allow icon addon --- apps/storybook/stories/badge.stories.tsx | 27 ++++++++++++++++++++++++ packages/ui/src/Badge/Badge.tsx | 6 ++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/apps/storybook/stories/badge.stories.tsx b/apps/storybook/stories/badge.stories.tsx index 9141d9e9..282ca86f 100644 --- a/apps/storybook/stories/badge.stories.tsx +++ b/apps/storybook/stories/badge.stories.tsx @@ -1,4 +1,11 @@ import React from 'react'; +import { + CheckCircleIcon, + ExclamationCircleIcon, + ExclamationTriangleIcon, + InformationCircleIcon, + StarIcon, +} from '@heroicons/react/20/solid'; import type { ComponentMeta } from '@storybook/react'; import type { BadgeVariant } from '@tih/ui'; import { Badge } from '@tih/ui'; @@ -40,3 +47,23 @@ export function Variants() {
); } + +export function Icon() { + return ( +
+ + + + + +
+ ); +} diff --git a/packages/ui/src/Badge/Badge.tsx b/packages/ui/src/Badge/Badge.tsx index 305ee90f..3c5b2cd6 100644 --- a/packages/ui/src/Badge/Badge.tsx +++ b/packages/ui/src/Badge/Badge.tsx @@ -8,6 +8,7 @@ export type BadgeVariant = | 'warning'; type Props = Readonly<{ + endAddOn?: React.ComponentType>; label: string; variant: BadgeVariant; }>; @@ -41,7 +42,7 @@ const classes: Record< }, }; -export default function Badge({ label, variant }: Props) { +export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) { const { backgroundClass, textClass } = classes[variant]; return ( @@ -51,7 +52,8 @@ export default function Badge({ label, variant }: Props) { backgroundClass, textClass, )}> - {label} + {label} + {EndAddOn &&