From 2b4d9aeda47faad774914ddae4e9a4f457da1b38 Mon Sep 17 00:00:00 2001
From: Himanshu Nagrath <33781906+hnagrath09@users.noreply.github.com>
Date: Mon, 1 Nov 2021 19:10:41 +0530
Subject: [PATCH 1/2] created css variable to enable theming in button
---
.../tail-kit/src/components/button/button.tsx | 18 +++++++--------
packages/tail-kit/src/styles/index.css | 20 +++++++++++++++-
packages/tail-kit/tailwind.config.js | 23 +++++++++++++++++++
3 files changed, 51 insertions(+), 10 deletions(-)
diff --git a/packages/tail-kit/src/components/button/button.tsx b/packages/tail-kit/src/components/button/button.tsx
index 9a62855e..4b8d76d0 100644
--- a/packages/tail-kit/src/components/button/button.tsx
+++ b/packages/tail-kit/src/components/button/button.tsx
@@ -65,32 +65,32 @@ export const Button = forwardRef(
const buttonClassNames = useMemo(() => {
if (buttonType === 'default') {
if (disabled) {
- return 'border-gray-400 text-gray-400 default'
+ return 'border-disabled text-disabled default'
}
- return 'border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white default'
+ return 'border-primary text-primary hover:bg-primary hover:text-text-inverse default'
}
if (buttonType === 'primary') {
if (disabled) {
- return 'bg-gray-400 text-white border-transparent primary'
+ return 'bg-disabled text-text-inverse border-transparent primary'
}
- return 'bg-blue-600 text-white border-transparent primary'
+ return 'bg-primary text-text-inverse border-transparent primary'
}
if (buttonType === 'danger') {
if (disabled) {
- return 'border-gray-400 text-gray-400 danger'
+ return 'border-disabled text-disabled danger'
}
- return 'border-red-500 text-red-500 hover:bg-red-500 hover:text-white danger'
+ return 'border-error text-error hover:bg-error hover:text-text-inverse danger'
}
// if none of the above branches are satisfied, then the button is of type link
if (disabled) {
- return 'border-transparent text-gray-400 link'
+ return 'border-transparent text-disabled link'
}
- return 'border-transparent text-blue-600 link'
+ return 'border-transparent text-primary link'
}, [buttonType, disabled])
const iconComponent = loading ? (
@@ -103,7 +103,7 @@ export const Button = forwardRef(
,
)
- expect(screen.getByRole('button')).toHaveClass('bg-gray-400 text-white')
+ expect(screen.getByRole('button')).toHaveClass(
+ 'bg-disabled text-text-inverse',
+ )
})
test('render danger disabled button correctly', () => {
@@ -125,7 +127,7 @@ test('render danger disabled button correctly', () => {
,
)
expect(screen.getByRole('button')).toHaveClass(
- 'border-gray-400 text-gray-400',
+ 'border-disabled text-disabled',
)
})
@@ -135,5 +137,5 @@ test('render link disabled button correctly', () => {
Click Me
,
)
- expect(screen.getByRole('button')).toHaveClass('text-gray-400')
+ expect(screen.getByRole('button')).toHaveClass('text-disabled')
})
diff --git a/packages/tail-kit/src/components/form/form.test.tsx b/packages/tail-kit/src/components/form/form.test.tsx
index 966d832f..7799beaa 100644
--- a/packages/tail-kit/src/components/form/form.test.tsx
+++ b/packages/tail-kit/src/components/form/form.test.tsx
@@ -121,10 +121,10 @@ test('children as function works correctly with form', async () => {
)}
,
)
- expect(screen.getByText('Submit').parentElement).toHaveClass('bg-gray-400')
+ expect(screen.getByText('Submit').parentElement).toHaveClass('bg-disabled')
userEvent.type(screen.getByRole('textbox'), 'test@example.com')
await waitFor(() => {
- expect(screen.getByText('Submit').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('Submit').parentElement).toHaveClass('bg-primary')
})
})
diff --git a/packages/tail-kit/src/components/pagination/pagination.test.tsx b/packages/tail-kit/src/components/pagination/pagination.test.tsx
index 91c87190..5dca2044 100644
--- a/packages/tail-kit/src/components/pagination/pagination.test.tsx
+++ b/packages/tail-kit/src/components/pagination/pagination.test.tsx
@@ -11,23 +11,23 @@ test('pagination component working correctly', () => {
test('Next button of pagination component working correctly', () => {
render()
- expect(screen.getByText('1').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('1').parentElement).toHaveClass('bg-primary')
fireEvent.click(screen.getByText('Next'))
- expect(screen.getByText('2').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('2').parentElement).toHaveClass('bg-primary')
})
test('Previous button of pagination component working correctly', () => {
render()
- expect(screen.getByText('3').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('3').parentElement).toHaveClass('bg-primary')
fireEvent.click(screen.getByText('Previous'))
- expect(screen.getByText('2').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('2').parentElement).toHaveClass('bg-primary')
})
test('Page buttons of pagination component working correctly', () => {
render()
- expect(screen.getByText('1').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('1').parentElement).toHaveClass('bg-primary')
fireEvent.click(screen.getByText('3'))
- expect(screen.getByText('3').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('3').parentElement).toHaveClass('bg-primary')
})
/** Tests for page size changer in pagination component */
@@ -43,7 +43,7 @@ test('Change selected page when value of total number of pages changes', () => {
render()
fireEvent.click(screen.getByText('10 / page'))
fireEvent.click(screen.getByText('20 / page'))
- expect(screen.getByText('5').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('5').parentElement).toHaveClass('bg-primary')
})
/** Tests for page jumper */
@@ -51,18 +51,18 @@ test('Page jumper of pagination component working correctly', () => {
render()
userEvent.type(screen.getByRole('textbox'), '3')
fireEvent.blur(screen.getByDisplayValue('3'))
- expect(screen.getByText('3').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('3').parentElement).toHaveClass('bg-primary')
})
test('Out of range value in page jumper working correctly', () => {
render()
userEvent.type(screen.getByRole('textbox'), '-1')
fireEvent.blur(screen.getByDisplayValue('-1'))
- expect(screen.getByText('1').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('1').parentElement).toHaveClass('bg-primary')
userEvent.type(screen.getByRole('textbox'), '10')
fireEvent.blur(screen.getByDisplayValue('10'))
- expect(screen.getByText('5').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('5').parentElement).toHaveClass('bg-primary')
})
test('Enter key shortcut for page jumper working correctly', () => {
@@ -70,7 +70,7 @@ test('Enter key shortcut for page jumper working correctly', () => {
const input = screen.getByRole('textbox')
userEvent.type(input, '5')
fireEvent.keyDown(input, { key: 'Enter', code: 13 })
- expect(screen.getByText('5').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('5').parentElement).toHaveClass('bg-primary')
})
test('invalid entries in page jumper working correctly', () => {
@@ -78,7 +78,7 @@ test('invalid entries in page jumper working correctly', () => {
const input = screen.getByRole('textbox')
userEvent.type(input, 'abc')
fireEvent.keyDown(input, { key: 'Enter', code: 13 })
- expect(screen.getByText('5').parentElement).toHaveClass('bg-blue-600')
+ expect(screen.getByText('5').parentElement).toHaveClass('bg-primary')
})
/** Test cases for page wrap in pagination component */