acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin/main' into 3p-moderators

Browse Source 
* origin/main: (33 commits)
  Improved server selector during account creation and signin (#2840)
  remove line height from text input for composer on ios (#2844)
  Add follow button to highlighted post (#2828)
  Cleaning up old codes pt_BR (#2809)
  Fix wrong translations in zh-CN localization  (#2812)
  Adjust Japanese translation (#2814)
  Update ja messages.po (#2821)
  change follow to follow all when !== 20 (#2831)
  ios adult content link fix 🤦 (#2845)
  improves build.md completeness (#2835)
  increase stroke width for active hashtag icon (#2829)
  Update `blueskyweb.xyz` links to `bsky.social` (#2830)
  eas nightlies (#2826)
  Always show post dropdown button at the bottom of the post, add share button to highlighted post (#2646)
  Measure header layout reliably (#2817)
  Round line height (#2824)
  Design system tweaks (#2822)
  Fix layout calculations (#2816)
  Fix flashes and jumps when opening profile (#2815)
  Show text cursor on web bio (#2813)
  ...
This commit is contained in:
Eric Bailey
2024-02-12 15:43:33 -06:00
parent 937b66e3b5 ba7463cadf
commit 9075c501ec
90 changed files with 1781 additions and 1707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+1
View File
@@ -52,6 +52,7 @@ export type ButtonProps = React.PropsWithChildren<
Pick<PressableProps, 'disabled' | 'onPress' | 'testID'> &
AccessibilityProps &
VariantProps & {
testID?: string
label: string
style?: StyleProp<ViewStyle>
}
src/components/Dialog/index.tsx
+15 -3
View File
@@ -35,6 +35,7 @@ export function Outer({
const sheet = React.useRef<BottomSheet>(null)
const sheetOptions = nativeOptions?.sheet || {}
const hasSnapPoints = !!sheetOptions.snapPoints
const insets = useSafeAreaInsets()
const open = React.useCallback<DialogControlProps['open']>(({index} = {}) => {
sheet.current?.snapToIndex(index || 0)
@@ -42,8 +43,7 @@ export function Outer({
const close = React.useCallback(() => {
sheet.current?.close()
onClose?.()
}, [onClose])
}, [])
useImperativeHandle(
control.ref,
@@ -54,6 +54,15 @@ export function Outer({
[open, close],
)
const onChange = React.useCallback(
(index: number) => {
if (index === -1) {
onClose?.()
}
},
[onClose],
)
const context = React.useMemo(() => ({close}), [close])
return (
@@ -64,6 +73,7 @@ export function Outer({
keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize"
keyboardBlurBehavior="restore"
topInset={insets.top}
{...sheetOptions}
ref={sheet}
index={defaultOpen ? 0 : -1}
@@ -78,7 +88,7 @@ export function Outer({
)}
handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
handleStyle={{display: 'none'}}
onClose={onClose}>
onChange={onChange}>
<Context.Provider value={context}>
<View
style={[
@@ -122,6 +132,8 @@ export function ScrollableInner(props: DialogInnerProps) {
const insets = useSafeAreaInsets()
return (
<BottomSheetScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
style={[
a.flex_1, // main diff is this
a.p_xl,
src/components/Divider.tsx
+11 -3
View File
@@ -1,10 +1,18 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {ViewStyleProp} from '#/alf'
import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf'
export function Divider({style}: ViewStyleProp) {
const t = useTheme()
return <View style={[a.w_full, a.border_t, t.atoms.border, style]} />
return (
<View
style={[
a.w_full,
a.border_t,
t.atoms.border_contrast_low,
flatten(style),
]}
/>
)
}
src/components/Prompt.tsx
+7 -8
View File
@@ -4,7 +4,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useTheme, atoms as a} from '#/alf'
import {H4, P} from '#/components/Typography'
import {Text} from '#/components/Typography'
import {Button} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
@@ -50,14 +50,11 @@ export function Outer({
}
export function Title({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
const {titleId} = React.useContext(Context)
return (
<H4
nativeID={titleId}
style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
<Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
{children}
</H4>
</Text>
)
}
@@ -65,9 +62,11 @@ export function Description({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
const {descriptionId} = React.useContext(Context)
return (
<P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}>
<Text
nativeID={descriptionId}
style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
{children}
</P>
</Text>
)
}
src/components/Typography.tsx
+30 -126
View File
@@ -15,7 +15,7 @@ export function leading<
>(textSize: Size, leading: Leading) {
const size = textSize?.fontSize || atoms.text_md.fontSize
const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
return size * lineHeight
return Math.round(size * lineHeight)
}
/**
@@ -32,7 +32,7 @@ function normalizeTextStyles(styles: TextStyle[]) {
if (s?.lineHeight) {
if (s.lineHeight <= 2) {
s.lineHeight = fontSize * s.lineHeight
s.lineHeight = Math.round(fontSize * s.lineHeight)
}
} else {
s.lineHeight = fontSize
@@ -41,138 +41,42 @@ function normalizeTextStyles(styles: TextStyle[]) {
return s
}
/**
* Our main text component. Use this most of the time.
*/
export function Text({style, ...rest}: TextProps) {
const t = useTheme()
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)])
return <RNText style={s} {...rest} />
}
export function H1({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 1,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_5xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H2({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 2,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_4xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H3({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 3,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_3xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H4({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 4,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_2xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H5({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 5,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H6({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 6,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_lg,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
export function createHeadingElement({level}: {level: number}) {
return function HeadingElement({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': level,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([t.atoms.text, flatten(style)])}
/>
)
}
}
/*
* Use semantic components when it's beneficial to the user or to a web scraper
*/
export const H1 = createHeadingElement({level: 1})
export const H2 = createHeadingElement({level: 2})
export const H3 = createHeadingElement({level: 3})
export const H4 = createHeadingElement({level: 4})
export const H5 = createHeadingElement({level: 5})
export const H6 = createHeadingElement({level: 6})
export function P({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
src/components/forms/TextField.tsx
+8 -3
View File
@@ -241,10 +241,15 @@ export function createInput(Component: typeof TextInput) {
export const Input = createInput(TextInput)
export function Label({children}: React.PropsWithChildren<{}>) {
export function Label({
nativeID,
children,
}: React.PropsWithChildren<{nativeID?: string}>) {
const t = useTheme()
return (
<Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
<Text
nativeID={nativeID}
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
{children}
</Text>
)
@@ -318,7 +323,7 @@ export function Suffix({
a.z_20,
a.pr_sm,
a.text_md,
t.atoms.text_contrast_400,
t.atoms.text_contrast_medium,
{
pointerEvents: 'none',
},
src/components/forms/Toggle.tsx
+3 -3
View File
@@ -347,7 +347,7 @@ export function Checkbox() {
a.align_center,
a.border,
a.rounded_xs,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,
@@ -393,7 +393,7 @@ export function Switch() {
a.border,
a.rounded_full,
t.atoms.bg,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 30,
@@ -445,7 +445,7 @@ export function Radio() {
a.align_center,
a.border,
a.rounded_full,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,
src/components/forms/ToggleButton.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import * as Toggle from '#/components/forms/Toggle'
export type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
AccessibilityProps &
React.PropsWithChildren<{}>
React.PropsWithChildren<{testID?: string}>
export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
multiple?: boolean
@@ -25,7 +25,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border,
t.atoms.border_contrast_low,
]}>
{children}
</View>
@@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
}),
a.px_sm,
t.atoms.bg,
t.atoms.border,
t.atoms.border_contrast_low,
baseStyles,
activeStyles,
(state.hovered || state.focused || state.pressed) && hoverStyles,
@@ -113,7 +113,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
style={[
a.text_center,
a.font_bold,
t.atoms.text_contrast_500,
t.atoms.text_contrast_medium,
textStyles,
]}>
{children}
src/components/icons/ArrowOutOfBox.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const ArrowOutOfBox_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12.707 3.293a1 1 0 0 0-1.414 0l-4.5 4.5a1 1 0 0 0 1.414 1.414L11 6.414v8.836a1 1 0 1 0 2 0V6.414l2.793 2.793a1 1 0 1 0 1.414-1.414l-4.5-4.5ZM5 12.75a1 1 0 1 0-2 0V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.25a1 1 0 1 0-2 0V19H5v-6.25Z',
})