Remove deprecated warning and danger Button variants

user-interviews · May 3, 2024 · d0b1a9e · d0b1a9e
1 parent bc138c0
commit d0b1a9e
Show file tree

Hide file tree

Showing 6 changed files with 0 additions and 358 deletions.
diff --git a/scss/buttons.scss b/scss/buttons.scss
@@ -21,8 +21,6 @@
 $synthesis-primary: $synth-primary-cta-blue;
 
 $primary: $ux-emerald-600;
-$danger: $ux-red;
-$warning: $ux-yellow-400;
 
 @mixin btn-focus-outline {
   box-shadow: none !important;
@@ -229,152 +227,6 @@ $warning: $ux-yellow-400;
   }
 }
 
-@mixin btn-danger {
-  $btn-danger-background: $danger;
-  $btn-danger-border: $danger;
-  $btn-danger-color: $ux-white;
-
-  $btn-danger-hover-background: $ux-red-600;
-  $btn-danger-hover-border: $ux-red-600;
-  $btn-danger-hover-color: $ux-white;
-
-  $btn-danger-active-background: $ux-red-700;
-  $btn-danger-active-border: $ux-red-700;
-  $btn-danger-active-color: $ux-white;
-
-  @include button-variant(
-    $btn-danger-background,
-    $btn-danger-border,
-    $btn-danger-color,
-
-    $btn-danger-hover-background,
-    $btn-danger-hover-border,
-    $btn-danger-hover-color,
-
-    $btn-danger-active-background,
-    $btn-danger-active-border,
-    $btn-danger-active-color,
-  );
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-outline-danger {
-  $btn-outline-danger-color: $danger;
-  $btn-outline-danger-color-hover: $ux-white;
-
-  $btn-outline-danger-hover-background: $ux-red-600;
-  $btn-outline-danger-hover-border: $ux-red-600;
-  $btn-outline-danger-hover-color: $ux-white;
-
-  $btn-outline-danger-border: $danger;
-
-  $btn-outline-danger-active-background: $ux-red-700;
-  $btn-outline-danger-active-border-color: $ux-red-700;
-
-  @include button-outline-variant(
-    $btn-outline-danger-color,
-    $btn-outline-danger-color-hover,
-
-    $btn-outline-danger-hover-background,
-    $btn-outline-danger-hover-border,
-    $btn-outline-danger-hover-color,
-  );
-  border-color: $btn-outline-danger-border;
-
-  &:active {
-    background-color: $btn-outline-danger-active-background;
-    border-color: $btn-outline-danger-active-border-color;
-  }
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-warning {
-  $btn-warning-background: $warning;
-  $btn-warning-border: $warning;
-  $btn-warning-color: $ux-yellow-900;
-
-  $btn-warning-hover-background: $ux-yellow-500;
-  $btn-warning-hover-border: $ux-yellow-500;
-  $btn-warning-hover-color: $ux-yellow-900;
-
-  $btn-warning-active-background: $ux-yellow-600;
-  $btn-warning-active-border: $ux-yellow-600;
-  $btn-warning-active-color: $ux-yellow-900;
-
-  @include button-variant(
-    $btn-warning-background,
-    $btn-warning-border,
-    $btn-warning-color,
-
-    $btn-warning-hover-background,
-    $btn-warning-hover-border,
-    $btn-warning-hover-color,
-
-    $btn-warning-active-background,
-    $btn-warning-active-border,
-    $btn-warning-active-color,
-  );
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-outline-warning {
-  $btn-outline-warning-color: $ux-yellow-900;
-  $btn-outline-warning-color-hover: $ux-yellow-900;
-
-  $btn-outline-warning-hover-background: $warning;
-  $btn-outline-warning-hover-border: $warning;
-  $btn-outline-warning-hover-color: $ux-yellow-900;
-
-  $btn-outline-warning-border: $ux-yellow-500;
-
-  $btn-outline-warning-active-background: $ux-yellow-500;
-  $btn-outline-warning-active-border-color: $ux-yellow-500;
-
-  @include button-outline-variant(
-    $btn-outline-warning-color,
-    $btn-outline-warning-color-hover,
-
-    $btn-outline-warning-hover-background,
-    $btn-outline-warning-hover-border,
-    $btn-outline-warning-hover-color,
-  );
-  border-color: $btn-outline-warning-border;
-
-  &:active {
-    background-color: $btn-outline-warning-active-background;
-    border-color: $btn-outline-warning-active-border-color;
-  }
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
 @mixin btn-transparent {
   $btn-transparent-background: transparent;
   $btn-transparent-border: transparent;

diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx
@@ -44,10 +44,6 @@ import * as ComponentStories from './Button.stories';
 	- Space is limited (e.g. too small for text alone)
 	- The icon is standardized or represents an object with a strong physical analog or visual attribute (e.g. floppy disk (Save), pencil (Edit))
 
-### Deprecated variants
-
-- The `danger` and `warning` variants are deprecated and will be removed in the next major version.
-
 ## Button vs. Link distinction
 
 - Buttons are used for actions that affect the application. Clicking them causes changes on the frontend or backend.

diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -54,22 +54,6 @@
     @include btn-tertiary;
   }
 
-  &.btn-danger {
-    @include btn-danger;
-  }
-
-  &.btn-outline-danger {
-    @include btn-outline-danger;
-  }
-
-  &.btn-warning {
-    @include btn-warning;
-  }
-
-  &.btn-outline-warning {
-    @include btn-outline-warning;
-  }
-
   &.btn-transparent {
     @include btn-transparent;
   }

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -134,158 +134,6 @@ export const Tertiary = () => (
   </>
 );
 
-export const DangerDEPRECATED = () => (
-  <>
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="danger"
-    >
-      Delete
-    </Button>
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="danger"
-    >
-      Delete
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-danger"
-    >
-      Delete
-    </Button>
-  </>
-);
-
-export const WarningDEPRECATED = () => (
-  <>
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      size="sm"
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="warning"
-    >
-      Edit
-    </Button>
-    {' '}
-    <Button
-      disabled
-      leadingIcon={faFileAlt as IconDefinition}
-      trailingIcon={faCaretDown as IconDefinition}
-      variant="outline-warning"
-    >
-      Edit
-    </Button>
-  </>
-);
-
 export const Transparent = () => (
   <>
     <Button

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -22,16 +22,12 @@ export enum ButtonVariants {
   BRAND_FACEBOOK = 'brand-facebook',
   BRAND_LINKEDIN = 'brand-linkedin',
   BRAND_TWITTER = 'brand-twitter',
-  DANGER = 'danger',
   LINK = 'link',
-  OUTLINE_DANGER = 'outline-danger',
   OUTLINE_PRIMARY = 'outline-primary',
-  OUTLINE_WARNING = 'outline-warning',
   OUTLINE_TRANSPARENT = 'outline-transparent',
   PRIMARY = 'primary',
   TERTIARY = 'tertiary',
   TRANSPARENT = 'transparent',
-  WARNING = 'warning',
 }
 
 export type ButtonProps = RBButtonProps & {