Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tech: Add IconButton component #4706

Merged
merged 3 commits into from
Sep 19, 2024
Merged

tech: Add IconButton component #4706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d51f67f
Add IconButton component
Youakeem Sep 13, 2024
4b963d0
Update IconButton implementation
Youakeem Sep 17, 2024
96e7c59
Move IconButton specific styles to a classname
Youakeem Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/ui/src/components/Button/Button.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,18 @@ const SIZE_STYLES = {
textAlign: 'center',
borderRadius: tokens.radius.md,
},
icon: {
borderRadius: tokens.radius.xxs,
padding: tokens.space.xxxs,
},
} as const

export const buttonSizeStyles = {
base: {
small: style(SIZE_STYLES.small),
medium: style(SIZE_STYLES.medium),
large: style(SIZE_STYLES.large),
icon: style(SIZE_STYLES.icon),
},
lg: {
small: style({
Expand All @@ -221,9 +226,16 @@ export const buttonSizeStyles = {
[minWidth.lg]: SIZE_STYLES.large,
},
}),
icon: style({
'@media': {
[minWidth.lg]: SIZE_STYLES.icon,
},
}),
},
}

export const iconButtonStyles = style({ aspectRatio: '1', height: 'auto' })

export const childrenWrapper = style({
display: 'flex',
alignItems: 'center',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Button/Button.helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { buttonSizeStyles } from './Button.css'

type ButtonSizeVariant = 'small' | 'medium' | 'large'
type ButtonSizeVariant = 'small' | 'medium' | 'large' | 'icon'
type ButtonLevels = 'base' | 'lg'

export type ButtonSize = ButtonSizeVariant | Record<ButtonLevels, ButtonSizeVariant>
Expand Down
14 changes: 12 additions & 2 deletions packages/ui/src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import type { Meta, StoryFn } from '@storybook/react'
import { CheckIcon, yStack } from 'ui'
import { type ComponentProps } from 'react'
import { CheckIcon, CrossIcon, yStack } from 'ui'
import { Button } from './Button'
import { IconButton } from './IconButton'

type Controls = typeof Button
type Controls = ComponentProps<typeof Button>

const meta: Meta<Controls> = {
title: 'Button',
Expand Down Expand Up @@ -109,3 +111,11 @@ export const WithIcon = {
Icon: <CheckIcon size="18px" />,
},
}

export const IconButtonDefault = {
render: (args: Controls) => <IconButton variant={args.variant}>{args.Icon}</IconButton>,
args: {
Icon: <CrossIcon size="18px" />,
variant: 'primary',
},
}
21 changes: 21 additions & 0 deletions packages/ui/src/components/Button/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import clsx from 'clsx'
import { type ComponentProps, forwardRef } from 'react'
import { Button } from './Button'
import { iconButtonStyles } from './Button.css'

type ButtonProps = ComponentProps<typeof Button<'button'>>

export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just trying to think of the different use cases for this and if we need a wrapper for the Button with Icon. This seem like a specific case where we specify size and variant. Some Iconbuttons have variant secondary, like the button for mobile menu and are larger. For the mobile menu button we use it like this, but override to follow the mobile header size.

<Button
    className={buttonTrigger}
    variant="secondary"
    size="medium"
    aria-label={t('NAV_MENU_DIALOG_OPEN')}
    Icon={<HamburgerOpenIcon />}
  />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a little tricky with IconButton. In some cases we want a clickable icon with no or small padding. Currently the Button component adds inline padding (left and right) in combination with aspect ratio that makes icons even with the smallest padding too big.

Screenshot 2024-09-18 at 16.46.39.png

Screenshot 2024-09-16 at 12.05.12.png

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the icon size which adds small radius and padding and IconButton can take any variant, it doesn't have to be a ghost.

({ className, children, ...props }, forwardedRef) => (
<Button
className={clsx(iconButtonStyles, className)}
variant="ghost"
size="icon"
Icon={children}
{...props}
ref={forwardedRef}
/>
),
)

IconButton.displayName = 'IconButton'
2 changes: 2 additions & 0 deletions packages/ui/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ export { HedvigLogo } from './components/HedvigLogo/HedvigLogo'
export { HedvigSymbol } from './components/HedvigSymbol/HedvigSymbol'
export { Space } from './components/Space'
export { Button, type ButtonProps } from './components/Button/Button'
export { IconButton } from './components/Button/IconButton'

export { InputBase } from './components/InputBase'
export type { InputBaseProps } from './components/InputBase'
export { Heading } from './components/Heading/Heading'
Expand Down