feat(Select): adding outlined Select #267

NotchedOutline/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotchedOutlineIdle = exports.NotchedOutline = undefined;
+
+var _react = require("react");
+
+var React = _interopRequireWildcard(_react);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var NotchedOutline = exports.NotchedOutline = function NotchedOutline() {
+  return React.createElement(
+    "div",
+    { className: "mdc-notched-outline" },
+    React.createElement(
+      "svg",
+      null,
+      React.createElement("path", { className: "mdc-notched-outline__path" })
+    )
+  );
+};
+
+var NotchedOutlineIdle = function NotchedOutlineIdle(_ref) {
+  var rest = _objectWithoutProperties(_ref, []);
+
+  return React.createElement("div", Object.assign({}, rest, { className: "mdc-notched-outline__idle" }));
+};
+exports.NotchedOutlineIdle = NotchedOutlineIdle;

NotchedOutline/index.js.flow

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+
+export const NotchedOutline = () => (
+  <div className="mdc-notched-outline">
+    <svg>
+      <path className="mdc-notched-outline__path" />
+    </svg>
+  </div>
+);
+
+export const NotchedOutlineIdle = ({ ...rest }: {}) => (
+  <div {...rest} className="mdc-notched-outline__idle" />
+);

src/NotchedOutline/index.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+
+export const NotchedOutline = () => (
+  <div className="mdc-notched-outline">
+    <svg>
+      <path className="mdc-notched-outline__path" />
+    </svg>
+  </div>
+);
+
+export const NotchedOutlineIdle = ({ ...rest }: {}) => (
+  <div {...rest} className="mdc-notched-outline__idle" />
+);

src/NotchedOutline/notched-outline-ssr.spec.js

@@ -0,0 +1,12 @@
+/**
+ * @jest-environment node
+ */
+import * as React from 'react';
+import { renderToString as mount } from 'react-dom/server';
+import { NotchedOutline } from './';
+
+describe('NotchedOutline SSR', () => {
+  it('renders', () => {
+    mount(<NotchedOutline />);
+  });
+});

src/NotchedOutline/notched-outline.spec.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { NotchedOutline } from './';
+
+describe('NotchedOutline SSR', () => {
+  it('renders', () => {
+    mount(<NotchedOutline />);
+  });
+});

src/Select/index.js

@@ -5,6 +5,7 @@ import { MDCSelect } from '@material/select/dist/mdc.select';
 import { simpleTag, withFoundation, syncFoundationProp } from '../Base';
 import { FloatingLabel } from '../FloatingLabel';
 import { LineRipple } from '../LineRipple';
