feat(FormSelect): rename Select components to FormSelect (patternfly#…

…1231) * feat(FormSelect): rename Select components to FormSelect * fix(FormSelect): remove uneeded prop declaration * fix(FormSelect): update TS exports to new names
redallen · Jan 29, 2019 · df32933 · df32933
1 parent 57fb44f
commit df32933
Show file tree

Hide file tree

Showing 23 changed files with 270 additions and 268 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Form/examples/HorizontalForm.js b/packages/patternfly-4/react-core/src/components/Form/examples/HorizontalForm.js
@@ -4,8 +4,8 @@ import {
   TextInput,
   TextArea,
   Form,
-  SelectOption,
-  Select,
+  FormSelectOption,
+  FormSelect,
   Radio,
   Toolbar,
   ToolbarItem,
@@ -81,16 +81,16 @@ class HorizontalForm extends React.Component {
           />
         </FormGroup>
         <FormGroup label="Your title" fieldId="horizontal-form-title">
-          <Select
+          <FormSelect
             value={this.state.value}
             onChange={this.onChange}
             id="horzontal-form-title"
             name="horizontal-form-title"
           >
             {this.options.map((option, index) => (
-              <SelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+              <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
             ))}
-          </Select>
+          </FormSelect>
         </FormGroup>
         <FormGroup label="Your experience" fieldId="horizontal-form-exp">
           <TextArea

diff --git a/...ct-core/src/components/Select/Select.d.ts → ...src/components/FormSelect/FormSelect.d.ts b/...ct-core/src/components/Select/Select.d.ts → ...src/components/FormSelect/FormSelect.d.ts
@@ -1,8 +1,8 @@
 import { HTMLProps, FormEvent } from 'react';
 import { Omit } from '../../typeUtils';
 
-export interface SelectProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'> {
-  children: any;
+export interface FormSelectProps
+  extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'> {
   value?: any;
   isValid?: boolean;
   isDisabled?: boolean;
@@ -11,6 +11,6 @@ export interface SelectProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange
   onChange?(event: React.FormEvent<HTMLSelectElement>): void;
 }
 
-declare const Select: React.SFC<SelectProps>;
+declare const FormSelect: React.SFC<FormSelectProps>;
 
-export default Select;
+export default FormSelect;
diff --git a/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.docs.js b/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.docs.js
@@ -0,0 +1,20 @@
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+import FormSelectInput from './examples/FormSelectInput';
+import FormSelectInputDisabled from './examples/FormSelectInputDisabled';
+import FormSelectInputGrouped from './examples/FormSelectInputGrouped';
+import FormSelectInputInvalid from './examples/FormSelectInputInvalid';
+
+export default {
+  title: 'FormSelect',
+  components: {
+    FormSelect,
+    FormSelectOption,
+    FormSelectOptionGroup
+  },
+  examples: [
+    { component: FormSelectInput, title: 'FormSelect Input' },
+    { component: FormSelectInputGrouped, title: 'FormSelect Input with grouping' },
+    { component: FormSelectInputInvalid, title: 'FormSelect Input Invalid' },
+    { component: FormSelectInputDisabled, title: 'FormSelect Input Disabled' }
+  ]
+};
diff --git a/...eact-core/src/components/Select/Select.js → ...e/src/components/FormSelect/FormSelect.js b/...eact-core/src/components/Select/Select.js → ...e/src/components/FormSelect/FormSelect.js
@@ -4,26 +4,26 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
 const propTypes = {
-  /** content rendered inside the Select */
+  /** content rendered inside the FormSelect */
   children: PropTypes.node.isRequired,
-  /** additional classes added to the Select control */
+  /** additional classes added to the FormSelect control */
   className: PropTypes.string,
   /** value of selected option */
   value: PropTypes.any,
   /** Flag indicating selection is valid */
   isValid: PropTypes.bool,
-  /** Flag indicating the Select is disabled */
+  /** Flag indicating the FormSelect is disabled */
   isDisabled: PropTypes.bool,
   /** Optional callback for updating when selection loses focus */
   onBlur: PropTypes.func,
   /** Optional callback for updating when selection gets focus */
   onFocus: PropTypes.func,
   /** Optional callback for updating when selection changes */
   onChange: PropTypes.func,
-  /** Custom flag to show that the Select requires an associated id or aria-label. */
+  /** Custom flag to show that the FormSelect requires an associated id or aria-label. */
   'aria-label': props => {
     if (!props.id && !props['aria-label']) {
-      return new Error('Select requires either an id or aria-label to be specified');
+      return new Error('FormSelect requires either an id or aria-label to be specified');
     }
     return null;
   },
@@ -42,7 +42,7 @@ const defaultProps = {
   'aria-label': null
 };
 
-class Select extends React.Component {
+class FormSelect extends React.Component {
   handleChange = event => {
     this.props.onChange(event.currentTarget.value, event);
   };
@@ -64,7 +64,7 @@ class Select extends React.Component {
   }
 }
 
-Select.propTypes = propTypes;
-Select.defaultProps = defaultProps;
+FormSelect.propTypes = propTypes;
+FormSelect.defaultProps = defaultProps;
 
-export default Select;
+export default FormSelect;
diff --git a/...core/src/components/Select/Select.test.js → .../components/FormSelect/FormSelect.test.js b/...core/src/components/Select/Select.test.js → .../components/FormSelect/FormSelect.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Select from './Select';
-import SelectOption from './SelectOption';
-import SelectOptionGroup from './SelectOptionGroup';
+import FormSelect from './FormSelect';
+import FormSelectOption from './FormSelectOption';
+import FormSelectOptionGroup from './FormSelectOptionGroup';
 
 const props = {
   options: [
@@ -47,105 +47,105 @@ const groupedProps = {
   value: '2'
 };
 
-test('Simple Select input', () => {
+test('Simple FormSelect input', () => {
   const view = shallow(
-    <Select value={props.value} aria-label="simple Select">
+    <FormSelect value={props.value} aria-label="simple FormSelect">
       {props.options.map((option, index) => (
-        <SelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
       ))}
-    </Select>
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('Grouped Select input', () => {
+test('Grouped FormSelect input', () => {
   const view = shallow(
-    <Select value={groupedProps.value} aria-label=" grouped Select">
+    <FormSelect value={groupedProps.value} aria-label=" grouped FormSelect">
       {groupedProps.groups.map((group, index) => (
-        <SelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
+        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
           {group.options.map((option, i) => (
-            <SelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
+            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
           ))}
-        </SelectOptionGroup>
+        </FormSelectOptionGroup>
       ))}
-    </Select>
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('Disabled Select input ', () => {
+test('Disabled FormSelect input ', () => {
   const view = shallow(
-    <Select isDisabled aria-label="disabled  Select">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect isDisabled aria-label="disabled  FormSelect">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('Select input with aria-label does not generate console error', () => {
+test('FormSelect input with aria-label does not generate console error', () => {
   const myMock = jest.fn();
   global.console = { error: myMock };
   const view = shallow(
-    <Select aria-label="Select with aria-label">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect aria-label="FormSelect with aria-label">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
   expect(myMock).not.toBeCalled();
 });
 
-test('Select input with id does not generate console error', () => {
+test('FormSelect input with id does not generate console error', () => {
   const myMock = jest.fn();
   global.console = { error: myMock };
   const view = shallow(
-    <Select id="id">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect id="id">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
   expect(myMock).not.toBeCalled();
 });
 
-test('Select input with no aria-label or id generates console error', () => {
+test('FormSelect input with no aria-label or id generates console error', () => {
   const myMock = jest.fn();
   global.console = { error: myMock };
   const view = shallow(
-    <Select>
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect>
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
   expect(myMock).toBeCalled();
 });
 
-test('invalid Select input', () => {
+test('invalid FormSelect input', () => {
   const view = shallow(
-    <Select isValid={false} aria-label="invalid Select">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect isValid={false} aria-label="invalid FormSelect">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('required Select input', () => {
+test('required FormSelect input', () => {
   const view = shallow(
-    <Select required aria-label="required Select">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect required aria-label="required FormSelect">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('Select passes value and event to onChange handler', () => {
+test('FormSelect passes value and event to onChange handler', () => {
   const myMock = jest.fn();
   const newValue = 1;
   const event = {
     currentTarget: { value: newValue }
   };
   const view = shallow(
-    <Select onChange={myMock} aria-label="onchange Select">
-      <SelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </Select>
+    <FormSelect onChange={myMock} aria-label="onchange FormSelect">
+      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+    </FormSelect>
   );
   view.find('select').simulate('change', event);
   expect(myMock).toBeCalledWith(newValue, event);

diff --git a/packages/patternfly-4/react-core/src/components/FormSelect/FormSelectOption.d.ts b/packages/patternfly-4/react-core/src/components/FormSelect/FormSelectOption.d.ts
@@ -0,0 +1,13 @@
+import { HTMLProps, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface FormSelectOptionProps extends Omit<HTMLProps<HTMLOptionElement>, 'disabled'> {
+  value?: any;
+  label: string;
+  isValid?: boolean;
+  isDisabled?: boolean;
+}
+
+declare const FormSelectOption: React.SFC<FormSelectOptionProps>;
+
+export default FormSelectOption;
diff --git a/...ore/src/components/Select/SelectOption.js → ...components/FormSelect/FormSelectOption.js b/...ore/src/components/Select/SelectOption.js → ...components/FormSelect/FormSelectOption.js
@@ -20,13 +20,13 @@ const defaultProps = {
   isDisabled: false
 };
 
-const SelectOption = ({ className, value, label, isDisabled, ...props }) => (
+const FormSelectOption = ({ className, value, label, isDisabled, ...props }) => (
   <option {...props} className={className} value={value} disabled={isDisabled}>
     {label}
   </option>
 );
 
-SelectOption.propTypes = propTypes;
-SelectOption.defaultProps = defaultProps;
+FormSelectOption.propTypes = propTypes;
+FormSelectOption.defaultProps = defaultProps;
 
-export default SelectOption;
+export default FormSelectOption;
diff --git a/packages/patternfly-4/react-core/src/components/FormSelect/FormSelectOptionGroup.d.ts b/packages/patternfly-4/react-core/src/components/FormSelect/FormSelectOptionGroup.d.ts
@@ -0,0 +1,11 @@
+import { HTMLProps, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface FormSelectOptionGroupProps extends Omit<HTMLProps<HTMLOptGroupElement>, 'disabled'> {
+  label: string;
+  isDisabled?: boolean;
+}
+
+declare const FormSelectOptionGroup: React.SFC<FormSelectOptionGroupProps>;
+
+export default FormSelectOptionGroup;
diff --git a/...rc/components/Select/SelectOptionGroup.js → ...nents/FormSelect/FormSelectOptionGroup.js b/...rc/components/Select/SelectOptionGroup.js → ...nents/FormSelect/FormSelectOptionGroup.js
@@ -20,13 +20,13 @@ const defaultProps = {
   isDisabled: false
 };
 
-const SelectOptionGroup = ({ children, className, label, isDisabled, ...props }) => (
+const FormSelectOptionGroup = ({ children, className, label, isDisabled, ...props }) => (
   <optgroup {...props} disabled={!!isDisabled} className={className} label={label}>
     {children}
   </optgroup>
 );
 
-SelectOptionGroup.propTypes = propTypes;
-SelectOptionGroup.defaultProps = defaultProps;
+FormSelectOptionGroup.propTypes = propTypes;
+FormSelectOptionGroup.defaultProps = defaultProps;
 
-export default SelectOptionGroup;
+export default FormSelectOptionGroup;