@patternfly/react-core 4.265.2 → 4.266.1

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SidebarContent } from '../SidebarContent';
+
+test('Renders children', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with only class name pf-c-sidebar__content by default', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content', { exact: true });
+});
+
+test('Renders with class name pf-c-sidebar__content', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<SidebarContent className="custom-class">Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<SidebarContent hasNoBackground>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<SidebarContent aria-label="Test label">Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<SidebarContent>Test</SidebarContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SidebarPanel, SidebarPanelWidthType } from '../SidebarPanel';
+
+test('Renders children', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with with only class name pf-c-sidebar__panel by default', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel', { exact: true });
+});
+
+test('Renders with with class name pf-c-sidebar__panel', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<SidebarPanel className="custom-class">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-sticky when "sticky" is passed to variant prop', () => {
+  render(<SidebarPanel variant="sticky">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-sticky');
+});
+
+test('Renders with class name pf-m-static when "static" is passed to variant prop', () => {
+  render(<SidebarPanel variant="static">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-static');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<SidebarPanel hasNoBackground>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
+});
+
+['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach(widthType => {
+  test(`Renders with appropriate class names when ${widthType} is passed to each breakpoint of width prop`, () => {
+    render(
+      <SidebarPanel
+        width={{
+          default: `${widthType as SidebarPanelWidthType}`,
+          sm: `${widthType as SidebarPanelWidthType}`,
+          md: `${widthType as SidebarPanelWidthType}`,
+          lg: `${widthType as SidebarPanelWidthType}`,
+          xl: `${widthType as SidebarPanelWidthType}`,
+          '2xl': `${widthType as SidebarPanelWidthType}`
+        }}
+      >
+        Test
+      </SidebarPanel>
+    );
+
+    const className = widthType.replace('_', '-');
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-sm`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-md`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-lg`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-xl`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-2xl`);
+  });
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<SidebarPanel aria-label="Test label">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<SidebarPanel>Test</SidebarPanel>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

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

package/src/components/Sidebar/__tests__/__snapshots__/SidebarContent.test.tsx.snap

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

package/src/components/Sidebar/__tests__/__snapshots__/SidebarPanel.test.tsx.snap

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

package/src/components/Truncate/Truncate.tsx

@@ -41,6 +41,8 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -51,9 +53,10 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
+  removeFindDomNode,
   ...props
 }: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content}>
+  <Tooltip position={tooltipPosition} content={content} removeFindDomNode={removeFindDomNode}>
     <span className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
         <span className={truncateStyles[position]}>