filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

revert button full changes

Browse Source
This commit is contained in:
Martina 2020-08-02 12:05:57 -07:00
parent 1ae78fcdc6
commit e87f9efb77
17 changed files with 151 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/sidebars/SidebarAddFileToBucket.js
View File

@ -82,24 +82,22 @@ export default class SidebarAddFileToBucket extends React.Component {
</System.P> </System.P>
) : null} ) : null}
<System.ButtonPrimary <System.ButtonPrimaryFull
full
type="label" type="label"
htmlFor="file" htmlFor="file"
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
loading={this.props.fileLoading} loading={this.props.fileLoading}
> >
Add file Add file
</System.ButtonPrimary> </System.ButtonPrimaryFull>
{!this.props.fileLoading ? ( {!this.props.fileLoading ? (
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this.props.onCancel} onClick={this.props.onCancel}
> >
Cancel Cancel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
) : null} ) : null}
</React.Fragment> </React.Fragment>
); );

5
components/sidebars/SidebarCreatePaymentChannel.js
View File

@ -87,13 +87,12 @@ export default class SidebarCreatePaymentChannel extends React.Component {
<div css={STYLES_SUBTEXT}>Total Filecoin</div> <div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div> </div>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
> >
Send Send
</System.ButtonPrimary> </System.ButtonPrimaryFull>
</React.Fragment> </React.Fragment>
); );
} }

10
components/sidebars/SidebarCreateSlate.js
View File

@ -64,22 +64,20 @@ export default class SidebarCreateSlate extends React.Component {
{this.props.viewer.username}/{Strings.createSlug(this.state.name)} {this.props.viewer.username}/{Strings.createSlug(this.state.name)}
</System.P> </System.P>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
loading={this.state.loading} loading={this.state.loading}
> >
Create {this.state.name} Create {this.state.name}
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this._handleCancel} onClick={this._handleCancel}
> >
Cancel Cancel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
</div> </div>
); );
} }

10
components/sidebars/SidebarCreateWalletAddress.js
View File

@ -89,22 +89,20 @@ export default class SidebarCreateWalletAddress extends React.Component {
Make this wallet the default Make this wallet the default
</System.CheckBox> </System.CheckBox>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
loading={this.state.loading} loading={this.state.loading}
> >
Create {this.state.name} Create {this.state.name}
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this._handleCancel} onClick={this._handleCancel}
> >
Cancel Cancel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
</div> </div>
); );
} }

10
components/sidebars/SidebarDeleteWalletAddress.js
View File

@ -27,21 +27,19 @@ export default class SidebarDeleteWalletAddress extends React.Component {
Are you sure you want to delete the selected wallet? Are you sure you want to delete the selected wallet?
</System.P> </System.P>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
> >
Delete Delete
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this._handleCancel} onClick={this._handleCancel}
> >
Cancel Cancel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
</div> </div>
); );
} }

10
components/sidebars/SidebarFileStorageDeal.js
View File

@ -138,23 +138,21 @@ export default class SidebarFileStorageDeal extends React.Component {
options={this.props.viewer.addresses} options={this.props.viewer.addresses}
/> />
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
loading={this.props.sidebarLoading} loading={this.props.sidebarLoading}
> >
Make storage deal Make storage deal
</System.ButtonPrimary> </System.ButtonPrimaryFull>
{!this.props.sidebarLoading ? ( {!this.props.sidebarLoading ? (
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this._handleCancel} onClick={this._handleCancel}
> >
Cancel deal Cancel deal
</System.ButtonSecondary> </System.ButtonSecondaryFull>
) : null} ) : null}
</React.Fragment> </React.Fragment>
); );

10
components/sidebars/SidebarWalletSendFunds.js
View File

@ -116,22 +116,20 @@ export default class SidebarWalletSendFunds extends React.Component {
<div css={STYLES_SUBTEXT}>Total Filecoin</div> <div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div> </div>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
loading={this.state.loading} loading={this.state.loading}
> >
Send Send
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<System.ButtonSecondary <System.ButtonSecondaryFull
full
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
onClick={this._handleCancel} onClick={this._handleCancel}
> >
Cancel Cancel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
</React.Fragment> </React.Fragment>
); );
} }

