Merge 8e67198 into 7b750c6

patternfly · Jun 12, 2019 · 5f6b120 · 5f6b120
2 parents 7b750c6 + 8e67198
commit 5f6b120
Show file tree

Hide file tree

Showing 14 changed files with 7,699 additions and 3,605 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -67,7 +67,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
                 })
             )}
             {isOpen && (
-              <DropdownContext.Provider value={ onSelect }>
+              <DropdownContext.Provider value={{ onSelect }}>
                 <ApplicationLauncherMenu
                   isOpen={isOpen}
                   position="left"
@@ -83,4 +83,4 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       </GenerateId>
     );
   }
-}
+}
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts
@@ -17,4 +17,6 @@ export interface DropdownProps extends HTMLProps<HTMLDivElement> {
 
 declare const Dropdown: FunctionComponent<DropdownProps>;
 
+export const DropdownWithContext: FunctionComponent<DropdownProps>;
+
 export default Dropdown;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
@@ -52,7 +52,7 @@ const defaultProps = {
   onSelect: Function.prototype
 };
 
-class Dropdown extends React.Component {
+export class DropdownWithContext extends React.Component {
   onEnter = () => {
     this.openedOnEnter = true;
   };
@@ -88,48 +88,66 @@ class Dropdown extends React.Component {
       renderedContent = children;
     }
     return (
-      <div
-        {...props}
-        className={css(
-          styles.dropdown,
-          direction === DropdownDirection.up && styles.modifiers.top,
-          isOpen && styles.modifiers.expanded,
-          className
+      <DropdownContext.Consumer>
+        {({ baseClass }) => (
+          <div
+            {...props}
+            className={css(
+              baseClass,
+              direction === DropdownDirection.up && styles.modifiers.top,
+              isOpen && styles.modifiers.expanded,
+              className
+            )}
+            ref={ref => {
+              this.parentRef = ref;
+            }}
+          >
+            {Children.map(toggle, oneToggle =>
+              cloneElement(oneToggle, {
+                parentRef: this.parentRef,
+                isOpen,
+                id,
+                isPlain,
+                ariaHasPopup,
+                onEnter: this.onEnter
+              })
+            )}
+            {isOpen && (
+              <DropdownMenu
+                component={component}
+                isOpen={isOpen}
+                position={position}
+                aria-labelledby={id}
+                openedOnEnter={this.openedOnEnter}
+                isGrouped={isGrouped}
+              >
+                {renderedContent}
+              </DropdownMenu>
+            )}
+          </div>
         )}
-        ref={ref => {
-          this.parentRef = ref;
-        }}
-      >
-        {Children.map(toggle, oneToggle =>
-          cloneElement(oneToggle, {
-            parentRef: this.parentRef,
-            isOpen,
-            id,
-            isPlain,
-            ariaHasPopup,
-            onEnter: this.onEnter
-          })
-        )}
-        {isOpen && (
-          <DropdownContext.Provider value={event => onSelect && onSelect(event)}>
-            <DropdownMenu
-              component={component}
-              isOpen={isOpen}
-              position={position}
-              aria-labelledby={id}
-              openedOnEnter={this.openedOnEnter}
-              isGrouped={isGrouped}
-            >
-              {renderedContent}
-            </DropdownMenu>
-          </DropdownContext.Provider>
-        )}
-      </div>
+      </DropdownContext.Consumer>
     );
   }
 }
 
+const Dropdown = ({ onSelect, ...props }) => (
+  <DropdownContext.Provider
+    value={{
+      onSelect: event => onSelect && onSelect(event),
+      menuClass: styles.dropdownMenu,
+      itemClass: styles.dropdownMenuItem,
+      toggleClass: styles.dropdownToggle,
+      baseClass: styles.dropdown
+    }}
+  >
+    <DropdownWithContext {...props} />
+  </DropdownContext.Provider>
+);
+
 Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
+DropdownWithContext.propTypes = propTypes;
+DropdownWithContext.defaultProps = defaultProps;
 
 export default Dropdown;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js
@@ -112,23 +112,23 @@ class DropdownItem extends React.Component {
       this.props.role === 'separator'
         ? (classes = className)
         : (classes = css(
-            dropdownStyles.dropdownMenuItem,
             isDisabled && dropdownStyles.modifiers.disabled,
             isHovered && dropdownStyles.modifiers.hover,
             className
           ));
     }
     return (
       <DropdownContext.Consumer>
-        {onSelect => (
+        {({ onSelect, itemClass }) => (
           <li role="none">
             {React.isValidElement(children) ? (
               React.Children.map(children, child =>
                 React.cloneElement(child, {
                   className: `${css(
                     isDisabled && dropdownStyles.modifiers.disabled,
                     isHovered && dropdownStyles.modifiers.hover,
-                    className
+                    className,
+                    itemClass
                   )} ${child.props.className}`,
                   ref: this.ref,
                   onKeyDown: this.onKeyDown,
@@ -143,7 +143,7 @@ class DropdownItem extends React.Component {
             ) : (
               <Component
                 {...additionalProps}
-                className={classes}
+                className={css(classes, this.props.role !== 'separator' && itemClass)}
                 ref={this.ref}
                 onKeyDown={this.onKeyDown}
                 onClick={event => {

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
@@ -148,10 +148,10 @@ class DropdownMenu extends React.Component {
       >
         {Component === 'div' ? (
           <DropdownContext.Consumer>
-            {onSelect => (
+            {({ onSelect, menuClass }) => (
               <ul
                 className={css(
-                  styles.dropdownMenu,
+                  menuClass,
                   position === DropdownPosition.right && styles.modifiers.alignRight,
                   className
                 )}
@@ -164,31 +164,39 @@ class DropdownMenu extends React.Component {
           </DropdownContext.Consumer>
         ) : (
           (isGrouped && (
-            <div
-              {...props}
-              className={css(
-                styles.dropdownMenu,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                className
+            <DropdownContext.Consumer>
+              {({ menuClass }) => (
+                <div
+                  {...props}
+                  className={css(
+                    menuClass,
+                    position === DropdownPosition.right && styles.modifiers.alignRight,
+                    className
+                  )}
+                  hidden={!isOpen}
+                  role="menu"
+                >
+                  {this.extendChildren()}
+                </div>
               )}
-              hidden={!isOpen}
-              role="menu"
-            >
-              {this.extendChildren()}
-            </div>
+            </DropdownContext.Consumer>
           )) || (
-            <Component
-              {...props}
-              className={css(
-                styles.dropdownMenu,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                className
+            <DropdownContext.Consumer>
+              {({ menuClass }) => (
+                <Component
+                  {...props}
+                  className={css(
+                    menuClass,
+                    position === DropdownPosition.right && styles.modifiers.alignRight,
+                    className
+                  )}
+                  hidden={!isOpen}
+                  role="menu"
+                >
+                  {this.extendChildren()}
+                </Component>
               )}
-              hidden={!isOpen}
-              role="menu"
-            >
-              {this.extendChildren()}
-            </Component>
+            </DropdownContext.Consumer>
           )
         )}
       </DropdownArrowContext.Provider>

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
 import { KEY_CODES } from '../../helpers/constants';
 
@@ -121,30 +122,34 @@ class Toggle extends Component {
       ...props
     } = this.props;
     return (
-      <button
-        {...props}
-        id={id}
-        ref={toggle => {
-          this.toggle = toggle;
-        }}
-        className={css(
-          isSplitButton ? styles.dropdownToggleButton : styles.dropdownToggle,
-          isFocused && styles.modifiers.focus,
-          isHovered && styles.modifiers.hover,
-          isActive && styles.modifiers.active,
-          isPlain && styles.modifiers.plain,
-          isDisabled && styles.modifiers.disabled,
-          className
+      <DropdownContext.Consumer>
+        {({ toggleClass }) => (
+          <button
+            {...props}
+            id={id}
+            ref={toggle => {
+              this.toggle = toggle;
+            }}
+            className={css(
+              isSplitButton ? styles.dropdownToggleButton : toggleClass || styles.dropdownToggle,
+              isFocused && styles.modifiers.focus,
+              isHovered && styles.modifiers.hover,
+              isActive && styles.modifiers.active,
+              isPlain && styles.modifiers.plain,
+              isDisabled && styles.modifiers.disabled,
+              className
+            )}
+            type={type || 'button'}
+            onClick={event => onToggle && onToggle(!isOpen, event)}
+            aria-expanded={isOpen}
+            aria-haspopup={ariaHasPopup}
+            onKeyDown={this.onKeyDown}
+            disabled={isDisabled}
+          >
+            {children}
+          </button>
         )}
-        type={type || 'button'}
-        onClick={event => onToggle && onToggle(!isOpen, event)}
-        aria-expanded={isOpen}
-        aria-haspopup={ariaHasPopup}
-        onKeyDown={this.onKeyDown}
-        disabled={isDisabled}
-      >
-        {children}
-      </button>
+      </DropdownContext.Consumer>
     );
   }
 }