feat(components): migrate LoadingButton to TypeScript

BREAKING CHANGE:
The LoadingButton's exit animations have been removed. An action's success or error result should be
communicated outside the button.

feature/button-enums

feature/button-enums

HEAD

src/components/Button/Button.docs.mdx

@@ -75,9 +75,7 @@ with a primary button for the expected action and a secondary button on its left
 
 ## LoadingButton
 
-When the button's action is inputting/saving information or it takes more than 3 seconds to take the user to the next step/page, you can indicate a loading state with `LoadingButton`, as well as visually notify the user of success or an error after loading. You should only use it on primary buttons.
+When the button's action is inputting/saving information or it takes more than 3 seconds to take the user to the next step/page, you can indicate a loading state with `LoadingButton`.
 
 <Story id="components-button-loadingbutton--base" />
-<Story id="components-button-loadingbutton--success" />
-<Story id="components-button-loadingbutton--error" />
 <Props of={LoadingButton} />

src/components/Button/Button.tsx

@@ -68,6 +68,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
   border-radius: ${theme.borderRadius.giga};
   border-width: ${BORDER_WIDTH};
   border-style: solid;
+  transition: opacity ${theme.transitions.default};
 
   &:focus {
     ${focusOutline({ theme })};

src/components/Button/__snapshots__/Button.spec.tsx.snap

@@ -26,6 +26,8 @@ exports[`Button styles should render a disabled button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -92,6 +94,8 @@ exports[`Button styles should render a giga button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -157,6 +161,8 @@ exports[`Button styles should render a kilo button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -222,6 +228,8 @@ exports[`Button styles should render a mega button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -287,6 +295,8 @@ exports[`Button styles should render a primary button by default 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -352,6 +362,8 @@ exports[`Button styles should render a secondary button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -417,6 +429,8 @@ exports[`Button styles should render a stretched button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -483,6 +497,8 @@ exports[`Button styles should render a tertiary button 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: transparent;
   border-color: transparent;
   color: #3388FF;

src/components/Carousel/__snapshots__/Carousel.spec.js.snap

@@ -305,6 +305,8 @@ exports[`Carousel styles should render with children as a function 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -856,6 +858,8 @@ exports[`Carousel styles should render with children as a node 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -1378,6 +1382,8 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;
@@ -1931,6 +1937,8 @@ exports[`Carousel styles should render with default styles 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;

src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap

@@ -41,6 +41,8 @@ exports[`Buttons styles should render with default styles 1`] = `
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
   background-color: #3388FF;
   border-color: #3388FF;
   color: #FFFFFF;