From 1e9c44fc75e1b7d9fc0bc3cdeb91b048b82af9f4 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Sat, 13 Jan 2024 13:21:51 -0600 Subject: [PATCH] Some styles --- src/components/Prompt.tsx | 6 +- src/components/forms/InputGroup.tsx | 8 +- src/components/forms/InputText.tsx | 121 +++++++++++++++++++-------- src/view/screens/Storybook/Forms.tsx | 48 +++++++++++ 4 files changed, 146 insertions(+), 37 deletions(-) diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index b5841e7bb9..61bf614be0 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -3,7 +3,7 @@ import {View, PressableProps, LayoutChangeEvent} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useTheme, atoms as a} from '#/alf' -import {H2, P} from '#/components/Typography' +import {H4, P} from '#/components/Typography' import {Button} from '#/components/Button' import * as Dialog from '#/components/Dialog' @@ -70,11 +70,11 @@ export function Title({children}: React.PropsWithChildren<{}>) { const t = useTheme() const {titleId} = React.useContext(Context) return ( -

{children} -

+ ) } diff --git a/src/components/forms/InputGroup.tsx b/src/components/forms/InputGroup.tsx index 7a906c719a..6908d4df8e 100644 --- a/src/components/forms/InputGroup.tsx +++ b/src/components/forms/InputGroup.tsx @@ -1,12 +1,13 @@ import React from 'react' import {View} from 'react-native' -import {atoms} from '#/alf' +import {atoms, useTheme} from '#/alf' /** * NOT FINISHED, just here as a reference */ export function InputGroup(props: React.PropsWithChildren<{}>) { + const t = useTheme() const children = React.Children.toArray(props.children) const total = children.length return ( @@ -14,6 +15,11 @@ export function InputGroup(props: React.PropsWithChildren<{}>) { {children.map((child, i) => { return React.isValidElement(child) ? ( + {i > 0 ? ( + + ) : null} {React.cloneElement(child, { // @ts-ignore style: [ diff --git a/src/components/forms/InputText.tsx b/src/components/forms/InputText.tsx index eac2f0b01c..9c91ccf2aa 100644 --- a/src/components/forms/InputText.tsx +++ b/src/components/forms/InputText.tsx @@ -42,6 +42,7 @@ export function InputText({ onOut: onHoverOut, } = useInteractionState() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() + const hasIcon = !!Icon const handleSuffixLayout = React.useCallback( (e: LayoutChangeEvent) => { @@ -50,39 +51,85 @@ export function InputText({ [setSuffixPadding], ) - const {inputStyles, iconStyles} = React.useMemo(() => { - const input: TextStyle[] = [] - const icon: TextStyle[] = [] + const {inputBaseStyles, inputHoverStyles, inputFocusStyles} = + React.useMemo(() => { + const base: TextStyle[] = [] + const hover: TextStyle[] = [ + { + borderColor: t.palette.contrast_300, + }, + ] + const focus: TextStyle[] = [ + { + backgroundColor: t.palette.contrast_50, + borderColor: t.palette.primary_500, + }, + ] - if (Icon) { - input.push({ - paddingLeft: 40, - }) - } - - if (hasError) { - input.push({ - borderColor: tokens.color.red_200, - }) - icon.push({ - color: tokens.color.red_400, - }) - } - - if (hovered || focused) { - input.push({ - borderColor: t.atoms.border_contrast.borderColor, - }) + if (hasIcon) { + base.push({ + paddingLeft: 40, + }) + } if (hasError) { - input.push({ + base.push({ + backgroundColor: + t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, + borderColor: + t.name === 'light' + ? t.palette.negative_300 + : t.palette.negative_800, + }) + hover.push({ + borderColor: tokens.color.red_500, + }) + focus.push({ + backgroundColor: + t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, borderColor: tokens.color.red_500, }) } - } - return {inputStyles: input, iconStyles: icon} - }, [t, hovered, focused, hasError, Icon]) + return { + inputBaseStyles: base, + inputHoverStyles: hover, + inputFocusStyles: focus, + } + }, [t, hasError, hasIcon]) + + const {iconBaseStyles, iconHoverStyles, iconFocusStyles} = + React.useMemo(() => { + const base: TextStyle[] = [] + const hover: TextStyle[] = [ + { + color: t.palette.contrast_500, + }, + ] + const focus: TextStyle[] = [ + { + color: t.palette.primary_500, + }, + ] + + if (hasError) { + base.push({ + color: t.palette.negative_400, + }) + hover.push({ + color: t.palette.negative_500, + }) + focus.push({ + color: t.palette.negative_500, + }) + } + + return { + iconBaseStyles: base, + iconHoverStyles: hover, + iconFocusStyles: focus, + } + }, [t, hasError]) const handleOnChange = React.useCallback( (e: any) => { @@ -116,7 +163,7 @@ export function InputText({ aria-label={label} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} - placeholderTextColor={t.atoms.text_contrast_500.color} + placeholderTextColor={t.atoms.text_contrast_400.color} onFocus={onFocus} onBlur={onBlur} onChange={handleOnChange} @@ -125,20 +172,21 @@ export function InputText({ onMouseLeave: onHoverOut, })} style={[ - t.name === 'dark' ? t.atoms.bg_contrast_100 : t.atoms.bg, + t.atoms.bg_contrast_50, atoms.w_full, atoms.px_lg, atoms.py_md, atoms.rounded_sm, atoms.text_md, - t.atoms.border, t.atoms.text, web({ paddingTop: atoms.pt_md.paddingTop - 1, }), - {paddingRight: suffixPadding}, + {borderColor: 'transparent', paddingRight: suffixPadding}, {borderWidth: 2, lineHeight: atoms.text_md.lineHeight * 1.1875}, - ...inputStyles, + ...inputBaseStyles, + ...(hovered ? inputHoverStyles : []), + ...(focused ? inputFocusStyles : []), ...(Array.isArray(props.style) ? props.style : [props.style]), ]} /> @@ -155,12 +203,19 @@ export function InputText({ ]}> diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx index 85c8701d79..fa687d786d 100644 --- a/src/view/screens/Storybook/Forms.tsx +++ b/src/view/screens/Storybook/Forms.tsx @@ -5,6 +5,7 @@ import {atoms as a} from '#/alf' import {Text} from '#/components/Typography' import {InputText} from '#/components/forms/InputText' import {InputDate, utils} from '#/components/forms/InputDate' +import {InputGroup} from '#/components/forms/InputGroup' import {Logo} from '#/view/icons/Logo' export function Forms() { @@ -27,6 +28,16 @@ export function Forms() { value="Test initial value" onChange={text => console.log(text)} /> + console.log(text)} + icon={Logo} + /> .bksy.social} /> + console.log(text)} + /> + + + console.log(text)} + /> + console.log(text)} + /> + console.log(text)} + /> +