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

Use AlphaSpinner in AlphaButton component set #2252

Merged
merged 12 commits into from
Jun 3, 2024
Merged

Use AlphaSpinner in AlphaButton component set #2252

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
509c22d
refactor(icon): move icon size map into scss
yangwooseong May 30, 2024
6729da4
feat(spinner): minor changes in spinner
yangwooseong May 30, 2024
29e9444
feat(button): change spinner size to icon size
yangwooseong May 30, 2024
f6b0af1
feat(button): change spinner size to icon size in extra buttons
yangwooseong May 30, 2024
39b3283
chore(changeset): add
yangwooseong May 30, 2024
87c52cc
chore(button): add where selector, reorder classname props
yangwooseong May 30, 2024
0f02afb
chore(icon): update snapshot
yangwooseong May 30, 2024
f790ef6
style(button): resolve lint error
yangwooseong May 30, 2024
809fb8f
feat(spinner): reflect design spec for stroke-width
yangwooseong May 30, 2024
311a11d
feat(spinner): use css variable for stroke-width, spinner-size, strok…
yangwooseong May 31, 2024
1499e14
feat(spinner): rm default spinner size in button
yangwooseong May 31, 2024
3bf61ef
feat(spinner): resize spinner radius to be smooth
yangwooseong May 31, 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
8 changes: 8 additions & 0 deletions .changeset/fluffy-donuts-matter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@channel.io/bezier-react': patch
---

Changes in `Button` component set

- use `AlphaSpinner` instead of `Spinner` component for loading state.
- set size of `AlphaSpinner` to be `Icon` size.
6 changes: 3 additions & 3 deletions ...ages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,13 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
>
<svg
class="Icon margin"
class="Icon size-xs margin"
data-testid="bezier-icon"
fill="none"
height="16"
height="1em"
style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
viewBox="0 0 24 24"
width="16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
Expand Down
14 changes: 13 additions & 1 deletion packages/bezier-react/src/components/AlphaButton/Button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@use '../../styles/mixins/dimension';

@import '../Icon/Icon.module';

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

.Button {
Expand Down Expand Up @@ -258,12 +262,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
}
}

.ButtonLoader {
& :where(.ButtonLoader) {
position: absolute;
inset: 0;

display: flex;
align-items: center;
justify-content: center;

@each $size, $value in $size-map {
&:where(.size-#{$size}) {
& :is(.Spinner) {
@include dimension.square(#{$value}px);
}
}
}
}
}
27 changes: 11 additions & 16 deletions packages/bezier-react/src/components/AlphaButton/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
type ButtonProps,
type ButtonSize,
} from '~/src/components/AlphaButton/Button.types'
import { AlphaSpinner } from '~/src/components/AlphaSpinner'
import { BaseButton } from '~/src/components/BaseButton'
import { Icon, type IconSize } from '~/src/components/Icon'
import { Spinner } from '~/src/components/Spinner'
import { Text } from '~/src/components/Text'

import styles from './Button.module.scss'
Expand Down Expand Up @@ -44,18 +44,6 @@ function getIconSize(size: ButtonSize) {
)[size]
}

function getSpinnerSize(size: ButtonSize) {
return (
{
xs: 'xs',
s: 'xs',
m: 's',
l: 's',
xl: 's',
} as const
)[size]
}

