feat(DropdownToggle - noCaret option): Adds the noCaret option (patte…

…rnfly#893) * feat(DropdownToggle - noCaret option): Adds the noCaret option * IconComponent * proptype * lowercase * reacttype
redallen · Nov 8, 2018 · 21e6e64 · 21e6e64
1 parent 88d61cc
commit 21e6e64
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.d.ts
@@ -9,6 +9,7 @@ export interface DropdownToggleProps extends HTMLProps<HTMLButtonElement> {
   isFocused?: boolean;
   isHovered?: boolean;
   isActive?: boolean;
+  iconComponent?: ReactType;
 }
 
 declare const DropdownToggle: SFC<DropdownToggleProps>;

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js
@@ -5,10 +5,10 @@ import Toggle from './Toggle';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 
-const DropdownToggle = ({ children, ...props }) => (
+const DropdownToggle = ({ children, iconComponent: IconComponent, ...props }) => (
   <Toggle {...props}>
     {children}
-    <CaretDownIcon className={css(styles.dropdownToggleIcon)} />
+    {IconComponent && <IconComponent className={css(styles.dropdownToggleIcon)} />}
   </Toggle>
 );
 
@@ -30,7 +30,9 @@ DropdownToggle.propTypes = {
   /** Forces hover state */
   isHovered: PropTypes.bool,
   /** Forces active state */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /** The icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon. */
+  iconComponent: PropTypes.func
 };
 
 DropdownToggle.defaultProps = {
@@ -41,7 +43,8 @@ DropdownToggle.defaultProps = {
   isFocused: false,
   isHovered: false,
   isActive: false,
-  onToggle: Function.prototype
+  onToggle: Function.prototype,
+  iconComponent: CaretDownIcon
 };
 
 export default DropdownToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -1348,6 +1348,7 @@ exports[`dropdown basic 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1365,6 +1366,7 @@ exports[`dropdown basic 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1536,6 +1538,7 @@ exports[`dropdown dropup + right aligned 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1553,6 +1556,7 @@ exports[`dropdown dropup + right aligned 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1707,6 +1711,7 @@ exports[`dropdown dropup 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1724,6 +1729,7 @@ exports[`dropdown dropup 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1906,6 +1912,7 @@ exports[`dropdown expanded 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -1923,6 +1930,7 @@ exports[`dropdown expanded 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -2237,6 +2245,7 @@ exports[`dropdown regular 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -2254,6 +2263,7 @@ exports[`dropdown regular 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -2408,6 +2418,7 @@ exports[`dropdown right aligned 1`] = `
   toggle={
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}
@@ -2425,6 +2436,7 @@ exports[`dropdown right aligned 1`] = `
   >
     <DropdownToggle
       className=""
+      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
       isFocused={false}

diff --git a/...patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap b/...patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
@@ -22,6 +22,7 @@ exports[`state active 1`] = `
 
 <DropdownToggle
   className=""
+  iconComponent={[Function]}
   id="Dropdown Toggle"
   isActive={true}
   isFocused={false}
@@ -96,6 +97,7 @@ exports[`state focus 1`] = `
 
 <DropdownToggle
   className=""
+  iconComponent={[Function]}
   id="Dropdown Toggle"
   isActive={false}
   isFocused={true}
@@ -170,6 +172,7 @@ exports[`state hover 1`] = `
 
 <DropdownToggle
   className=""
+  iconComponent={[Function]}
   id="Dropdown Toggle"
   isActive={false}
   isFocused={false}

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap
@@ -22,6 +22,7 @@ exports[`Dropdown toggle 1`] = `
 
 <DropdownToggle
   className=""
+  iconComponent={[Function]}
   id="Dropdown Toggle"
   isActive={false}
   isFocused={false}