@patternfly/react-core 6.5.0-prerelease.53 → 6.5.0-prerelease.55

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.52","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.54","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.52","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.54","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.52","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.54","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.53",
+  "version": "6.5.0-prerelease.55",
   "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",
@@ -46,7 +46,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.22",
+    "@patternfly/react-icons": "^6.5.0-prerelease.23",
     "@patternfly/react-styles": "^6.5.0-prerelease.17",
     "@patternfly/react-tokens": "^6.5.0-prerelease.16",
     "focus-trap": "7.6.6",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a820a1d977bdd179815a36be31d3dcbcd0644995"
+  "gitHead": "1b353ef98b029c4eca5df03d6f47f826705eada9"
 }

package/src/components/HelperText/examples/HelperText.md

@@ -9,7 +9,7 @@ import { Fragment } from 'react';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
 import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 
 ## Examples

package/src/components/HelperText/examples/HelperTextWithCustomIcon.tsx

@@ -4,7 +4,7 @@ import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
 import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
   <Fragment>
@@ -27,7 +27,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="error" icon={<TimesIcon />}>
+      <HelperTextItem variant="error" icon={<RhMicronsCloseIcon />}>
         This is error helper text
       </HelperTextItem>
     </HelperText>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -45,6 +45,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** @beta Flag indicating the toggle is placed inside a form */
+  isInForm?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
   /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */
@@ -83,6 +85,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isInForm: false,
     isPlaceholder: false,
     isCircle: false,
     size: 'default',
@@ -99,6 +102,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isInForm,
       isPlaceholder,
       isCircle,
       isSettings,
@@ -179,9 +183,10 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             variant === 'secondary' && styles.modifiers.secondary,
             status && styles.modifiers[status],
             (isPlain || isPlainText) && styles.modifiers.plain,
-            isPlainText && 'pf-m-text',
+            isPlainText && styles.modifiers.text,
             isFullHeight && styles.modifiers.fullHeight,
             isFullWidth && styles.modifiers.fullWidth,
+            isInForm && styles.modifiers.form,
             isDisabled && styles.modifiers.disabled,
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -57,6 +57,13 @@ describe('Old Snapshot tests - remove when refactoring', () => {
 
 const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead'];
 
+test(`Renders with classes ${styles.modifiers.plain} and ${styles.modifiers.text} when variant="plainText" is passed`, () => {
+  render(<MenuToggle variant="plainText">Toggle</MenuToggle>);
+  const toggle = screen.getByRole('button');
+  expect(toggle).toHaveClass(styles.modifiers.plain);
+  expect(toggle).toHaveClass(styles.modifiers.text);
+});
+
 test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
   render(<MenuToggle size="sm">Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
@@ -101,6 +108,16 @@ test('split toggle passes onClick', async () => {
   expect(mockClick).toHaveBeenCalled();
 });
 
+test(`Renders with class ${styles.modifiers.form} when isInForm is passed`, () => {
+  render(<MenuToggle isInForm>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.form);
+});
+
+test(`Does not render class ${styles.modifiers.form} when isInForm is false`, () => {
+  render(<MenuToggle isInForm={false}>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.form);
+});
+
 test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
   render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);

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

@@ -179,6 +179,14 @@ In the following example, the toggle fills the width of its parent as the window
 
 ```
 
+### Toggle in a form
+
+When a menu toggle is used inside a form, pass the `isInForm` property so the toggle receives form-appropriate styling.
+
+```ts file="MenuToggleInForm.tsx"
+
+```
+
 ### Typeahead toggle
 
 To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>`. Then, pass a `<TextInputGroup>` component as a child of the `<MenuToggle>`.

package/src/components/MenuToggle/examples/MenuToggleInForm.tsx

@@ -0,0 +1,7 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleInForm = (): JSX.Element => (
+  <MenuToggle isInForm aria-label="Menu toggle in a form">
+    In form
+  </MenuToggle>
+);

package/src/demos/CustomMenus/CustomMenus.md

@@ -20,7 +20,7 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';

package/src/demos/HelperText.md

@@ -9,7 +9,7 @@ import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-wa
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Demos
 

package/src/demos/Toolbar.md

@@ -11,7 +11,7 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos