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.

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

Add AlphaIconButton component #2200

Merged
merged 8 commits into from
May 13, 2024
Merged
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/pink-paws-eat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@channel.io/bezier-react": patch
---

Add `AlphaIconButton` component.
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { PlusIcon } from '@channel.io/bezier-icons'
import { type Meta, type StoryObj } from '@storybook/react'

import {
AlphaIconButton,
type AlphaIconButtonProps,
} from '~/src/components/AlphaIconButton'

const meta: Meta<typeof AlphaIconButton> = {
component: AlphaIconButton,
argTypes: {
onClick: { action: 'onClick' },
},
}
export default meta

export const Playground: StoryObj<AlphaIconButtonProps> = {
args: {
disabled: false,
active: false,
loading: false,
icon: PlusIcon,
shape: 'rectangle',
'aria-label': 'invite',
size: 'm',
variant: 'primary',
color: 'blue',
},
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
@use '../../styles/mixins/dimension';

$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

.IconButton {
position: relative;
box-sizing: border-box;
transition: background-color var(--transition-s);

/* dimension */
&:where(.size-xs) {
@include dimension.square(20px);

padding: 4px;
}

&:where(.size-s) {
@include dimension.square(24px);

padding: 4px;
}

&:where(.size-m) {
@include dimension.square(36px);

padding: 8px;
}

&:where(.size-l) {
@include dimension.square(44px);

padding: 12px;
}

&:where(.size-xl) {
@include dimension.square(54px);

padding: 15px;
}

/* background-color */
&:where(.variant-primary) {
$background-color-by-color: (
blue: var(--alpha-color-primary-bg-normal),
cobalt: var(--alpha-color-accent-bg-normal),
red: var(--alpha-color-critical-bg-normal),
orange: var(--alpha-color-warning-bg-normal),
green: var(--alpha-color-success-bg-normal),
pink: var(--alpha-color-bg-pink-normal),
purple: var(--alpha-color-bg-purple-normal),
dark-grey: var(--alpha-color-bg-grey-darkest),
light-grey: var(--alpha-color-bg-black-dark),
);

@each $color, $background-color in $background-color-by-color {
&:where(.color-#{$color}) {
background-color: $background-color;
}
}
}

&:where(.variant-secondary) {
$background-color-by-color: (
blue: var(--alpha-color-primary-bg-lightest),
cobalt: var(--alpha-color-accent-bg-lightest),
red: var(--alpha-color-critical-bg-lightest),
orange: var(--alpha-color-warning-bg-lightest),
green: var(--alpha-color-success-bg-lightest),
pink: var(--alpha-color-bg-pink-lightest),
purple: var(--alpha-color-bg-purple-lightest),
dark-grey: var(--alpha-color-bg-black-lighter),
light-grey: var(--alpha-color-bg-black-lighter),
);

@each $color, $background-color in $background-color-by-color {
&:where(.color-#{$color}) {
background-color: $background-color;
}
}
}

&:where(.variant-tertiary) {
background-color: initial;
}

/* color */
/* stylelint-disable-next-line no-duplicate-selectors */
&:where(.variant-primary) {
color: var(--alpha-color-fg-absolute-white-dark);

&:where(.color-dark-grey) {
color: var(--alpha-color-fg-white-normal);
}

&:where(.color-light-grey) {
color: var(--alpha-color-fg-absolute-white-normal);
}
}

&:where(.variant-secondary, .variant-tertiary) {
$color-map: (
blue: var(--alpha-color-primary-fg-normal),
cobalt: var(--alpha-color-accent-fg-normal),
red: var(--alpha-color-critical-fg-normal),
orange: var(--alpha-color-warning-fg-normal),
green: var(--alpha-color-success-fg-normal),
pink: var(--alpha-color-fg-pink-normal),
purple: var(--alpha-color-fg-purple-normal),
dark-grey: var(--alpha-color-fg-black-darkest),
light-grey: var(--alpha-color-fg-black-darker),
);

@each $button-color, $color in $color-map {
&:where(.color-#{$button-color}) {
color: $color;
}
}

&:where(.color-dark-grey) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-black-darker);
}
}

&:where(.color-light-grey) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-black-dark);
}
}
}

&:where(.variant-tertiary.color-white) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-absolute-white-normal);
}
}

/* border-radius */
&:where(.shape-rectangle) {
$border-radius-by-size: (
xs: var(--alpha-dimension-6),
s: var(--alpha-dimension-7),
m: var(--alpha-dimension-10),
l: var(--alpha-dimension-12),
xl: var(--alpha-dimension-14),
);

@each $size, $border-radius in $border-radius-by-size {
&:where(.size-#{$size}) {
border-radius: $border-radius;
}
}
}

&:where(.shape-circle) {
border-radius: 9999px;
}

/* TODO: use v2 token when design is specified */

/* visual effect on interaction */
&:where(.active, :hover):where(:not(:disabled)) {
&:where(.variant-primary) {
@each $color in $chromatic-colors {
&:where(.color-#{$color}) {
background-color: var(--bgtxt-#{$color}-dark);
}
}

&:where(.color-dark-grey) {
background-color: var(--bg-grey-darkest);
}

&:where(.color-light-grey) {
background-color: var(--bg-black-darker);
}
}

&:where(.variant-secondary) {
@each $color in $chromatic-colors {
&:where(.color-#{$color}) {
background-color: var(--bgtxt-#{$color}-lighter);
}
}

&:where(.color-dark-grey, .color-light-grey) {
background-color: var(--bg-black-light);
}
}

&:where(.variant-tertiary) {
@each $color in $chromatic-colors {
&:where(.color-#{$color}) {
background-color: var(--bgtxt-#{$color}-lightest);
}
}

&:where(.color-dark-grey, .color-light-grey, .color-white) {
background-color: var(--bg-black-lighter);
}
}

&:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {
& :is(.ButtonIcon, .ButtonLoader) {
color: var(--txt-black-darkest);
}
}

&:where(.color-light-grey):where(.variant-secondary, .variant-tertiary) {
& :is(.ButtonIcon, .ButtonLoader) {
color: var(--txt-black-darker);
}
}

&:where(.color-white.variant-tertiary) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-absolute-white-normal);
}
}
}

