zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Enforce Text suffix for Text-rendering components (#3407)

Browse source 
* Rm unused

* Add Text suffix to Title/Description

* Add Text suffix to text components

* Add Text suffix to props

* Validate Text components returns
This commit is contained in:
dan 2024-04-04 21:34:55 +01:00 • committed by GitHub
parent c190fd58ec
commit 3915bb4316
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 453 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/view/screens/Storybook/Forms.tsx
View file

@ -2,13 +2,13 @@ import React from 'react'
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {H1, H3} from '#/components/Typography'
import {Button} from '#/components/Button'
import {DateField, LabelText} from '#/components/forms/DateField'
import * as TextField from '#/components/forms/TextField'
import {DateField, Label} from '#/components/forms/DateField'
import * as Toggle from '#/components/forms/Toggle'
import * as ToggleButton from '#/components/forms/ToggleButton'
import {Button} from '#/components/Button'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {H1, H3} from '#/components/Typography'
export function Forms() {
const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
@ -42,7 +42,7 @@ export function Forms() {
</TextField.Root>
<View style={[a.w_full]}>
<TextField.Label>Text field</TextField.Label>
<TextField.LabelText>Text field</TextField.LabelText>
<TextField.Root>
<TextField.Icon icon={Globe} />
<TextField.Input
@ -50,12 +50,14 @@ export function Forms() {
onChangeText={setValue}
label="Text field"
/>
<TextField.Suffix label="@gmail.com">@gmail.com</TextField.Suffix>
<TextField.SuffixText label="@gmail.com">
@gmail.com
</TextField.SuffixText>
</TextField.Root>
</View>
<View style={[a.w_full]}>
<TextField.Label>Textarea</TextField.Label>
<TextField.LabelText>Textarea</TextField.LabelText>
<TextField.Input
multiline
numberOfLines={4}
@ -68,7 +70,7 @@ export function Forms() {
<H3>DateField</H3>
<View style={[a.w_full]}>
<Label>Date</Label>
<LabelText>Date</LabelText>
<DateField
testID="date"
value={date}
@ -86,7 +88,7 @@ export function Forms() {
<Toggle.Item name="a" label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Uncontrolled toggle</Toggle.Label>
<Toggle.LabelText>Uncontrolled toggle</Toggle.LabelText>
</Toggle.Item>
<Toggle.Group
@ -98,23 +100,23 @@ export function Forms() {
<View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me">
<Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="b" label="Click me">
<Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="c" label="Click me">
<Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="d" disabled label="Click me">
<Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="e" isInvalid label="Click me">
<Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
</View>
</Toggle.Group>
@ -128,23 +130,23 @@ export function Forms() {
<View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="b" label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="c" label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="d" disabled label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="e" isInvalid label="Click me">
<Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
</View>
</Toggle.Group>
@ -157,23 +159,23 @@ export function Forms() {
<View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me">
<Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="b" label="Click me">
<Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="c" label="Click me">
<Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="d" disabled label="Click me">
<Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="e" isInvalid label="Click me">
<Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label>
<Toggle.LabelText>Click me</Toggle.LabelText>
</Toggle.Item>
</View>
</Toggle.Group>