Skip to content

Commit d354422

Browse files
author
Hanbin Cho
committed
Change prop name
1 parent 195f96d commit d354422

File tree

4 files changed

+77
-18
lines changed

4 files changed

+77
-18
lines changed

‎packages/components/src/components/Button/Button.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const WithForm: Story = {
9898
args={{
9999
...args,
100100
disabled: value.length < 3,
101-
isError: !!error,
101+
danger: !!error,
102102
}}
103103
/>
104104
</form>

‎packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,25 @@ exports[`Button > should not have px when a wrong size variable is provided 1`]
207207
</div>
208208
`;
209209

210+
exports[`Button > should not render error color when danger is false and variant is default 1`] = `
211+
<button
212+
aria-label="button"
213+
class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
214+
data-testid="button"
215+
type="button"
216+
>
217+
<div
218+
class="maxWidth-0-100%--255 mx-0-auto--255 position-0-relative--255 width-0-fit-content--255"
219+
>
220+
<div
221+
class=" lineHeight-0-1.2--255 minHeight-0-1.2em--255 "
222+
>
223+
Click me
224+
</div>
225+
</div>
226+
</button>
227+
`;
228+
210229
exports[`Button > should not render error color when isError is false and variant is default 1`] = `
211230
<button
212231
aria-label="button"
@@ -266,6 +285,26 @@ exports[`Button > should render default style when variant is default 1`] = `
266285
</div>
267286
`;
268287

288+
exports[`Button > should render error style when danger is true and variant is default 1`] = `
289+
<div>
290+
<button
291+
aria-label="button"
292+
class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-var(--error,#D52B2E)-15425828959012638752-1 border-0-1px solid var(--error,#D52B2E)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--error,#FF5B5E)-17005923944751620165-1 borderColor-0-var(--error,#D52B2E)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--error,#FF5B5E)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--error,#FF5B5E)-6232724021015440856-1 outlineColor-0-var(--error,#D52B2E)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--error,#D52B2E)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
293+
type="button"
294+
>
295+
<div
296+
class="maxWidth-0-100%--255 mx-0-auto--255 position-0-relative--255 width-0-fit-content--255"
297+
>
298+
<div
299+
class=" lineHeight-0-1.2--255 minHeight-0-1.2em--255 "
300+
>
301+
Click me
302+
</div>
303+
</div>
304+
</button>
305+
</div>
306+
`;
307+
269308
exports[`Button > should render error style when isError is true and variant is default 1`] = `
270309
<div>
271310
<button
@@ -325,6 +364,26 @@ exports[`Button > should render icon when icon is provided 1`] = `
325364
</div>
326365
`;
327366

367+
exports[`Button > should render primary background color when danger is true and variant is primary 1`] = `
368+
<div>
369+
<button
370+
aria-label="button"
371+
class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-16px--1 py-0-10px--1 "
372+
type="button"
373+
>
374+
<div
375+
class="maxWidth-0-100%--255 mx-0-auto--255 position-0-relative--255 width-0-fit-content--255"
376+
>
377+
<div
378+
class=" lineHeight-0-1.2--255 minHeight-0-1.2em--255 "
379+
>
380+
Click me
381+
</div>
382+
</div>
383+
</button>
384+
</div>
385+
`;
386+
328387
exports[`Button > should render primary background color when isError is true and variant is primary 1`] = `
329388
<div>
330389
<button

‎packages/components/src/components/Button/__tests__/index.browser.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ describe('Button', () => {
2323
expect(container.querySelector('button')).toHaveAttribute('disabled')
2424
})
2525

26-
it('should render error style when isError is true and variant is default', () => {
27-
const { container } = render(<Button isError>Click me</Button>)
26+
it('should render error style when danger is true and variant is default', () => {
27+
const { container } = render(<Button danger>Click me</Button>)
2828
expect(container).toMatchSnapshot()
2929
expect(container.querySelector('button')).toHaveStyle({
3030
color: 'var(--error, #D52B2E)',
3131
})
3232
})
3333

34-
it('should render primary background color when isError is true and variant is primary', () => {
34+
it('should render primary background color when danger is true and variant is primary', () => {
3535
const { container } = render(
36-
<Button isError variant="primary">
36+
<Button danger variant="primary">
3737
Click me
3838
</Button>,
3939
)
@@ -43,7 +43,7 @@ describe('Button', () => {
4343
})
4444
})
4545

46-
it('should not render error color when isError is false and variant is default', async () => {
46+
it('should not render error color when danger is false and variant is default', async () => {
4747
const { getByTestId } = render(
4848
<Button data-testid="button">Click me</Button>,
4949
)

‎packages/components/src/components/Button/index.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
1818
primaryFocus?: string
1919
}
2020
typography?: keyof DevupThemeTypography
21-
isError?: boolean
21+
danger?: boolean
2222
size?: 'sm' | 'md' | 'lg'
2323
icon?: React.ReactNode
2424
ellipsis?: boolean
@@ -34,7 +34,7 @@ export function Button({
3434
variant = 'default',
3535
type = 'button',
3636
colors,
37-
isError = false,
37+
danger = false,
3838
children,
3939
size = 'md',
4040
className,
@@ -55,11 +55,11 @@ export function Button({
5555
bg: {
5656
true: 'var(--error, #D52B2E)',
5757
false: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,
58-
}[isError.toString()],
58+
}[danger.toString()],
5959
border: {
6060
true: '1px solid var(--error, #D52B2E)',
6161
false: '1px solid var(--primary, #8163E1)',
62-
}[isError.toString()],
62+
}[danger.toString()],
6363
color: '#000',
6464
},
6565
}[variant]
@@ -86,7 +86,7 @@ export function Button({
8686
default: {
8787
true: 'var(--error, #FF5B5E)',
8888
false: 'var(--primaryFocus, #9385D3)',
89-
}[isError.toString()],
89+
}[danger.toString()],
9090
}[variant],
9191
}}
9292
_hover={
@@ -98,9 +98,9 @@ export function Button({
9898
borderColor: {
9999
true: 'var(--error, #D52B2E)',
100100
false: 'var(--primary, #8163E1)',
101-
}[isError.toString()],
101+
}[danger.toString()],
102102
bg:
103-
!isError &&
103+
!danger &&
104104
`color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,
105105
},
106106
}[variant]
@@ -114,7 +114,7 @@ export function Button({
114114
bg: {
115115
true: 'var(--error, #FF5B5E)',
116116
false: 'var(--primary, #8163E1)',
117-
}[isError.toString()],
117+
}[danger.toString()],
118118
color: 'var(--text, #F6F6F6)',
119119
},
120120
}[variant],
@@ -139,9 +139,9 @@ export function Button({
139139
borderColor: {
140140
true: 'var(--error, #FF5B5E)',
141141
false: 'var(--primary, #8163E1)',
142-
}[isError.toString()],
142+
}[danger.toString()],
143143
bg:
144-
!isError &&
144+
!danger &&
145145
`color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)`,
146146
},
147147
}[variant],
@@ -151,7 +151,7 @@ export function Button({
151151
default: {
152152
true: 'var(--error, #D52B2E)',
153153
false: 'var(--primaryFocus, #927CE4)',
154-
}[isError.toString()],
154+
}[danger.toString()],
155155
}[variant],
156156
},
157157
bg: {
@@ -187,7 +187,7 @@ export function Button({
187187
default: {
188188
true: 'var(--error, #D52B2E)',
189189
false: 'var(--text, #272727)',
190-
}[isError.toString()],
190+
}[danger.toString()],
191191
}[variant]
192192
}
193193
cursor="pointer"

0 commit comments

Comments
 (0)