@patternfly/react-core 4.202.1 → 4.202.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.1",
+  "version": "4.202.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.1",
-    "@patternfly/react-styles": "^4.52.1",
-    "@patternfly/react-tokens": "^4.54.1",
+    "@patternfly/react-icons": "^4.53.4",
+    "@patternfly/react-styles": "^4.52.4",
+    "@patternfly/react-tokens": "^4.54.4",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fc88ddd5f942598163a34ad5a8df86215cc7a6a5"
+  "gitHead": "b690e1d99c3286250b85d61e543251538a86cf3f"
 }

package/src/components/Dropdown/examples/Dropdown.md

@@ -444,11 +444,7 @@ const SecondaryDropdown = () => {
         onFocus();
       }}
       toggle={
-        <DropdownToggle
-          onToggle={next => setIsOpen(next)}
-          toggleIndicator={CaretDownIcon}
-          id="toggle-id-plain-text"
-        >
+        <DropdownToggle onToggle={next => setIsOpen(next)} toggleIndicator={CaretDownIcon} id="toggle-id-plain-text">
           Dropdown
         </DropdownToggle>
       }
@@ -1489,53 +1485,95 @@ class ImageTextDropdown extends React.Component {
 }
 ```
 
-### Append menu document body
+### Appending document body vs parent
+
+Avoid passing in `document.body` when passing a value to the `menuAppendTo` prop on the Dropdown component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers).
+
+Instead append to `"parent"` to achieve the same result without sacrificing accessibility.
+
+In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the `document.body` variant cannot be navigated to via Voice Over.
 
 ```js
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, Flex } from '@patternfly/react-core';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
-class MenuOnDocumentBodyDropdown extends React.Component {
+class DropdownDocumentBodyVsParent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isOpen: false
+      isBodyOpen: false,
+      isParentOpen: false
     };
-    this.onToggle = isOpen => {
+    this.onBodyToggle = isBodyOpen => {
       this.setState({
-        isOpen
+        isBodyOpen
       });
     };
-    this.onSelect = event => {
+    this.onBodySelect = event => {
       this.setState({
-        isOpen: !this.state.isOpen
+        isBodyOpen: !this.state.isBodyOpen
       });
-      this.onFocus();
+      this.onBodyFocus();
     };
-    this.onFocus = () => {
-      const element = document.getElementById('toggle-id-menu-document-body');
+    this.onBodyFocus = () => {
+      const element = document.getElementById('toggle-id-document-body');
+      element.focus();
+    };
+
+    this.onParentToggle = isParentOpen => {
+      this.setState({
+        isParentOpen
+      });
+    };
+    this.onParentSelect = event => {
+      this.setState({
+        isParentOpen: !this.state.isParentOpen
+      });
+      this.onParentFocus();
+    };
+    this.onParentFocus = () => {
+      const element = document.getElementById('toggle-id-parent');
       element.focus();
     };
   }
 
   render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [<DropdownItem key="link">1</DropdownItem>];
+    const { isBodyOpen, isParentOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled href="www.google.com">
+        Disabled link
+      </DropdownItem>
+    ];
     return (
-      <div style={{ height: '50px', overflow: 'hidden' }}>
+      <Flex>
         <Dropdown
-          onSelect={this.onSelect}
+          onSelect={this.onBodySelect}
           toggle={
-            <DropdownToggle id="toggle-id-menu-document-body" onToggle={this.onToggle} toggleIndicator={CaretDownIcon}>
-              Dropdown
+            <DropdownToggle id="toggle-id-document-body" onToggle={this.onBodyToggle} toggleIndicator={CaretDownIcon}>
+              Dropdown - Document Body
             </DropdownToggle>
           }
-          isOpen={isOpen}
+          isOpen={isBodyOpen}
           dropdownItems={dropdownItems}
           menuAppendTo={() => document.body}
         />
-      </div>
+        <Dropdown
+          onSelect={this.onParentSelect}
+          toggle={
+            <DropdownToggle id="toggle-id-parent" onToggle={this.onParentToggle} toggleIndicator={CaretDownIcon}>
+              Dropdown - Parent
+            </DropdownToggle>
+          }
+          isOpen={isParentOpen}
+          dropdownItems={dropdownItems}
+          menuAppendTo="parent"
+        />
+      </Flex>
     );
   }
 }

