@patternfly/react-core 5.0.0-prerelease.18 → 5.0.0-prerelease.19

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":"5.0.0-prerelease.17"}
+{"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":"5.0.0-prerelease.18"}

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":"5.0.0-prerelease.17"}
+{"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":"5.0.0-prerelease.18"}

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":"5.0.0-prerelease.17"}
+{"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":"5.0.0-prerelease.18"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.18",
+  "version": "5.0.0-prerelease.19",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b4aec63b97f1861401eba8ea6d6c73a8ddde8df1"
+  "gitHead": "6095c308cc657591867e24fa5277ed010d76ed53"
 }

package/src/components/Toolbar/ToolbarContent.tsx

@@ -17,8 +17,10 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Vertical alignment. */
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
   children?: React.ReactNode;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
@@ -55,6 +57,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
+      alignSelf,
       ...props
     } = this.props;
 
@@ -76,8 +79,9 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                 showClearFiltersButton: showClearFiltersButtonContext,
                 toolbarId: toolbarIdContext
               }) => {
-                const expandableContentId = `${toolbarId ||
-                  toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+                const expandableContentId = `${
+                  toolbarId || toolbarIdContext
+                }-expandable-content-${ToolbarContent.currentId++}`;
                 return (
                   <ToolbarContentContext.Provider
                     value={{
@@ -89,7 +93,12 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
-                        alignItems === 'center' && styles.modifiers.alignItemsCenter
+                        alignItems === 'center' && styles.modifiers.alignItemsCenter,
+                        alignItems === 'start' && styles.modifiers.alignItemsStart,
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
+                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -32,9 +32,9 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     '2xl'?: 'alignRight' | 'alignLeft';
   };
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -87,8 +87,10 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+              alignSelf === 'start' && styles.modifiers.alignSelfStart,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
               isOverflowContainer && styles.modifiers.overflowContainer,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -47,8 +47,10 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment of children */
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -84,6 +86,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   widths,
   align,
   alignSelf,
+  alignItems,
   id,
   children,
   isAllExpanded,
@@ -123,6 +126,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            alignItems === 'start' && styles.modifiers.alignItemsStart,
+            alignItems === 'center' && styles.modifiers.alignItemsCenter,
+            alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+            alignSelf === 'start' && styles.modifiers.alignSelfStart,
             alignSelf === 'center' && styles.modifiers.alignSelfCenter,
             alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
             className