@patternfly/react-core 4.202.1 → 4.202.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.1",
+  "version": "4.202.2",
   "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.2",
+    "@patternfly/react-styles": "^4.52.2",
+    "@patternfly/react-tokens": "^4.54.2",
     "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": "91da841142369098e1ef2936b69fd90e4379a1e6"
 }

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