@patternfly/react-core 5.0.0-alpha.40 → 5.0.0-alpha.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.40",
+  "version": "5.0.0-alpha.42",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d783cc19e80a771ef14a16b9f2a3a71ce11e6225"
+  "gitHead": "966feee1c2aac99d2f7dfa6e59199cdd2f9db811"
 }

package/src/components/Banner/Banner.tsx

@@ -14,7 +14,7 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    */
   screenReaderText?: string;
   /** Variant styles for the banner. */
-  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
+  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -28,7 +28,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
   <div
     className={css(
       styles.banner,
-      styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
+      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
       isSticky && styles.modifiers.sticky,
       className
     )}

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

@@ -31,24 +31,24 @@ test('Renders without any modifier class when variant prop is not passed', () =>
   expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
 });
 
-test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
-  render(<Banner variant="success">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
+  render(<Banner variant="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
-  render(<Banner variant="danger">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
+  render(<Banner variant="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
-  render(<Banner variant="warning">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
+  render(<Banner variant="gold">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
-  render(<Banner variant="info">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
+  render(<Banner variant="blue">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
 test('Does not render pf-u-screen-reader class by default', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,12 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="info">Blue banner</Banner>
+    <Banner variant="blue">Blue banner</Banner>
     <br />
-    <Banner variant="danger">Red banner</Banner>
+    <Banner variant="red">Red banner</Banner>
     <br />
-    <Banner variant="success">Green banner</Banner>
+    <Banner variant="green">Green banner</Banner>
     <br />
-    <Banner variant="warning">Gold banner</Banner>
+    <Banner variant="gold">Gold banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -17,7 +17,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="info">
+    <Banner screenReaderText="Info banner" variant="blue">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <InfoCircleIcon />
@@ -26,7 +26,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="danger">
+    <Banner screenReaderText="Danger banner" variant="red">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,7 +35,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="success">
+    <Banner screenReaderText="Success banner" variant="green">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <CheckCircleIcon />
@@ -44,7 +44,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="warning">
+    <Banner screenReaderText="Warning banner" variant="gold">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationTriangleIcon />

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -261,10 +261,12 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
           )}
           ref={panel}
           onTransitionEnd={(ev) => {
-            if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-              onExpand();
+            if (ev.target as HTMLElement === panel.current) {
+              if (!hidden && ev.nativeEvent.propertyName === 'transform') {
+                onExpand();
+              }
+              setIsExpandedInternal(!hidden);
             }
-            setIsExpandedInternal(!hidden);
           }}
           hidden={hidden}
           {...((defaultSize || minSize || maxSize) && {