feature(select): add box attribute to select

src/Select/index.js

@@ -6,9 +6,22 @@ import { MenuRoot, MenuItems } from '../Menu';
 import { simpleTag, withMDC } from '../Base';
 import type { SimpleTagPropsT } from '../Base';
 
-export const SelectRoot = simpleTag({
+type SelectRootPropsT = {
+  /** Makes the Select have a visiual box. */
+  box?: boolean
+} & SimpleTagPropsT;
+
+export const SelectRoot: React.ComponentType<
+  SelectRootPropsT
+> = simpleTag({
   displayName: 'SelectRoot',
-  classNames: 'mdc-select',
+  classNames: props => [
+    'mdc-select',
+    {
+      'mdc-select--box': props.box
+    }
+  ],
+  consumeProps: ['box'],
   defaultProps: {
     role: 'listbox'
   }
@@ -68,7 +81,8 @@ type SelectPropsT = {
   placeholder?: string,
   /** Disables the form control. */
   disabled?: boolean
-} & SimpleTagPropsT;
+} & SelectRootPropsT & 
+  SimpleTagPropsT;
 
 /**
  * Get the display value for a select from its formatted options
@@ -127,7 +141,8 @@ export const Select = withMDC({
     options: undefined,
     label: undefined,
     placeholder: undefined,
-    disabled: false
+    disabled: false,
+    box: undefined
   },
   onMount: (props, api) => {
     window.requestAnimationFrame(() => {
@@ -190,6 +205,7 @@ export const Select = withMDC({
         value,
         label = '',
         options = [],
+        box,
         mdcElementRef,
         ...rest
       } = this.props;
@@ -198,7 +214,7 @@ export const Select = withMDC({
       const displayValue = getDisplayValue(value, selectOptions, placeholder);
 
       return (
-        <SelectRoot elementRef={mdcElementRef} {...rest}>
+        <SelectRoot box={box} elementRef={mdcElementRef} {...rest}>
           <SelectSurface tabIndex={tabIndex}>
             <SelectLabel placeholder={placeholder} value={value}>
               {label}

src/Select/select.md

@@ -52,8 +52,9 @@ import { Select } from 'rmwc/Select';
   options={{'1': 'Cookies', '2': 'Pizza', '3': 'Icecream'}}
 />
 
-{/* a simple array of options, value will be the same as label */}
+{/* a simple array of options with box styling, value will be the same as label */}
 <Select
+  box
   label="Simple Array"
   placeholder="-- Select One --"
   options={['Cookies', 'Pizza', 'Icecream']}

src/Select/select.spec.js

@@ -25,6 +25,10 @@ describe('Select', () => {
     mount(<Select disabled options={[1, 2, 3]} />);
   });
 
+  it('can be box', () => {
+    mount(<Select box options={[1, 2, 3]} />);
+  });
+
   it('can have custom classnames', () => {
     const el = mount(
       <Select

src/Select/select.story.js

@@ -33,6 +33,7 @@ const MutatingSelect = storyWithState(
 storiesOf('Inputs and Controls', module)
   .add('Select with object', () => (
     <Select
+      box={boolean('box', true)}
       label={text('label', 'Foods')}
       value={text('value', '')}
       placeholder={text('placeholder', 'Select a Food')}
@@ -42,6 +43,7 @@ storiesOf('Inputs and Controls', module)
   ))
   .add('Select with array', () => (
     <Select
+      box={boolean('box', false)}
       label={text('label', 'Foods')}
       value={text('value', '')}
       placeholder={text('placeholder', 'Select a Food')}
@@ -51,6 +53,7 @@ storiesOf('Inputs and Controls', module)
   ))
   .add('Select with initial value', () => (
     <Select
+      box={boolean('box', false)}
       label={text('label', 'Foods')}
       value={text('value', 'Cookies')}
       options={array('options', ['Cookies', 'Pizza', 'Icecream'])}
@@ -59,6 +62,7 @@ storiesOf('Inputs and Controls', module)
   ))
   .add('Select with children', () => (
     <Select
+      box={boolean('box', false)}
       value={text('value', 'Cookies')}
       onChange={evt => action('onChange: ' + evt.target.value)()}
     >