Skip to content

Issue#14: refactor action bar #40

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

Merged
merged 1 commit into from
Oct 31, 2018
Merged

Issue#14: refactor action bar #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
244 changes: 192 additions & 52 deletions src/ActionBar/ActionBar.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,91 @@
import React from 'react';
import { ActionBar } from '../';
import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions } from '../';
import { Button, Popover, Menu, MenuList, MenuItem } from '../';
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';

export const ActionBarComponent = () => {
const titleActionBarCode = `<ActionBar title="Page Title"/>`;
const actionBarBackBtnCode = `<ActionBar>
<ActionBarBack />
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Button type="primary" size="l">
Button
</Button>
<Button type="main" size="l">
Button
</Button>
</ActionBarActions>
</ActionBar>`;

const actionBarNoBackBtnCode = `<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Button type="primary" size="l">
Button
</Button>
<Button type="main" size="l">
Button
</Button>
</ActionBarActions>
</ActionBar>`;

const mainActionsActionBarCode = `<ActionBar title="Page Title" hasActions={true}>
<Button type="secondary">Cancel</Button>
<Button type="main">Save</Button>
const actionBarContextualCode = `<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>`;

const severalActionsActionBarCode = `<ActionBar title="Page Title" hasActions={true}>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
const mobileActionBarCode = `<ActionBar mobile={true}>
<ActionBarBack />
<ActionBarHeader title={'Action Bar with description and back button'} />
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>`;

const mobileCustomWidthActionBarCode = `<ActionBar mobile={true} width="768px">
<ActionBarBack />
<ActionBarHeader title={'Action Bar with description and back button'} />
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>`;

return (
Expand All @@ -41,40 +102,58 @@ export const ActionBarComponent = () => {
<Properties
type="Inputs"
properties={[
{ name: 'title', description: 'String (required) - Title of the action bar' },
{ name: 'mobile', description: 'bool - set to "true" for mobile view of the Action Bar.' },
{
name: 'width',
description: 'string - the width of the Action Bar in mobile view. The default is 319px.'
},
{
name: 'title',
description: 'string - the title of the action bar. Specified in ActionBarHeader.'
},
{
name: 'hasActions',
description: "Bool - when set to 'true' displays actions within the Action Bar."
name: 'description',
description: 'string - Action bar description. Specified in ActionBarHeader.'
}
]}
/>

<Separator />

<h2>Title</h2>
<Description>
The page title is displayed prominently in the Action Bar. This is helpful for the user to know exactly
where they are.
</Description>
<h2>Action bar with back button, description and action buttons.</h2>
<DocsTile>
<ActionBar title="Page Title" />
<ActionBar>
<ActionBarBack />
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Button type="primary" size="l">
Button
</Button>
<Button type="main" size="l">
Button
</Button>
</ActionBarActions>
</ActionBar>
</DocsTile>
<DocsText>{titleActionBarCode}</DocsText>
<DocsText>{actionBarBackBtnCode}</DocsText>

<Separator />

<h2>Main Actions</h2>
<Description>
Display main actions within the Action bar. This allows for users to find important page actions in a
consistent area no matter what page they are on within the application.
</Description>
<h2>Action bar with no Back button</h2>
<DocsTile>
<ActionBar title="Page Title" hasActions={true}>
<Button type="secondary">Cancel</Button>
<Button type="main">Save</Button>
<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Button type="primary" size="l">
Button
</Button>
<Button type="main" size="l">
Button
</Button>
</ActionBarActions>
</ActionBar>
</DocsTile>
<DocsText>{mainActionsActionBarCode}</DocsText>
<DocsText>{actionBarNoBackBtnCode}</DocsText>

<Separator />

Expand All @@ -85,23 +164,84 @@ export const ActionBarComponent = () => {
more than 3-4 actions. This also works well for a responsive/adaptive application.
</Description>
<DocsTile>
<ActionBar title="Page Title" hasActions={true}>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>
</DocsTile>
<DocsText>{actionBarContextualCode}</DocsText>

<Separator />

<h2>Action bar mobile view</h2>
<DocsTile>
<ActionBar mobile={true}>
<ActionBarBack />
<ActionBarHeader
title={'Action Bar with description and back button'}
description={'Action Bar Description'}
/>
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>
</DocsTile>
<DocsText>{mobileActionBarCode}</DocsText>

<Separator />

<h2>Action bar mobile view with custom width</h2>
<DocsTile>
<ActionBar mobile={true} width="768px">
<ActionBarBack />
<ActionBarHeader
title={'Action Bar with description and back button'}
description={'Action Bar Description'}
/>
<ActionBarActions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</ActionBarActions>
</ActionBar>
</DocsTile>
<DocsText>{severalActionsActionBarCode}</DocsText>
<DocsText>{mobileCustomWidthActionBarCode}</DocsText>

<Separator />
</div>
Expand Down
61 changes: 41 additions & 20 deletions src/ActionBar/ActionBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,50 @@
import React from 'react';
import PropTypes from 'prop-types';

export const ActionBar = (props) => {
const { title, hasActions, children } = props;
export const ActionBar = props => {
const { mobile, width, children } = props;

return (
<div className="fd-action-bar">
<div className="fd-action-bar__header">
<h1 className="fd-action-bar__title">
{title}
</h1>
</div>
{
hasActions ? (
<div className="fd-action-bar__actions">
{ children }
</div>
) : null
}
</div>
<React.Fragment>
{mobile ? (
<div style={{ width: width ? width : '319px' }}>
<div className="fd-action-bar">{children}</div>
</div>
) : (
<div className="fd-action-bar">{children}</div>
)}
</React.Fragment>
);
}
};

ActionBar.propTypes = {
title: PropTypes.string.isRequired,
hasActions: PropTypes.bool
}
mobile: PropTypes.bool
};

export const ActionBarBack = props => {
return (
<div class="fd-action-bar__back">
<button class=" fd-button--secondary fd-button--compact sap-icon--nav-back" />
</div>
);
};

export const ActionBarHeader = props => {
const { title, description } = props;
return (
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">{title}</h1>
<p class="fd-action-bar__description">{description} </p>
</div>
);
};

ActionBarHeader.propTypes = {
title: PropTypes.string,
description: PropTypes.string
};

export const ActionBarActions = props => {
const { children } = props;
return <div class="fd-action-bar__actions">{children}</div>;
};
10 changes: 9 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { ActionBar } from '../src/ActionBar/ActionBar';
import {
ActionBar,
ActionBarBack,
ActionBarHeader,
ActionBarActions
} from '../src/ActionBar/ActionBar';
import { Alert } from '../src/Alert/Alert';
import { Badge, Label, Status } from '../src/Badge/Badge';
import { Breadcrumb, BreadcrumbItem } from '../src/Breadcrumb/Breadcrumb';
Expand Down Expand Up @@ -69,6 +74,9 @@ export {
Properties,
Playground,
ActionBar,
ActionBarBack,
ActionBarHeader,
ActionBarActions,
Alert,
Badge,
Label,
Expand Down