@patternfly/react-core 6.2.0-prerelease.14 → 6.2.0-prerelease.15

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.2.0-prerelease.13","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.2.0-prerelease.14","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.2.0-prerelease.13","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.2.0-prerelease.14","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.2.0-prerelease.13","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.2.0-prerelease.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.14",
+  "version": "6.2.0-prerelease.15",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d885c9f1b4b33197d643c3332593d11e717c09ef"
+  "gitHead": "a2cb15519172f33cc701fd6b6cc5e7405a6d8a4c"
 }

package/src/components/Toolbar/examples/Toolbar.md

@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
-### Toolbar item spacers
-
-You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
-
-Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
-
-```ts file="./ToolbarSpacers.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
@@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
+
+## Examples with toolbar spacers
+You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
+
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+
+### Toolbar group spacers
+
+```ts file="./ToolbarGroupSpacers.tsx"
+
+```
+
+### Toolbar item spacers
+
+```ts file="./ToolbarItemSpacers.tsx"
+
+```

package/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarGroupSpacers: React.FunctionComponent = () => {
+  const groupGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupRowGapItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+    </>
+  );
+};

package/src/components/Toolbar/examples/ToolbarItemSpacers.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarItemSpacers: React.FunctionComponent = () => {
+  const itemGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem gap={{ default: 'gapNone' }}>
+          <Button variant="secondary">No Gap</Button>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapSm' }}>
+          <Button variant="secondary">Small Gap</Button>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapXl' }}>
+          <Button variant="secondary">Extra Large Gap</Button>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
+          <Button variant="secondary">No Column Gap</Button>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
+          <Button variant="secondary">Small Column Gap</Button>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+          <Button variant="secondary">No Row Gap</Button>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+          <Button variant="secondary">Small Row Gap</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
+      </Toolbar>
+    </>
+  );
+};

package/src/components/Toolbar/examples/ToolbarSpacers.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
-
-export const ToolbarSpacers: React.FunctionComponent = () => {
-  const items = (
-    <React.Fragment>
-      <ToolbarGroup variant="action-group">
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ lg: 'gapSm' }}>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="primary">Action</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ lg: 'gapLg' }}>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="secondary">Action</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-    </React.Fragment>
-  );
-
-  return (
-    <Toolbar id="toolbar-spacers">
-      <ToolbarContent>{items}</ToolbarContent>
-    </Toolbar>
-  );
-};