From 9bebc870ecf831f4ae920a1b3acd0a3b21fb59d9 Mon Sep 17 00:00:00 2001
From: Jon Jackson <jonjacks@redhat.com>
Date: Mon, 26 Nov 2018 13:18:12 -0500
Subject: [PATCH] fix(Dropdown): Apply `pf-m-plain` modifier to dropdown toggle
 element instead of wrapper

---
 .../src/components/Dropdown/Dropdown.js       | 11 ++---
 .../components/Dropdown/DropdownToggle.d.ts   |  1 +
 .../src/components/Dropdown/DropdownToggle.js |  3 ++
 .../src/components/Dropdown/KebabToggle.js    |  5 +-
 .../src/components/Dropdown/Toggle.js         |  7 ++-
 .../__snapshots__/Dropdown.test.js.snap       | 47 +++++++++++++++++--
 .../__snapshots__/DropdownToggle.test.js.snap |  6 +++
 .../__snapshots__/Toggle.test.js.snap         |  4 ++
 8 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
index dfa02b059a1..305af7d43cb 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
@@ -50,15 +50,15 @@ const defaultProps = {
 class Dropdown extends React.Component {
   render() {
     const {
-      className,
       children,
+      className,
+      direction,
       dropdownItems,
       isOpen,
-      toggle,
-      direction,
-      onSelect,
       isPlain,
+      onSelect,
       position,
+      toggle,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-toggle-id-${currentId++}`;
@@ -76,7 +76,6 @@ class Dropdown extends React.Component {
         {...props}
         className={css(
           styles.dropdown,
-          isPlain && styles.modifiers.plain,
           direction === DropdownDirection.up && styles.modifiers.top,
           isOpen && styles.modifiers.expanded,
           className
@@ -85,7 +84,7 @@ class Dropdown extends React.Component {
           this.parentRef = ref;
         }}
       >
-        {Children.map(toggle, oneToggle => cloneElement(oneToggle, { parentRef: this.parentRef, isOpen, id }))}
+        {Children.map(toggle, oneToggle => cloneElement(oneToggle, { parentRef: this.parentRef, isOpen, id, isPlain }))}
         {isOpen && (
           <DropdownMenu
             component={component}
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
index 3a652531b4b..a59b7d439fa 100644
--- 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;
+  isPlain?: boolean;
   iconComponent?: ReactType;
 }
 
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js
index af2fac76e01..d6c7cc4e9d2 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownToggle.js
@@ -31,6 +31,8 @@ DropdownToggle.propTypes = {
   isHovered: PropTypes.bool,
   /** Forces active state */
   isActive: PropTypes.bool,
+  /** Display the toggle with no border or background */
+  isPlain: PropTypes.bool,
   /** The icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon. */
   iconComponent: PropTypes.func
 };
@@ -43,6 +45,7 @@ DropdownToggle.defaultProps = {
   isFocused: false,
   isHovered: false,
   isActive: false,
+  isPlain: false,
   onToggle: Function.prototype,
   iconComponent: CaretDownIcon
 };
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js
index 127fb90e355..4b78f79c56d 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js
@@ -31,7 +31,9 @@ Kebab.propTypes = {
   /** Forces hover state */
   isHovered: PropTypes.bool,
   /** Forces active state */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /** Display the toggle with no border or background */
+  isPlain: PropTypes.bool
 };
 Kebab.defaultProps = {
   id: '',
@@ -43,6 +45,7 @@ Kebab.defaultProps = {
   isFocused: false,
   isHovered: false,
   isActive: false,
+  isPlain: false,
   onToggle: Function.prototype
 };
 
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
index 7408a7d19a3..d1fa261c48f 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
@@ -22,7 +22,9 @@ const propTypes = {
   /** Forces hover state */
   isHovered: PropTypes.bool,
   /** Forces active state */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /** Display the toggle with no border or background */
+  isPlain: PropTypes.bool
 };
 
 const defaultProps = {
@@ -33,6 +35,7 @@ const defaultProps = {
   isFocused: false,
   isHovered: false,
   isActive: false,
+  isPlain: false,
   onToggle: Function.prototype
 };
 
@@ -70,6 +73,7 @@ class DropdownToggle extends Component {
       isFocused,
       isActive,
       isHovered,
+      isPlain,
       onToggle,
       parentRef,
       id,
@@ -87,6 +91,7 @@ class DropdownToggle extends Component {
           isFocused && styles.modifiers.focus,
           isHovered && styles.modifiers.hover,
           isActive && styles.modifiers.active,
+          isPlain && styles.modifiers.plain,
           className
         )}
         onClick={_event => onToggle && onToggle(!isOpen)}
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
index 341fbbca8f1..b13625fef0a 100644
--- 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
@@ -49,6 +49,7 @@ exports[`KebabToggle basic 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -65,6 +66,7 @@ exports[`KebabToggle basic 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={true}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -77,6 +79,7 @@ exports[`KebabToggle basic 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={true}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -237,6 +240,7 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -253,6 +257,7 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -265,6 +270,7 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -408,6 +414,7 @@ exports[`KebabToggle dropup 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -424,6 +431,7 @@ exports[`KebabToggle dropup 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -436,6 +444,7 @@ exports[`KebabToggle dropup 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -607,6 +616,7 @@ exports[`KebabToggle expanded 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -623,6 +633,7 @@ exports[`KebabToggle expanded 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={true}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -635,6 +646,7 @@ exports[`KebabToggle expanded 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={true}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -838,7 +850,7 @@ exports[`KebabToggle expanded 1`] = `
 `;
 
 exports[`KebabToggle plain 1`] = `
-.pf-c-dropdown__toggle {
+.pf-c-dropdown__toggle.pf-m-plain {
   display: flex;
   position: relative;
   align-items: center;
@@ -851,7 +863,7 @@ exports[`KebabToggle plain 1`] = `
   line-height: 1.5;
   background-color: transparent;
 }
-.pf-c-dropdown.pf-m-plain {
+.pf-c-dropdown {
   display: inline-block;
   position: relative;
   max-width: 100%;
@@ -938,13 +950,14 @@ exports[`KebabToggle plain 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
   }
 >
   <div
-    className="pf-c-dropdown pf-m-plain"
+    className="pf-c-dropdown"
   >
     <Kebab
       aria-label="Actions"
@@ -954,6 +967,7 @@ exports[`KebabToggle plain 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={true}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -966,13 +980,14 @@ exports[`KebabToggle plain 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={true}
         onToggle={[Function]}
         parentRef={null}
       >
         <button
           aria-expanded={false}
           aria-label="Actions"
-          className="pf-c-dropdown__toggle"
+          className="pf-c-dropdown__toggle pf-m-plain"
           id="Dropdown Toggle"
           onClick={[Function]}
         >
@@ -1109,6 +1124,7 @@ exports[`KebabToggle regular 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -1125,6 +1141,7 @@ exports[`KebabToggle regular 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -1137,6 +1154,7 @@ exports[`KebabToggle regular 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -1280,6 +1298,7 @@ exports[`KebabToggle right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     />
@@ -1296,6 +1315,7 @@ exports[`KebabToggle right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -1308,6 +1328,7 @@ exports[`KebabToggle right aligned 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -1405,6 +1426,7 @@ exports[`dropdown basic 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -1423,6 +1445,7 @@ exports[`dropdown basic 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={true}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -1434,6 +1457,7 @@ exports[`dropdown basic 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={true}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -1602,6 +1626,7 @@ exports[`dropdown dropup + right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -1620,6 +1645,7 @@ exports[`dropdown dropup + right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -1631,6 +1657,7 @@ exports[`dropdown dropup + right aligned 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -1782,6 +1809,7 @@ exports[`dropdown dropup 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -1800,6 +1828,7 @@ exports[`dropdown dropup 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -1811,6 +1840,7 @@ exports[`dropdown dropup 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -1990,6 +2020,7 @@ exports[`dropdown expanded 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -2008,6 +2039,7 @@ exports[`dropdown expanded 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={true}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -2019,6 +2051,7 @@ exports[`dropdown expanded 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={true}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -2330,6 +2363,7 @@ exports[`dropdown regular 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -2348,6 +2382,7 @@ exports[`dropdown regular 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -2359,6 +2394,7 @@ exports[`dropdown regular 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
@@ -2510,6 +2546,7 @@ exports[`dropdown right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       onToggle={[Function]}
       parentRef={null}
     >
@@ -2528,6 +2565,7 @@ exports[`dropdown right aligned 1`] = `
       isFocused={false}
       isHovered={false}
       isOpen={false}
+      isPlain={false}
       key=".0"
       onToggle={[Function]}
       parentRef={null}
@@ -2539,6 +2577,7 @@ exports[`dropdown right aligned 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
+        isPlain={false}
         onToggle={[Function]}
         parentRef={null}
       >
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
index 75cf6e6a479..f88bb1deac8 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
@@ -29,6 +29,7 @@ exports[`state active 1`] = `
   isFocused={false}
   isHovered={false}
   isOpen={false}
+  isPlain={false}
   onToggle={[Function]}
   parentRef={<div />}
 >
@@ -39,6 +40,7 @@ exports[`state active 1`] = `
     isFocused={false}
     isHovered={false}
     isOpen={false}
+    isPlain={false}
     onToggle={[Function]}
     parentRef={<div />}
   >
@@ -110,6 +112,7 @@ exports[`state focus 1`] = `
   isFocused={true}
   isHovered={false}
   isOpen={false}
+  isPlain={false}
   onToggle={[Function]}
   parentRef={<div />}
 >
@@ -120,6 +123,7 @@ exports[`state focus 1`] = `
     isFocused={true}
     isHovered={false}
     isOpen={false}
+    isPlain={false}
     onToggle={[Function]}
     parentRef={<div />}
   >
@@ -191,6 +195,7 @@ exports[`state hover 1`] = `
   isFocused={false}
   isHovered={true}
   isOpen={false}
+  isPlain={false}
   onToggle={[Function]}
   parentRef={<div />}
 >
@@ -201,6 +206,7 @@ exports[`state hover 1`] = `
     isFocused={false}
     isHovered={true}
     isOpen={false}
+    isPlain={false}
     onToggle={[Function]}
     parentRef={<div />}
   >
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
index 86303eb093e..71a66749b77 100644
--- 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
@@ -29,6 +29,7 @@ exports[`Dropdown toggle 1`] = `
   isFocused={false}
   isHovered={false}
   isOpen={false}
+  isPlain={false}
   onToggle={[Function]}
   parentRef={null}
 >
@@ -39,6 +40,7 @@ exports[`Dropdown toggle 1`] = `
     isFocused={false}
     isHovered={false}
     isOpen={false}
+    isPlain={false}
     onToggle={[Function]}
     parentRef={null}
   >
@@ -104,6 +106,7 @@ exports[`Kebab toggle 1`] = `
   isFocused={false}
   isHovered={false}
   isOpen={false}
+  isPlain={false}
   onToggle={[Function]}
   parentRef={null}
 >
@@ -115,6 +118,7 @@ exports[`Kebab toggle 1`] = `
     isFocused={false}
     isHovered={false}
     isOpen={false}
+    isPlain={false}
     onToggle={[Function]}
     parentRef={null}
   >