acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki 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
43 changed files with 453 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/screens/Storybook/Dialogs.tsx
+5 -5
View File
@@ -1,12 +1,12 @@
import React from 'react'
import {View} from 'react-native'
import {useDialogStateControlContext} from '#/state/dialogs'
import {atoms as a} from '#/alf'
import {Button} from '#/components/Button'
import {H3, P} from '#/components/Typography'
import * as Dialog from '#/components/Dialog'
import * as Prompt from '#/components/Prompt'
import {useDialogStateControlContext} from '#/state/dialogs'
import {H3, P} from '#/components/Typography'
export function Dialogs() {
const scrollable = Dialog.useDialogControl()
@@ -61,11 +61,11 @@ export function Dialogs() {
</Button>
<Prompt.Outer control={prompt}>
<Prompt.Title>This is a prompt</Prompt.Title>
<Prompt.Description>
<Prompt.TitleText>This is a prompt</Prompt.TitleText>
<Prompt.DescriptionText>
This is a generic prompt component. It accepts a title and a
description, as well as two actions.
</Prompt.Description>
</Prompt.DescriptionText>
<Prompt.Actions>
<Prompt.Cancel>Cancel</Prompt.Cancel>
<Prompt.Action onPress={() => {}}>Confirm</Prompt.Action>
src/view/screens/Storybook/Forms.tsx
+25 -23
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>
src/view/screens/Storybook/Links.tsx
+12 -10
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {View} from 'react-native'
import {useTheme, atoms as a} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
import {ButtonText} from '#/components/Button'
import {InlineLink, Link} from '#/components/Link'
import {InlineLinkText, Link} from '#/components/Link'
import {H1, Text} from '#/components/Typography'
export function Links() {
@@ -13,20 +13,22 @@ export function Links() {
<H1>Links</H1>
<View style={[a.gap_md, a.align_start]}>
<InlineLink to="https://google.com" style={[a.text_lg]}>
<InlineLinkText to="https://google.com" style={[a.text_lg]}>
https://google.com
</InlineLink>
<InlineLink to="https://google.com" style={[a.text_lg]}>
</InlineLinkText>
<InlineLinkText to="https://google.com" style={[a.text_lg]}>
External with custom children (google.com)
</InlineLink>
<InlineLink
</InlineLinkText>
<InlineLinkText
to="https://bsky.social"
style={[a.text_md, t.atoms.text_contrast_low]}>
Internal (bsky.social)
</InlineLink>
<InlineLink to="https://bsky.app/profile/bsky.app" style={[a.text_md]}>
</InlineLinkText>
<InlineLinkText
to="https://bsky.app/profile/bsky.app"
style={[a.text_md]}>
Internal (bsky.app)
</InlineLink>
</InlineLinkText>
<Link
variant="solid"