From 6cb78cca343c8fa917c7b285b33a1f9b6f506ac1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 20:10:27 -0700 Subject: [PATCH 1/7] Re-enable labels on the grid cards --- .../components/patterns/LibraryCards/GridLinkedItemCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx index 319bc6fdb..5d61e35b4 100644 --- a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx +++ b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx @@ -154,11 +154,11 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element { /> )} - {/* + {props.item.labels?.map(({ name, color }, index) => ( ))} - */} + ) } From 958e67a1cbe8c3c09fbd6e473b5b4962b92241f2 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 20:21:58 -0700 Subject: [PATCH 2/7] Use block display for label chips so they wrap to new lines on overflow --- .../components/patterns/LibraryCards/GridLinkedItemCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx index 5d61e35b4..f01e7260c 100644 --- a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx +++ b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx @@ -154,11 +154,11 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element { /> )} - + {props.item.labels?.map(({ name, color }, index) => ( ))} - + ) } From 944784f25a5091e80f1679c7bb60c6289fd0aebd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 20:40:25 -0700 Subject: [PATCH 3/7] Use Button+router for label chips instead of next/link This allows us to use preventDefault on click, which means labels can be inside of grid cards, and clicking a label wont navigate to the card's page. --- packages/web/components/elements/LabelChip.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index 86dd3c3ba..5a7a92bc8 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -1,6 +1,7 @@ -import Link from 'next/link' +import { useRouter } from 'next/router' +import { Button } from './Button' import { SpanBox } from './LayoutPrimitives' -import { StyledText } from './StyledText' + type LabelChipProps = { text: string @@ -8,6 +9,7 @@ type LabelChipProps = { } export function LabelChip(props: LabelChipProps): JSX.Element { + const router = useRouter() const hexToRgb = (hex: string) => { const bigint = parseInt(hex.substring(1), 16) const r = (bigint >> 16) & 255 @@ -17,8 +19,12 @@ export function LabelChip(props: LabelChipProps): JSX.Element { return [r, g, b] } const color = hexToRgb(props.color) + return ( - + ) } From d56e3147df83e78e9a3de135ae701685786cc85b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 21:05:02 -0700 Subject: [PATCH 4/7] Remove whitespace --- packages/web/components/elements/LabelChip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index 5a7a92bc8..dcf1cbf3a 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -2,7 +2,6 @@ import { useRouter } from 'next/router' import { Button } from './Button' import { SpanBox } from './LayoutPrimitives' - type LabelChipProps = { text: string color: string // expected to be a RGB hex color string From 0e50ef1b562af3f07943035c25f8d1e1fe924b5f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 21:15:53 -0700 Subject: [PATCH 5/7] Tighten padding on label chips --- packages/web/components/elements/LabelChip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index dcf1cbf3a..d38b232fd 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -32,7 +32,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { color: props.color, fontSize: '12px', fontWeight: 'bold', - padding: '4px 8px 4px 8px', + padding: '1px 7px 1px 7px', whiteSpace: 'nowrap', cursor: 'pointer', backgroundClip: 'padding-box', From 0db6bff308577ee15e80055c5b3c212f4ab35a06 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 21:20:17 -0700 Subject: [PATCH 6/7] label padding --- packages/web/components/elements/LabelChip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index d38b232fd..131f1acae 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -32,7 +32,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { color: props.color, fontSize: '12px', fontWeight: 'bold', - padding: '1px 7px 1px 7px', + padding: '2px 7px 2px 7px', whiteSpace: 'nowrap', cursor: 'pointer', backgroundClip: 'padding-box', From c004f20ee7e8c7207f743e801af9be6d832f9f78 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 14 Apr 2022 21:38:48 -0700 Subject: [PATCH 7/7] More label padding tweaks --- packages/web/components/elements/LabelChip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index 131f1acae..412915a00 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -32,7 +32,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { color: props.color, fontSize: '12px', fontWeight: 'bold', - padding: '2px 7px 2px 7px', + padding: '2px 5px 2px 5px', whiteSpace: 'nowrap', cursor: 'pointer', backgroundClip: 'padding-box',