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)}
+ />
+