diff --git a/src/atoms/Menu.js b/src/atoms/Menu.js index d42897105870f2566f95343d9f0b79479bd3cdca..3029ee3e20eefdacf327e293a0f49f3e2a188377 100644 --- a/src/atoms/Menu.js +++ b/src/atoms/Menu.js @@ -44,38 +44,40 @@ class Menu extends React.Component { <div className={classnames(classes.root, { [classes.open]: open })}> - <div className={classes.openerContainer}> - {label && ( - <span className={classes.label}>{label}</span> - )} + {label && ( + <span className={classes.label}>{label}</span> + )} - <button - type="button" - className={classes.opener} - onClick={this.toggleMenu}> - {selected ? ( - <span>{this.optionLabel(selected)}</span> - ) : ( - <span className={classes.placeholder}>{placeholder}</span> - )} - <span className={classes.arrow}>â–¼</span> - </button> - </div> + <div className={classes.main}> + <div className={classes.openerContainer}> + <button + type="button" + className={classes.opener} + onClick={this.toggleMenu}> + {selected ? ( + <span>{this.optionLabel(selected)}</span> + ) : ( + <span className={classes.placeholder}>{placeholder}</span> + )} + <span className={classes.arrow}>â–¼</span> + </button> + </div> - <div className={classes.optionsContainer}> - {open && ( - <div className={classes.options}> - {options.map(option => ( - <div - key={option.value} - className={classnames(classes.option, { - [classes.active]: option.value === selected - })} - onClick={() => this.handleSelect(option.value)} - >{option.label || option.value}</div> - ))} - </div> - )} + <div className={classes.optionsContainer}> + {open && ( + <div className={classes.options}> + {options.map(option => ( + <div + key={option.value} + className={classnames(classes.option, { + [classes.active]: option.value === selected + })} + onClick={() => this.handleSelect(option.value)} + >{option.label || option.value}</div> + ))} + </div> + )} + </div> </div> </div> ) diff --git a/src/atoms/Menu.local.scss b/src/atoms/Menu.local.scss index beb8302e84d6362d669e5b1e7c681c18913b0bbe..255065c594f240ca3720fb42a6dce6d4f025fc9b 100644 --- a/src/atoms/Menu.local.scss +++ b/src/atoms/Menu.local.scss @@ -1,16 +1,14 @@ .root { display: flex; align-items: center; - position: relative; } -.root button { - font-family: var(--font-author); +.label { + margin-right: 0.5em; } -.openerContainer { - display: flex; - align-items: center; +.main { + position: relative; } .optionsContainer { @@ -23,6 +21,7 @@ cursor: pointer; background: transparent; font-size: inherit; + font-family: var(--font-author); display: flex; align-items: center; border-left: 2px solid transparent; @@ -61,7 +60,7 @@ .options { position: absolute; padding-top: 0.5em; - top: 0.6em; + top: 0; left: 0; min-width: 10em; background-color: white; @@ -69,6 +68,7 @@ border-bottom: 2px solid var(--color-primary); // columns: 2 auto; opacity: 0; + z-index: 10; } .open .options { diff --git a/src/atoms/Menu.md b/src/atoms/Menu.md index b476d01d1bbc8b63c54743205f63ca0d0bf2c506..0b26206190ff90dd143dce60b5a8551f330da004 100644 --- a/src/atoms/Menu.md +++ b/src/atoms/Menu.md @@ -26,3 +26,19 @@ const options = [ value="foo" onChange={value => console.log(value)}/> ``` + +A menu can have a label + +```js +const options = [ + { value: 'foo', label: 'Foo' }, + { value: 'bar', label: 'Bar' }, + { value: 'baz', label: 'Baz' } +]; + +<Menu + options={options} + label="Title" + value="foo" + onChange={value => console.log(value)}/> +```