refactor(button): Simplify Button components and prep for theming

cypress/integration/Button.spec.ts

@@ -7,7 +7,7 @@ describe('Button', () => {
 
   context('given primary buttons are rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components|Buttons/Button/React', 'Primary');
+      h.stories.load('Components|Buttons/Button/React/Standard', 'Primary');
     });
 
     it('should not have any axe errors', () => {

eslintrc.js

@@ -75,7 +75,7 @@ module.exports = {
     'no-param-reassign': 'error',
     'no-undef-init': 'error',
     'no-unused-labels': 'error',
-    'no-use-before-define': 'warn', // Decide on this
+    'no-use-before-define': ['warn', {functions: false, classes: true}],
     'no-var': 'error',
     'prefer-const': 'error',
     'quote-props': 'off',

modules/_labs/pagination/react/lib/Pages.tsx

@@ -19,17 +19,21 @@ const noPointerEvents = css({
   pointerEvents: 'none',
 });
 
+const autoWidth = css({
+  width: 'auto',
+});
+
 const ellipsisStyle = css(noPointerEvents, {
   width: canvas.spacing.l,
   textAlign: 'center',
   display: 'inline-block',
 });
 
-const noTransitions = css({
+const noTransitions = css(autoWidth, {
   '&:not(:hover)': {transition: 'none !important'},
 });
 
-const activeStyling = css(noPointerEvents, noTransitions, {
+const activeStyling = css(noPointerEvents, noTransitions, autoWidth, {
   color: canvas.colors.frenchVanilla100,
 });