Skip to content

Commit

Permalink
feat: Button.Symbol labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jxom
jxom committed Oct 3, 2023
1 parent 29eff9e commit 8729a28
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 41 deletions.
1 change: 1 addition & 0 deletions src/components/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export function Container({
)}
{dismissable && (
<Button.Symbol
label="Close"
height="24px"
onClick={() => navigate(-1)}
symbol="xmark"
Expand Down
2 changes: 2 additions & 0 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ function Network() {
</Column>
<Column width="content">
<Button.Symbol
label="Network Settings"
onClick={(e) => {
e.preventDefault()
navigate(`/networks/${encodeURIComponent(network.rpcUrl)}`, {
Expand Down Expand Up @@ -443,6 +444,7 @@ function MineButton() {
style={{ marginTop: '8px' }}
>
<Button.Symbol
label="Mine Block"
height="20px"
onClick={(e) => {
e.preventDefault()
Expand Down
151 changes: 124 additions & 27 deletions src/design-system/_playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,136 +493,219 @@ 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">
<Text weight="medium" size="18px">
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">
<Text weight="medium" size="18px">
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">
<Text weight="medium" size="18px">
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">
<Text weight="medium" size="18px">
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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
36 changes: 22 additions & 14 deletions src/design-system/components/ButtonSymbol.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
}
Expand Down Expand Up @@ -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>
)
},
)
2 changes: 2 additions & 0 deletions src/screens/account-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -253,6 +254,7 @@ function TokenRow({
</Column>
<Column width="content">
<Button.Symbol
label="Delete"
symbol="trash"
height="24px"
variant="ghost red"
Expand Down
Loading

0 comments on commit 8729a28

Please sign in to comment.