From 7bd43e3554dcf0c10a615b89a6856af363754bb5 Mon Sep 17 00:00:00 2001 From: tom Date: Tue, 22 Apr 2025 09:41:48 -0400 Subject: [PATCH 1/7] export more styled components --- src/components/Button.tsx | 33 ++++++------- src/components/forms/uncontrolled/index.tsx | 51 ++++++++++----------- src/theme/buttons.ts | 13 ++++++ 3 files changed, 53 insertions(+), 44 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index dd2c04c8f..81cacc9b7 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -2,8 +2,8 @@ import styled, {css} from "styled-components"; import theme from '../../src/theme'; import { applyButtonVariantStyles, ButtonVariant } from "../theme/buttons"; -const StyledButton = styled.button<{ variant: ButtonVariant }>` - ${props => applyButtonVariantStyles(props.variant)} +const buttonCss = css<{variant?: ButtonVariant}>` + ${props => applyButtonVariantStyles(props.variant || 'primary')} font-size: 1.6rem; line-height: 2rem; @@ -23,13 +23,6 @@ const StyledButton = styled.button<{ variant: ButtonVariant }>` user-select: none; white-space: nowrap; - ${props => props.variant === 'primary' ? ` - &:focus { - outline: solid ${theme.colors.palette.white}; - box-shadow: inset 0 0 0 3px ${theme.colors.palette.black}; - } - `: ''} - &:not([disabled]) { cursor: pointer; } @@ -59,27 +52,31 @@ interface WaitingButtonProps extends ButtonBase { waitingText: string; } -export const Button = (props: ButtonProps | WaitingButtonProps) => { +export const Button = styled((props: ButtonProps | WaitingButtonProps) => { const { disabled, isWaiting, waitingText, children, - variant = 'primary', + variant, ...otherProps } = props; - return {(isWaiting && waitingText) || children} - ; -} - -export const LinkButton = ({ variant = 'primary', ...props}: LinkButtonBase) => - {props.children} + ; +})` + ${buttonCss} +` + +export const LinkButton = styled(({ variant, ...props}: LinkButtonBase) => + {props.children} +)` + ${buttonCss} +`; export const linkStyle = css` color: ${theme.colors.link.color}; diff --git a/src/components/forms/uncontrolled/index.tsx b/src/components/forms/uncontrolled/index.tsx index 80e053531..e53da9c4d 100644 --- a/src/components/forms/uncontrolled/index.tsx +++ b/src/components/forms/uncontrolled/index.tsx @@ -7,7 +7,10 @@ export * from './inputs'; /* * form element */ -const FormElement = styled.form` +type FormProps = React.ComponentPropsWithoutRef<'form'>; +export const Form = styled(({children, ...props}: FormProps) =>
+ {children} +
)` margin: 5px; > *:not(:first-child) { margin-top: 2rem; @@ -17,10 +20,6 @@ const FormElement = styled.form` border-bottom: 1px solid #ccc; } `; -type FormProps = React.ComponentPropsWithoutRef<'form'>; -export const Form = ({children, ...props}: FormProps) => - {children} -; export const FormSection = styled.div` > *:not(:first-child) { @@ -28,21 +27,29 @@ export const FormSection = styled.div` } `; -const MessagesElement = styled.div` - font-weight: bold; -`; type MessagesProps = { state: FetchState; + className?: string; }; -export const Messages = ({state}: MessagesProps) => stateHasError(state) - ? {state.error} +export const Messages = styled(({state}: MessagesProps) => stateHasError(state) + ?
{state.error}
: null -; +)` + font-weight: bold; +`; /* * form buttons */ -const ButtonsElement = styled.div` +type ButtonsProps = { + state: FetchState; + onCancel?: () => void; + className?: string; +}; +export const Buttons = styled((props: ButtonsProps) =>
+ {'onCancel' in props ? Cancel : null} + +
)` display: flex; flex-direction: row; justify-content: space-between; @@ -50,23 +57,15 @@ const ButtonsElement = styled.div` margin-top: 3rem; } `; -type ButtonsProps = { - state: FetchState; - onCancel?: () => void; -}; -export const Buttons = (props: ButtonsProps) => - {'onCancel' in props ? Cancel : null} - -; // submit button -const SubmitElement = styled.input` -`; type SubmitButtonProps = React.ComponentPropsWithoutRef<'input'>; -export const Submit = ({...props}: SubmitButtonProps) => ; +export const Submit = styled(({...props}: SubmitButtonProps) => + +)` +`; // cancel button -const CancelElement = styled.button` -`; type CancelButtonProps = React.ComponentPropsWithoutRef<'button'>; -export const Cancel = ({...props}: CancelButtonProps) => ; +export const Cancel = styled(({...props}: CancelButtonProps) => @@ -19,7 +19,7 @@ exports[`Button matches light color snapshot 1`] = ` exports[`Button matches snapshot 1`] = ` @@ -27,7 +27,7 @@ exports[`Button matches snapshot 1`] = ` exports[`Button renders as a tag 1`] = ` Click Me @@ -35,7 +35,7 @@ exports[`Button renders as a tag 1`] = ` exports[`Button renders as a tag variant 1`] = ` Click Me @@ -43,7 +43,7 @@ exports[`Button renders as a tag variant 1`] = ` exports[`Button renders button that looks like a link 1`] = ` @@ -51,7 +51,7 @@ exports[`Button renders button that looks like a link 1`] = ` exports[`Button renders plain button 1`] = ` diff --git a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap index 04ed674a8..958471491 100644 --- a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap +++ b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`DropdownMenu matches snapshots 1`] = ` @@ -140,7 +140,7 @@ exports[`Modal matches snapshot when heading and children are set 1`] = ` hidden="" />
@@ -159,20 +159,20 @@ exports[`Modal matches snapshot when heading and children are set 1`] = ` />