feat(presets): add preset and example for bottom left

README.md

@@ -81,6 +81,7 @@ export default withStyles(presetFixedBottomRight)(MyMaterialUiSpeedDial);
 - [Basic](https://smollweide.github.io/material-ui-speed-dial/#/example-basic)
 - [Outer rim button](https://smollweide.github.io/material-ui-speed-dial/#/example-outer-rim-button)
 - [Close onClick item](https://smollweide.github.io/material-ui-speed-dial/#/example-close-on-click-item)
+- [Bottom left](https://smollweide.github.io/material-ui-speed-dial/#/example-bottom-left)
 
 ## Shields
 [![coverage status](https://coveralls.io/repos/github/smollweide/material-ui-speed-dial/badge.svg?branch=master)](https://coveralls.io/github/smollweide/material-ui-speed-dial?branch=master)

src/gh-pages/App/App.js

@@ -8,6 +8,7 @@ import AppFrame from '../AppFrame/AppFrame';
 import PageHome from '../PageHome/PageHome';
 import PageGettingStarted from '../PageGettingStarted/PageGettingStarted';
 import PageExampleBasic from '../PageExampleBasic/PageExampleBasic';
+import PageExampleBottomLeft from '../PageExampleBottomLeft/PageExampleBottomLeft';
 import PageExampleOuterRimButton from '../PageExampleOuterRimButton/PageExampleOuterRimButton';
 import PageExampleCloseOnClickItem from '../PageExampleCloseOnClickItem/PageExampleCloseOnClickItem';
 
@@ -68,6 +69,7 @@ class App extends Component<AppPropsType, AppStateType> {
 						<Route exact component={PageExampleBasic} path="/example-basic" />
 						<Route exact component={PageExampleOuterRimButton} path="/example-outer-rim-button" />
 						<Route exact component={PageExampleCloseOnClickItem} path="/example-close-on-click-item" />
+						<Route exact component={PageExampleBottomLeft} path="/example-bottom-left" />
 					</AppFrame>
 				</AppWrapper>
 			</HashRouter>

src/gh-pages/AppFrame/AppDrawer/AppDrawer.js

@@ -37,6 +37,9 @@ const ListExamples = withRouter(({ history }: ContextRouterType): React$Element<
 		<ListItem button onClick={() => history.push('/example-close-on-click-item')}>
 			<ListItemText primary="Close onClick item" />
 		</ListItem>
+		<ListItem button onClick={() => history.push('/example-bottom-left')}>
+			<ListItemText primary="Bottom left" />
+		</ListItem>
 	</Fragment>
 ));
 ListExamples.displayName = 'ListExamples';

src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js

@@ -0,0 +1,93 @@
+// @flow
+/* eslint no-alert: 0*/
+import React from 'react';
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+import Avatar from 'material-ui/Avatar';
+
+import AddIcon from 'material-ui-icons/Add';
+import EditIcon from 'material-ui-icons/Edit';
+import LinkIcon from 'material-ui-icons/Link';
+
+import SpeedDial, { SpeedDialItem, SpeedDialLabel, SpeedDialBackdrop } from '../../speed-dial';
+import presetFixedBottomLeft from '../../presets/presetFixedBottomLeft';
+import TemplateExample from '../TemplateExample/TemplateExample';
+
+// types
+import type {
+	PresetType,
+	RenderPropsType,
+	RenderButtonPropsType,
+	RenderButtonIconPropsType,
+	RenderOpenedButtonPropsType,
+	RenderOpenedButtonIconPropsType,
+	RenderOuterRimButtonPropsType,
+	RenderOuterRimButtonIconPropsType,
+	RenderListPropsType,
+	RenderAvatarPropsType,
+	RenderLabelPropsType,
+	RenderBackdropPropsType,
+} from '../../../material-ui-speed-dial.js.flow';
+
+export type PageExampleBottomLeftPropsType = {
+	classes: PresetType,
+};
+
+const PageExampleBottomLeft = ({ classes }: PageExampleBottomLeftPropsType) => {
+	return (
+		<TemplateExample
+			title="Bottom left example"
+			hrefCode="https://github.com/smollweide/material-ui-speed-dial/blob/master/src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js"
+		>
+			<SpeedDial
+				preset={classes}
+				renderButton={(props: RenderButtonPropsType, propsIcon: RenderButtonIconPropsType) => (
+					<Button {...props} variant="fab" color="secondary" aria-label="add">
+						<AddIcon {...propsIcon} />
+					</Button>
+				)}
+				renderOpenedButton={(
+					props: RenderOpenedButtonPropsType,
+					propsIcon: RenderOpenedButtonIconPropsType
+				) => (
+					<Button {...props} onClick={() => alert('edit')} variant="fab" color="secondary" aria-label="edit">
+						<EditIcon {...propsIcon} />
+					</Button>
+				)}
+				renderOuterRimButton={(
+					props: RenderOuterRimButtonPropsType,
+					propsIcon: RenderOuterRimButtonIconPropsType
+				) => (
+					<Button {...props} mini variant="fab" color="primary" aria-label="add-link">
+						<LinkIcon {...propsIcon} />
+					</Button>
+				)}
+				renderList={(props: RenderListPropsType) => <ul {...props} />}
+				renderBackdrop={(props: RenderBackdropPropsType) => <SpeedDialBackdrop {...props} />}
+			>
+				{(props: RenderPropsType): Array<React$Element<*>> => [
+					<SpeedDialItem
+						{...props}
+						key="c"
+						renderAvatar={(propsAvatar: RenderAvatarPropsType) => <Avatar {...propsAvatar}>C</Avatar>}
+					>
+						{(propsLabel: RenderLabelPropsType) => <SpeedDialLabel {...propsLabel} text="Eric Hoffman" />}
+					</SpeedDialItem>,
+					<SpeedDialItem
+						{...props}
+						key="b"
+						renderAvatar={(propsAvatar: RenderAvatarPropsType) => <Avatar {...propsAvatar}>B</Avatar>}
+					>
+						{(propsLabel: RenderLabelPropsType) => <SpeedDialLabel {...propsLabel} text="Grace Ng" />}
+					</SpeedDialItem>,
+					<SpeedDialItem {...{ ...props, className: `${props.className} ${classes.firstItem}` }} key="a">
+						{(propsLabel: RenderLabelPropsType) => <SpeedDialLabel {...propsLabel} text="Edit" />}
+					</SpeedDialItem>,
+				]}
+			</SpeedDial>
+		</TemplateExample>
+	);
+};
+PageExampleBottomLeft.displayName = 'PageExampleBottomLeft';
+
+export default withStyles(presetFixedBottomLeft)(PageExampleBottomLeft);

src/presets/presetFixedBottomLeft.js

@@ -0,0 +1,52 @@
+// @flow
+
+import type { PresetRawType } from '../../material-ui-speed-dial.js.flow';
+import type { ThemeType } from '../types/styles';
+
+const styles = (theme: ThemeType): PresetRawType => {
+	return {
+		root: {
+			position: 'fixed',
+			bottom: 0,
+			left: 0,
+			zIndex: theme.zIndex.appBar + 2,
+		},
+		button: {
+			position: 'absolute',
+			bottom: theme.spacing.unit * 2,
+			left: theme.spacing.unit * 2,
+		},
+		buttonOuterRim: {
+			position: 'absolute',
+			bottom: theme.spacing.unit * 10.8,
+			left: theme.spacing.unit * 3,
+		},
+		list: {
+			bottom: theme.spacing.unit * 2.5,
+			left: 0,
+		},
+		item: {
+			textAlign: 'left',
+		},
+		firstItem: {
+			paddingTop: theme.spacing.unit,
+		},
+		avatar: {
+			top: theme.spacing.unit * 0.7,
+			left: theme.spacing.unit * 3,
+		},
+		label: {
+			paddingTop: theme.spacing.unit * 0.5,
+			paddingRight: theme.spacing.unit,
+			paddingBottom: theme.spacing.unit * 0.5,
+			paddingLeft: theme.spacing.unit,
+			marginLeft: theme.spacing.unit * 9,
+		},
+		backdrop: {
+			bottom: 0,
+			left: 0,
+		},
+	};
+};
+
+export default styles;