+import { NotchedOutline, NotchedOutlineIdle } from '../NotchedOutline';
 
 type FormattedOption = {
   label: string,
@@ -21,6 +22,8 @@ export type SelectPropsT = {
   label?: string,
   /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */
   placeholder?: string,
+  /** Makes the select outlined. */
+  outlined?: boolean,
   /** Disables the form control. */
   disabled?: boolean,
   /** Makes the Select have a visual box. */
@@ -36,10 +39,11 @@ export const SelectRoot = simpleTag({
   classNames: (props: SelectPropsT) => [
     'mdc-select',
     {
+      'mdc-select--outlined': props.outlined,
       'mdc-select--box': props.box
     }
   ],
-  consumeProps: ['box'],
+  consumeProps: ['box', 'outlined'],
   defaultProps: {
     role: 'listbox'
   }
@@ -124,6 +128,7 @@ export class Select extends withFoundation({
       placeholder,
       children,
       value,
+      outlined,
       label = '',
       options = [],
       box,
@@ -140,13 +145,14 @@ export class Select extends withFoundation({
       <SelectRoot
         {...rootProps}
         box={box}
+        outlined={outlined}
         elementRef={root_}
         className={className}
       >
         <SelectNativeControl
           {...rest}
           value={value}
-          defaultValue={value ? undefined : ''}
+          defaultValue={value !== undefined ? undefined : ''}
         >
           {(!!placeholder || placeholder === '') && (
             <option value="" disabled={placeholder === ''}>
@@ -176,7 +182,8 @@ export class Select extends withFoundation({
           {children}
         </SelectNativeControl>
         <FloatingLabel>{label}</FloatingLabel>
-        <LineRipple />
+        {!!outlined && <NotchedOutline />}
+        {!!outlined ? <NotchedOutlineIdle /> : <LineRipple />}
       </SelectRoot>
     );
   }

src/Select/select.md

@@ -5,6 +5,31 @@
 import from **rmwc/Select**  
 [https://material.io/components/web/catalog/input-controls/select-menus/](https://material.io/components/web/catalog/input-controls/select-menus/)
 
+## Select Styles
+Selects come in three different styles: standard, box, and outlined.
+
+```jsx render
+<Select
+  label="Standard"
+  placeholder=""
+  options={['Cookies', 'Pizza', 'Icecream']}
+/>
+
+<Select
+  label="Boxed"
+  box
+  placeholder=""
+  options={['Cookies', 'Pizza', 'Icecream']}
+/>
+
+<Select
+  label="Outlined"
+  outlined
+  placeholder=""
+  options={['Cookies', 'Pizza', 'Icecream']}
+/>
+```
+
 ## Data Driven Selects
 
 To fit common use cases, RMWC Select provides a data driven method for rendering select menus. There are multiple formats you can pass data in, use the one that best fits your requirements. To make your label not float by default and to have an unselected blank value, set the `placeholder` prop to a blank string.
@@ -13,6 +38,7 @@ To fit common use cases, RMWC Select provides a data driven method for rendering
 import { Select } from 'rmwc/Select';
 
 {/*
+  A controlled select
   Using a formatted array of options
   [
     {label: string, value: string, ...props},
@@ -47,21 +73,22 @@ import { Select } from 'rmwc/Select';
   ]}
 />
 
-{/*  A simple value => label map */}
+{/*  
+  An uncontrolled select
+  A simple value => label map */
+}
 <Select
   label="Object map"
   options={{'1': 'Cookies', '2': 'Pizza', '3': 'Icecream'}}
 />
 
 {/* 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']}
 />
 ```
-
 ## Manually building the list
 
 If you want full control over the child `ListItems`, you can manually build the list yourself.

src/Select/select.spec.js

@@ -31,6 +31,11 @@ describe('Select', () => {
     mount(<Select placeholder="Select a food" options={[1, 2, 3]} />);
   });
 
+  it('can be outlined', () => {
+    const el = mount(<Select outlined options={[1, 2, 3]} />);
+    expect(el.html().includes('mdc-select--outlined')).toBe(true);
+  });
+
   it('can accept formatted options array', () => {
     mount(
       <Select

src/TextField/index.js

@@ -13,6 +13,7 @@ import {
 import { Icon } from '../Icon';
 import { LineRipple } from '../LineRipple';
 import { FloatingLabel } from '../FloatingLabel';
+import { NotchedOutline, NotchedOutlineIdle } from '../NotchedOutline';
 
 export type TextFieldPropsT = {
   /** Makes a multiline TextField. */
@@ -92,25 +93,6 @@ export const TextFieldTextarea = simpleTag({
   classNames: 'mdc-text-field__input'
 });
 
-export const NotchedOutline = ({
-  children,
-  ...rest
-}: {
-  children: React.Node
-}) => (
-  <div {...rest} className="mdc-notched-outline">
-    <svg>{children}</svg>
-  </div>
-);
-
-export const NotchedOutlinePath = ({ ...rest }: {}) => (
-  <path {...rest} className="mdc-notched-outline__path" />
-);
-
-export const NotchedOutlineIdle = ({ ...rest }: {}) => (
-  <div {...rest} className="mdc-notched-outline__idle" />
-);
-
 export type TextFieldHelperTextPropsT = {
   /** Make the help text always visible */
   persistent?: boolean,
@@ -260,12 +242,7 @@ export class TextField extends withFoundation({
         )}
         {!!withTrailingIcon && renderIcon(withTrailingIcon)}
 
-        {outlined && (
-          <NotchedOutline>
-            <NotchedOutlinePath />
-          </NotchedOutline>
-        )}
-
+        {!!outlined && <NotchedOutline />}
         {outlined ? <NotchedOutlineIdle /> : <LineRipple />}
       </TextFieldRoot>
     );

src/docs/docgen.json

@@ -3616,6 +3616,18 @@
       }
     }
   ],
+  "src/NotchedOutline/index.js": [
+    {
+      "description": "",
+      "displayName": "NotchedOutline",
+      "methods": []
+    },
+    {
+      "description": "",
+      "displayName": "NotchedOutlineIdle",
+      "methods": []
+    }
+  ],
   "src/Provider/index.js": [
     {
       "description": "Provides default options for children\nProp override options in providerDefaults with the same name",
@@ -4307,12 +4319,12 @@
               "name": "props",
               "type": {
                 "name": "intersection",
-                "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n} & SimpleTagPropsT",
+                "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Makes the select outlined. */\n  outlined?: boolean,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n} & SimpleTagPropsT",
                 "elements": [
                   {
                     "name": "signature",
                     "type": "object",
-                    "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n}",
+                    "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Makes the select outlined. */\n  outlined?: boolean,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n}",
                     "signature": {
                       "properties": [
                         {
@@ -4382,6 +4394,13 @@
                             "required": false
                           }
                         },
+                        {
+                          "key": "outlined",
+                          "value": {
+                            "name": "boolean",
+                            "required": false
+                          }
+                        },
                         {
                           "key": "disabled",
                           "value": {
@@ -4467,12 +4486,12 @@
               "name": "nextProps",
               "type": {
                 "name": "intersection",
-                "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n} & SimpleTagPropsT",
+                "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Makes the select outlined. */\n  outlined?: boolean,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n} & SimpleTagPropsT",
                 "elements": [
                   {
                     "name": "signature",
                     "type": "object",
-                    "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n}",
+                    "raw": "{\n  /** The value for a controlled select. */\n  value?: mixed,\n  /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n  options?: string[] | { [value: string]: string } | any[],\n  /** A label for the form control. */\n  label?: string,\n  /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n  placeholder?: string,\n  /** Makes the select outlined. */\n  outlined?: boolean,\n  /** Disables the form control. */\n  disabled?: boolean,\n  /** Makes the Select have a visual box. */\n  box?: boolean,\n  /** Props for the root element. By default, additional props spread to the native select element.  */\n  rootProps?: Object,\n  /** A className for the root element. */\n  className?: string\n}",
                     "signature": {
                       "properties": [
                         {
@@ -4542,6 +4561,13 @@
                             "required": false
                           }
                         },
+                        {
+                          "key": "outlined",
+                          "value": {
+                            "name": "boolean",
+                            "required": false
+                          }
+                        },
                         {
                           "key": "disabled",
                           "value": {
@@ -4652,6 +4678,13 @@
           "required": false,
           "description": "Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label."
         },
+        "outlined": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": false,
+          "description": "Makes the select outlined."
+        },
         "disabled": {
           "flowType": {
             "name": "boolean"
@@ -6705,31 +6738,6 @@
       "displayName": "TextFieldTextarea",
       "methods": []
     },
-    {
-      "description": "",
-      "displayName": "NotchedOutline",
-      "methods": [],
-      "props": {
-        "children": {
-          "flowType": {
-            "name": "ReactNode",
-            "raw": "React.Node"
-          },
-          "required": true,
-          "description": ""
-        }
-      }
-    },
-    {
-      "description": "",
-      "displayName": "NotchedOutlinePath",
-      "methods": []
-    },
-    {
-      "description": "",
-      "displayName": "NotchedOutlineIdle",
-      "methods": []
-    },
     {
       "description": "A help text component",
       "displayName": "TextFieldHelperText",