Adds default button theme, and box-sizing of all elements

Fixes #16
Fixes #34

Author: birdofpreyru

docs/button.md

@@ -42,7 +42,7 @@ as a new entry into the history stack;
 the button. It is supposed to control button size, and although any values can
 be used, it is recommended to stick with `xs`, `sm`, `md`, `lg`, and `xl` size
 labels, with `md` size being the default, when no `size` property is passed in;
-- **`theme`** — *Object* — Button theme. This object is
+- **`theme`** — *Object* — Optional. Button theme. This object is
 supposed to have the following fields:
   - **`button`** — *String* — The class to apply to the root element
   of the button in all cases;
@@ -64,132 +64,11 @@ URL/location.
   effect only when Button is rendered as `<button>`.
 
 ### <a name="examples">Examples</a>
-First of all, you want to define button theme, here is a good example to start from:
-```scss
-// theme.scss
-
-/* Base button style (medium size). */
-.button {
-  align-items: center;
-  background: while;
-  border: solid 1px black;
-  color: black;
-  display: inline-flex;
-  font: normal 15px arial;
-  justify-content: center;
-  min-height: 40px;
-  margin: 5px;
-  padding: 5px 23px;
-  vertical-align: middle;
-}
-
-/* Extra styling for the disabled buttons. */
-.disabled {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-/* .link and .regular classes are applied only to active buttons and button-like
- * links. Here we provide visual feedback for button "active", "focus", and
- * "hover" states. */
-.link,
-.regular {
-  /* To ensure that visited button-like links look the same as the non-visited
-  * ones (as typical buttons should not look different if they used to be clicked
-  * before). */
-  &:visited {
-    color: black;
-    font: normal 15px arial;
-  }
-
-  &:focus {
-    box-shadow: 0 0 2px 1px #cfe6ff;
-    border-color: #59a7ff;
-    outline: none;
-  }
-
-  &:hover {
-    background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
-    border-color: $tc-gray-40;
-  }
-
-  /* We need both ":active" selector and ".active" class here, if we want to
-   * properly support the "active" option of the <Button>. */
-  &.active,
-  &:active {
-    background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
-    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    border-color: $tc-gray-40;
-  }
-}
-
-/* And a few extra classes to support "xs", "sm", and "lg" button sizes. */
-.xs {
-  font: normal 11px arial;
-  min-height: 20px;
-  padding: 1px 13px;
-}
-
-.sm {
-  font: normal 13px arial;
-  min-height: 30px;
-  padding: 4px 18px;
-}
-
-.lg {
-  font: normal 17px arial;
-  min-height: 50px;
-  padding: 5px 28px;
-}
-```
-
-You can apply this theme directly to your `<Button>`, but it is more
-convenient to use
-[react-css-super-themr](https://www.npmjs.com/package/react-css-super-themr)
-for management of the button default / context / and ad-hoc theming. To use it,
-you should wrap the `<Button>` component with `themr(..)` decorator:
 ```jsx
-// ThemedButton.js
-import { Button } from 'topcoder-react-utils';
-import { themr } from 'react-css-super-themr';
-import theme from './theme.scss';
-
-export default const ThemedButton = themr('ThemedButton', theme)(Button);
-```
-
-Now you can use the button in your code in multiple ways:
-```js
 import React from 'react';
-import { ThemeProvider } from 'react-css-super-themr';
-import Button from './ThemedButton';
-
-// Some themes we want to use for the ad-hoc and context theming.
-import adHocTheme from './adHocStyle.scss';
-import contextTheme from './contextTheme';
+import { Button } from 'topcoder-react-utils';
 
 export default function Example() {
-  return (
-    <div>
-      <Button
-        // Button with the default theme.
-        onClick={() => console.log('Clicked!')}
-      >Click Me!</Button>
-
-      <Button
-        // Button-like link with ad-hoc theming.
-        theme={adHocTheme}
-        to="https://www.topcoder.com"
-      >Click Me!</Button>
-
-      <ThemeProvider
-        theme={{ ThemedButton: contextTheme }}
-      >
-        <Button
-          // Button with context theming.
-          onClick={() => console.log('Clicked!')}
-        >Click Me!</Button>
-      </ThemeProvider>
-    </div>
-  );
+  return <Button to="https://topcoder.com">Simple Button</Button>;
 }
 ```

src/shared/components/Button.jsx renamed to src/shared/components/Button/index.jsx

@@ -8,7 +8,9 @@
 import PT from 'prop-types';
 import React from 'react';
 
-import Link from './Link';
+import Link from 'components/Link';
+
+import defaultTheme from './style.scss';
 
 export default function Button({
   active,
@@ -88,6 +90,7 @@ Button.defaultProps = {
   openNewTab: false,
   replace: false,
   size: null,
+  theme: defaultTheme,
   to: null,
   type: 'button',
 };
@@ -107,7 +110,7 @@ Button.propTypes = {
     disabled: PT.string,
     link: PT.string,
     regular: PT.string,
-  }).isRequired,
+  }),
   to: PT.oneOfType([PT.object, PT.string]),
   type: PT.oneOf(['button', 'reset', 'submit']),
 };

src/shared/components/Button/style.scss

@@ -0,0 +1,85 @@
+/**
+ * The default button theme.
+ *
+ * The comments in this file explain how to write a custom button theme.
+ */
+
+/* Generic button of medium size. */
+.button {
+  align-items: center;
+  background-image: linear-gradient(to top, lightgray, white 50%, white);
+  border: solid 1px gray;
+  border-radius: 3px;
+  color: inherit;
+  display: inline-flex;
+  font: inherit;
+  justify-content: center;
+  min-height: 36px;
+  margin: 6px;
+  padding: 6px 24px;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  /* NOTE: All CSS rules below are nested to have higher specifity, thus
+   * avoiding overriding of these rules by parent rules in some scenarious. */
+
+  /* Additional styling of disabled buttons. */
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.33;
+  }
+
+  /* .link and .regular classes are applied only to active button-like links,
+   * and real buttons (rendered as <button> elements). */
+  &.link,
+  &.regular {
+    /* To prevent different styling of the button-like link once it has been
+     * visited. */
+    &:visited {
+      color: inherit;
+    }
+
+    &:focus {
+      box-shadow: 0 0 3px 1px lightblue;
+      border-color: blue;
+      outline: none;
+    }
+
+    &:hover {
+      border-color: gray;
+      cursor: pointer;
+    }
+
+    &.active,
+    &:active {
+      background-image: linear-gradient(to bottom, lightgray, white 50%, white);
+      box-shadow: inset 0 1px 3px 0 lightgray;
+      border-color: gray;
+    }
+  }
+
+  &.xs {
+    border-radius: 1px;
+    min-height: 24px;
+    padding: 1px 12px;
+  }
+
+  &.sm {
+    border-radius: 1px;
+    min-height: 30px;
+    padding: 3px 18px;
+  }
+
+  &.lg {
+    border-radius: 3px;
+    min-height: 42px;
+    padding: 9px 30px;
+  }
+
+  &.xl {
+    border-radius: 6px;
+    min-height: 48px;
+    padding: 12px 36px;
+  }
+}

src/styles/global.scss

@@ -6,3 +6,7 @@ html,
 body {
   text-rendering: geometricPrecision;
 }
+
+* {
+  box-sizing: border-box;
+}