Skip to content

Commit 8729a28

Browse files
jxomjxom
committed
feat: Button.Symbol labels
1 parent 29eff9e commit 8729a28

File tree

8 files changed

+158
-41
lines changed

8 files changed

+158
-41
lines changed

‎src/components/Container.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export function Container({
6262
)}
6363
{dismissable && (
6464
<Button.Symbol
65+
label="Close"
6566
height="24px"
6667
onClick={() => navigate(-1)}
6768
symbol="xmark"

‎src/components/Header.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,7 @@ function Network() {
275275
</Column>
276276
<Column width="content">
277277
<Button.Symbol
278+
label="Network Settings"
278279
onClick={(e) => {
279280
e.preventDefault()
280281
navigate(`/networks/${encodeURIComponent(network.rpcUrl)}`, {
@@ -443,6 +444,7 @@ function MineButton() {
443444
style={{ marginTop: '8px' }}
444445
>
445446
<Button.Symbol
447+
label="Mine Block"
446448
height="20px"
447449
onClick={(e) => {
448450
e.preventDefault()

‎src/design-system/_playground/index.tsx‎

Lines changed: 124 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -493,136 +493,219 @@ function DesignSystem() {
493493
Solid
494494
</Text>
495495
<Box display="flex" gap="8px">
496-
<Button.Symbol symbol="trash" />
497-
<Button.Symbol symbol="trash" variant="solid primary" />
498-
<Button.Symbol symbol="trash" variant="solid fill" />
499-
<Button.Symbol symbol="trash" variant="solid blue" />
500-
<Button.Symbol symbol="trash" variant="solid green" />
501-
<Button.Symbol symbol="trash" variant="solid red" />
496+
<Button.Symbol label="Label" symbol="trash" />
497+
<Button.Symbol
498+
label="Label"
499+
symbol="trash"
500+
variant="solid primary"
501+
/>
502+
<Button.Symbol
503+
label="Label"
504+
symbol="trash"
505+
variant="solid fill"
506+
/>
507+
<Button.Symbol
508+
label="Label"
509+
symbol="trash"
510+
variant="solid blue"
511+
/>
512+
<Button.Symbol
513+
label="Label"
514+
symbol="trash"
515+
variant="solid green"
516+
/>
517+
<Button.Symbol
518+
label="Label"
519+
symbol="trash"
520+
variant="solid red"
521+
/>
502522
</Box>
503523
</Stack>
504524
<Stack gap="16px">
505525
<Text weight="medium" size="18px">
506526
Stroked
507527
</Text>
508528
<Box display="flex" gap="8px">
509-
<Button.Symbol symbol="trash" variant="stroked fill" />
510-
<Button.Symbol symbol="trash" variant="stroked invert" />
511-
<Button.Symbol symbol="trash" variant="stroked blue" />
512-
<Button.Symbol symbol="trash" variant="stroked green" />
513-
<Button.Symbol symbol="trash" variant="stroked red" />
529+
<Button.Symbol
530+
label="Label"
531+
symbol="trash"
532+
variant="stroked fill"
533+
/>
534+
<Button.Symbol
535+
label="Label"
536+
symbol="trash"
537+
variant="stroked invert"
538+
/>
539+
<Button.Symbol
540+
label="Label"
541+
symbol="trash"
542+
variant="stroked blue"
543+
/>
544+
<Button.Symbol
545+
label="Label"
546+
symbol="trash"
547+
variant="stroked green"
548+
/>
549+
<Button.Symbol
550+
label="Label"
551+
symbol="trash"
552+
variant="stroked red"
553+
/>
514554
</Box>
515555
</Stack>
516556
<Stack gap="16px">
517557
<Text weight="medium" size="18px">
518558
Tint
519559
</Text>
520560
<Box display="flex" gap="8px">
521-
<Button.Symbol symbol="trash" variant="tint blue" />
522-
<Button.Symbol symbol="trash" variant="tint green" />
523-
<Button.Symbol symbol="trash" variant="tint red" />
561+
<Button.Symbol
562+
label="Label"
563+
symbol="trash"
564+
variant="tint blue"
565+
/>
566+
<Button.Symbol
567+
label="Label"
568+
symbol="trash"
569+
variant="tint green"
570+
/>
571+
<Button.Symbol
572+
label="Label"
573+
symbol="trash"
574+
variant="tint red"
575+
/>
524576
</Box>
525577
</Stack>
526578
<Stack gap="16px">
527579
<Text weight="medium" size="18px">
528580
Ghost
529581
</Text>
530582
<Box display="flex" gap="8px">
531-
<Button.Symbol symbol="trash" variant="ghost primary" />
532-
<Button.Symbol symbol="trash" variant="ghost blue" />
533-
<Button.Symbol symbol="trash" variant="ghost green" />
534-
<Button.Symbol symbol="trash" variant="ghost red" />
583+
<Button.Symbol
584+
label="Label"
585+
symbol="trash"
586+
variant="ghost primary"
587+
/>
588+
<Button.Symbol
589+
label="Label"
590+
symbol="trash"
591+
variant="ghost blue"
592+
/>
593+
<Button.Symbol
594+
label="Label"
595+
symbol="trash"
596+
variant="ghost green"
597+
/>
598+
<Button.Symbol
599+
label="Label"
600+
symbol="trash"
601+
variant="ghost red"
602+
/>
535603
</Box>
536604
</Stack>
537605
<Stack gap="16px">
538606
<Text weight="medium" size="18px">
539607
Height
540608
</Text>
541609
<Box display="flex" gap="8px">
542-
<Button.Symbol height="44px" symbol="trash" />
610+
<Button.Symbol label="Label" height="44px" symbol="trash" />
543611
<Button.Symbol
612+
label="Label"
544613
height="44px"
545614
symbol="trash"
546615
variant="stroked invert"
547616
/>
548617
<Button.Symbol
618+
label="Label"
549619
height="44px"
550620
symbol="trash"
551621
variant="tint green"
552622
/>
553623
<Button.Symbol
624+
label="Label"
554625
height="44px"
555626
symbol="trash"
556627
variant="ghost red"
557628
/>
558629
</Box>
559630
<Box display="flex" gap="8px">
560-
<Button.Symbol height="36px" symbol="trash" />
631+
<Button.Symbol label="Label" height="36px" symbol="trash" />
561632
<Button.Symbol
633+
label="Label"
562634
height="36px"
563635
symbol="trash"
564636
variant="stroked invert"
565637
/>
566638
<Button.Symbol
639+
label="Label"
567640
height="36px"
568641
symbol="trash"
569642
variant="tint green"
570643
/>
571644
<Button.Symbol
645+
label="Label"
572646
height="36px"
573647
symbol="trash"
574648
variant="ghost red"
575649
/>
576650
</Box>
577651
<Box display="flex" gap="8px">
578-
<Button.Symbol height="24px" symbol="trash" />
652+
<Button.Symbol label="Label" height="24px" symbol="trash" />
579653
<Button.Symbol
654+
label="Label"
580655
height="24px"
581656
symbol="trash"
582657
variant="stroked invert"
583658
/>
584659
<Button.Symbol
660+
label="Label"
585661
height="24px"
586662
symbol="trash"
587663
variant="tint green"
588664
/>
589665
<Button.Symbol
666+
label="Label"
590667
height="24px"
591668
symbol="trash"
592669
variant="ghost red"
593670
/>
594671
</Box>
595672
<Box display="flex" gap="8px">
596-
<Button.Symbol height="20px" symbol="trash" />
673+
<Button.Symbol label="Label" height="20px" symbol="trash" />
597674
<Button.Symbol
675+
label="Label"
598676
height="20px"
599677
symbol="trash"
600678
variant="stroked invert"
601679
/>
602680
<Button.Symbol
681+
label="Label"
603682
height="20px"
604683
symbol="trash"
605684
variant="tint green"
606685
/>
607686
<Button.Symbol
687+
label="Label"
608688
height="20px"
609689
symbol="trash"
610690
variant="ghost red"
611691
/>
612692
</Box>
613693
<Box display="flex" gap="8px">
614-
<Button.Symbol height="18px" symbol="trash" />
694+
<Button.Symbol label="Label" height="18px" symbol="trash" />
615695
<Button.Symbol
696+
label="Label"
616697
height="18px"
617698
symbol="trash"
618699
variant="stroked invert"
619700
/>
620701
<Button.Symbol
702+
label="Label"
621703
height="18px"
622704
symbol="trash"
623705
variant="tint green"
624706
/>
625707
<Button.Symbol
708+
label="Label"
626709
height="18px"
627710
symbol="trash"
628711
variant="ghost red"
@@ -634,14 +717,21 @@ function DesignSystem() {
634717
Disabled
635718
</Text>
636719
<Box display="flex" gap="8px">
637-
<Button.Symbol disabled symbol="trash" />
720+
<Button.Symbol label="Label" disabled symbol="trash" />
638721
<Button.Symbol
722+
label="Label"
639723
disabled
640724
symbol="trash"
641725
variant="stroked invert"
642726
/>
643-
<Button.Symbol disabled symbol="trash" variant="tint green" />
644727
<Button.Symbol
728+
label="Label"
729+
disabled
730+
symbol="trash"
731+
variant="tint green"
732+
/>
733+
<Button.Symbol
734+
label="Label"
645735
disabled
646736
symbol="trash"
647737
variant="ghost primary"
@@ -786,14 +876,21 @@ function DesignSystem() {
786876
Disabled
787877
</Text>
788878
<Box display="flex" gap="8px">
789-
<Button.Symbol disabled symbol="trash" />
879+
<Button.Symbol label="Label" disabled symbol="trash" />
790880
<Button.Symbol
881+
label="Label"
791882
disabled
792883
symbol="trash"
793884
variant="stroked invert"
794885
/>
795-
<Button.Symbol disabled symbol="trash" variant="tint green" />
796886
<Button.Symbol
887+
label="Label"
888+
disabled
889+
symbol="trash"
890+
variant="tint green"
891+
/>
892+
<Button.Symbol
893+
label="Label"
797894
disabled
798895
symbol="trash"
799896
variant="ghost primary"

‎src/design-system/components/ButtonSymbol.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
22

33
import type { UnionOmit } from '~/utils/types'
44

5+
import { Tooltip } from '../../components'
56
import type { SymbolName } from '../tokens'
67
import { ButtonRoot, type ButtonRootProps } from './Button'
78
import { type ButtonHeight, type ButtonVariant } from './Button.css'
@@ -10,6 +11,7 @@ import { SFSymbol } from './SFSymbol'
1011
import type { SFSymbolProps } from './SFSymbol'
1112

1213
type ButtonSymbolProps = UnionOmit<ButtonRootProps, 'children'> & {
14+
label: string
1315
symbol: SymbolName
1416
symbolProps?: Partial<SFSymbolProps>
1517
}
@@ -66,22 +68,28 @@ export const symbolStylesForVariant = {
6668
} satisfies Record<ButtonVariant, { color?: SFSymbolProps['color'] }>
6769

6870
export const ButtonSymbol = forwardRef<HTMLDivElement, ButtonSymbolProps>(
69-
({ symbol, symbolProps, width, ...rootProps }: ButtonSymbolProps, ref) => {
71+
(
72+
{ label, symbol, symbolProps, width, ...rootProps }: ButtonSymbolProps,
73+
ref,
74+
) => {
7075
const { height = '36px', variant = 'solid invert' } = rootProps
7176
return (
72-
<ButtonRoot
73-
ref={ref}
74-
{...rootProps}
75-
className={[!width && widthForHeight[height], rootProps.className]}
76-
width={width}
77-
>
78-
<SFSymbol
79-
symbol={symbol}
80-
{...symbolStylesForHeight[height]}
81-
{...symbolStylesForVariant[variant]}
82-
{...symbolProps}
83-
/>
84-
</ButtonRoot>
77+
<Tooltip label={label}>
78+
<ButtonRoot
79+
ref={ref}
80+
aria-label={label}
81+
{...rootProps}
82+
className={[!width && widthForHeight[height], rootProps.className]}
83+
width={width}
84+
>
85+
<SFSymbol
86+
symbol={symbol}
87+
{...symbolStylesForHeight[height]}
88+
{...symbolStylesForVariant[variant]}
89+
{...symbolProps}
90+
/>
91+
</ButtonRoot>
92+
</Tooltip>
8593
)
8694
},
8795
)

‎src/screens/account-details.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default function AccountDetails() {
4646
<Inset horizontal="4px">
4747
<Inline gap="4px">
4848
<Button.Symbol
49+
label="Back"
4950
onClick={() => navigate(-1)}
5051
symbol="chevron.left"
5152
height="24px"
@@ -253,6 +254,7 @@ function TokenRow({
253254
</Column>
254255
<Column width="content">
255256
<Button.Symbol
257+
label="Delete"
256258
symbol="trash"
257259
height="24px"
258260
variant="ghost red"

0 commit comments

Comments
 (0)