fix(Dropdown): Apply pf-m-plain modifier to dropdown toggle element instead of wrapper

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}

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;
 }
 

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
 };

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
 };
 

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)}