Skip to content
Snippets Groups Projects
Commit 2da00cd5 authored by Sascha Eggenberger's avatar Sascha Eggenberger :speech_balloon:
Browse files

feat(Button): Remove deprecated button variants 

BREAKING CHANGE: Removes the success and info variants.
parent f1910ccf
No related branches found
No related tags found
1 merge request!4855feat(Button): Remove deprecated success and info variants
Hide whitespace changes
Inline Side-by-side
cypress/e2e/button.cy.js
+ 0
− 3
View file @ 2da00cd5
......@@ -6,9 +6,6 @@ describe('GlButton', () => {
{ variant: 'confirm', category: 'primary' },
{ variant: 'confirm', category: 'secondary' },
{ variant: 'confirm', category: 'tertiary' },
{ variant: 'success', category: 'primary' },
{ variant: 'success', category: 'secondary' },
{ variant: 'success', category: 'tertiary' },
{ variant: 'danger', category: 'primary' },
{ variant: 'danger', category: 'secondary' },
{ variant: 'danger', category: 'tertiary' },
......
src/components/base/button/button.scss
+ 3
− 109
View file @ 2da00cd5
......@@ -241,8 +241,7 @@
);
}
&.btn-confirm,
&.btn-info {
&.btn-confirm {
@include gl-button-theme(
$color: var(--gl-button-confirm-primary-foreground-color-default),
$background-color: var(--gl-button-confirm-primary-background-color-default),
......@@ -259,8 +258,7 @@
);
}
&.btn-confirm-secondary,
&.btn-info-secondary {
&.btn-confirm-secondary {
@include gl-button-theme(
$color: var(--gl-button-confirm-secondary-foreground-color-default),
$background-color: var(--gl-button-confirm-secondary-background-color-default),
......@@ -277,8 +275,7 @@
);
}
&.btn-confirm-tertiary,
&.btn-info-tertiary {
&.btn-confirm-tertiary {
@include gl-button-theme(
$color: var(--gl-button-confirm-tertiary-foreground-color-default),
$background-color: var(--gl-button-confirm-tertiary-background-color-default),
......@@ -349,8 +346,6 @@
&.btn-default-secondary,
&.btn-dashed-secondary,
&.btn-confirm-secondary,
&.btn-info-secondary,
&.btn-success-secondary,
&.btn-danger-secondary,
&.btn-reset-secondary,
&.btn-reset-tertiary {
......@@ -363,8 +358,6 @@
&.btn-default,
&.btn-dashed,
&.btn-confirm,
&.btn-info,
&.btn-success,
&.btn-danger {
&-tertiary {
@if not $feature-button-border {
......@@ -400,105 +393,6 @@
}
}
&.btn-success {
color: var(--gl-color-neutral-0); // The text is white in light and dark mode
@apply gl-bg-green-500;
@if $feature-button-border {
border-color: $green-600;
} @else {
box-shadow: inset 0 0 0 1px var(--green-600, #{$green-600});
}
&:hover {
@if $feature-button-border {
border-color: $green-800;
background-color: $green-600;
} @else {
@include gl-button-hover-border($green-800);
background-color: $green-600;
}
}
&:focus {
@if $feature-button-border {
border-color: $green-800;
background-color: $green-600;
} @else {
@include gl-focus($color: $green-800);
@apply gl-bg-green-600;
}
}
&:active,
&.active {
@apply gl-bg-green-700;
@if $feature-button-border {
border-color: $green-900;
} @else {
@include gl-focus($color: $green-900);
&:focus {
@include gl-focus($color: $green-900);
}
}
}
}
&.btn-success-secondary {
@apply gl-bg-white;
}
&.btn-success-secondary,
&.btn-success-tertiary {
@apply gl-bg-transparent;
@apply gl-text-green-500;
@apply gl-font-normal;
@if $feature-button-border {
border-color: $green-500;
} @else {
box-shadow: inset 0 0 0 1px var(--green-500, #{$green-500});
}
&:hover {
@if $feature-button-border {
@apply gl-text-green-700;
border-color: $green-700;
background-color: $green-50;
} @else {
@apply gl-text-green-700;
@include gl-button-hover-border($green-700);
background-color: $green-50;
}
}
&:focus {
@apply gl-text-green-700;
@if $feature-button-border {
border-color: $green-700;
background-color: $green-50;
} @else {
@include gl-focus($color: $green-700);
@apply gl-bg-green-50;
}
}
&:active,
&.active {
@apply gl-text-green-900;
@apply gl-bg-green-100;
@if $feature-button-border {
border-color: $green-900;
} @else {
@include gl-focus($color: $green-900);
&:focus {
@include gl-focus($color: $green-900);
}
}
}
}
&.btn-sm {
@apply gl-px-3;
@apply gl-leading-normal;
......
src/components/base/button/button.spec.js
+ 0
− 6
View file @ 2da00cd5
......@@ -93,12 +93,6 @@ describe('button component', () => {
${'confirm'} | ${'primary'} | ${'btn-confirm'}
${'confirm'} | ${'secondary'} | ${'btn-confirm-secondary'}
${'confirm'} | ${'tertiary'} | ${'btn-confirm-tertiary'}
${'info'} | ${'primary'} | ${'btn-info'}
${'info'} | ${'secondary'} | ${'btn-info-secondary'}
${'info'} | ${'tertiary'} | ${'btn-info-tertiary'}
${'success'} | ${'primary'} | ${'btn-success'}
${'success'} | ${'secondary'} | ${'btn-success-secondary'}
${'success'} | ${'tertiary'} | ${'btn-success-tertiary'}
${'danger'} | ${'primary'} | ${'btn-danger'}
${'danger'} | ${'secondary'} | ${'btn-danger-secondary'}
${'danger'} | ${'tertiary'} | ${'btn-danger-tertiary'}
......
src/components/base/dropdown/dropdown.scss
+ 0
− 2
View file @ 2da00cd5
......@@ -97,8 +97,6 @@
}
&.btn-confirm,
&.btn-info,
&.btn-success,
&.btn-danger {
margin-left: 1px;
}
......
src/components/base/tabs/tabs/tabs.spec.js
+ 2
− 2
View file @ 2da00cd5
......@@ -147,7 +147,7 @@ describe('tabs component', () => {
actionPrimary: {
text: 'A button!',
attributes: {
variant: 'success',
variant: 'confirm',
category: 'primary',
},
},
......@@ -155,7 +155,7 @@ describe('tabs component', () => {
});
expect(wrapper.findComponent(GlButton).props()).toMatchObject({
variant: 'success',
variant: 'confirm',
category: 'primary',
});
});
......
src/utils/constants.js
+ 1
− 4
View file @ 2da00cd5
......@@ -101,8 +101,6 @@ export const buttonCategoryOptions = {
export const buttonVariantOptions = {
default: 'default',
confirm: 'confirm',
info: 'info (deprecated)',
success: 'success (deprecated)',
danger: 'danger',
dashed: 'dashed',
link: 'link',
......@@ -125,7 +123,6 @@ export const dropdownVariantOptions = {
default: 'default',
confirm: 'confirm',
info: 'info (deprecated)',
success: 'success (deprecated)',
danger: 'danger',
link: 'link',
};
......@@ -266,7 +263,7 @@ export const modalButtonDefaults = {
export const tabsButtonDefaults = {
actionPrimary: {
variant: 'success',
variant: 'confirm',
category: 'primary',
},
actionSecondary: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment