feat(components): migrate LoadingButton to TypeScript (#584)

* feat(components): migrate Spinner to TypeScript

* feat(components): migrate LoadingButton to TypeScript

* fix(components): improve accessibility

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

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

@@ -73,6 +73,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

@@ -108,6 +108,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;
@@ -174,6 +176,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;
@@ -239,6 +243,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;
@@ -304,6 +310,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;
@@ -369,6 +377,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;
@@ -434,6 +444,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;
@@ -499,6 +511,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;
@@ -565,6 +579,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;