package/src/components/MenuToggle/MenuToggle.tsx

@@ -17,7 +17,7 @@ export interface MenuToggleProps
   /** Flag indicating the toggle is full height */
   isFullHeight?: boolean;
   /** Variant styles of the menu toggle */
-  variant?: 'default' | 'plain' | 'primary' | 'plainText';
+  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
   /** Optional icon rendered inside the toggle, before the children content */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
@@ -71,6 +71,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
           styles.menuToggle,
           isExpanded && styles.modifiers.expanded,
           variant === 'primary' && styles.modifiers.primary,
+          variant === 'secondary' && styles.modifiers.secondary,
           (isPlain || isPlainText) && styles.modifiers.plain,
           isPlainText && styles.modifiers.text,
           isFullHeight && styles.modifiers.fullHeight,

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -0,0 +1,3 @@
+#ws-react-c-menu-toggle-primary .pf-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-c-menu-toggle {
+    vertical-align: bottom;
+}

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -6,8 +6,11 @@ propComponents: ['MenuToggle']
 beta: true
 ---
 
+import './MenuToggle.css'
+
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 ## Examples
 
@@ -41,17 +44,6 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Icon
-
-```ts
-import React from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-
-<MenuToggle icon={<CogIcon />}>Icon</MenuToggle>;
-
-```
-
 ### Count
 
 ```ts
@@ -84,6 +76,28 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ```
 
+### Secondary
+
+```ts
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<React.Fragment>
+  <MenuToggle variant="secondary">Collapsed</MenuToggle>{' '}
+    <MenuToggle variant="secondary" icon={<CogIcon />}>
+    Icon
+  </MenuToggle>{' '}
+  <MenuToggle variant="secondary" isExpanded>
+    Expanded
+  </MenuToggle>{' '}
+  <MenuToggle variant="secondary" isDisabled>
+    Disabled
+  </MenuToggle>
+</React.Fragment>
+
+```
+
 ### Plain
 
 ```ts
@@ -123,6 +137,34 @@ import { MenuToggle } from '@patternfly/react-core';
 </React.Fragment>
 ```
 
+
+### With icon/image and text
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<React.Fragment>
+  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
+</React.Fragment>
+```
+
+### With avatar and text
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+<React.Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</React.Fragment>
+```
+
 ### Full height
 
 ```ts

package/src/components/Select/examples/Select.md

@@ -2210,79 +2210,122 @@ class SingleSelectInput extends React.Component {
 }
 ```
 