function getTypography(size: ButtonSize) {
return (
{
Expand Down Expand Up @@ -126,10 +114,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
/>
</div>

{/* TODO: use AlphaSpinner */}
{loading && (
<div className={styles.ButtonLoader}>
<Spinner size={getSpinnerSize(size)} />
<div
className={classNames(
styles.ButtonLoader,
styles[`size-${getIconSize(size)}`]
)}
>
<AlphaSpinner
className={styles.Spinner}
variant="on-overlay"
/>
</div>
)}
</Comp>
Expand Down
16 changes: 14 additions & 2 deletions packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@use '../../styles/mixins/dimension';

@import '../Icon/Icon.module';

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

.FloatingButton {
Expand Down Expand Up @@ -183,7 +187,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
}

/* internal components */
.ButtonContent {
& :where(.ButtonContent) {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -193,12 +197,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
}
}

.ButtonLoader {
& :where(.ButtonLoader) {
position: absolute;
inset: 0;

display: flex;
align-items: center;
justify-content: center;

@each $size, $value in $size-map {
&:where(.size-#{$size}) {
& :is(.Spinner) {
@include dimension.square(#{$value}px);
}
}
}
}
}
27 changes: 11 additions & 16 deletions packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
type FloatingButtonProps,
type FloatingButtonSize,
} from '~/src/components/AlphaFloatingButton/FloatingButton.types'
import { AlphaSpinner } from '~/src/components/AlphaSpinner'
import { BaseButton } from '~/src/components/BaseButton'
import { Icon, type IconSize } from '~/src/components/Icon'
import { Spinner } from '~/src/components/Spinner'
import { Text } from '~/src/components/Text'

import styles from './FloatingButton.module.scss'
Expand Down Expand Up @@ -44,18 +44,6 @@ function getIconSize(size: FloatingButtonSize) {
)[size]
}

function getSpinnerSize(size: FloatingButtonSize) {
return (
{
xs: 'xs',
s: 'xs',
m: 's',
l: 's',
xl: 's',
} as const
)[size]
}

function getTypography(size: FloatingButtonSize) {
return (
{
Expand Down Expand Up @@ -125,10 +113,17 @@ export const FloatingButton = forwardRef<
/>
</div>

{/* TODO: use AlphaSpinner */}
{loading && (
<div className={styles.ButtonLoader}>
<Spinner size={getSpinnerSize(size)} />
<div
className={classNames(
styles.ButtonLoader,
styles[`size-${getIconSize(size)}`]
)}
>
<AlphaSpinner
className={styles.Spinner}
variant="on-overlay"
/>
</div>
)}
</Comp>
Expand Down
10 changes: 10 additions & 0 deletions packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use '../../styles/mixins/dimension';

@import '../Icon/Icon.module';

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

.FloatingIconButton {
Expand Down Expand Up @@ -171,5 +173,13 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
display: flex;
align-items: center;
justify-content: center;

@each $size, $value in $size-map {
&:where(.size-#{$size}) {
& :is(.Spinner) {
@include dimension.square(#{$value}px);
}
}
}
}
}
27 changes: 11 additions & 16 deletions packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
import classNames from 'classnames'

import { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'
import { AlphaSpinner } from '~/src/components/AlphaSpinner'
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 './FloatingIconButton.module.scss'

Expand All @@ -23,18 +23,6 @@ function getIconSize(size: ButtonSize) {
)[size]
}

function getSpinnerSize(size: ButtonSize) {
return (
{
xs: 'xs',
s: 'xs',
m: 's',
l: 's',
xl: 's',
} as const
)[size]
}

export const FloatingIconButton = forwardRef<
HTMLButtonElement,
AlphaFloatingIconButtonProps
Expand Down Expand Up @@ -80,10 +68,17 @@ export const FloatingIconButton = forwardRef<
)}
</div>

{/* TODO: use AlphaSpinner */}
{loading && (
<div className={styles.ButtonLoader}>
<Spinner size={getSpinnerSize(size)} />
<div
className={classNames(
styles.ButtonLoader,
styles[`size-${getIconSize(size)}`]
)}
>
<AlphaSpinner
className={styles.Spinner}
variant="on-overlay"
/>
</div>
)}
</Comp>
Expand Down
14 changes: 12 additions & 2 deletions packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use '../../styles/mixins/dimension';

@import '../Icon/Icon.module';

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

.IconButton {
Expand Down Expand Up @@ -231,7 +233,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
}

/* internal components */
.ButtonContent {
& :where(.ButtonContent) {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -241,12 +243,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
}
}

.ButtonLoader {
& :where(.ButtonLoader) {
position: absolute;
inset: 0;

display: flex;
align-items: center;
justify-content: center;

@each $size, $value in $size-map {
&:where(.size-#{$size}) {
& :is(.Spinner) {
@include dimension.square(#{$value}px);
}
}
}
}
}
27 changes: 11 additions & 16 deletions packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
import classNames from 'classnames'

import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
import { AlphaSpinner } from '~/src/components/AlphaSpinner'
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'

Expand All @@ -23,18 +23,6 @@ function getIconSize(size: ButtonSize) {
)[size]
}

function getSpinnerSize(size: ButtonSize) {
return (
{
xs: 'xs',
s: 'xs',
m: 's',
l: 's',
xl: 's',
} as const
)[size]
}

export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
function IconButton(
{
Expand Down Expand Up @@ -84,10 +72,17 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
)}
</div>

{/* TODO: use AlphaSpinner */}
{loading && (
<div className={styles.ButtonLoader}>
<Spinner size={getSpinnerSize(size)} />
<div
className={classNames(
styles.ButtonLoader,
styles[`size-${getIconSize(size)}`]
)}
>
<AlphaSpinner
className={styles.Spinner}
variant="on-overlay"
/>
</div>
)}
</Comp>
Expand Down
Loading