From 50f4070744709a96f3426c632b65428635473852 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 5 Sep 2024 23:06:30 +0900 Subject: [PATCH 1/5] =?UTF-8?q?docs:=20`BoxButton`=20icon=20prop=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=AC=B8=EC=84=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - leftIcon, rightIcon을 삽입하는 경우를 문서 에 추가 --- src/components/BoxButton/BoxButton.mdx | 13 +++++++++++++ src/components/BoxButton/BoxButton.stories.tsx | 15 +++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/src/components/BoxButton/BoxButton.mdx b/src/components/BoxButton/BoxButton.mdx index 1c44f4a..a93a701 100644 --- a/src/components/BoxButton/BoxButton.mdx +++ b/src/components/BoxButton/BoxButton.mdx @@ -69,6 +69,19 @@ import { BoxButton } from '@yourssu/design-system-react'; +### leftIcon / rightIcon + +`leftIcon` 또는 `rightIcon` prop으로 원하는 아이콘을 삽입합니다.
+아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요. + +```tsx +}> + with leftIcon + +``` + + + ### BoxButton 클릭 시 이벤트 할당 `onClick` 메서드를 이용하여 원하는 이벤트를 할당할 수 있습니다. diff --git a/src/components/BoxButton/BoxButton.stories.tsx b/src/components/BoxButton/BoxButton.stories.tsx index a0278ed..e675686 100644 --- a/src/components/BoxButton/BoxButton.stories.tsx +++ b/src/components/BoxButton/BoxButton.stories.tsx @@ -1,5 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; +import { IcExternalLinkLine } from '@/style'; + import { BoxButton } from './BoxButton'; const meta: Meta = { @@ -101,3 +103,16 @@ export const Click: Story = { }, }, }; + +export const WithIcon: Story = { + render: () => ( +
+ }> + with leftIcon + + }> + with rightIcon + +
+ ), +}; From de72796d6b00b07ff545d5052a0534b7622986ba Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 5 Sep 2024 23:12:18 +0900 Subject: [PATCH 2/5] =?UTF-8?q?docs:=20`TextButton`=20icon=20prop=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=AC=B8=EC=84=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - leftIcon, rightIcon을 삽입하는 경우를 문서에 추가 --- src/components/TextButton/TextButton.mdx | 13 +++++++++++++ src/components/TextButton/TextButton.stories.tsx | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/src/components/TextButton/TextButton.mdx b/src/components/TextButton/TextButton.mdx index b3609b4..cdb9977 100644 --- a/src/components/TextButton/TextButton.mdx +++ b/src/components/TextButton/TextButton.mdx @@ -69,6 +69,19 @@ import { TextButton } from '@yourssu/design-system-react'; +### leftIcon / rightIcon + +`leftIcon` 또는 `rightIcon` prop으로 원하는 아이콘을 삽입합니다.
+아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요. + +```tsx +}> + with leftIcon + +``` + + + ### TextButton 클릭 시 이벤트 할당 `onClick` 메서드를 이용하여 원하는 이벤트를 할당할 수 있습니다. diff --git a/src/components/TextButton/TextButton.stories.tsx b/src/components/TextButton/TextButton.stories.tsx index b7a3ea7..1515925 100644 --- a/src/components/TextButton/TextButton.stories.tsx +++ b/src/components/TextButton/TextButton.stories.tsx @@ -98,3 +98,16 @@ export const Click: Story = { }, }, }; + +export const WithIcon: Story = { + render: () => ( +
+ }> + with leftIcon + + }> + with rightIcon + +
+ ), +}; From bdc4ed66252f00caa469c3119d10d55e6d4c964c Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 19 Sep 2024 18:36:58 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20icon/basic/disabledStrong=20?= =?UTF-8?q?=EC=BB=AC=EB=9F=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../foundation/color/semanticColor/semanticColor.type.ts | 6 +++++- .../foundation/color/semanticColor/semanticColorPalette.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/style/foundation/color/semanticColor/semanticColor.type.ts b/src/style/foundation/color/semanticColor/semanticColor.type.ts index fb81c97..4db500b 100644 --- a/src/style/foundation/color/semanticColor/semanticColor.type.ts +++ b/src/style/foundation/color/semanticColor/semanticColor.type.ts @@ -84,7 +84,11 @@ export type SemanticButtonRadioColor = MergeVariants< SelectableVariantWithDisabled >; -export type SemanticIconBasicColor = MergeVariants<'icon', 'basic', StaticBasicVariant>; +export type SemanticIconBasicColor = MergeVariants< + 'icon', + 'basic', + StaticBasicVariant | 'disabledStrong' +>; export type SemanticIconBrandColor = MergeVariants<'icon', 'brand', StaticBrandVariant>; diff --git a/src/style/foundation/color/semanticColor/semanticColorPalette.ts b/src/style/foundation/color/semanticColor/semanticColorPalette.ts index 5d6057d..534ab91 100644 --- a/src/style/foundation/color/semanticColor/semanticColorPalette.ts +++ b/src/style/foundation/color/semanticColor/semanticColorPalette.ts @@ -70,6 +70,7 @@ export const semanticColorPalette: SemanticColorPalette = { iconBasicSecondary: primitiveColorPalette.gray700, iconBasicTertiary: primitiveColorPalette.gray500, iconBasicDisabled: primitiveColorPalette.gray200, + iconBasicDisabledStrong: primitiveColorPalette.gray300, iconBasicWhite: primitiveColorPalette.neutralWhite, iconBrandPrimary: primitiveColorPalette.violet500, From 44f578cf006619f5a11a40b8514654375e884a8f Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 19 Sep 2024 18:54:39 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20`BoxButton`=20=EB=82=B4=EB=B6=80=20s?= =?UTF-8?q?vg=20=EC=BB=AC=EB=9F=AC=20=EC=A7=80=EC=A0=95=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20`fill`=20=EC=86=8D=EC=84=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BoxButton/BoxButton.style.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/BoxButton/BoxButton.style.ts b/src/components/BoxButton/BoxButton.style.ts index 3478ab3..696c3eb 100644 --- a/src/components/BoxButton/BoxButton.style.ts +++ b/src/components/BoxButton/BoxButton.style.ts @@ -15,6 +15,11 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => { background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryEnabled}; color: ${({ theme }) => theme.semantic.color.textBasicWhite}; border: none; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicWhite}; + } + &:hover { cursor: pointer; background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryPressed}; @@ -25,6 +30,11 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => { background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryEnabled}; color: ${({ theme }) => theme.semantic.color.textBrandSecondary}; border: none; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBrandSecondary}; + } + &:hover { cursor: pointer; background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryPressed}; @@ -35,6 +45,11 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => { background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryEnabled}; color: ${({ theme }) => theme.semantic.color.textBasicPrimary}; border: 1px solid ${({ theme }) => theme.semantic.color.lineBasicMedium}; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicPrimary}; + } + &:hover { cursor: pointer; background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryPressed}; @@ -149,5 +164,9 @@ export const StyledBoxButton = styled.button` ${({ $hierarchy }) => getDisabledStyle($hierarchy)} color: ${({ theme }) => theme.semantic.color.textBasicDisabled}; cursor: not-allowed; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicDisabledStrong}; + } } `; From 8628c7cda168e355eb0d1f54174d9523aa6b1fb6 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 19 Sep 2024 18:56:30 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20`TextButton`=20=EB=82=B4=EB=B6=80=20?= =?UTF-8?q?svg=20=EC=BB=AC=EB=9F=AC=20=EC=A7=80=EC=A0=95=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20`fill`=20=EC=86=8D=EC=84=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextButton/TextButton.style.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/TextButton/TextButton.style.ts b/src/components/TextButton/TextButton.style.ts index c5df75c..1d5026c 100644 --- a/src/components/TextButton/TextButton.style.ts +++ b/src/components/TextButton/TextButton.style.ts @@ -15,6 +15,11 @@ const getHierarchyStyle = ($hierarchy: TextButtonHierarchy) => { background-color: ${({ theme }) => theme.semantic.color.buttonTextPrimaryEnabled}; color: ${({ theme }) => theme.semantic.color.textBrandPrimary}; border: none; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBrandPrimary}; + } + &:hover { cursor: pointer; background-color: ${({ theme }) => theme.semantic.color.buttonTextPrimaryPressed}; @@ -25,6 +30,11 @@ const getHierarchyStyle = ($hierarchy: TextButtonHierarchy) => { background-color: ${({ theme }) => theme.semantic.color.buttonTextSecondaryEnabled}; color: ${({ theme }) => theme.semantic.color.textBasicTertiary}; border: none; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicTertiary}; + } + &:hover { cursor: pointer; background-color: ${({ theme }) => theme.semantic.color.buttonTextSecondaryPressed}; @@ -97,5 +107,9 @@ export const StyledTextButton = styled.button` ${({ $hierarchy }) => getDisabledStyle($hierarchy)} color: ${({ theme }) => theme.semantic.color.textBasicDisabled}; cursor: not-allowed; + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicDisabledStrong}; + } } `;