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

Jump to bottom

Remove border from primary Button variant #1980

Merged
merged 2 commits into from
Mar 7, 2023
Merged

Remove border from primary Button variant #1980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1caa113
Remove border from primary button variant
connor-baer Mar 6, 2023
46d0881
Add changeset
connor-baer Mar 6, 2023
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
5 changes: 5 additions & 0 deletions .changeset/wet-insects-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': patch
---

Removed the border from the Button's `primary` variant.
1 change: 1 addition & 0 deletions packages/circuit-ui/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const Base = (args: ButtonProps) => <Button {...args} />;
Base.args = {
onClick: () => alert('Hello'),
children: 'Say hello',
disabled: false,
robinmetral marked this conversation as resolved.
Show resolved Hide resolved
};

export const Variants = (args: ButtonProps) => (
Expand Down
16 changes: 8 additions & 8 deletions packages/circuit-ui/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,55 +196,55 @@ const primaryStyles = ({
if (destructive) {
return css`
background-color: var(--cui-bg-danger-strong);
border-color: var(--cui-border-danger);
border-color: transparent;
robinmetral marked this conversation as resolved.
Show resolved Hide resolved
color: var(--cui-fg-on-strong);

&:hover {
background-color: var(--cui-bg-danger-strong-hovered);
border-color: var(--cui-border-danger-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

&:active,
&[aria-expanded='true'],
&[aria-pressed='true'] {
background-color: var(--cui-bg-danger-strong-pressed);
border-color: var(--cui-border-danger-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

&:disabled,
&[disabled] {
background-color: var(--cui-bg-danger-strong-disabled);
border-color: var(--cui-border-danger-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}
`;
}

return css`
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);

&:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

&:active,
&[aria-expanded='true'],
&[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

&:disabled,
&[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}
`;
Expand Down
32 changes: 16 additions & 16 deletions packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ exports[`ButtonGroup should render aligned to the center 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand All @@ -96,22 +96,22 @@ exports[`ButtonGroup should render aligned to the center 1`] = `

.circuit-1:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-1:active,
.circuit-1[aria-expanded='true'],
.circuit-1[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-1:disabled,
.circuit-1[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -404,7 +404,7 @@ exports[`ButtonGroup should render aligned to the left 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand All @@ -431,22 +431,22 @@ exports[`ButtonGroup should render aligned to the left 1`] = `

.circuit-1:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-1:active,
.circuit-1[aria-expanded='true'],
.circuit-1[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-1:disabled,
.circuit-1[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -739,7 +739,7 @@ exports[`ButtonGroup should render aligned to the right 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand All @@ -766,22 +766,22 @@ exports[`ButtonGroup should render aligned to the right 1`] = `

.circuit-1:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-1:active,
.circuit-1[aria-expanded='true'],
.circuit-1[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-1:disabled,
.circuit-1[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -1074,7 +1074,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand All @@ -1101,22 +1101,22 @@ exports[`ButtonGroup should render with default styles 1`] = `

.circuit-1:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-1:active,
.circuit-1[aria-expanded='true'],
.circuit-1[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-1:disabled,
.circuit-1[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down
40 changes: 20 additions & 20 deletions packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ exports[`ImageInput Styles should render with a custom component 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-danger-strong);
border-color: var(--cui-border-danger);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand Down Expand Up @@ -208,22 +208,22 @@ exports[`ImageInput Styles should render with a custom component 1`] = `

.circuit-5:hover {
background-color: var(--cui-bg-danger-strong-hovered);
border-color: var(--cui-border-danger-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-5:active,
.circuit-5[aria-expanded='true'],
.circuit-5[aria-pressed='true'] {
background-color: var(--cui-bg-danger-strong-pressed);
border-color: var(--cui-border-danger-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-5:disabled,
.circuit-5[disabled] {
background-color: var(--cui-bg-danger-strong-disabled);
border-color: var(--cui-border-danger-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -591,7 +591,7 @@ exports[`ImageInput Styles should render with a giga button 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand Down Expand Up @@ -624,22 +624,22 @@ exports[`ImageInput Styles should render with a giga button 1`] = `

.circuit-6:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-6:active,
.circuit-6[aria-expanded='true'],
.circuit-6[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-6:disabled,
.circuit-6[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -1004,7 +1004,7 @@ exports[`ImageInput Styles should render with an existing image 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-danger-strong);
border-color: var(--cui-border-danger);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand Down Expand Up @@ -1035,22 +1035,22 @@ exports[`ImageInput Styles should render with an existing image 1`] = `

.circuit-6:hover {
background-color: var(--cui-bg-danger-strong-hovered);
border-color: var(--cui-border-danger-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-6:active,
.circuit-6[aria-expanded='true'],
.circuit-6[aria-pressed='true'] {
background-color: var(--cui-bg-danger-strong-pressed);
border-color: var(--cui-border-danger-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-6:disabled,
.circuit-6[disabled] {
background-color: var(--cui-bg-danger-strong-disabled);
border-color: var(--cui-border-danger-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -1418,7 +1418,7 @@ exports[`ImageInput Styles should render with default styles 1`] = `
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand Down Expand Up @@ -1450,22 +1450,22 @@ exports[`ImageInput Styles should render with default styles 1`] = `

.circuit-6:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-6:active,
.circuit-6[aria-expanded='true'],
.circuit-6[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-6:disabled,
.circuit-6[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down Expand Up @@ -1853,7 +1853,7 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: var(--cui-bg-accent-strong);
border-color: var(--cui-border-accent);
border-color: transparent;
color: var(--cui-fg-on-strong);
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
Expand Down Expand Up @@ -1885,22 +1885,22 @@ exports[`ImageInput Styles should render with invalid styles and an error messag

.circuit-6:hover {
background-color: var(--cui-bg-accent-strong-hovered);
border-color: var(--cui-border-accent-hovered);
border-color: transparent;
color: var(--cui-fg-on-strong-hovered);
}

.circuit-6:active,
.circuit-6[aria-expanded='true'],
.circuit-6[aria-pressed='true'] {
background-color: var(--cui-bg-accent-strong-pressed);
border-color: var(--cui-border-accent-pressed);
border-color: transparent;
color: var(--cui-fg-on-strong-pressed);
}

.circuit-6:disabled,
.circuit-6[disabled] {
background-color: var(--cui-bg-accent-strong-disabled);
border-color: var(--cui-border-accent-disabled);
border-color: transparent;
color: var(--cui-fg-on-strong-disabled);
}

Expand Down
Loading