From 957752cac4647c929712e506fc1237d50e4b39fb Mon Sep 17 00:00:00 2001 From: "Yang Wooseong (Andrew)" Date: Wed, 4 Dec 2024 15:43:03 +0900 Subject: [PATCH] Fix icon size of xs `AlphaButton` (#2532) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue - None ## Summary - xs 버튼의 아이콘 사이즈를 xxs에서 xs로 조절합니다. IconButton 에서는 패딩도 같이 조절합니다. ## Details - 없음 ### Breaking change? (Yes/No) - No ## References --- .changeset/few-jokes-worry.md | 5 +++++ packages/bezier-react/src/components/AlphaButton/Button.tsx | 2 +- .../src/components/AlphaFloatingButton/FloatingButton.tsx | 2 +- .../AlphaFloatingIconButton/FloatingIconButton.module.scss | 2 +- .../AlphaFloatingIconButton/FloatingIconButton.tsx | 2 +- .../src/components/AlphaIconButton/IconButton.module.scss | 2 +- .../src/components/AlphaIconButton/IconButton.tsx | 2 +- 7 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/few-jokes-worry.md diff --git a/.changeset/few-jokes-worry.md b/.changeset/few-jokes-worry.md new file mode 100644 index 000000000..67b02d760 --- /dev/null +++ b/.changeset/few-jokes-worry.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-react': patch +--- + +Decreate icon size of `AlphaButton`, `AlphaIconbutton`, `AlphaFloatingButton`, and `AlphaFloatingIconButton`. diff --git a/packages/bezier-react/src/components/AlphaButton/Button.tsx b/packages/bezier-react/src/components/AlphaButton/Button.tsx index 69d6051a5..0e7c7b434 100644 --- a/packages/bezier-react/src/components/AlphaButton/Button.tsx +++ b/packages/bezier-react/src/components/AlphaButton/Button.tsx @@ -37,7 +37,7 @@ function SideContent({ function getIconSize(size: ButtonSize) { return ( { - xs: 'xxs', + xs: 'xs', s: 'xs', m: 's', l: 's', diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx index 3f1fd06f0..d55905572 100644 --- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx +++ b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx @@ -37,7 +37,7 @@ function SideContent({ function getIconSize(size: FloatingButtonSize) { return ( { - xs: 'xxs', + xs: 'xs', s: 'xs', m: 's', l: 's', diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss index 11d8cfe60..96b83953a 100644 --- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss @@ -52,7 +52,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.size-xs) { @include dimension.square(20px); - padding: 4px; + padding: 2px; } &:where(.size-s) { diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx index 8155175f2..363e1469d 100644 --- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx +++ b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx @@ -16,7 +16,7 @@ import styles from './FloatingIconButton.module.scss' function getIconSize(size: ButtonSize) { return ( { - xs: 'xxs', + xs: 'xs', s: 'xs', m: 's', l: 's', diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss index 62680641c..43932c2c6 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss @@ -13,7 +13,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.size-xs) { @include dimension.square(20px); - padding: 4px; + padding: 2px; } &:where(.size-s) { diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx index 101329dc5..110bb772e 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx @@ -16,7 +16,7 @@ import styles from './IconButton.module.scss' function getIconSize(size: ButtonSize) { return ( { - xs: 'xxs', + xs: 'xs', s: 'xs', m: 's', l: 's',