npm - @patternfly/react-core - Versions diffs - 6.4.1-prerelease.8 → 6.4.1 - Mend

@patternfly/react-core 6.4.1-prerelease.8 → 6.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (332) hide show

package/src/layouts/Split/examples/Split.md CHANGED Viewed

@@ -11,17 +11,47 @@ import './split.css';
 ### Basic
-```ts file="SplitBasic.tsx"
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
+<Split>
+  <SplitItem>content</SplitItem>
+  <SplitItem isFilled>pf-m-fill</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```
 ### With gutter
-```ts file="SplitWithGutter.tsx"
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
+<Split hasGutter>
+  <SplitItem>content</SplitItem>
+  <SplitItem isFilled>pf-m-fill</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```
 ### Wrappable
-```ts file="SplitWrappable.tsx"
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
+<Split hasGutter isWrappable>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```

package/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx DELETED Viewed

@@ -1,15 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-export const MenuToggleAvatarText: React.FunctionComponent = () => (
-  <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>
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleBadge.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle, Badge } from '@patternfly/react-core';
-export const MenuToggleBadge: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-    <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx DELETED Viewed

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleDisabled.tsx DELETED Viewed

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleExpanded.tsx DELETED Viewed

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleFullHeight: React.FunctionComponent = () => (
-  <div style={{ height: '80px' }}>
-    <MenuToggle isFullHeight aria-label="Full height menu toggle">
-      Full height
-    </MenuToggle>
-  </div>
-);

package/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleFullWidth: React.FunctionComponent = () => (
-  <MenuToggle isFullWidth aria-label="Full width menu toggle">
-    Full width
-  </MenuToggle>
-);

package/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx DELETED Viewed

@@ -1,11 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-export const MenuTogglePlainIcon: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab" />{' '}
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab" />{' '}
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab" />
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
-      Disabled
-    </MenuToggle>{' '}
-    <MenuToggle variant="plainText" aria-label="Plain menu toggle">
-      Custom text
-    </MenuToggle>{' '}
-    <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
-      Custom text (expanded)
-    </MenuToggle>
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx DELETED Viewed

@@ -1,14 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-export const MenuToggleVariantStyles: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="primary" isExpanded>
-      Expanded
-    </MenuToggle>{' '}
-    <MenuToggle variant="primary" isDisabled>
-      Disabled
-    </MenuToggle>
-  </Fragment>
-);

package/src/components/Panel/examples/PanelBasic.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-export const PanelBasic: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelBordered.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-export const PanelBordered: React.FunctionComponent = () => (
-  <Panel variant="bordered">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelFooterExample.tsx DELETED Viewed

@@ -1,10 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
-export const PanelFooterExample: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelHeaderExample.tsx DELETED Viewed

@@ -1,11 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
-export const PanelHeaderExample: React.FunctionComponent = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelHeaderFooter.tsx DELETED Viewed

@@ -1,12 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-export const PanelHeaderFooter: React.FunctionComponent = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelNoBody.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import { Panel, PanelMain } from '@patternfly/react-core';
-export const PanelNoBody: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>Main content</PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelRaised.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-export const PanelRaised: React.FunctionComponent = () => (
-  <Panel variant="raised">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelScrollable.tsx DELETED Viewed

@@ -1,35 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-export const PanelScrollable: React.FunctionComponent = () => (
-  <Panel isScrollable>
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx DELETED Viewed

@@ -1,38 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
-  <Panel isScrollable>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelSecondaryVariant.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-export const PanelSecondaryVariant: React.FunctionComponent = () => (
-  <Panel variant="secondary">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/demos/Button/Button.md DELETED Viewed

@@ -1,19 +0,0 @@
----
-id: Button
-section: components
----
-import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-## Demos
-### Progress button
-The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`.
-Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior.
-```ts file="./examples/ButtonProgress.tsx"
-```

package/src/demos/PasswordGenerator/PasswordGenerator.md DELETED Viewed

@@ -1,16 +0,0 @@
----
-id: Password generator
-section: patterns
----
-import { useEffect, useRef, useState } from 'react';
-import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
-## Demos
-### Provide a generated password
-```ts file="./examples/PasswordGenerator.tsx"
-```