Bluesky app fork with some witchin' additions 💫
update button spacing (#9383)
authored by
Samuel Newman
and committed by
GitHub
55427595
48846778
+67
-48
+67
-48
src/components/Button.tsx
+67
-48
src/components/Button.tsx
···
442
442
if (size === 'large') {
443
443
baseStyles.push(a.rounded_full, {
444
444
paddingVertical: 12,
445
-
paddingHorizontal: 25,
446
-
gap: 3,
445
+
paddingHorizontal: 24,
446
+
gap: 6,
447
447
})
448
448
} else if (size === 'small') {
449
449
baseStyles.push(a.rounded_full, {
450
450
paddingVertical: 8,
451
-
paddingHorizontal: 13,
452
-
gap: 3,
451
+
paddingHorizontal: 14,
452
+
gap: 5,
453
453
})
454
454
} else if (size === 'tiny') {
455
455
baseStyles.push(a.rounded_full, {
456
456
paddingVertical: 5,
457
-
paddingHorizontal: 9,
458
-
gap: 2,
457
+
paddingHorizontal: 10,
458
+
gap: 3,
459
459
})
460
460
}
461
461
} else if (shape === 'rectangular') {
···
531
531
variant,
532
532
color,
533
533
size,
534
+
shape,
534
535
disabled: disabled || false,
535
536
}),
536
-
[state, variant, color, size, disabled],
537
+
[state, variant, color, size, shape, disabled],
537
538
)
538
539
539
540
return (
···
774
775
position?: 'left' | 'right'
775
776
size?: SVGIconProps['size']
776
777
}) {
777
-
const {size: buttonSize} = useButtonContext()
778
+
const {size: buttonSize, shape: buttonShape} = useButtonContext()
778
779
const textStyles = useSharedButtonTextStyles()
779
-
const {iconSize, iconContainerSize} = React.useMemo(() => {
780
-
/**
781
-
* Pre-set icon sizes for different button sizes
782
-
*/
783
-
const iconSizeShorthand =
784
-
size ??
785
-
(({
786
-
large: 'md',
787
-
small: 'sm',
788
-
tiny: 'xs',
789
-
}[buttonSize || 'small'] || 'sm') as Exclude<
790
-
SVGIconProps['size'],
791
-
undefined
792
-
>)
780
+
const {iconSize, iconContainerSize, iconNegativeMargin} =
781
+
React.useMemo(() => {
782
+
/**
783
+
* Pre-set icon sizes for different button sizes
784
+
*/
785
+
const iconSizeShorthand =
786
+
size ??
787
+
(({
788
+
large: 'md',
789
+
small: 'sm',
790
+
tiny: 'xs',
791
+
}[buttonSize || 'small'] || 'sm') as Exclude<
792
+
SVGIconProps['size'],
793
+
undefined
794
+
>)
793
795
794
-
/*
795
-
* Copied here from icons/common.tsx so we can tweak if we need to, but
796
-
* also so that we can calculate transforms.
797
-
*/
798
-
const iconSize = {
799
-
xs: 12,
800
-
sm: 16,
801
-
md: 18,
802
-
lg: 24,
803
-
xl: 28,
804
-
'2xl': 32,
805
-
}[iconSizeShorthand]
796
+
/*
797
+
* Copied here from icons/common.tsx so we can tweak if we need to, but
798
+
* also so that we can calculate transforms.
799
+
*/
800
+
const iconSize = {
801
+
xs: 12,
802
+
sm: 16,
803
+
md: 18,
804
+
lg: 24,
805
+
xl: 28,
806
+
'2xl': 32,
807
+
}[iconSizeShorthand]
806
808
807
-
/*
808
-
* Goal here is to match rendered text size so that different size icons
809
-
* don't increase button size
810
-
*/
811
-
const iconContainerSize = {
812
-
large: 20,
813
-
small: 17,
814
-
tiny: 15,
815
-
}[buttonSize || 'small']
809
+
/*
810
+
* Goal here is to match rendered text size so that different size icons
811
+
* don't increase button size
812
+
*/
813
+
const iconContainerSize = {
814
+
large: 20,
815
+
small: 17,
816
+
tiny: 15,
817
+
}[buttonSize || 'small']
816
818
817
-
return {
818
-
iconSize,
819
-
iconContainerSize,
820
-
}
821
-
}, [buttonSize, size])
819
+
/*
820
+
* The icon needs to be closer to the edge of the button than the text. Therefore
821
+
* we make the gap slightly too large, and then pull in the sides using negative margins.
822
+
*/
823
+
let iconNegativeMargin = 0
824
+
825
+
if (buttonShape === 'default') {
826
+
iconNegativeMargin = {
827
+
large: -2,
828
+
small: -2,
829
+
tiny: -1,
830
+
}[buttonSize || 'small']
831
+
}
832
+
833
+
return {
834
+
iconSize,
835
+
iconContainerSize,
836
+
iconNegativeMargin,
837
+
}
838
+
}, [buttonSize, buttonShape, size])
822
839
823
840
return (
824
841
<View
···
827
844
{
828
845
width: iconContainerSize,
829
846
height: iconContainerSize,
847
+
marginLeft: iconNegativeMargin,
848
+
marginRight: iconNegativeMargin,
830
849
},
831
850
]}>
832
851
<View