fix(select): issues/10 pf toggleIcon prop, toggleText (#360)

RedHatInsights · Jul 31, 2020 · c0cc484 · c0cc484
1 parent e830b51
commit c0cc484
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 10 deletions.
diff --git a/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap b/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap
@@ -109,6 +109,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -134,6 +135,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -195,6 +197,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -220,6 +223,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -343,6 +347,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -368,6 +373,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>

diff --git a/src/components/form/__tests__/__snapshots__/select.test.js.snap b/src/components/form/__tests__/__snapshots__/select.test.js.snap
@@ -146,6 +146,87 @@ exports[`Select Component should allow selected options to match value or title:
 </div>
 `;
 
+exports[`Select Component should disable toggle text: disabled text 1`] = `
+<Select
+  aria-label="Select option"
+  aria-labelledby=""
+  className="curiosity-select__no-toggle-text "
+  clearSelectionsAriaLabel="Clear all"
+  createText="Create"
+  customBadgeText={null}
+  customContent={null}
+  direction="down"
+  hasInlineFilter={false}
+  inlineFilterPlaceholderText={null}
+  inputIdPrefix=""
+  isCreatable={false}
+  isDisabled={false}
+  isGrouped={false}
+  isOpen={false}
+  isPlain={false}
+  menuAppendTo="inline"
+  noResultsFoundText="No results found"
+  onClear={[Function]}
+  onCreateOption={[Function]}
+  onFilter={null}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  ouiaSafe={true}
+  placeholderText="Select option"
+  removeSelectionAriaLabel="Remove"
+  selections={Array []}
+  toggleAriaLabel="Options menu"
+  toggleIcon={
+    <FilterIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
+    />
+  }
+  toggleId={null}
+  typeAheadAriaLabel=""
+  variant="single"
+  width=""
+>
+  <SelectOption
+    className=""
+    component="button"
+    data-title="lorem"
+    data-value="lorem"
+    index={0}
+    inputId=""
+    isChecked={false}
+    isDisabled={false}
+    isNoResultsOption={false}
+    isPlaceholder={false}
+    isSelected={false}
+    key="bG9yZW0="
+    keyHandler={[Function]}
+    onClick={[Function]}
+    sendRef={[Function]}
+    value="lorem"
+  />
+  <SelectOption
+    className=""
+    component="button"
+    data-title="ipsum"
+    data-value="ipsum"
+    index={0}
+    inputId=""
+    isChecked={false}
+    isDisabled={false}
+    isNoResultsOption={false}
+    isPlaceholder={false}
+    isSelected={false}
+    key="aXBzdW0="
+    keyHandler={[Function]}
+    onClick={[Function]}
+    sendRef={[Function]}
+    value="ipsum"
+  />
+</Select>
+`;
+
 exports[`Select Component should render a basic component: basic dropdown 1`] = `
 <div
   class="pf-c-select curiosity-select "
@@ -252,6 +333,7 @@ exports[`Select Component should render a expanded select: expanded 1`] = `
   className=""
   id="test"
   isDisabled={false}
+  isToggleText={true}
   name={null}
   onSelect={[Function]}
   options={
@@ -264,6 +346,7 @@ exports[`Select Component should render a expanded select: expanded 1`] = `
   }
   placeholder="Select option"
   selectedOptions={null}
+  toggleIcon={null}
   variant="single"
 >
   <Select

diff --git a/src/components/form/__tests__/select.test.js b/src/components/form/__tests__/select.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { SelectVariant } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
 import Select from '../select';
 
 describe('Select Component', () => {
@@ -97,4 +98,16 @@ describe('Select Component', () => {
 
     expect(component).toMatchSnapshot('expanded');
   });
+
+  it('should disable toggle text', () => {
+    const props = {
+      id: 'test',
+      options: ['lorem', 'ipsum'],
+      toggleIcon: <FilterIcon />,
+      isToggleText: false
+    };
+
+    const component = shallow(<Select {...props} />);
+    expect(component).toMatchSnapshot('disabled text');
+  });
 });
diff --git a/src/components/form/select.js b/src/components/form/select.js
@@ -170,7 +170,7 @@ class Select extends React.Component {
    */
   render() {
     const { options, selected, isExpanded } = this.state;
-    const { ariaLabel, className, isDisabled, placeholder, variant } = this.props;
+    const { ariaLabel, className, isDisabled, isToggleText, placeholder, toggleIcon, variant } = this.props;
 
     const pfSelectOptions = {};
 
@@ -187,13 +187,14 @@ class Select extends React.Component {
      */
     return (
       <PfSelect
-        className={`curiosity-select ${className}`}
+        className={`curiosity-select${(!isToggleText && '__no-toggle-text') || ''} ${className}`}
         variant={variant}
         aria-label={ariaLabel}
         onToggle={this.onToggle}
         onSelect={this.onSelect}
         selections={selected}
         isOpen={isExpanded}
+        toggleIcon={toggleIcon}
         placeholderText={placeholder}
         {...pfSelectOptions}
       >
@@ -215,15 +216,17 @@ class Select extends React.Component {
 /**
  * Prop types.
  *
- * @type {{name: string, options: object, selectedOptions: (number|string|Array), variant: (object|string),
- *     className: string, id: string, isDisabled: boolean, placeholder: string, ariaLabel: string,
+ * @type {{isToggleText: boolean, toggleIcon: Node|Function, name: string, options: object,
+ *     selectedOptions: (number|string|Array), variant: (object|string), className: string,
+ *     id: string, isDisabled: boolean, placeholder: string, ariaLabel: string,
  *     onSelect: Function}}
  */
 Select.propTypes = {
   ariaLabel: PropTypes.string,
   className: PropTypes.string,
   id: PropTypes.string,
   isDisabled: PropTypes.bool,
+  isToggleText: PropTypes.bool,
   name: PropTypes.string,
   onSelect: PropTypes.func,
   options: PropTypes.oneOfType([
@@ -242,28 +245,31 @@ Select.propTypes = {
     }),
     PropTypes.object
   ]),
-  selectedOptions: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
   placeholder: PropTypes.string,
+  selectedOptions: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+  toggleIcon: PropTypes.element,
   variant: PropTypes.oneOf([...Object.values(SelectVariant)])
 };
 
 /**
  * Default props.
  *
- * @type {{name: null, options: Array, selectedOptions: null, variant: SelectVariant.single,
- *     className: string, id: string, isDisabled: boolean, placeholder: string,
- *     ariaLabel: string, onSelect: Function}}
+ * @type {{isToggleText: boolean, toggleIcon: null, name: null, options: Array, selectedOptions: null,
+ *     variant: SelectVariant.single, className: string, id: string, isDisabled: boolean,
+ *     placeholder: string, ariaLabel: string, onSelect: Function}}
  */
 Select.defaultProps = {
   ariaLabel: 'Select option',
   className: '',
   id: helpers.generateId(),
   isDisabled: false,
+  isToggleText: true,
   name: null,
   onSelect: helpers.noop,
   options: [],
-  selectedOptions: null,
   placeholder: 'Select option',
+  selectedOptions: null,
+  toggleIcon: null,
   variant: SelectVariant.single
 };
 

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -77,6 +77,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -102,6 +103,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -184,6 +186,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -209,6 +212,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -287,6 +291,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -312,6 +317,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -390,6 +396,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -415,6 +422,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -493,6 +501,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -518,6 +527,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -51,6 +51,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -67,6 +68,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
         }
         placeholder="Select option"
         selectedOptions="cores"
+        toggleIcon={null}
         variant="single"
       />
     </Connect(C3GraphCard)>
@@ -125,6 +127,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -141,6 +144,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
         }
         placeholder="Select option"
         selectedOptions="cores"
+        toggleIcon={null}
         variant="single"
       />
     </Connect(GraphCard)>
@@ -199,6 +203,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -215,6 +220,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
         }
         placeholder="Select option"
         selectedOptions="cores"
+        toggleIcon={null}
         variant="single"
       />
     </Connect(GraphCard)>