124
components/system/components/Buttons.js
View File

@ -59,58 +59,7 @@ const STYLES_BUTTON_PRIMARY = css`
} }
`; `;
const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
color: ${Constants.system.white};
:hover {
background-color: #003fe3;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
outline: 0;
border: 0;
}
`;
export const ButtonPrimary = (props) => { export const ButtonPrimary = (props) => {
if (props.full) {
if (props.loading) {
return (
<button css={STYLES_BUTTON_PRIMARY_FULL} style={props.style}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_PRIMARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
type={props.label}
htmlFor={props.htmlFor}
/>
);
}
return (
<button
css={STYLES_BUTTON_PRIMARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
/>
);
}
if (props.loading) { if (props.loading) {
return ( return (
<button css={STYLES_BUTTON_PRIMARY} style={props.style}> <button css={STYLES_BUTTON_PRIMARY} style={props.style}>
@ -142,6 +91,25 @@ export const ButtonPrimary = (props) => {
); );
}; };
const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
color: ${Constants.system.white};
:hover {
background-color: #003fe3;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
outline: 0;
border: 0;
}
`;
export const ButtonPrimaryFull = (props) => { export const ButtonPrimaryFull = (props) => {
if (props.loading) { if (props.loading) {
return ( return (
@ -193,6 +161,14 @@ const STYLES_BUTTON_SECONDARY = css`
} }
`; `;
export const ButtonSecondary = (props) => {
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
}
return <button css={STYLES_BUTTON_SECONDARY} {...props} />;
};
const STYLES_BUTTON_SECONDARY_FULL = css` const STYLES_BUTTON_SECONDARY_FULL = css`
${STYLES_BUTTON_FULL} ${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
@ -212,39 +188,6 @@ const STYLES_BUTTON_SECONDARY_FULL = css`
} }
`; `;
export const ButtonSecondary = (props) => {
if (props.full) {
if (props.loading) {
return (
<button css={STYLES_BUTTON_SECONDARY_FULL} style={props.style}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_SECONDARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
type={props.label}
htmlFor={props.htmlFor}
/>
);
}
return <button css={STYLES_BUTTON_SECONDARY_FULL} {...props} />;
}
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
}
return <button css={STYLES_BUTTON_SECONDARY} {...props} />;
};
export const ButtonSecondaryFull = (props) => { export const ButtonSecondaryFull = (props) => {
if (props.loading) { if (props.loading) {
return ( return (
@ -282,6 +225,10 @@ const STYLES_BUTTON_DISABLED = css`
} }
`; `;
export const ButtonDisabled = (props) => {
return <button css={STYLES_BUTTON_DISABLED} {...props} />;
};
const STYLES_BUTTON_DISABLED_FULL = css` const STYLES_BUTTON_DISABLED_FULL = css`
${STYLES_BUTTON_FULL} ${STYLES_BUTTON_FULL}
cursor: not-allowed; cursor: not-allowed;
@ -294,15 +241,6 @@ const STYLES_BUTTON_DISABLED_FULL = css`
} }
`; `;
export const ButtonDisabled = (props) => {
return (
<button
css={props.full ? STYLES_BUTTON_DISABLED_FULL : STYLES_BUTTON_DISABLED}
{...props}
/>
);
};
export const ButtonDisabledFull = (props) => { export const ButtonDisabledFull = (props) => {
return <button css={STYLES_BUTTON_DISABLED_FULL} {...props} />; return <button css={STYLES_BUTTON_DISABLED_FULL} {...props} />;
}; };

13
components/system/modules/CreateFilecoinAddress.js
View File

@ -2,9 +2,13 @@ import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import { Input } from "~/components/system/components/Input"; import { Input } from "~/components/system/components/Input";
import { SelectMenu } from "~/components/system/components/SelectMenus"; import {
SelectMenu,
} from "~/components/system/components/SelectMenus";
import { CheckBox } from "~/components/system/components/CheckBox"; import { CheckBox } from "~/components/system/components/CheckBox";
import { ButtonPrimary } from "~/components/system/components/Buttons"; import {
ButtonPrimaryFull,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const SELECT_MENU_OPTIONS = [ const SELECT_MENU_OPTIONS = [
@ -81,13 +85,12 @@ export class CreateFilecoinAddress extends React.Component {
Make this wallet the default Make this wallet the default
</CheckBox> </CheckBox>
<ButtonPrimary <ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
> >
Create address Create address
</ButtonPrimary> </ButtonPrimaryFull>
</div> </div>
); );
} }

13
components/system/modules/CreateFilecoinStorageDeal.js
View File

@ -1,8 +1,8 @@
import * as React from "react"; import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import { import {
ButtonPrimary, ButtonPrimaryFull,
ButtonSecondary, ButtonSecondaryFull,
} from "~/components/system/components/Buttons"; } from "~/components/system/components/Buttons";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
@ -96,17 +96,16 @@ export class CreateFilecoinStorageDeal extends React.Component {
</div> </div>
</div> </div>
) : null} ) : null}
<ButtonSecondary full type="label" htmlFor="file"> <ButtonSecondaryFull type="label" htmlFor="file">
Add file Add file
</ButtonSecondary> </ButtonSecondaryFull>
{this.state.file ? ( {this.state.file ? (
<ButtonPrimary <ButtonPrimaryFull
full
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
> >
Make storage deal Make storage deal
</ButtonPrimary> </ButtonPrimaryFull>
) : null} ) : null}
</div> </div>
); );

6
components/system/modules/CreateToken.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { ButtonPrimary } from "~/components/system/components/Buttons"; import { ButtonPrimaryFull } from "~/components/system/components/Buttons";
import Odometer from "~/vendor/odometer"; import Odometer from "~/vendor/odometer";
@ -81,9 +81,9 @@ export const CreateToken = (props) => {
</span> </span>
</div> </div>
<div css={STYLES_CREATE_TOKEN_BOTTOM}> <div css={STYLES_CREATE_TOKEN_BOTTOM}>
<ButtonPrimary full onClick={props.onClick}> <ButtonPrimaryFull onClick={props.onClick}>
Generate new Powergate token Generate new Powergate token
</ButtonPrimary> </ButtonPrimaryFull>
</div> </div>
</div> </div>
); );

9
components/system/modules/SendAddressFilecoin.js
View File

@ -2,7 +2,9 @@ import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import { Input } from "~/components/system/components/Input"; import { Input } from "~/components/system/components/Input";
import { ButtonPrimary } from "~/components/system/components/Buttons"; import {
ButtonPrimaryFull,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_CONTAINER = css` const STYLES_CONTAINER = css`
@ -65,13 +67,12 @@ export class SendAddressFilecoin extends React.Component {
onChange={this._handleChange} onChange={this._handleChange}
/> />
<ButtonPrimary <ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={this._handleSubmit} onClick={this._handleSubmit}
> >
Send {this.state.amount} FIL Send {this.state.amount} FIL
</ButtonPrimary> </ButtonPrimaryFull>
</div> </div>
); );
} }

26
pages/system/buttons.js
View File

@ -35,8 +35,11 @@ export default class SystemPageButtons extends React.Component {
{`import * as React from "react"; {`import * as React from "react";
import { import {
ButtonPrimary, ButtonPrimary,
ButtonPrimaryFull,
ButtonSecondary, ButtonSecondary,
ButtonSecondaryFull,
ButtonDisabled, ButtonDisabled,
ButtonDisabledFull,
} from "slate-react-system";`} } from "slate-react-system";`}
</CodeBlock> </CodeBlock>
<br /> <br />
@ -45,7 +48,7 @@ import {
<hr /> <hr />
<br /> <br />
<System.P> <System.P>
There are three variations of the button component. There are three variations of the regular width button component.
<br /> <br />
Primary, Secondary and Disabled. Primary, Secondary and Disabled.
</System.P> </System.P>
@ -80,33 +83,38 @@ class ExampleDisabled extends React.Component {
<System.H2>Full width</System.H2> <System.H2>Full width</System.H2>
<hr /> <hr />
<br /> <br />
<System.P>Each of the button styles has a full width option.</System.P> <System.P>
There are three variations of the full width button component. <br />
Primary, Secondary and Disabled.
</System.P>
<br /> <br />
<System.ButtonPrimary full>Primary Button Full</System.ButtonPrimary> <System.ButtonPrimaryFull>Primary Button Full</System.ButtonPrimaryFull>
<br /> <br />
<System.ButtonSecondary full> <System.ButtonSecondaryFull>
Secondary Button Full Secondary Button Full
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonDisabled full>Disabled Button Full</System.ButtonDisabled> <System.ButtonDisabledFull>
Disabled Button Full
</System.ButtonDisabledFull>
<br /> <br />
<br /> <br />
<CodeBlock> <CodeBlock>
{`class ExamplePrimaryFull extends React.Component { {`class ExamplePrimaryFull extends React.Component {
render() { render() {
return <ButtonPrimary full>Primary Button Full</ButtonPrimary>; return <ButtonPrimaryFull>Primary Button Full</ButtonPrimaryFull>;
} }
} }
class ExampleSecondaryFull extends React.Component { class ExampleSecondaryFull extends React.Component {
render() { render() {
return <ButtonSecondary full>Secondary Button Full</ButtonSecondary>; return <ButtonSecondaryFull>Secondary Button Full</ButtonSecondaryFull>;
} }
} }
class ExampleDisabledFull extends React.Component { class ExampleDisabledFull extends React.Component {
render() { render() {
return <ButtonDisabled full>Disabled Button Full</ButtonDisabled>; return <ButtonDisabledFull>Disabled Button Full</ButtonDisabledFull>;
} }
}`} }`}
</CodeBlock> </CodeBlock>

13
pages/system/carousel.js
View File

@ -105,9 +105,9 @@ import {
<System.H2>Carousel</System.H2> <System.H2>Carousel</System.H2>
<hr /> <hr />
<br /> <br />
<System.ButtonSecondary full onClick={this._handleOpen}> <System.ButtonSecondaryFull onClick={this._handleOpen}>
Open carousel Open carousel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<CodeBlock> <CodeBlock>
{`class ExampleOne extends React.Component { {`class ExampleOne extends React.Component {
@ -120,29 +120,34 @@ import {
maxWidth: "80%", maxWidth: "80%",
display: "block" display: "block"
}; };
const slides = [ const slides = [
<img key="i-1" src="/static/social.png" style={style} />, <img key="i-1" src="/static/social.png" style={style} />,
<img key="i-2" src="/static/social.jpg" style={style} /> <img key="i-2" src="/static/social.jpg" style={style} />
]; ];
System.dispatchCustomEvent({ System.dispatchCustomEvent({
name: "slate-global-create-carousel", name: "slate-global-create-carousel",
detail: { slides }, detail: { slides },
}); });
} }
_handleOpen = () => { _handleOpen = () => {
dispatchCustomEvent({ dispatchCustomEvent({
name: "slate-global-open-carousel" name: "slate-global-open-carousel"
detail: { index: 0 } detail: { index: 0 }
}); });
}; };
_handleClose = () => { _handleClose = () => {
dispatchCustomEvent({ name: "slate-global-close-carousel" }); dispatchCustomEvent({ name: "slate-global-close-carousel" });
}; };
render() { render() {
return ( return (
<System.ButtonSecondary full onClick={this._handleOpen}> <System.ButtonSecondaryFull onClick={this._handleOpen}>
Open Carousel Open Carousel
</System.ButtonSecondary> </System.ButtonSecondaryFull>
); );
} }
}`} }`}

10
pages/system/modals.js
View File

@ -84,8 +84,7 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Modal</System.H2> <System.H2>Modal</System.H2>
<hr /> <hr />
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
modal: ( modal: (
@ -109,7 +108,7 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for modal popup Click for modal popup
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.P> <System.P>
While the Modal component is always present, a modal will only appear While the Modal component is always present, a modal will only appear
@ -146,12 +145,11 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
</div> </div>
); );
return ( return (
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => this._handleCreate({ modal: modalContent })} onClick={() => this._handleCreate({ modal: modalContent })}
> >
Click for modal popup Click for modal popup
</ButtonSecondary> </ButtonSecondaryFull>
); );
} }
}`} }`}

94
pages/system/notifications.js
View File

@ -87,8 +87,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification</System.H2> <System.H2>Notification</System.H2>
<hr /> <hr />
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -97,10 +96,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for notification Click for notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -110,11 +108,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for dark style notification Click for dark style notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonPrimary full onClick={this._handleDelete}> <System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<br /> <br />
<System.P> <System.P>
A notification will only appear once you trigger it by creating a A notification will only appear once you trigger it by creating a
@ -148,8 +146,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -158,10 +155,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for notification Click for notification
</ButtonSecondary> </ButtonSecondaryFull>
<br /> <br />
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -171,11 +167,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for dark style notification Click for dark style notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}> <ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</ButtonPrimary> </ButtonPrimaryFull>
</React.Fragment> </React.Fragment>
); );
} }
@ -187,8 +183,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification with timeout</System.H2> <System.H2>Notification with timeout</System.H2>
<hr /> <hr />
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -198,11 +193,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for disappearing notification Click for disappearing notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonPrimary full onClick={this._handleDelete}> <System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<br /> <br />
<System.P> <System.P>
You can declare the Notification component with a{" "} You can declare the Notification component with a{" "}
@ -224,8 +219,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -235,11 +229,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for disappearing notification Click for disappearing notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}> <ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</ButtonPrimary> </ButtonPrimaryFull>
</React.Fragment> </React.Fragment>
); );
} }
@ -251,8 +245,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification with status</System.H2> <System.H2>Notification with status</System.H2>
<hr /> <hr />
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -262,10 +255,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for info style notification Click for info style notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -275,10 +267,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for success style notification Click for success style notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -288,10 +279,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for warning style notification Click for warning style notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonSecondary <System.ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -301,11 +291,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for error style notification Click for error style notification
</System.ButtonSecondary> </System.ButtonSecondaryFull>
<br /> <br />
<System.ButtonPrimary full onClick={this._handleDelete}> <System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</System.ButtonPrimary> </System.ButtonPrimaryFull>
<br /> <br />
<br /> <br />
<System.P> <System.P>
@ -333,8 +323,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -344,10 +333,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for info style notification Click for info style notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -357,10 +345,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for success style notification Click for success style notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -370,10 +357,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for warning style notification Click for warning style notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonSecondary <ButtonSecondaryFull
full
onClick={() => onClick={() =>
this._handleCreate({ this._handleCreate({
id: this.state.count, id: this.state.count,
@ -383,11 +369,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
} }
> >
Click for error style notification Click for error style notification
</ButtonSecondary> </ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}> <ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications Click to clear notifications
</ButtonPrimary> </ButtonPrimaryFull>
</React.Fragment> </React.Fragment>
); );
} }

5
scenes/SceneSignIn.js
View File

@ -150,14 +150,13 @@ export default class SceneSignIn extends React.Component {
Password should be at least 8 characters Password should be at least 8 characters
</div> </div>
<System.ButtonPrimary <System.ButtonPrimaryFull
full
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
onClick={!this.state.loading ? this._handleSubmit : () => {}} onClick={!this.state.loading ? this._handleSubmit : () => {}}
loading={this.state.loading} loading={this.state.loading}
> >
Sign in Sign in
</System.ButtonPrimary> </System.ButtonPrimaryFull>
</div> </div>
); );