-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from reactioncommerce/docs-16-button
fix(button): add muitheme to button; add Error button; add reactestlib; fix all tests
- Loading branch information
Showing
15 changed files
with
493 additions
and
385 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,8 @@ | ||
| import React from "react"; | ||
| import renderer from "react-test-renderer"; | ||
| import { shallow } from "enzyme"; | ||
| import { render } from "../../tests/index.js"; | ||
| import COMPONENT from "./COMPONENT"; | ||
|
|
||
| test("basic snapshot", () => { | ||
| const component = renderer.create(<COMPONENT />); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| test("basic snapshot - only default props", () => { | ||
| const { asFragment } = render(<COMPONENT></COMPONENT>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,85 @@ | ||
| ### Overview | ||
|
|
||
| Buttons are used to enable a user to take an action. Buttons should clearly and simply communicate the action that will happen when they are pressed. | ||
| The Catalyst Button inherits from the Material-UI [Button component](https://material-ui.com/components/buttons/). Refer to the Material-UI [Button API docs](https://material-ui.com/api/button/) for more information. | ||
|
|
||
| ### Usage | ||
|
|
||
| There are four types of buttons you can choose from, and which one you choose should be based on which type of action it causes. | ||
|
|
||
| 1. **Solid button**: The solid button is used for a primary action in a modal, card, large view and generally throughout. | ||
| 1. **Outline button**: The outline button is used for a secondary or dismissive action. The outline button should be paired with the solid button in cases such as dismissing a modal or canceling an action. | ||
| 1. **Danger button**: The danger button is used for a destructive action that is difficult to recover from such as deleting information. The danger button should be used at the point that the destructive action actually takes place. For example, you can have a delete button as a secondary action on a page and in this case you would use a an outline button, the outline button would then trigger a modal confirmation, which is where you would use the danger button. | ||
| 1. **Important button**: The important button is used when there needs to be particular importance put on an action or in a view where there are multiple actions and more emphasis needs to be drawn to specific or most common action in a view. | ||
| #### Default Catalyst button | ||
|
|
||
| ```jsx noeditor | ||
| This is what a button with all the default prop options looks like: | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "flex" }}> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button>Text-only</Button> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| It's a button with `variant` set to `text`, `size` set to `medium`, `color` set to `default`. | ||
|
|
||
| #### Material UI options | ||
|
|
||
| - **Solid (Contained) button**: The solid button is used for a primary action in a modal, card, large view and generally throughout. | ||
| - **Outline button**: The outline button is used for a secondary or dismissive action. The outline button should be paired with the solid button in cases such as dismissing a modal or canceling an action. | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "flex" }}> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button>Text-only</Button> | ||
| </div> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="contained">Solid</Button> | ||
| </div> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="outlined">Outlined</Button> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| - **Disabled**: | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "flex" }}> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button title="Default" className="myBtn">Default</Button> | ||
| <Button variant="contained" disabled>Disabled</Button> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| - **Full Width**: | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "block" }}> | ||
| <Button variant="contained" fullWidth>FullWidth</Button> | ||
| </div> | ||
| ``` | ||
|
|
||
| #### Catalyst-custom buttons | ||
|
|
||
| - **Error button**: The error button is used for a destructive action that is difficult to recover from such as deleting information. The error button should be used at the point that the destructive action actually takes place. For example, you can have a delete button as a secondary action on a page and in this case you would use a an outline button, the outline button would then trigger a modal confirmation, which is where you would use the error button. | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "flex" }}> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="contained" color="error">Error - Contained</Button> | ||
| </div> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="outlined" color="error">Error - Outlined</Button> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| - **isWaiting**: The `isWaiting` prop combines `disabled` with a CircularProgress animation. | ||
|
|
||
| ```jsx | ||
| <div style={{ display: "flex" }}> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="contained" isWaiting>isWaiting - Contained</Button> | ||
| </div> | ||
| <div style={{ marginRight: "1rem" }}> | ||
| <Button variant="outlined" isWaiting>isWaiting - Outlined</Button> | ||
| </div> | ||
| </div> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,24 @@ | ||
| import React from "react"; | ||
| import renderer from "react-test-renderer"; | ||
| import mockComponents from "../../tests/mockComponents"; | ||
| import { render } from "../../tests/index.js"; | ||
| import Button from "./Button"; | ||
|
|
||
| test("basic snapshot", () => { | ||
| const component = renderer.create(<Button components={mockComponents} title="title" className="a b">Submit</Button>); | ||
| test("basic snapshot - only default props", () => { | ||
| const { asFragment } = render(<Button className="myBtn">Submit</Button>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("error button snapshot", () => { | ||
| const { asFragment } = render(<Button className="myBtn" color="error" variant="contained">Delete</Button>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| test("error button snapshot", () => { | ||
| const { asFragment } = render(<Button className="myBtn" color="error" variant="outlined">Delete</Button>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("isWaiting button snapshot", () => { | ||
| const { asFragment, getByText } = render(<Button className="myBtn" isWaiting>Upload</Button>); | ||
| expect(getByText("Upload")).toBeDisabled(); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); |
Oops, something went wrong.