Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(Button): border update to match Secondary button dimensions #689

Merged
merged 8 commits into from
Jun 26, 2024
Merged

style(Button): border update to match Secondary button dimensions #689

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
80d7b19
style(Button): border update to match Secondary button dimensions
shindigira Jun 10, 2024
4102974
added disabled style
shindigira Jun 10, 2024
0cbfcd1
Merge branch 'main' into 688-button-border-update
shindigira Jun 20, 2024
aba63ee
Merge branch 'main' into 688-button-border-update
shindigira Jun 20, 2024
f8edcb3
Merge branch 'main' into 688-button-border-update
shindigira Jun 24, 2024
a421aea
Merge branch 'main' into 688-button-border-update
shindigira Jun 25, 2024
5adeb9c
Merge branch 'main' into 688-button-border-update
shindigira Jun 25, 2024
90ad339
Merge branch 'main' into 688-button-border-update
shindigira Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@ import type { ComponentProps } from 'react';
type ButtonProperties = ComponentProps<typeof ButtonDSR>;

/* Handles new secondary styling */

const newSecondaryStyle =
'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific disabled:cursor-not-allowed disabled:border-none';

/* Handles increasing the dimensions of non-secondary buttons to match the new secondary style */
// TODO: Fix in the DS and DSR
// https://github.com/cfpb/design-system-react/issues/365
const newPrimaryBorderStyle =
'border-solid border-[1px] border-pacific focus:border-pacificDark hover:border-pacificDark disabled:border-[#d2d3d5]';

export function Button({
children,
className,
className = '',
appearance,
...rest
}: ButtonProperties): JSX.Element {
Expand All @@ -19,7 +24,11 @@ export function Button({
{...rest}
appearance={appearance}
className={`${
appearance === 'secondary' ? newSecondaryStyle : ''
appearance === 'secondary'
? newSecondaryStyle
: appearance === 'primary'
? newPrimaryBorderStyle
: ''
} ${className}`}
>
{children}
Expand Down