From 1309521b9cdc8dcc20aaf81b56b362416a65d08f Mon Sep 17 00:00:00 2001 From: Justin Date: Fri, 1 Jul 2022 16:07:16 -0400 Subject: [PATCH] Improve Stack and HStack components --- app/soapbox/components/ui/hstack/hstack.tsx | 3 ++- app/soapbox/components/ui/stack/stack.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx index 9769ebc60..2a021d903 100644 --- a/app/soapbox/components/ui/hstack/hstack.tsx +++ b/app/soapbox/components/ui/hstack/hstack.tsx @@ -6,6 +6,7 @@ const justifyContentOptions = { center: 'justify-center', start: 'justify-start', end: 'justify-end', + around: 'justify-around', }; const alignItemsOptions = { @@ -32,7 +33,7 @@ interface IHStack { /** Extra class names on the
element. */ className?: string, /** Horizontal alignment of children. */ - justifyContent?: 'between' | 'center' | 'start' | 'end', + justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around', /** Size of the gap between elements. */ space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8, /** Whether to let the flexbox grow. */ diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx index 17b4df36e..9ecb4a104 100644 --- a/app/soapbox/components/ui/stack/stack.tsx +++ b/app/soapbox/components/ui/stack/stack.tsx @@ -4,6 +4,7 @@ import React from 'react'; type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10 const spaces = { + 0: 'space-y-0', '0.5': 'space-y-0.5', 1: 'space-y-1', '1.5': 'space-y-1.5',