-### Select menu document body
+### Appending document body vs parent
+
+Avoid passing in `document.body` when passing a value to the `menuAppendTo` prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).
+
+Instead append to `"parent"` to achieve the same result without sacrificing accessibility.
+
+In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.
+
+For the `document.body` variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the `"parent"` variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case).
 
 ```js
 import React from 'react';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, Flex, FlexItem } from '@patternfly/react-core';
 
-class SelectMenuDocumentBody extends React.Component {
+class SelectDocumentBodyVsParent extends React.Component {
   constructor(props) {
     super(props);
+    this.bodyOptions = [
+      <SelectOption key={0} value="Select a title - document body" isPlaceholder />,
+      <SelectOption key={1} value="Mr" />,
+      <SelectOption key={2} value="Miss" />,
+      <SelectOption key={3} value="Mrs" />,
+      <SelectOption key={4} value="Ms" />,
+      <SelectOption key={6} value="Dr" />,
+      <SelectOption key={7} value="Other" />
+    ];
+
+    this.parentOptions = [
+      <SelectOption key={0} value="Select a title - parent" isPlaceholder />,
+      <SelectOption key={1} value="Mr" />,
+      <SelectOption key={2} value="Miss" />,
+      <SelectOption key={3} value="Mrs" />,
+      <SelectOption key={4} value="Ms" />,
+      <SelectOption key={6} value="Dr" />,
+      <SelectOption key={7} value="Other" />
+    ];
 
     this.state = {
-      isOpen: false,
-      selected: []
+      isBodyOpen: false,
+      isParentOpen: false,
+      bodySelected: null,
+      parentSelected: null
     };
 
-    this.onToggle = isOpen => {
+    this.onBodyToggle = isBodyOpen => {
       this.setState({
-        isOpen
+        isBodyOpen
       });
     };
 
-    this.onSelect = (event, selection) => {
-      const { selected } = this.state;
-      if (selected.includes(selection)) {
-        this.setState(
-          prevState => ({ selected: prevState.selected.filter(item => item !== selection) }),
-          () => console.log('selections: ', this.state.selected)
-        );
-      } else {
-        this.setState(
-          prevState => ({ selected: [...prevState.selected, selection] }),
-          () => console.log('selections: ', this.state.selected)
-        );
+    this.onParentToggle = isParentOpen => {
+      this.setState({
+        isParentOpen
+      });
+    };
+
+    this.onBodySelect = (event, selection, isPlaceholder) => {
+      if (isPlaceholder) this.clearSelection();
+      else {
+        this.setState({
+          bodySelected: selection,
+          isBodyOpen: false
+        });
+        console.log('selected on document body:', selection);
+      }
+    };
+
+    this.onParentSelect = (event, selection, isPlaceholder) => {
+      if (isPlaceholder) this.clearSelection();
+      else {
+        this.setState({
+          parentSelected: selection,
+          isParentOpen: false
+        });
+        console.log('selected on parent:', selection);
       }
     };
 
     this.clearSelection = () => {
       this.setState({
-        selected: []
+        selected: null,
+        isOpen: false
       });
     };
-
-    this.options = [
-      <SelectOption key={0} value="Debug" />,
-      <SelectOption key={1} value="Info" />,
-      <SelectOption key={2} value="Warn" />,
-      <SelectOption key={3} value="Error" />
-    ];
   }
 
   render() {
-    const { isOpen, selected } = this.state;
-    const titleId = 'checkbox-select-id-document-body';
+    const { isBodyOpen, isParentOpen, bodySelected, parentSelected } = this.state;
+
     return (
-      <div style={{ height: '50px', overflow: 'hidden' }}>
-        <span id={titleId} hidden>
-          Checkbox Title
-        </span>
-        <Select
-          variant={SelectVariant.checkbox}
-          aria-label="Select Input"
-          onToggle={this.onToggle}
-          onSelect={this.onSelect}
-          selections={selected}
-          isCheckboxSelectionBadgeHidden
-          isOpen={isOpen}
-          placeholderText="Filter by status"
-          aria-labelledby={titleId}
-          menuAppendTo={() => document.body}
-        >
-          {this.options}
-        </Select>
-      </div>
+      <Flex space={{ default: 'spacerMd' }} direction={{ default: 'column' }}>
+        <FlexItem>
+          <Select
+            aria-label="Select Input for Document Body"
+            onToggle={this.onBodyToggle}
+            onSelect={this.onBodySelect}
+            selections={bodySelected}
+            isOpen={isBodyOpen}
+            menuAppendTo={() => document.body}
+          >
+            {this.bodyOptions}
+          </Select>
+        </FlexItem>
+        <FlexItem>
+          <Select
+            aria-label="Select Input for Parent"
+            onToggle={this.onParentToggle}
+            onSelect={this.onParentSelect}
+            selections={parentSelected}
+            isOpen={isParentOpen}
+            menuAppendTo="parent"
+          >
+            {this.parentOptions}
+          </Select>
+        </FlexItem>
+      </Flex>
     );
   }
 }