= (
},
ref
) => {
+ // Creates our colorTheme modifier string based on if the variation
+ // supports colorThemes and a colorTheme is used.
+ const colorThemeModifier =
+ supportedVariations.includes(variation) && colorTheme
+ ? `${variation ?? 'outlined'}--${colorTheme}`
+ : undefined;
+
const componentClasses = classNames(
ComponentClassNames.Button,
ComponentClassNames.FieldGroupControl,
classNameModifier(ComponentClassNames.Button, variation),
+ classNameModifier(ComponentClassNames.Button, colorThemeModifier),
classNameModifier(ComponentClassNames.Button, size),
classNameModifierByFlag(
ComponentClassNames.Button,
diff --git a/packages/react/src/primitives/Button/__tests__/Button.test.tsx b/packages/react/src/primitives/Button/__tests__/Button.test.tsx
index ba2bb637d4e..f75d30284f6 100644
--- a/packages/react/src/primitives/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/primitives/Button/__tests__/Button.test.tsx
@@ -3,8 +3,17 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '../Button';
+import { ButtonColorTheme } from '../../types';
import { ComponentClassNames } from '../../shared';
+const SUPPORTED_COLOR_THEMES: ButtonColorTheme[] = [
+ 'info',
+ 'success',
+ 'warning',
+ 'error',
+ 'overlay',
+];
+
describe('Button test suite', () => {
it('should render button variations', async () => {
render(
@@ -46,6 +55,81 @@ describe('Button test suite', () => {
expect(menu.classList).toContain(`${ComponentClassNames['Button']}--menu`);
});
+ it.each(SUPPORTED_COLOR_THEMES)(
+ 'should render the %s color theme for the default variation',
+ async (colorTheme) => {
+ const testId = `default-${colorTheme}-ColorTheme`;
+ render();
+ const button = await screen.findByTestId(testId);
+ expect(button.classList).toContain(
+ `amplify-button--outlined--${colorTheme}`
+ );
+ }
+ );
+
+ it.each(SUPPORTED_COLOR_THEMES)(
+ 'should render the %s color theme for the primary variation',
+ async (colorTheme) => {
+ const testId = `primary-${colorTheme}-ColorTheme`;
+ render(
+
+ );
+ const button = await screen.findByTestId(testId);
+ expect(button.classList).toContain(
+ `amplify-button--primary--${colorTheme}`
+ );
+ }
+ );
+
+ it.each(SUPPORTED_COLOR_THEMES)(
+ 'should render the %s color theme for the link variation',
+ async (colorTheme) => {
+ const testId = `link-${colorTheme}-ColorTheme`;
+ render(
+
+ );
+ const button = await screen.findByTestId(testId);
+ expect(button.classList).toContain(`amplify-button--link--${colorTheme}`);
+ }
+ );
+
+ it('should not render a color theme class for menu, warning, and destructive variations', async () => {
+ render(
+
+
+
+
+
+ );
+ const warningWarning = await screen.findByTestId('warningWarning');
+ const destructiveWarning = await screen.findByTestId('destructiveWarning');
+ const menuWarning = await screen.findByTestId('menuWarning');
+
+ expect(warningWarning.classList).not.toContain(
+ 'amplify-button--warning--warning'
+ );
+ expect(destructiveWarning.classList).not.toContain(
+ 'amplify-button--destructive--warning'
+ );
+ expect(menuWarning.classList).not.toContain(
+ 'amplify-button--menu--warning'
+ );
+ });
+
it('should add the disabled class with the disabled attribute', async () => {
render(