@patternfly/react-core 4.266.0 → 4.266.2

package/src/components/Pagination/examples/Pagination.md

@@ -49,3 +49,8 @@ By not passing `itemCount` and passing `toggleTemplate` you can customize the to
 
 ```ts isFullscreen file="./PaginationSticky.tsx"
 ```
+
+### Inset
+
+```ts file="./PaginationInset.tsx" isBeta
+```

package/src/components/Pagination/examples/PaginationInset.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationInset: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="inset-example"
+      onPerPageSelect={onPerPageSelect}
+      inset={{
+        default: 'insetNone',
+        md: 'insetMd',
+        lg: 'inset2xl'
+      }}
+    />
+  );
+};

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -3,8 +3,9 @@ import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } f
 
 export const PaginationSticky: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [perPage, setPerPage] = React.useState(100);
   const [isTopSticky, setIsTopSticky] = React.useState(true);
+  const itemCount = 523;
 
   const onToggleSticky = () => {
     setIsTopSticky(prev => !prev);
@@ -23,59 +24,50 @@ export const PaginationSticky: React.FunctionComponent = () => {
     setPage(newPage);
   };
 
-  return (
-    <div>
-      {isTopSticky && (
-        <React.Fragment>
-          <Pagination
-            perPageComponent="button"
-            itemCount={523}
-            perPage={perPage}
-            page={page}
-            onSetPage={onSetPage}
-            widgetId="sticky-example"
-            onPerPageSelect={onPerPageSelect}
-            isSticky
-          >
-            <button onClick={onToggleSticky}>Toggle to bottom position</button>
-          </Pagination>
-          <Gallery hasGutter>
-            {Array.apply(0, Array(40)).map((x, i) => (
-              <GalleryItem key={i}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </React.Fragment>
-      )}
-      {!isTopSticky && (
-        <React.Fragment>
-          <Gallery hasGutter>
-            {Array.apply(0, Array(40)).map((x, i) => (
-              <GalleryItem key={i}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-          <Pagination
-            perPageComponent="button"
-            itemCount={523}
-            perPage={perPage}
-            page={page}
-            onSetPage={onSetPage}
-            widgetId="pagination-options-menu-top"
-            onPerPageSelect={onPerPageSelect}
-            isSticky
-            variant={PaginationVariant.bottom}
-          >
-            <button onClick={onToggleSticky}>Toggle to top position</button>
-          </Pagination>
-        </React.Fragment>
-      )}
-    </div>
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.apply(0, Array(numberOfCards)).map((x, i) => (
+      <GalleryItem key={i}>
+        <Card>
+          <CardBody>This is a card</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return isTopSticky ? (
+    <React.Fragment>
+      <Pagination
+        perPageComponent="button"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={onPerPageSelect}
+        isSticky
+      >
+        <button onClick={onToggleSticky}>Toggle to bottom position</button>
+      </Pagination>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+    </React.Fragment>
+  ) : (
+    <React.Fragment>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+      <Pagination
+        perPageComponent="button"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={onPerPageSelect}
+        isSticky
+        variant={PaginationVariant.bottom}
+      >
+        <button onClick={onToggleSticky}>Toggle to top position</button>
+      </Pagination>
+    </React.Fragment>
   );
 };

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

@@ -1,62 +1,100 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
-import { PanelHeader } from '../PanelHeader';
-import { PanelFooter } from '../PanelFooter';
-
-describe('Panel', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<Panel>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with raised styling', () => {
-    const { asFragment } = render(<Panel variant="raised">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with bordered styling', () => {
-    const { asFragment } = render(<Panel variant="bordered">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with scrollable styling', () => {
-    const { asFragment } = render(<Panel isScrollable>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMain', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMain>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with the set maximum height', () => {
-    const { asFragment } = render(<PanelMain maxHeight={'80px'}>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMainBody', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMainBody>Foo</PanelMainBody>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelHeader', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelHeader>Foo</PanelHeader>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelFooter', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelFooter>Foo</PanelFooter>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panel">
+      <Panel />
+    </div>
+  );
+  expect(screen.getByTestId('panel').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel');
+});
+
+test('Renders with only the class pf-c-panel by default', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Panel className="test-class">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with class name pf-m-raised when variant is raised', () => {
+  render(<Panel variant="raised">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+});
+
+test('Renders with class name pf-m-bordered when variant is bordered', () => {
+  render(<Panel variant="bordered">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+});
+
+test('Renders with class name pf-m-scrollable when isScrollable is true', () => {
+  render(<Panel isScrollable>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+});
+
+test('Renders with ref', async () => {
+  const user = userEvent.setup();
+  const panelRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+  const BasicPanel = () => {
+    const [lastClickWasInPanel, setLastClickWasInPanel] = React.useState(false);
+
+    const handleClick = event => {
+      if (panelRef.current && panelRef.current.contains(event.target)) {
+        setLastClickWasInPanel(true);
+      } else {
+        setLastClickWasInPanel(false);
+      }
+    };
+
+    useEffect(() => {
+      document.addEventListener('click', handleClick);
+    }, []);
+
+    return (
+      <div>
+        <Panel ref={panelRef}>
+          <PanelMain>
+            <PanelMainBody>Main content</PanelMainBody>
+          </PanelMain>
+        </Panel>
+        <p>Last click was in panel: {lastClickWasInPanel ? 'true' : 'false'}</p>
+      </div>
+    );
+  };
+
+  render(<BasicPanel />);
+
+  await user.click(document.body);
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  await user.click(screen.getByText('Main content'));
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<Panel aria-label="this is a simple panel">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Panel>Test</Panel>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelFooter } from '../PanelFooter';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelFooter">
+      <PanelFooter />
+    </div>
+  );
+  expect(screen.getByTestId('panelFooter').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__footer', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer');
+});
+
+test('Renders with only the class pf-c-panel__footer by default', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelFooter className="test-class">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelFooter aria-label="this is a simple panel footer">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel footer');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelFooter>Test</PanelFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelHeader } from '../PanelHeader';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelHeader">
+      <PanelHeader />
+    </div>
+  );
+  expect(screen.getByTestId('panelHeader').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__header', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header');
+});
+
+test('Renders with only the class pf-c-panel__header by default', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelHeader className="test-class">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelHeader aria-label="this is a simple panel header">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel header');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelHeader>Test</PanelHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMain } from '../PanelMain';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMain">
+      <PanelMain />
+    </div>
+  );
+  expect(screen.getByTestId('panelMain').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__main', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main');
+});
+
+test('Renders with only the class pf-c-panel__main by default', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMain className="test-class">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with custom max height name when maxHeight prop is passed', () => {
+  render(<PanelMain maxHeight="100px">Test</PanelMain>);
+  const styles = getComputedStyle(screen.getByText('Test'));
+  expect(styles.getPropertyValue('--pf-c-panel__main--MaxHeight')).toBe('100px');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMain aria-label="this is a simple panel main">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMain>Test</PanelMain>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMainBody } from '../PanelMainBody';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMainBody">
+      <PanelMainBody />
+    </div>
+  );
+  expect(screen.getByTestId('panelMainBody').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__main-body', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body');
+});
+
+test('Renders with only the class pf-c-panel__main-body by default', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMainBody className="test-class">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMainBody aria-label="this is a simple panel main body">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main body');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMainBody>Test</PanelMainBody>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -1,92 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Panel renders content 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-panel"
   >
-    Foo
+    Test
   </div>
 </DocumentFragment>
 `;
 
-exports[`Panel renders content with bordered styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-bordered"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with raised styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-raised"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with scrollable styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-scrollable"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelFooter renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__footer"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelHeader renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__header"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content with the set maximum height 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-    style="--pf-c-panel__main--MaxHeight: 80px;"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMainBody renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main-body"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;

package/src/components/Panel/__tests__/__snapshots__/PanelFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__footer"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelHeader.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__header"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelMain.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelMainBody.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Sidebar/SidebarPanel.tsx

@@ -3,6 +3,16 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 import { formatBreakpointMods } from '../../helpers/util';
 
+export enum SidebarPanelWidthType {
+  default = 'default',
+  width25 = 'width_25',
+  width33 = 'width_33',
+  width50 = 'width_50',
+  width66 = 'width_66',
+  width75 = 'width_75',
+  width100 = 'width_100'
+}
+
 export interface SidebarPanelProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
   children: React.ReactNode;
   /** Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split. */