@patternfly/react-core 4.200.0 → 4.201.0

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

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
+import { Toolbar } from '../Toolbar';
+import { ToolbarItem } from '../ToolbarItem';
+import { ToolbarContent } from '../ToolbarContent';
+import { ToolbarFilter } from '../ToolbarFilter';
+import { ToolbarGroup } from '../ToolbarGroup';
+import { Select, SelectVariant, SelectOption } from '../../Select';
+import { Button } from '../../Button';
+
+describe('Toolbar', () => {
+  it('should render inset', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar
+        id="toolbar"
+        inset={{
+          default: 'insetNone',
+          md: 'insetSm',
+          xl: 'inset2xl',
+          '2xl': 'insetLg'
+        }}
+        data-testid="toolbar-test-id"
+      >
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+
+  it('should render with page inset flag', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" usePageInsets data-testid="toolbar-test-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+
+  it('should render with custom chip content', () => {
+    const statusMenuItems = [
+      <SelectOption key="statusNew" value="New" />,
+      <SelectOption key="statusPending" value="Pending" />,
+      <SelectOption key="statusRunning" value="Running" />,
+      <SelectOption key="statusCancelled" value="Cancelled" />
+    ];
+
+    const items = (
+      <React.Fragment>
+        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
+          <ToolbarGroup variant="filter-group">
+            <ToolbarFilter
+              chips={['New', 'Pending']}
+              deleteChip={(category, chip) => {}}
+              deleteChipGroup={category => {}}
+              categoryName="Status"
+            >
+              <Select
+                variant={SelectVariant.checkbox}
+                aria-label="Status"
+                onToggle={(isExpanded: boolean) => {}}
+                onSelect={(event, selection) => {}}
+                selections={['New', 'Pending']}
+                isOpen={true}
+                placeholderText="Status"
+              >
+                {statusMenuItems}
+              </Select>
+            </ToolbarFilter>
+          </ToolbarGroup>
+        </ToolbarToggleGroup>
+      </React.Fragment>
+    );
+
+    const customChipGroupContent = (
+      <React.Fragment>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Save filters
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Clear all filters
+          </Button>
+        </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar
+        id="toolbar-with-filter"
+        className="pf-m-toggle-group-container"
+        collapseListedFiltersBreakpoint="xl"
+        customChipGroupContent={customChipGroupContent}
+        data-testid="toolbar-test-id"
+      >
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
+    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
+    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+});

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarItem } from '../ToolbarItem';
+
+describe('ToolbarItem', () => {
+  it('should map width breakpoints', () => {
+    const widths = {
+      default: '100px',
+      sm: '80px',
+      md: '150px',
+      lg: '200px',
+      xl: '250px',
+      '2xl': '300px'
+    };
+
+    render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
+    expect(screen.getByText('Test').outerHTML).toMatchSnapshot();
+  });
+});

package/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx

@@ -1,148 +1,25 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+import { render } from '@testing-library/react';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
-import { Toolbar } from '../Toolbar';
-import { ToolbarItem } from '../ToolbarItem';
-import { ToolbarContent } from '../ToolbarContent';
-import { ToolbarFilter } from '../ToolbarFilter';
-import { ToolbarGroup } from '../ToolbarGroup';
-import { Select, SelectVariant, SelectOption } from '../../Select';
-import { Button } from '../../Button';
+import { ToolbarContentContext } from '../ToolbarUtils';
 
 describe('ToolbarToggleGroup', () => {
   it('should warn on bad props', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
-    shallow(<ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />);
-    expect(myMock).toBeCalled();
-  });
-});
 
-describe('Toolbar', () => {
-  it('should render inset', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar
-        id="toolbar"
-        inset={{
-          default: 'insetNone',
-          md: 'insetSm',
-          xl: 'inset2xl',
-          '2xl': 'insetLg'
+    render(
+      <ToolbarContentContext.Provider
+        value={{
+          expandableContentId: 'some-id',
+          expandableContentRef: { current: undefined },
+          chipContainerRef: { current: undefined }
         }}
       >
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-
-  it('should render with page inset flag', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar id="toolbar" usePageInsets>
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
+        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />
+      </ToolbarContentContext.Provider>
     );
-    expect(view.container).toMatchSnapshot();
-  });
-
-  it('should render with custom chip content', () => {
-    const statusMenuItems = [
-      <SelectOption key="statusNew" value="New" />,
-      <SelectOption key="statusPending" value="Pending" />,
-      <SelectOption key="statusRunning" value="Running" />,
-      <SelectOption key="statusCancelled" value="Cancelled" />
-    ];
 
-    const items = (
-      <React.Fragment>
-        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
-          <ToolbarGroup variant="filter-group">
-            <ToolbarFilter
-              chips={['New', 'Pending']}
-              deleteChip={(category, chip) => {}}
-              deleteChipGroup={category => {}}
-              categoryName="Status"
-            >
-              <Select
-                variant={SelectVariant.checkbox}
-                aria-label="Status"
-                onToggle={(isExpanded: boolean) => {}}
-                onSelect={(event, selection) => {}}
-                selections={['New', 'Pending']}
-                isOpen={true}
-                placeholderText="Status"
-              >
-                {statusMenuItems}
-              </Select>
-            </ToolbarFilter>
-          </ToolbarGroup>
-        </ToolbarToggleGroup>
-      </React.Fragment>
-    );
-
-    const customChipGroupContent = (
-      <React.Fragment>
-        <ToolbarItem>
-          <Button variant="link" onClick={() => {}} isInline>
-            Save filters
-          </Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="link" onClick={() => {}} isInline>
-            Clear all filters
-          </Button>
-        </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar
-        id="toolbar-with-filter"
-        className="pf-m-toggle-group-container"
-        collapseListedFiltersBreakpoint="xl"
-        customChipGroupContent={customChipGroupContent}
-      >
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
-    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
-    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
-    expect(view.container).toMatchSnapshot();
-  });
-});
-
-describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const view = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(view.container).toMatchSnapshot();
+    expect(myMock).toBeCalled();
   });
 });

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toolbar should render inset 1`] = `"<div class=\\"pf-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl\\" id=\\"toolbar\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-1\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__item\\">Test</div><div class=\\"pf-c-toolbar__item\\">Test 2</div><hr class=\\"pf-c-divider pf-m-vertical\\"><div class=\\"pf-c-toolbar__item\\">Test 3 </div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-expandable-content-0\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div><div class=\\"pf-c-toolbar__content pf-m-hidden\\" hidden=\\"\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div>"`;
+
+exports[`Toolbar should render with custom chip content 1`] = `"<div class=\\"pf-c-toolbar pf-m-toggle-group-container\\" id=\\"toolbar-with-filter\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-3\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl\\"><div class=\\"pf-c-toolbar__toggle\\"><button aria-haspopup=\\"false\\" aria-controls=\\"toolbar-with-filter-expandable-content-3\\" aria-disabled=\\"false\\" aria-label=\\"Show Filters\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-plain-1\\"></button></div><div class=\\"pf-c-toolbar__group pf-m-filter-group\\"><div class=\\"pf-c-toolbar__item\\"><div class=\\"pf-c-select pf-m-expanded\\" data-ouia-component-type=\\"PF4/Select\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Select-checkbox-2\\"><button id=\\"pf-select-toggle-id-1\\" aria-labelledby=\\" pf-select-toggle-id-1\\" aria-expanded=\\"true\\" type=\\"button\\" class=\\"pf-c-select__toggle\\" aria-label=\\"Options menu\\"><div class=\\"pf-c-select__toggle-wrapper\\"><span class=\\"pf-c-select__toggle-text\\">Status</span><div class=\\"pf-c-select__toggle-badge\\"><span class=\\"pf-c-badge pf-m-read\\">2</span></div></div><span class=\\"pf-c-select__toggle-arrow\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button><ul class=\\"pf-c-select__menu\\" role=\\"listbox\\" aria-label=\\"Status\\"><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-New\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"pf-c-check__label\\">New</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Pending\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"pf-c-check__label\\">Pending</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Running\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\"><span class=\\"pf-c-check__label\\">Running</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Cancelled\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\"><span class=\\"pf-c-check__label\\">Cancelled</span></label></ul></div></div></div></div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-with-filter-expandable-content-3\\"><div class=\\"pf-c-toolbar__group\\"></div><div class=\\"pf-c-toolbar__group pf-m-chip-container\\"><div class=\\"pf-c-toolbar__group\\"></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-3\\">Save filters</button></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-4\\">Clear all filters</button></div></div></div></div><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__group pf-m-hidden\\" hidden=\\"\\" aria-hidden=\\"true\\"><div class=\\"pf-c-toolbar__item pf-m-chip-group\\"><div class=\\"pf-c-chip-group pf-m-category\\" role=\\"group\\" aria-labelledby=\\"pf-random-id-2\\" data-ouia-component-type=\\"PF4/ChipGroup\\" data-ouia-safe=\\"true\\"><div class=\\"pf-c-chip-group__main\\"><span class=\\"pf-c-chip-group__label\\" id=\\"pf-random-id-2\\">Status</span><ul class=\\"pf-c-chip-group__list\\" aria-labelledby=\\"pf-random-id-2\\" role=\\"list\\"><li class=\\"pf-c-chip-group__list-item\\"><div class=\\"pf-c-chip\\" data-ouia-component-type=\\"PF4/Chip\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Chip-1\\"><span class=\\"pf-c-chip__text\\" id=\\"pf-random-id-3\\">New</span><button id=\\"remove_pf-random-id-3\\" aria-labelledby=\\"remove_pf-random-id-3 pf-random-id-3\\" aria-disabled=\\"false\\" aria-label=\\"close\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"close\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></div></li><li class=\\"pf-c-chip-group__list-item\\"><div class=\\"pf-c-chip\\" data-ouia-component-type=\\"PF4/Chip\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Chip-2\\"><span class=\\"pf-c-chip__text\\" id=\\"pf-random-id-4\\">Pending</span><button id=\\"remove_pf-random-id-4\\" aria-labelledby=\\"remove_pf-random-id-4 pf-random-id-4\\" aria-disabled=\\"false\\" aria-label=\\"close\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"close\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></div></li></ul></div><div class=\\"pf-c-chip-group__close\\"><button id=\\"remove_group_pf-random-id-2\\" aria-labelledby=\\"remove_group_pf-random-id-2 pf-random-id-2\\" aria-disabled=\\"false\\" aria-label=\\"Close chip group\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"Close chip group\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z\\"></path></svg></button></div></div></div></div><div class=\\"pf-c-toolbar__group\\"><div class=\\"pf-c-toolbar__item\\">2 filters applied</div></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-1\\">Save filters</button></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-2\\">Clear all filters</button></div></div></div>"`;
+
+exports[`Toolbar should render with page inset flag 1`] = `"<div class=\\"pf-c-toolbar pf-m-page-insets\\" id=\\"toolbar\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-2\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__item\\">Test</div><div class=\\"pf-c-toolbar__item\\">Test 2</div><hr class=\\"pf-c-divider pf-m-vertical\\"><div class=\\"pf-c-toolbar__item\\">Test 3 </div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-expandable-content-1\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div><div class=\\"pf-c-toolbar__content pf-m-hidden\\" hidden=\\"\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div>"`;

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarItem should map width breakpoints 1`] = `"<div class=\\"pf-c-toolbar__item\\" style=\\"--pf-c-toolbar__item--Width: 100px; --pf-c-toolbar__item--Width-on-sm: 80px; --pf-c-toolbar__item--Width-on-md: 150px; --pf-c-toolbar__item--Width-on-lg: 200px; --pf-c-toolbar__item--Width-on-xl: 250px; --pf-c-toolbar__item--Width-on-2xl: 300px;\\">Test</div>"`;

package/src/components/Tooltip/examples/Tooltip.md

@@ -105,10 +105,18 @@ OptionsTooltip = () => {
   const [exitDelayInput, setExitDelayInput] = React.useState(0);
   const [animationDuration, setAnimationDuration] = React.useState(300);
   const tipBoxRef = React.useRef(null);
-  const scrollToRef = ref => ref && ref.current && (ref.current.scrollTop = 400);
+  
+  const scrollToRef = ref => {
+    if (ref && ref.current) {
+      ref.current.scrollTop = 400;
+      ref.current.scrollLeft = 300;
+    }
+  }
+  
   React.useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
+  
   return (
     <>
       <div>

package/src/components/Tooltip/examples/TooltipExamples.css

@@ -2,7 +2,7 @@
   height: 450px;
   position: relative;
   width: 100%;
-  overflow-y: scroll;
+  overflow: scroll;
   overscroll-behavior: contain;
   margin: 0 auto;
   border: 2px dashed #ff6b81;
@@ -12,10 +12,10 @@
 .tooltip-box::after {
   content: '';
   display: block;
-  width: 1px;
+  width: 1500px;
   height: 600px;
 }
 .tooltip-button {
   position: absolute;
-  left: 300px;
-}
+  left: 600px;
+}

package/src/components/Select/__tests__/Generated/SelectOption.test.tsx

@@ -1,29 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { SelectOption } from '../../SelectOption';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('SelectOption should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <SelectOption
-      children={<div>ReactNode</div>}
-      className={"''"}
-      index={0}
-      component={'button'}
-      value={''}
-      isDisabled={false}
-      isPlaceholder={false}
-      isSelected={false}
-      isChecked={false}
-      isFocused={false}
-      sendRef={() => {}}
-      keyHandler={() => {}}
-      onClick={() => {}}
-    />
-  );
-  expect(view).toMatchSnapshot();
-});

package/src/components/Select/__tests__/Generated/__snapshots__/SelectOption.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectOption should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;