breaking(select): remove cssOnly select

rmwc · Feb 6, 2018 · f699046 · f699046
1 parent ea26775
commit f699046
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 171 deletions.
diff --git a/src/Select/index.js b/src/Select/index.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
 import { MDCSelect } from '@material/select/dist/mdc.select';
-import { List, ListItem, ListGroup } from '../List';
-import { SimpleMenuRoot, SimpleMenuItems } from '../Menu';
+import { List, ListItem } from '../List';
+import { MenuRoot, MenuItems } from '../Menu';
 import { simpleTag, withMDC } from '../Base';
 import type { SimpleTagPropsT } from '../Base';
 
@@ -41,7 +41,7 @@ export const SelectBottomLine = simpleTag({
 
 export const SelectMenu = simpleTag({
   displayName: 'SelectMenu',
-  tag: SimpleMenuRoot,
+  tag: MenuRoot,
   classNames: 'mdc-select__menu'
 });
 
@@ -67,9 +67,7 @@ type SelectPropsT = {
   /** Placeholder text for the form control. */
   placeholder?: string,
   /** Disables the form control. */
-  disabled?: boolean,
-  /** Makes a cssOnly select. */
-  cssOnly?: boolean
+  disabled?: boolean
 } & SimpleTagPropsT;
 
 /**
@@ -125,7 +123,6 @@ export const Select = withMDC({
     }
   },
   defaultProps: {
-    cssOnly: false,
     tabIndex: 0,
     options: undefined,
     label: undefined,
@@ -140,16 +137,7 @@ export const Select = withMDC({
     });
   },
   didUpdate: (props, nextProps, api, inst) => {
-    const cssOnlyDidChange = props && !!props.cssOnly !== !!nextProps.cssOnly;
-    if (cssOnlyDidChange) {
-      window.requestAnimationFrame(() => {
-        inst.mdcComponentReinit();
-      });
-      // escape out to avoid errors, didUpdate will run again on component init
-      return;
-    }
-
-    // we might be in cssOnly mode, or lacking an api
+    // we might be lacking an api
     if (!api) return;
 
     const valueDidChange = props && props.value !== nextProps.value;
@@ -203,64 +191,12 @@ export const Select = withMDC({
         label = '',
         options = [],
         mdcElementRef,
-        cssOnly,
         ...rest
       } = this.props;
 
       const selectOptions = createSelectOptions(options);
       const displayValue = getDisplayValue(value, selectOptions, placeholder);
 
-      if (cssOnly) {
-        return (
-          <SelectRoot elementRef={mdcElementRef} {...rest}>
-            <SelectSurface
-              tabIndex={tabIndex}
-              tag="select"
-              value={value}
-              {...rest}
-            >
-              {!!placeholder.length && (
-                <ListItem tag="option" value="" tab-index="0">
-                  {placeholder}
-                </ListItem>
-              )}
-              {selectOptions &&
-                selectOptions.map(({ label, ...option }, i) => {
-                  if (option.options) {
-                    return (
-                      <ListGroup tag="optgroup" label={label} key={label}>
-                        {option.options.map(({ label, ...option }, i) => (
-                          <ListItem
-                            tag="option"
-                            key={label}
-                            {...option}
-                            value={option.value}
-                          >
-                            {label}
-                          </ListItem>
-                        ))}
-                      </ListGroup>
-                    );
-                  }
-
-                  return (
-                    <ListItem
-                      tag="option"
-                      key={label}
-                      {...option}
-                      value={option.value}
-                    >
-                      {label}
-                    </ListItem>
-                  );
-                })}
-              {children}
-            </SelectSurface>
-            <SelectBottomLine />
-          </SelectRoot>
-        );
-      }
-
       return (
         <SelectRoot elementRef={mdcElementRef} {...rest}>
           <SelectSurface tabIndex={tabIndex}>
@@ -271,7 +207,7 @@ export const Select = withMDC({
             <SelectBottomLine />
           </SelectSurface>
           <SelectMenu>
-            <SimpleMenuItems>
+            <MenuItems>
               {!!placeholder.length && (
                 // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
                 <ListItem role="option" id="" tab-index="0">
@@ -292,7 +228,7 @@ export const Select = withMDC({
                   </ListItem>
                 ))}
               {children}
-            </SimpleMenuItems>
+            </MenuItems>
           </SelectMenu>
         </SelectRoot>
       );

diff --git a/src/Select/select.md b/src/Select/select.md
@@ -84,42 +84,6 @@ import { ListItem } from 'rmwc/List';
 </Select>
 ```
 
-## CSS only Selects
-
-For certain platforms or usecases, a pure CSS select may be preferrable. Use the `cssOnly` prop to create one.
-
-```jsx render
-{/*
-  cssOnly Selects
-  MDC doesnt have a label prop for css only selects, but RMWC has a placeholder prop you can use.
-*/}
-<Select
-  cssOnly
-  placeholder="-- cssOnly --"
-  options={['Cookies', 'Pizza', 'Icecream']}
-/>
-
-{/*
-  cssOnly Selects with option groups
-  MDC only supports option groups on css only selects.
-*/}
-<Select
-  cssOnly
-  placeholder="-- cssOnly w/ optGroups --"
-  options={[
-    {
-      label: 'Foods',
-      /* Options can be any value Select input: simply arrays, value => label objects, or formatted arrays. */
-      options: ['Cookies', 'Pizza', 'Icecream']
-    },
-    {
-      label: 'Animals',
-      options: ['Dogs', 'Cats', 'Birds']
-    }
-  ]}
-/>
-```
-
 ```jsx renderOnly
 import { DocumentComponent } from 'rmwc/Base/DocumentComponent';
 

diff --git a/src/Select/select.spec.js b/src/Select/select.spec.js
@@ -21,20 +21,10 @@ describe('Select', () => {
     expect(!!~el.html().search('tabindex="1"')).toEqual(true);
   });
 
-  it('can be cssOnly', () => {
-    const el = mount(<Select cssOnly options={[1, 2, 3]} />);
-    expect(el.find('select').length).toEqual(1);
-  });
-
   it('can be disabled', () => {
     mount(<Select disabled options={[1, 2, 3]} />);
   });
 
-  it('can be multiple', () => {
-    const el = mount(<Select cssOnly multiple options={[1, 2, 3]} />);
-    expect(el.find('select').prop('multiple')).toBe(true);
-  });
-
   it('can have custom classnames', () => {
     const el = mount(
       <Select

diff --git a/src/Select/select.story.js b/src/Select/select.story.js
@@ -7,31 +7,9 @@ import { Select } from './';
 import { ListItem } from '../List';
 import { storyWithState } from '../Base/story-with-state';
 
-const CSSSelectStory = storyWithState(
-  state => ({
-    label: text('label', state.label || 'Foods'),
-    value: text('value', state.value || 'Cookies'),
-    options: array('options', state.options || ['Cookies', 'Pizza', 'Icecream'])
-  }),
-  function() {
-    return (
-      <Select
-        cssOnly
-        label={this.state.label}
-        value={this.state.value}
-        options={this.state.options}
-        onChange={evt => {
-          this.setState({ value: evt.target.value });
-          action('onChange: ' + evt.target.value)();
-        }}
-      />
-    );
-  }
-);
 
 const MutatingSelect = storyWithState(
   state => ({
-    cssOnly: boolean('cssOnly', state.cssOnly || false),
     value: text('value', state.value || 'Cookies'),
     label: text('label', state.label || 'Label'),
     options: array('options', state.options || ['Cookies', 'Pizza', 'Icecream'])
@@ -40,36 +18,6 @@ const MutatingSelect = storyWithState(
     return (
       <Select
         {...this.props}
-        cssOnly={this.state.cssOnly}
-        label={this.state.label}
-        value={this.state.value}
-        options={this.state.options}
-        onChange={evt => {
-          this.setState({ value: evt.target.value });
-          action('onChange: ' + evt.target.value)();
-        }}
-      />
-    );
-  }
-);
-
-const CSSSelectWithOptgroupsStory = storyWithState(
-  state => ({
-    label: text('label', state.label || 'Foods'),
-    value: text('value', state.value || 'Cookies'),
-    options: array(
-      'options',
-      state.options || [
-        { label: 'Foods', options: ['Cookies', 'Pizza', 'Icecream'] },
-        { label: 'Animals', options: ['Dogs', 'Cats', 'Birds'] }
-      ]
-    )
-  }),
-  function() {
-    return (
-      <Select
-        {...this.props}
-        cssOnly
         label={this.state.label}
         value={this.state.value}
         options={this.state.options}
@@ -125,6 +73,4 @@ storiesOf('Inputs and Controls', module)
       </ListItem>
     </Select>
   ))
-  .add('CSS Select', () => <CSSSelectStory />)
-  .add('CSS Select w/ optgroups', () => <CSSSelectWithOptgroupsStory />)
   .add('Mutating Select', () => <MutatingSelect />);