Merge pull request #442 from dcos-labs/mp/feat/DCOS-61568-reset-butto…

…n-docs

DCOS-61568: document and export ResetButton component

packages/button/README.md

@@ -41,6 +41,9 @@ Use sentence-style capitalization (only the first word in a phrase and any prope
 
 For Sets of Buttons, use specific labels, such as Save or Cancel, instead of using Yes and No. This is particularly helpful when the user is confirming an action.
 
+## ResetButton
+A `ResetButton` component is essentially an unstyled HTML `<button>` element. It can be used for an element that is semantically a button, but is not intended to look like a button.
+
 ## Feedback
 
 Buttons should have hover, active, focus, disabled states.

packages/button/components/ResetButton.tsx

@@ -1,49 +1,15 @@
 import * as React from "react";
-import { css, cx } from "emotion";
+import { cx } from "emotion";
 import { buttonReset } from "../../shared/styles/styleUtils";
-
-const pointerCursor = css`
-  cursor: pointer;
-`;
-
-const outlineNone = css`
-  &:focus {
-    outline: none;
-  }
-`;
-
-// Replicates default browser focus ring styles.
-//
-// The media query targets Webkit browsers, which can
-// more accurately replicate the native focus ring style
-const keyboardFocus = css`
-  &:focus > div {
-    outline-color: Highlight;
-    outline-width: thin;
-
-    @media (-webkit-min-device-pixel-ratio: 0) {
-      outline-color: -webkit-focus-ring-color;
-      outline-style: auto;
-      outline-width: unset;
-    }
-  }
-`;
+import { keyboardFocus, pointerCursor } from "../style";
 
 const ResetButton = (props: React.HTMLAttributes<HTMLButtonElement>) => {
   const { children, className, ...other } = props;
-  const classNames = cx(
-    buttonReset,
-    className,
-    outlineNone,
-    keyboardFocus,
-    pointerCursor
-  );
+  const classNames = cx(buttonReset, className, keyboardFocus, pointerCursor);
 
   return (
     <button className={classNames} {...other}>
-      <div className={outlineNone} tabIndex={-1}>
-        {children}
-      </div>
+      <div tabIndex={-1}>{children}</div>
     </button>
   );
 };

packages/button/stories/ResetButton.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { ResetButton } from "../../";
+import { Text } from "../../styleUtils/typography";
+
+const readme = require("../README.md");
+
+storiesOf("Buttons", module)
+  .addDecorator(withReadme([readme]))
+  .add("ResetButton", () => (
+    <div>
+      The{" "}
+      <Text tag="span" color="red">
+        <ResetButton>red text</ResetButton>
+      </Text>{" "}
+      is a button, but it is not styled like one
+    </div>
+  ));

packages/button/style.ts

@@ -298,3 +298,28 @@ export const getInverseMutedButtonStyles = (appearance: ButtonAppearances) => {
       `
     : inverseMutedButton;
 };
+
+export const pointerCursor = css`
+  cursor: pointer;
+`;
+
+// Replicates default browser focus ring styles.
+//
+// The media query targets Webkit browsers, which can
+// more accurately replicate the native focus ring style
+export const keyboardFocus = css`
+  > div:focus {
+    outline: none;
+  }
+
+  &:focus > div {
+    outline-color: Highlight;
+    outline-width: thin;
+
+    @media (-webkit-min-device-pixel-ratio: 0) {
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-width: unset;
+    }
+  }
+`;

packages/index.ts

@@ -26,7 +26,8 @@ export {
   SecondaryDropdownButton,
   StandardDropdownButton,
   SuccessDropdownButton,
-  DangerDropdownButton
+  DangerDropdownButton,
+  ResetButton
 } from "./button";
 export { ButtonCard, Card } from "./card";
 export { LineChart } from "./chart";