From 3f75b47363a28aca2007edf7c1333de9c38f7462 Mon Sep 17 00:00:00 2001 From: Jmeas Date: Fri, 8 Jun 2018 17:19:21 -0700 Subject: [PATCH] Update Menu and add docs --- docs/components.js | 8 ++++++++ docs/examples/menu.js | 16 ++++++++++++++++ docs/readmes/menu.md | 36 ++++++++++++++++++++++++++++++++++++ docs/static.config.js | 2 ++ src/menu/menu.css | 2 +- src/menu/menu.js | 16 ++++++++++++++-- stories/menu.stories.js | 2 +- 7 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 docs/examples/menu.js create mode 100644 docs/readmes/menu.md diff --git a/docs/components.js b/docs/components.js index 152e334b..65f6d56a 100644 --- a/docs/components.js +++ b/docs/components.js @@ -68,6 +68,14 @@ export default [ 'Elevations create a sense of depth by applying a drop shadow to an element.', component: 'src/components/component-doc', }, + { + name: 'Menu', + url: 'menu', + componentKey: 'menu', + description: + 'Menus represent a list of items. They can be used within selects or dropdowns.', + component: 'src/components/component-doc', + }, { name: 'Chips', url: 'chips', diff --git a/docs/examples/menu.js b/docs/examples/menu.js new file mode 100644 index 00000000..7ae1e32f --- /dev/null +++ b/docs/examples/menu.js @@ -0,0 +1,16 @@ +class MenuExample extends Component { + render() { + return ( + + Option one + Option two + Option three + Option four + Option five + Option six + + ); + } +} + +return ; diff --git a/docs/readmes/menu.md b/docs/readmes/menu.md new file mode 100644 index 00000000..65e58d66 --- /dev/null +++ b/docs/readmes/menu.md @@ -0,0 +1,36 @@ +## Usage + +```jsx +import { Menu } from 'materialish'; +import 'materialish/menu.css'; +``` + +# `Menu` + +## Props + +| Prop Name | Default Value | Required | Description | +| --------- | ------------- | -------- | ----------------------------------------------------------------- | +| className | | No | Additional class name(s) to add to the menu | +| ...rest | | No | Other props are placed on the underlying `ul` element of the menu | + +## CSS Variables + +| Variable | Default Value | Description | +| ---------------------- | ------------- | ----------------------------------------- | +| --mt-baseFontSize | 1rem | The size of text within the menu | +| --mt-fontFamily | 'Roboto' | The font family to use for text | +| --mt-menuItemMinHeight | | The minimum allowed height for menu items | + +# `Menu.Item` + +## Props + +| Prop Name | Default Value | Required | Description | +| --------- | ------------- | -------- | --------------------------------------------------------------------------- | +| className | | No | Additional class name(s) to add to the menu item | +| separator | false | No | Pass `true` to include a border-bottom to the menu item | +| selected | false | No | Whether or not this menu item is currently selected | +| ripple | true | No | Whether or not to display the "ripple" effect when the menu item is clicked | +| children | | No | The contents to render within the menu item | +| ...rest | | No | Other props are placed on the root element of the menu item | diff --git a/docs/static.config.js b/docs/static.config.js index 3787c163..e46a87b0 100644 --- a/docs/static.config.js +++ b/docs/static.config.js @@ -18,6 +18,7 @@ const readmes = { radio: fs.readFileSync('./readmes/radio.md', fsOptions), dialog: fs.readFileSync('./readmes/dialog.md', fsOptions), elevation: fs.readFileSync('./readmes/elevation.md', fsOptions), + menu: fs.readFileSync('./readmes/menu.md', fsOptions), 'action-chip': fs.readFileSync('./readmes/action-chip.md', fsOptions), 'filter-chip': fs.readFileSync('./readmes/filter-chip.md', fsOptions), 'choice-chip': fs.readFileSync('./readmes/choice-chip.md', fsOptions), @@ -33,6 +34,7 @@ const examples = { radio: fs.readFileSync('./examples/radio.js', fsOptions), dialog: fs.readFileSync('./examples/dialog.js', fsOptions), elevation: fs.readFileSync('./examples/elevation.js', fsOptions), + menu: fs.readFileSync('./examples/menu.js', fsOptions), 'action-chip': fs.readFileSync('./examples/action-chip.js', fsOptions), 'filter-chip': fs.readFileSync('./examples/filter-chip.js', fsOptions), 'choice-chip': fs.readFileSync('./examples/choice-chip.js', fsOptions), diff --git a/src/menu/menu.css b/src/menu/menu.css index fccbb222..60b4dc22 100644 --- a/src/menu/menu.css +++ b/src/menu/menu.css @@ -19,7 +19,7 @@ position: relative; box-sizing: border-box; display: block; - min-height: var(--itemHeight); + min-height: var(--mt-menuItemMinHeight); margin: 0; padding: 1.1em 1.7em; z-index: 0; diff --git a/src/menu/menu.js b/src/menu/menu.js index 79a712bd..2369cc47 100644 --- a/src/menu/menu.js +++ b/src/menu/menu.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Ripple from '../ripple/ripple'; import Elevation from '../elevation/elevation'; @@ -13,7 +14,11 @@ export default class Menu extends Component { } } -class MenuItem extends Component { +Menu.propTypes = { + className: PropTypes.string, +}; + +class Item extends Component { render() { const { className = '', @@ -53,4 +58,11 @@ class MenuItem extends Component { }; } -Menu.Item = MenuItem; +Item.propTypes = { + className: PropTypes.string, + separator: PropTypes.bool, + selected: PropTypes.bool, + ripple: PropTypes.bool, +}; + +Menu.Item = Item; diff --git a/stories/menu.stories.js b/stories/menu.stories.js index 488c5986..f6acdfb8 100644 --- a/stories/menu.stories.js +++ b/stories/menu.stories.js @@ -13,7 +13,7 @@ storiesOf('Menu', module).add('Regular', () => ( Option one Option two - Option three + Option three Option four Option five Option six