feat(select): add option component

package.json

@@ -82,7 +82,7 @@
     "@material/notched-outline": "^1.1.1",
     "@material/radio": "^1.1.0",
     "@material/ripple": "^1.0.0",
-    "@material/select": "^0.40.1",
+    "@material/select": "^1.1.1",
     "@material/snackbar": "^1.0.0",
     "@material/switch": "^1.0.0",
     "@material/tab": "^1.0.0",

packages/select/Option.tsx

@@ -0,0 +1,67 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as React from 'react';
+import {MenuListItem, MenuListItemProps} from '@material/react-menu'; // eslint-disable-line no-unused-vars
+
+export type OptionProps<T extends HTMLElement = HTMLElement>
+  = BaseOptionProps & (T extends HTMLOptionElement ? React.HTMLProps<HTMLOptionElement> : MenuListItemProps<T>);
+
+interface BaseOptionProps {
+  enhanced?: boolean;
+}
+
+class Option<T extends HTMLElement = HTMLElement> extends React.Component<OptionProps<T>, {}> {
+  static defaultProps = {
+    enhanced: false,
+  };
+
+  render() {
+    const {
+      value,
+      enhanced,
+      children,
+      ...otherProps
+    } = this.props;
+
+    if (enhanced) {
+      return (
+        <MenuListItem
+          data-value={value}
+          {...otherProps}
+        >
+          {children}
+        </MenuListItem>
+      );
+    }
+    return (
+      <option
+        value={value}
+        {...otherProps}
+      >
+        {children}
+      </option>
+    );
+  }
+}
+
+export default Option;

packages/select/package.json

@@ -18,8 +18,9 @@
   "dependencies": {
     "@material/react-floating-label": "^0.11.0",
     "@material/react-line-ripple": "^0.11.0",
+    "@material/react-menu": "^0.0.0",
     "@material/react-notched-outline": "^0.11.0",
-    "@material/select": "^0.40.1",
+    "@material/select": "^1.1.1",
     "classnames": "^2.2.6",
     "react": "^16.4.2"
   },

test/screenshot/golden.json

@@ -27,7 +27,6 @@
   "text-field/textArea": "b4c009f5f7637f7103380a2dd93bd6387d1ccc22d031323e6f0472949ce35881",
   "text-field/standard": "61cf0ebade2a09263d3a015c26cde28b3b3e67ab9d9bb4c494ac4823b9e8000b",
   "text-field/fullWidth": "26fa1e96054939384efb6427d93967bdbbc05ecc00bf7e4f13ab17cbe3e367fb",
-  "text-field/outlined": "91e95a9bfb4e3f75ba9bb6a7ccf6a379b944d4960aaffd4ca2e4026a3f3daa71",
   "text-field/refTest": "742fe55ba0f3ca11c74beef5ea9737e2eaec37d9c8524552f3b06c6cb25f4157",
   "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
   "top-app-bar/prominent": "2506ed2dd5f370c7bab69315d2daebd58b443d2b9e32bbaec762e40a8736309b",

test/screenshot/text-field/variants.tsx

@@ -1,7 +1,6 @@
 export default [
   'standard',
   'fullWidth',
-  'outlined',
   'textArea',
   'refTest',
 ];

test/unit/select/Option.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {assert} from 'chai';
+import {shallow, mount} from 'enzyme';
+import Option from '../../../packages/select/Option';
+import {MenuListItem} from '../../../packages/menu/index';
+
+suite('Select Options');
+
+test('renders an option tag if not enhanced', () => {
+  const wrapper = shallow(<Option />);
+  assert.equal(wrapper.find('option').length, 1);
+});
+
+test('renders an MenuListItem if enhanced', () => {
+  const wrapper = shallow(<Option enhanced />);
+  assert.equal(wrapper.find(MenuListItem).length, 1);
+});
+
+test('renders an a value attribute if not enhanced', () => {
+  const wrapper = mount(<Option value='test' />);
+  assert.equal(wrapper.find('option').getDOMNode().getAttribute('value'), 'test');
+});
+
+test('renders an a data-value attribute if enhanced', () => {
+  const wrapper = mount(<Option enhanced data-value='test' />);
+  assert.equal(wrapper.find(MenuListItem).getDOMNode().getAttribute('data-value'), 'test');
+});
+