feat: update colours in buttons#2
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the Button component's visual design by replacing the 'critical' variant with a new 'outline' variant and changing the color schemes for all button variants to a neutral grayscale palette. This represents a breaking change to the component's API.
Changes:
- Replaced 'critical' button variant with 'outline' variant in type definitions and Storybook configuration
- Updated color schemes from blue/red to grayscale neutral colors for all button variants
- Adjusted button sizing (border-radius reduced from 8px to 6px, medium button padding and font-size reduced)
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
packages/component-library/src/components/button/Button.types.ts |
Updated ButtonVariant type to replace 'critical' with 'outline' |
packages/component-library/src/components/button/Button.stories.tsx |
Updated Storybook argTypes to reflect new variant options |
packages/component-library/src/components/button/Button.css |
Replaced critical button styles with outline styles, updated all variant colors to grayscale palette, and adjusted sizing properties |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import type { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react'; | ||
|
|
||
| export type ButtonVariant = 'primary' | 'secondary' | 'critical'; | ||
| export type ButtonVariant = 'primary' | 'secondary' | 'outline'; |
There was a problem hiding this comment.
The README.md still references the old 'critical' variant in the example code and props table. These should be updated to reflect the new 'outline' variant to keep the documentation consistent with the code changes.
| import type { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react'; | ||
|
|
||
| export type ButtonVariant = 'primary' | 'secondary' | 'critical'; | ||
| export type ButtonVariant = 'primary' | 'secondary' | 'outline'; |
There was a problem hiding this comment.
The new 'outline' variant lacks test coverage. Consider adding tests to verify that the 'outline' variant renders correctly with the appropriate CSS classes, similar to how 'primary' and 'secondary' variants should be tested.
| import type { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react'; | ||
|
|
||
| export type ButtonVariant = 'primary' | 'secondary' | 'critical'; | ||
| export type ButtonVariant = 'primary' | 'secondary' | 'outline'; |
There was a problem hiding this comment.
This is a breaking change that removes the 'critical' variant and replaces it with 'outline'. A changeset file should be created to document this breaking change for version management and release notes. Run 'npx changeset' to create a changeset describing this breaking change.
No description provided.