Skip to content

Feature: Flash Message Styles and Animation #417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HauwaAguillard wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Feature: Flash Message Styles and Animation #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
47b944d
Feat: Flash Message Styles
Aug 14, 2019
7fd1a49
Refactor: Travis Build Failure on Harmonium Settings File
Aug 14, 2019
e867ba3
Docs: Added props and vars for documentation
Aug 16, 2019
b800f46
Fix: Feedback from Blaze
Aug 19, 2019
d2b3258
Feature: Add Dismissible state to Flash component (#428)
Dacello Sep 9, 2019
460e0a0
Address feedback
Dacello Oct 2, 2019
f74ad19
Update from master
bryanjos Feb 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs-src/src/ExampleScope.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import DatePicker from 'harmonium/lib/DatePicker'
import Drawer from 'harmonium/lib/Drawer'
import Emptyable from 'harmonium/lib/Emptyable'
import ExpandingCol from 'harmonium/lib/ExpandingCol'
import Flash from 'harmonium/lib/Flash'
import FileInput from 'harmonium/lib/FileInput'
import FlexVideo from 'harmonium/lib/FlexVideo'
import Form from 'harmonium/lib/Form'
Expand Down Expand Up @@ -93,6 +94,7 @@ export default {
Emptyable,
ExpandingCol,
FileInput,
Flash,
FlexVideo,
Form,
forms,
Expand Down
42 changes: 42 additions & 0 deletions docs-src/src/examples/Flash.js.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<Row>
<Col>
<h3>Utility Flashes</h3>
</Col>
<Col>
<Flash>
<Row>
<Col> Default Flash </Col>
</Row>
</Flash>
<Flash success>
<Row>
<Col> Success Flash </Col>
</Row>
</Flash>
<Flash warning>
<Row>
<Col> Warning Flash </Col>
</Row>
</Flash>
<Flash alert>
<Row>
<Col> Alert Flash </Col>
</Row>
</Flash>
<Flash persistent>
<Row>
<Col> Persistent Flash </Col>
</Row>
</Flash>
<Flash fade>
<Row>
<Col> Flash that fades out after [X]s </Col>
</Row>
</Flash>
<Flash dismissible>
<Row>
<Col> Dismissible Flash </Col>
</Row>
</Flash>
</Col>
</Row>
3 changes: 3 additions & 0 deletions docs-src/src/layouts/Navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,9 @@ export default function Navigation() {
<Menu.Item>
<a href="/components/Callout/">Callout</a>
</Menu.Item>
<Menu.Item>
<a href="/components/Flash/">Flash</a>
</Menu.Item>
<Menu.Item>
<a href="/components/Modal/">Modal</a>
</Menu.Item>
Expand Down
48 changes: 48 additions & 0 deletions docs-src/src/pages/components/Flash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, {Component} from 'react'
import ExampleSection from '../../ExampleSection'
import scope from '../../ExampleScope'
import FlashVars from './FlashTables/FlashVars'
import FlashProps from './FlashTables/FlashProps'
import Headers from '../../Headers'
import Table from 'harmonium/lib/Table'
import Layout from '../../layouts/index.js'

const examples = {
Flash: require('raw-loader!../../examples/Flash.js.example'),
}

export default class FlashExamplePage extends Component {
render() {
return (
<Layout location={this.props.location}>
<div className="rev-Row rev-Row--collapse">
<Headers
title="Flash"
metaDescription={
'A Flash is a small message designed to highlight a message to the user.'
}
extraKeywords="Component, Buttons, Forms"
>
<p>
A Flash is a small message designed to highlight a message to the
user. Harmonium has a variety of semantic Flash components. The
type of Flash you use should be determined by the nature of the
message. Use primary for informational messages, success for
success messages, etc.
</p>
</Headers>
<ExampleSection
title="Examples"
examples={examples}
depth={1}
scope={scope}
/>
<h3>Variables:</h3>
<FlashVars />
<h3>Properties:</h3>
<FlashProps />
</div>
</Layout>
)
}
}
180 changes: 180 additions & 0 deletions docs-src/src/pages/components/FlashTables/FlashProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import React, {Component} from 'react'
import Table from 'harmonium/lib/Table'
import Layout from '../../../layouts/index.js'

export default function FlashProps() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Name</Table.Header>
<Table.Header>Type</Table.Header>
<Table.Header>Default</Table.Header>
<Table.Header>Description</Table.Header>
</Table.Row>
</Table.Head>
<Table.HeadStacked>
<Table.Data>Flash Props</Table.Data>
Copy link
Contributor

@blazebarsamian blazebarsamian Oct 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup for this should look like this:

<Table.HeadStacked>
  <Table.Row>
    <Table.Header>Flash Props</Table.Header>
  </Table.Row>
</Table.HeadStacked>

</Table.HeadStacked>
<Table.Body>
<Table.Row>
Copy link
Contributor

@blazebarsamian blazebarsamian Aug 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

delete this since we're removing the info prop

<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline> <code>Default</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for info flash. Adds the class <code>rev-Flash</code>
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline> <code>success</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for success flash. Adds the class{' '}
<code>rev-Flash--success</code>
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline> <code>warning</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for warning flash. Adds the class{' '}
<code>rev-Flash--warning</code>
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline> <code>alert</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for alert flash. Adds the class{' '}
<code>rev-Flash--alert</code>
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline>{' '}
<code>persistent</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for persistent flash. Adds the class{' '}
<code>rev-Flash--persistent</code>
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline> <code>fade</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for fade flash. Adds the class{' '}
<code>rev-Flash--fade</code> And fades out after 5secs
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline>{' '}
<code>dismissible</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> bool
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> False
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>
{' '}
Prop added for the dismissible flash. Adds the class{' '}
<code>rev-Flash--dismissible</code> And is hidden when clicked
</span>
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Name:</Table.HeaderInline>{' '}
<code>closeIcon</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Type:</Table.HeaderInline> node
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default:</Table.HeaderInline> undefined
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline>{' '}
<span>Optional custom close icon for the dismissible flash.</span>
</Table.Data>
</Table.Row>
</Table.Body>
</Table>
)
}
96 changes: 96 additions & 0 deletions docs-src/src/pages/components/FlashTables/FlashVars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, {Component} from 'react'
import Table from 'harmonium/lib/Table'
import Layout from '../../../layouts/index.js'

export default function FlashVars() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Variable Name</Table.Header>
<Table.Header>Default Value</Table.Header>
<Table.Header>Description</Table.Header>
</Table.Row>
</Table.Head>
<Table.HeadStacked>
<Table.Data>Flash Vars</Table.Data>
Copy link
Contributor

@blazebarsamian blazebarsamian Aug 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup for this should look like this:

<Table.HeadStacked>
  <Table.Row>
    <Table.Header>Flash Vars</Table.Header>
  </Table.Row>
</Table.HeadStacked>

</Table.HeadStacked>
<Table.Body>
<Table.Row>
<Table.Data>
<Table.HeaderInline>Var:</Table.HeaderInline>{' '}
<code>$flash-background</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default Value:</Table.HeaderInline>{' '}
<code>$primary</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline> Default
background color for Flash.
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Var:</Table.HeaderInline>{' '}
<code>$flash-border-size</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default Value:</Table.HeaderInline>{' '}
<code>1px</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline> Default border
size for Flash
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Var:</Table.HeaderInline>{' '}
<code>$flash-border-color</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default Value:</Table.HeaderInline>{' '}
<code>$divider-color-dark</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline> Default border
color for Flash.
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Var:</Table.HeaderInline>{' '}
<code>$flash-color</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default Value:</Table.HeaderInline>{' '}
<code>$white</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline> Default font
color for Flash.
</Table.Data>
</Table.Row>

<Table.Row>
<Table.Data>
<Table.HeaderInline>Var:</Table.HeaderInline>{' '}
<code>$flash-padding</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Default Value:</Table.HeaderInline>{' '}
<code>$global-vertical-space, $global-horizontal-space</code>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Description:</Table.HeaderInline> Default
padding for Flash.
</Table.Data>
</Table.Row>
</Table.Body>
</Table>
)
}
Loading