From 8729a285d209f5f0f16d73e9f291013302f971e9 Mon Sep 17 00:00:00 2001
From: "moxey.eth" <jakemoxey@gmail.com>
Date: Tue, 3 Oct 2023 14:11:03 +1100
Subject: [PATCH] feat: Button.Symbol labels

---
 src/components/Container.tsx                  |   1 +
 src/components/Header.tsx                     |   2 +
 src/design-system/_playground/index.tsx       | 151 ++++++++++++++----
 src/design-system/components/ButtonSymbol.tsx |  36 +++--
 src/screens/account-details.tsx               |   2 +
 src/screens/index.tsx                         |   3 +
 src/screens/networks.tsx                      |   3 +
 src/screens/session.tsx                       |   1 +
 8 files changed, 158 insertions(+), 41 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 35fe885..2c19d1a 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -62,6 +62,7 @@ export function Container({
                     )}
                     {dismissable && (
                       <Button.Symbol
+                        label="Close"
                         height="24px"
                         onClick={() => navigate(-1)}
                         symbol="xmark"
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b2eab7d..8b5ecd7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -275,6 +275,7 @@ function Network() {
             </Column>
             <Column width="content">
               <Button.Symbol
+                label="Network Settings"
                 onClick={(e) => {
                   e.preventDefault()
                   navigate(`/networks/${encodeURIComponent(network.rpcUrl)}`, {
@@ -443,6 +444,7 @@ function MineButton() {
       style={{ marginTop: '8px' }}
     >
       <Button.Symbol
+        label="Mine Block"
         height="20px"
         onClick={(e) => {
           e.preventDefault()
diff --git a/src/design-system/_playground/index.tsx b/src/design-system/_playground/index.tsx
index 4232664..2005bce 100644
--- a/src/design-system/_playground/index.tsx
+++ b/src/design-system/_playground/index.tsx
@@ -493,12 +493,32 @@ function DesignSystem() {
                   Solid
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol symbol="trash" />
-                  <Button.Symbol symbol="trash" variant="solid primary" />
-                  <Button.Symbol symbol="trash" variant="solid fill" />
-                  <Button.Symbol symbol="trash" variant="solid blue" />
-                  <Button.Symbol symbol="trash" variant="solid green" />
-                  <Button.Symbol symbol="trash" variant="solid red" />
+                  <Button.Symbol label="Label" symbol="trash" />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="solid primary"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="solid fill"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="solid blue"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="solid green"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="solid red"
+                  />
                 </Box>
               </Stack>
               <Stack gap="16px">
@@ -506,11 +526,31 @@ function DesignSystem() {
                   Stroked
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol symbol="trash" variant="stroked fill" />
-                  <Button.Symbol symbol="trash" variant="stroked invert" />
-                  <Button.Symbol symbol="trash" variant="stroked blue" />
-                  <Button.Symbol symbol="trash" variant="stroked green" />
-                  <Button.Symbol symbol="trash" variant="stroked red" />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="stroked fill"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="stroked invert"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="stroked blue"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="stroked green"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="stroked red"
+                  />
                 </Box>
               </Stack>
               <Stack gap="16px">
@@ -518,9 +558,21 @@ function DesignSystem() {
                   Tint
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol symbol="trash" variant="tint blue" />
-                  <Button.Symbol symbol="trash" variant="tint green" />
-                  <Button.Symbol symbol="trash" variant="tint red" />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="tint blue"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="tint green"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="tint red"
+                  />
                 </Box>
               </Stack>
               <Stack gap="16px">
@@ -528,10 +580,26 @@ function DesignSystem() {
                   Ghost
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol symbol="trash" variant="ghost primary" />
-                  <Button.Symbol symbol="trash" variant="ghost blue" />
-                  <Button.Symbol symbol="trash" variant="ghost green" />
-                  <Button.Symbol symbol="trash" variant="ghost red" />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="ghost primary"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="ghost blue"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="ghost green"
+                  />
+                  <Button.Symbol
+                    label="Label"
+                    symbol="trash"
+                    variant="ghost red"
+                  />
                 </Box>
               </Stack>
               <Stack gap="16px">
@@ -539,90 +607,105 @@ function DesignSystem() {
                   Height
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol height="44px" symbol="trash" />
+                  <Button.Symbol label="Label" height="44px" symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     height="44px"
                     symbol="trash"
                     variant="stroked invert"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="44px"
                     symbol="trash"
                     variant="tint green"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="44px"
                     symbol="trash"
                     variant="ghost red"
                   />
                 </Box>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol height="36px" symbol="trash" />
+                  <Button.Symbol label="Label" height="36px" symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     height="36px"
                     symbol="trash"
                     variant="stroked invert"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="36px"
                     symbol="trash"
                     variant="tint green"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="36px"
                     symbol="trash"
                     variant="ghost red"
                   />
                 </Box>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol height="24px" symbol="trash" />
+                  <Button.Symbol label="Label" height="24px" symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     height="24px"
                     symbol="trash"
                     variant="stroked invert"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="24px"
                     symbol="trash"
                     variant="tint green"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="24px"
                     symbol="trash"
                     variant="ghost red"
                   />
                 </Box>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol height="20px" symbol="trash" />
+                  <Button.Symbol label="Label" height="20px" symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     height="20px"
                     symbol="trash"
                     variant="stroked invert"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="20px"
                     symbol="trash"
                     variant="tint green"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="20px"
                     symbol="trash"
                     variant="ghost red"
                   />
                 </Box>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol height="18px" symbol="trash" />
+                  <Button.Symbol label="Label" height="18px" symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     height="18px"
                     symbol="trash"
                     variant="stroked invert"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="18px"
                     symbol="trash"
                     variant="tint green"
                   />
                   <Button.Symbol
+                    label="Label"
                     height="18px"
                     symbol="trash"
                     variant="ghost red"
@@ -634,14 +717,21 @@ function DesignSystem() {
                   Disabled
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol disabled symbol="trash" />
+                  <Button.Symbol label="Label" disabled symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     disabled
                     symbol="trash"
                     variant="stroked invert"
                   />
-                  <Button.Symbol disabled symbol="trash" variant="tint green" />
                   <Button.Symbol
+                    label="Label"
+                    disabled
+                    symbol="trash"
+                    variant="tint green"
+                  />
+                  <Button.Symbol
+                    label="Label"
                     disabled
                     symbol="trash"
                     variant="ghost primary"
@@ -786,14 +876,21 @@ function DesignSystem() {
                   Disabled
                 </Text>
                 <Box display="flex" gap="8px">
-                  <Button.Symbol disabled symbol="trash" />
+                  <Button.Symbol label="Label" disabled symbol="trash" />
                   <Button.Symbol
+                    label="Label"
                     disabled
                     symbol="trash"
                     variant="stroked invert"
                   />
-                  <Button.Symbol disabled symbol="trash" variant="tint green" />
                   <Button.Symbol
+                    label="Label"
+                    disabled
+                    symbol="trash"
+                    variant="tint green"
+                  />
+                  <Button.Symbol
+                    label="Label"
                     disabled
                     symbol="trash"
                     variant="ghost primary"
diff --git a/src/design-system/components/ButtonSymbol.tsx b/src/design-system/components/ButtonSymbol.tsx
index cf01aea..df6327c 100644
--- a/src/design-system/components/ButtonSymbol.tsx
+++ b/src/design-system/components/ButtonSymbol.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 
 import type { UnionOmit } from '~/utils/types'
 
+import { Tooltip } from '../../components'
 import type { SymbolName } from '../tokens'
 import { ButtonRoot, type ButtonRootProps } from './Button'
 import { type ButtonHeight, type ButtonVariant } from './Button.css'
@@ -10,6 +11,7 @@ import { SFSymbol } from './SFSymbol'
 import type { SFSymbolProps } from './SFSymbol'
 
 type ButtonSymbolProps = UnionOmit<ButtonRootProps, 'children'> & {
+  label: string
   symbol: SymbolName
   symbolProps?: Partial<SFSymbolProps>
 }
@@ -66,22 +68,28 @@ export const symbolStylesForVariant = {
 } satisfies Record<ButtonVariant, { color?: SFSymbolProps['color'] }>
 
 export const ButtonSymbol = forwardRef<HTMLDivElement, ButtonSymbolProps>(
-  ({ symbol, symbolProps, width, ...rootProps }: ButtonSymbolProps, ref) => {
+  (
+    { label, symbol, symbolProps, width, ...rootProps }: ButtonSymbolProps,
+    ref,
+  ) => {
     const { height = '36px', variant = 'solid invert' } = rootProps
     return (
-      <ButtonRoot
-        ref={ref}
-        {...rootProps}
-        className={[!width && widthForHeight[height], rootProps.className]}
-        width={width}
-      >
-        <SFSymbol
-          symbol={symbol}
-          {...symbolStylesForHeight[height]}
-          {...symbolStylesForVariant[variant]}
-          {...symbolProps}
-        />
-      </ButtonRoot>
+      <Tooltip label={label}>
+        <ButtonRoot
+          ref={ref}
+          aria-label={label}
+          {...rootProps}
+          className={[!width && widthForHeight[height], rootProps.className]}
+          width={width}
+        >
+          <SFSymbol
+            symbol={symbol}
+            {...symbolStylesForHeight[height]}
+            {...symbolStylesForVariant[variant]}
+            {...symbolProps}
+          />
+        </ButtonRoot>
+      </Tooltip>
     )
   },
 )
diff --git a/src/screens/account-details.tsx b/src/screens/account-details.tsx
index 4560ad7..6eb55b5 100644
--- a/src/screens/account-details.tsx
+++ b/src/screens/account-details.tsx
@@ -46,6 +46,7 @@ export default function AccountDetails() {
         <Inset horizontal="4px">
           <Inline gap="4px">
             <Button.Symbol
+              label="Back"
               onClick={() => navigate(-1)}
               symbol="chevron.left"
               height="24px"
@@ -253,6 +254,7 @@ function TokenRow({
             </Column>
             <Column width="content">
               <Button.Symbol
+                label="Delete"
                 symbol="trash"
                 height="24px"
                 variant="ghost red"
diff --git a/src/screens/index.tsx b/src/screens/index.tsx
index 4471d74..9041be9 100644
--- a/src/screens/index.tsx
+++ b/src/screens/index.tsx
@@ -198,6 +198,7 @@ function AccountRow({ account }: { account: Account }) {
           <Inline gap="4px" wrap={false}>
             {account.impersonate && (
               <Button.Symbol
+                label="Remove"
                 symbol="trash"
                 height="24px"
                 variant="stroked red"
@@ -209,6 +210,7 @@ function AccountRow({ account }: { account: Account }) {
             )}
             {!active && (
               <Button.Symbol
+                label="Switch Account"
                 height="24px"
                 onClick={() => setAccount({ account, setActive: true })}
                 symbol="arrow.left.arrow.right"
@@ -218,6 +220,7 @@ function AccountRow({ account }: { account: Account }) {
             <Link to={`account/${account.address}`}>
               <Box style={{ width: active ? '52px' : '24px' }}>
                 <Button.Symbol
+                  label="Account Details"
                   height="24px"
                   width="full"
                   onClick={() => {}}
diff --git a/src/screens/networks.tsx b/src/screens/networks.tsx
index 732d66b..b81152b 100644
--- a/src/screens/networks.tsx
+++ b/src/screens/networks.tsx
@@ -187,6 +187,7 @@ function NetworkRow({
             <Inline gap="4px">
               {showRemove && (
                 <Button.Symbol
+                  label="Remove"
                   onClick={() => removeNetwork(network.rpcUrl)}
                   height="20px"
                   symbol="trash"
@@ -194,6 +195,7 @@ function NetworkRow({
                 />
               )}
               <Button.Symbol
+                label="Edit"
                 onClick={() =>
                   navigate(`/networks/${encodeURIComponent(network.rpcUrl)}`)
                 }
@@ -202,6 +204,7 @@ function NetworkRow({
                 variant="stroked fill"
               />
               <Button.Symbol
+                label="Switch Network"
                 disabled={active || !data}
                 onClick={() => switchNetwork(network.rpcUrl)}
                 height="20px"
diff --git a/src/screens/session.tsx b/src/screens/session.tsx
index 9b41b68..2db6218 100644
--- a/src/screens/session.tsx
+++ b/src/screens/session.tsx
@@ -91,6 +91,7 @@ export default function Session() {
                       </Text>
                     </LabelledContent>
                     <Button.Symbol
+                      label="Remove"
                       height="24px"
                       symbol="trash"
                       onClick={() => {