&:where(.variant-primary.color-blue:focus-visible) {
outline: 3px solid var(--bgtxt-blue-light);
}

&:disabled {
cursor: not-allowed;
opacity: var(--alpha-opacity-disabled);
}

/* internal components */
.ButtonContent {
display: flex;
align-items: center;
justify-content: center;

&:where(.loading) {
visibility: hidden;
}
}

.ButtonLoader {
position: absolute;
inset: 0;

display: flex;
align-items: center;
justify-content: center;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React, { forwardRef } from 'react'

import classNames from 'classnames'

import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
import { BaseButton } from '~/src/components/BaseButton'
import { type ButtonSize } from '~/src/components/Button'
import { Icon } from '~/src/components/Icon'
import { Spinner } from '~/src/components/Spinner'

import styles from './IconButton.module.scss'

function getIconSize(size: ButtonSize) {
return (

Check warning on line 14 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L13-L14

Added lines #L13 - L14 were not covered by tests
{
xs: 'xxs',
s: 'xs',
m: 's',
l: 's',
xl: 'm',
} as const
)[size]
}

function getSpinnerSize(size: ButtonSize) {
return (

Check warning on line 26 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L25-L26

Added lines #L25 - L26 were not covered by tests
{
xs: 'xs',
s: 'xs',
m: 's',
l: 's',
xl: 's',
} as const
)[size]
}

export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(

Check warning on line 37 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L37

Added line #L37 was not covered by tests
function IconButton(
{
as = BaseButton,
color = 'blue',
variant = 'primary',
size = 'm',
disabled,
active,
shape = 'rectangle',
icon,
loading,
className,
...rest
},
forwardedRef

Check warning on line 52 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L52

Added line #L52 was not covered by tests
) {
const Comp = as as typeof BaseButton

Check warning on line 54 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L54

Added line #L54 was not covered by tests

return (
<Comp
ref={forwardedRef}
className={classNames(
styles.IconButton,
styles[`size-${size}`],
styles[`variant-${variant}`],
styles[`color-${color}`],
styles[`shape-${shape}`],
active && styles.active,
className
)}
{...rest}
>
<div
className={classNames(
styles.ButtonContent,
loading && styles.loading
)}
>
{icon && (
<Icon

Check warning on line 77 in packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

Codecov / codecov/patch

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx#L77

Added line #L77 was not covered by tests
size={getIconSize(size)}
source={icon}
className={styles.ButtonIcon}
/>
)}
</div>

{/* TODO: use AlphaSpinner */}
{loading && (
<div className={styles.ButtonLoader}>
<Spinner size={getSpinnerSize(size)} />
</div>
)}
</Comp>
)
}
)
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { type BezierIcon } from '@channel.io/bezier-icons'

import {
type BezierComponentProps,
type DisableProps,
type PolymorphicProps,
type SizeProps,
} from '~/src/types/props'

type IconButtonVariant = 'primary' | 'secondary' | 'tertiary'

type IconButtonColor =
| 'blue'
| 'cobalt'
| 'red'
| 'orange'
| 'green'
| 'pink'
| 'purple'
| 'dark-grey'
| 'light-grey'
| 'white'

type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'

interface IconButtonOwnProps {
/**
* If `loading` is true, spinner will be shown, replacing the content.
* @default false
*/
loading?: boolean

/**
* If `active` is true, the button will be styled as if it is hovered.
* You may want to use this prop for a button which opens dropdown, etc.
* @default false
*/
active?: boolean

/**
* Types of visual styles for button.
* @default 'primary'
*/
variant?: IconButtonVariant

/**
* Color of the button.
* @default 'blue'
*/
color?: IconButtonColor

/**
* Icon in the button.
*/
icon?: BezierIcon

/**
* Shape of the button.
* @default 'rectangle'
*/
shape?: 'rectangle' | 'circle'
}

export interface ButtonProps
extends Omit<BezierComponentProps<'button'>, 'color'>,
PolymorphicProps,
SizeProps<IconButtonSize>,
DisableProps,
IconButtonOwnProps {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { IconButton as AlphaIconButton } from './IconButton'
export type { ButtonProps as AlphaIconButtonProps } from './IconButton.types'
1 change: 1 addition & 0 deletions packages/bezier-react/src/index.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ export * from '~/src/components/AlphaAvatarGroup'
export * from '~/src/components/AlphaButton'
export * from '~/src/components/AlphaDialogPrimitive'
export * from '~/src/components/AlphaFloatingButton'
export * from '~/src/components/AlphaIconButton'
export * from '~/src/components/AlphaTooltipPrimitive'
export * from '~/src/components/AppProvider'
export * from '~/src/components/AutoFocus'

Unchanged files with check annotations Beta

try {
ref.current = value
} catch (error) {

Check warning on line 22 in packages/bezier-react/src/hooks/useMergeRefs.ts

GitHub Actions / CI

'error' is defined but never used
throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)
}
}