Disable load more and show all button during load

src/core/client/stream/components/ReplyList.spec.tsx

@@ -1,27 +1,29 @@
 import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
-import sinon from "sinon";
+import sinon, { SinonSpy } from "sinon";
 
-import ReplyList from "./ReplyList";
+import ReplyList, { ReplyListProps } from "./ReplyList";
 
 it("renders correctly", () => {
-  const props = {
+  const props: ReplyListProps = {
     commentID: "comment-id",
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
-    onLoadMore: noop,
+    onShowAll: noop,
     hasMore: false,
+    disableShowAll: false,
   };
   const wrapper = shallow(<ReplyList {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 describe("when there is more", () => {
-  const props = {
+  const props: ReplyListProps = {
     commentID: "comment-id",
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
-    onLoadMore: sinon.spy(),
+    onShowAll: sinon.spy(),
     hasMore: true,
+    disableShowAll: false,
   };
 
   const wrapper = shallow(<ReplyList {...props} />);
@@ -31,6 +33,6 @@ describe("when there is more", () => {
 
   it("calls onLoadMore", () => {
     wrapper.find("#talk-reply-list--show-all--comment-id").simulate("click");
-    expect(props.onLoadMore.calledOnce).toBe(true);
+    expect((props.onShowAll as SinonSpy).calledOnce).toBe(true);
   });
 });

src/core/client/stream/components/ReplyList.tsx

@@ -9,8 +9,9 @@ import Indent from "./Indent";
 export interface ReplyListProps {
   commentID: string;
   comments: ReadonlyArray<{ id: string }>;
-  onLoadMore: () => void;
+  onShowAll: () => void;
   hasMore: boolean;
+  disableShowAll: boolean;
 }
 
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
@@ -22,7 +23,8 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
       {props.hasMore && (
         <Button
           id={`talk-reply-list--show-all--${props.commentID}`}
-          onClick={props.onLoadMore}
+          onClick={props.onShowAll}
+          disabled={props.disableShowAll}
           secondary
           invert
           fullWidth

src/core/client/stream/components/Stream.spec.tsx

@@ -3,14 +3,15 @@ import { noop } from "lodash";
 import React from "react";
 import sinon from "sinon";
 
-import Stream from "./Stream";
+import Stream, { StreamProps } from "./Stream";
 
 it("renders correctly", () => {
-  const props = {
+  const props: StreamProps = {
     assetID: "asset-id",
     isClosed: false,
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
     onLoadMore: noop,
+    disableLoadMore: false,
     hasMore: false,
   };
   const wrapper = shallow(<Stream {...props} />);
@@ -23,6 +24,7 @@ it("renders when comments is null", () => {
     isClosed: false,
     comments: null,
     onLoadMore: noop,
+    disableLoadMore: false,
     hasMore: false,
   };
   const wrapper = shallow(<Stream {...props} />);
@@ -35,6 +37,7 @@ describe("when there is more", () => {
     isClosed: false,
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
     onLoadMore: sinon.spy(),
+    disableLoadMore: false,
     hasMore: true,
   };
 
@@ -47,4 +50,9 @@ describe("when there is more", () => {
     wrapper.find("#talk-stream--load-more").simulate("click");
     expect(props.onLoadMore.calledOnce).toBe(true);
   });
+
+  const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
+  it("disables load more button", () => {
+    expect(wrapperDisabledButton).toMatchSnapshot();
+  });
 });

src/core/client/stream/components/Stream.tsx

@@ -14,6 +14,7 @@ export interface StreamProps {
   comments: ReadonlyArray<{ id: string }> | null;
   onLoadMore: () => void;
   hasMore: boolean;
+  disableLoadMore: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
@@ -38,6 +39,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
           secondary
           invert
           fullWidth
+          disabled={props.disableLoadMore}
         >
           Load More
         </Button>

src/core/client/stream/components/Username.tsx

@@ -11,7 +11,7 @@ export interface CommentProps {
 
 const Username: StatelessComponent<CommentProps> = props => {
   return (
-    <Typography className={styles.root} gutterBottom>
+    <Typography className={styles.root} variant="heading2" gutterBottom>
       {props.children}
     </Typography>
   );

src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap

@@ -44,6 +44,7 @@ exports[`when there is more renders a load more button 1`] = `
     key="comment-2"
   />
   <withPropsOnChange(Button)
+    disabled={false}
     fullWidth={true}
     id="talk-reply-list--show-all--comment-id"
     invert={true}

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -55,6 +55,65 @@ exports[`renders when comments is null 1`] = `
 </div>
 `;
 
+exports[`when there is more disables load more button 1`] = `
+<div>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <div
+    key="comment-1"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      gutterBottom={true}
+    />
+    <Relay(ReplyListContainer)
+      comment={
+        Object {
+          "id": "comment-1",
+        }
+      }
+    />
+  </div>
+  <div
+    key="comment-2"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      gutterBottom={true}
+    />
+    <Relay(ReplyListContainer)
+      comment={
+        Object {
+          "id": "comment-2",
+        }
+      }
+    />
+  </div>
+  <withPropsOnChange(Button)
+    disabled={true}
+    fullWidth={true}
+    id="talk-stream--load-more"
+    invert={true}
+    onClick={[Function]}
+    secondary={true}
+  >
+    Load More
+  </withPropsOnChange(Button)>
+</div>
+`;
+
 exports[`when there is more renders a load more button 1`] = `
 <div>
   <Logo
@@ -102,6 +161,7 @@ exports[`when there is more renders a load more button 1`] = `
     />
   </div>
   <withPropsOnChange(Button)
+    disabled={false}
     fullWidth={true}
     id="talk-stream--load-more"
     invert={true}

src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap

@@ -4,6 +4,7 @@ exports[`renders correctly 1`] = `
 <withPropsOnChange(Typography)
   className="Username-root"
   gutterBottom={true}
+  variant="heading2"
 >
   Marvin
 </withPropsOnChange(Typography)>

src/core/client/stream/containers/ReplyListContainer.spec.tsx

@@ -1,7 +1,10 @@
-import { shallow } from "enzyme";
+import { shallow, ShallowWrapper } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
 
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "../components/ReplyList";
 import { ReplyListContainer } from "./ReplyListContainer";
 
 it("renders correctly", () => {
@@ -35,3 +38,49 @@ it("renders correctly when replies are null", () => {
   const wrapper = shallow(<ReplyListContainer {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+describe("when has more replies", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<ReplyListContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when showing all", () => {
+    beforeAll(() => {
+      wrapper
+        .find(ReplyList)
+        .props()
+        .onShowAll();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables show all button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable show all button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/core/client/stream/containers/ReplyListContainer.tsx

@@ -17,6 +17,10 @@ export interface InnerProps {
 }
 
 export class ReplyListContainer extends React.Component<InnerProps> {
+  public state = {
+    disableShowAll: false,
+  };
+
   public render() {
     if (this.props.comment.replies === null) {
       return null;
@@ -26,20 +30,23 @@ export class ReplyListContainer extends React.Component<InnerProps> {
       <ReplyList
         commentID={this.props.comment.id}
         comments={comments}
-        onLoadMore={this.loadMore}
+        onShowAll={this.showAll}
         hasMore={this.props.relay.hasMore()}
+        disableShowAll={this.state.disableShowAll}
       />
     );
   }
 
-  private loadMore = () => {
+  private showAll = () => {
     if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
       return;
     }
 
+    this.setState({ disableShowAll: true });
     this.props.relay.loadMore(
       999999999, // Fetch All Replies
       error => {
+        this.setState({ disableShowAll: false });
         if (error) {
           // tslint:disable-next-line:no-console
           console.error(error);

src/core/client/stream/containers/StreamContainer.spec.tsx

@@ -1,11 +1,14 @@
-import { shallow } from "enzyme";
+import { shallow, ShallowWrapper } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
 
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "../components/Stream";
 import { StreamContainer } from "./StreamContainer";
 
 it("renders correctly", () => {
-  const props: any = {
+  const props: PropTypesOf<StreamContainer> = {
     asset: {
       id: "asset-id",
       isClosed: false,
@@ -16,8 +19,55 @@ it("renders correctly", () => {
     relay: {
       hasMore: noop,
       isLoading: noop,
-    },
+    } as any,
   };
   const wrapper = shallow(<StreamContainer {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+describe("when has more comments", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<StreamContainer> = {
+    asset: {
+      id: "asset-id",
+      isClosed: false,
+      comments: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<StreamContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when loading more", () => {
+    beforeAll(() => {
+      wrapper
+        .find(Stream)
+        .props()
+        .onLoadMore();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables load more button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable load more button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/core/client/stream/containers/StreamContainer.tsx

@@ -17,6 +17,10 @@ interface InnerProps {
 }
 
 export class StreamContainer extends React.Component<InnerProps> {
+  public state = {
+    disableLoadMore: false,
+  };
+
   public render() {
     const comments = this.props.asset.comments
       ? this.props.asset.comments.edges.map(edge => edge.node)
@@ -28,6 +32,7 @@ export class StreamContainer extends React.Component<InnerProps> {
         comments={comments}
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
+        disableLoadMore={this.state.disableLoadMore}
       />
     );
   }
@@ -36,10 +41,11 @@ export class StreamContainer extends React.Component<InnerProps> {
     if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
       return;
     }
-
+    this.setState({ disableLoadMore: true });
     this.props.relay.loadMore(
       10, // Fetch the next 10 feed items
       error => {
+        this.setState({ disableLoadMore: false });
         if (error) {
           // tslint:disable-next-line:no-console
           console.error(error);

src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap

@@ -13,8 +13,66 @@ exports[`renders correctly 1`] = `
       },
     ]
   }
-  onLoadMore={[Function]}
+  disableShowAll={false}
+  onShowAll={[Function]}
 />
 `;
 
 exports[`renders correctly when replies are null 1`] = `""`;
+
+exports[`when has more replies renders hasMore 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all disables show all button 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={true}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all enable show all button after loading is done 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;

src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap

@@ -13,6 +13,67 @@ exports[`renders correctly 1`] = `
       },
     ]
   }
+  disableLoadMore={false}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments renders hasMore 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more disables load more button 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={true}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
   isClosed={false}
   onLoadMore={[Function]}
 />

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -40,11 +40,11 @@ exports[`loads more comments 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -56,11 +56,11 @@ exports[`loads more comments 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Lukas
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -72,11 +72,11 @@ exports[`loads more comments 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Isabelle
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -128,11 +128,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -144,11 +144,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Lukas
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -158,6 +158,7 @@ exports[`renders comment stream 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+      disabled={false}
       id="talk-stream--load-more"
       onBlur={[Function]}
       onClick={[Function]}

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -40,11 +40,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -56,11 +56,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -73,11 +73,11 @@ exports[`renders comment stream 1`] = `
         <div
           className="Comment-root Comment-gutterBottom"
         >
-          <p
-            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+          <h1
+            className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
           >
             Markus
-          </p>
+          </h1>
           <p
             className="Typography-root Typography-body1"
           >
@@ -87,11 +87,11 @@ exports[`renders comment stream 1`] = `
         <div
           className="Comment-root Comment-gutterBottom"
         >
-          <p
-            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+          <h1
+            className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
           >
             Lukas
-          </p>
+          </h1>
           <p
             className="Typography-root Typography-body1"
           >

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -40,11 +40,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -56,11 +56,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Lukas
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -40,11 +40,11 @@ exports[`renders comment stream 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -57,11 +57,11 @@ exports[`renders comment stream 1`] = `
         <div
           className="Comment-root Comment-gutterBottom"
         >
-          <p
-            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+          <h1
+            className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
           >
             Lukas
-          </p>
+          </h1>
           <p
             className="Typography-root Typography-body1"
           >
@@ -70,6 +70,7 @@ exports[`renders comment stream 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+          disabled={false}
           id="talk-reply-list--show-all--comment-0"
           onBlur={[Function]}
           onClick={[Function]}
@@ -124,11 +125,11 @@ exports[`show all replies 1`] = `
       <div
         className="Comment-root Comment-gutterBottom"
       >
-        <p
-          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+        <h1
+          className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
         >
           Markus
-        </p>
+        </h1>
         <p
           className="Typography-root Typography-body1"
         >
@@ -141,11 +142,11 @@ exports[`show all replies 1`] = `
         <div
           className="Comment-root Comment-gutterBottom"
         >
-          <p
-            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+          <h1
+            className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
           >
             Lukas
-          </p>
+          </h1>
           <p
             className="Typography-root Typography-body1"
           >
@@ -155,11 +156,11 @@ exports[`show all replies 1`] = `
         <div
           className="Comment-root Comment-gutterBottom"
         >
-          <p
-            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
+          <h1
+            className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
           >
             Isabelle
-          </p>
+          </h1>
           <p
             className="Typography-root Typography-body1"
           >

src/core/client/ui/components/Button/Button.css

@@ -1,21 +1,34 @@
 .root {
   composes: button from "talk-ui/shared/typography.css";
-  padding: 5px 20px;
-  border-radius: $round-corners;
-  background-color: transparent;
-  /* TODO: hover styles for the default button */
+
+  &:enabled,
+  &:disabled {
+    padding: 5px 20px;
+    border-radius: $round-corners;
+    background-color: transparent;
+    /* TODO: hover styles for the default button */
+  }
 }
 
-.fullWidth {
+.root:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.fullWidth:enabled,
+.fullWidth:disabled {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
 
-.primary {
+.primary:enabled,
+.primary:disabled {
   background-color: $palette-primary-main;
   color: #fff;
+}
 
+.primary:enabled {
   &:hover {
     background-color: $palette-primary-light;
   }
@@ -23,56 +36,64 @@
   &:active {
     background-color: $palette-primary-lighter;
   }
-
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-primary-main;
-    color: $palette-primary-main;
-
-    &:hover {
-      border-color: $palette-primary-light;
-      color: $palette-primary-light;
-    }
-
-    &:active {
-      border-color: $palette-primary-lighter;
-      color: $palette-primary-lighter;
-    }
-  }
 }
 
-.secondary {
-  background-color: $palette-secondary-main;
-  color: #fff;
+.primary:enabled.invert,
+.primary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid $palette-primary-main;
+  color: $palette-primary-main;
+}
 
+.primary:enabled.invert {
   &:hover {
-    background-color: $palette-secondary-light;
+    border-color: $palette-primary-light;
+    color: $palette-primary-light;
   }
 
+  &:active {
+    border-color: $palette-primary-lighter;
+    color: $palette-primary-lighter;
+  }
+}
+
+.secondary:enabled,
+.secondary:disabled {
+  background-color: $palette-secondary-main;
+  color: #fff;
+}
+
+.secondary:enabled {
+  &:hover {
+    background-color: $palette-secondary-light;
+  }
   &:active {
     background-color: $palette-secondary-lighter;
   }
+}
 
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-secondary-main;
-    color: $palette-secondary-main;
+.secondary:enabled.invert,
+.secondary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid $palette-secondary-main;
+  color: $palette-secondary-main;
+}
 
-    &:hover {
-      border-color: $palette-secondary-light;
-      color: $palette-secondary-light;
-    }
+.secondary:enabled.invert {
+  &:hover {
+    border-color: $palette-secondary-light;
+    color: $palette-secondary-light;
+  }
 
-    &:active {
-      border-color: $palette-secondary-lighter;
-      color: $palette-secondary-lighter;
-    }
+  &:active {
+    border-color: $palette-secondary-lighter;
+    color: $palette-secondary-lighter;
   }
 }
 
 /**
  * This seems to be the best way to target modern touch device browsers.
  */
-@media (-moz-touch-enabled: 1), (pointer:coarse) {
+@media (-moz-touch-enabled: 1), (pointer: coarse) {
   /* TODO: Remove hover styles */
 }

src/core/client/ui/components/Button/Button.mdx

@@ -10,11 +10,18 @@ import Button from './Button'
 
 ## Basic usage
 <Playground>
-  <Button style={{marginRight: "10px"}}>Push Me</Button>
-  <Button style={{marginRight: "10px"}} anchor>I'm an Anchor Tag</Button>
-  <Button style={{marginRight: "10px"}} primary>Primary</Button>
-  <Button style={{marginRight: "10px"}} secondary>Secondary</Button>
-  <Button style={{marginTop: "10px"}} primary fullWidth>Full Width</Button>
-  <Button style={{marginTop: "10px"}} primary invert fullWidth>Full Width Invert</Button>
+  <Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
+  <Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
+  <Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
 </Playground>
 

src/core/client/ui/types.ts

@@ -29,4 +29,6 @@ export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
  *
  * E.g. type ButtonProps = ReturnPropTypes<Button>;
  */
-export type PropTypesOf<T> = T extends React.ComponentType<infer R> ? R : {};
+export type PropTypesOf<T> = T extends React.ComponentType<infer R>
+  ? R
+  : T extends React.Component<infer S> ? S : {};