@patternfly/react-core 5.0.0-alpha.46 → 5.0.0-alpha.48

package/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx

@@ -1,69 +0,0 @@
-import { DropdownGroup } from '../../Dropdown';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-jest.mock('../../../../components/Menu');
-
-const dropdownGroupChildren = <div>Dropdown Group children</div>;
-
-test('renders dropdown group', () => {
-  render(
-    <div data-testid="dropdown-group">
-      <DropdownGroup>{dropdownGroupChildren}</DropdownGroup>
-    </div>
-  );
-
-  expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible();
-});
-
-test('passes children', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('Dropdown Group children')).toBeVisible();
-});
-
-test('passes no class name by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByTestId('menu-group-mock')).not.toHaveClass();
-});
-
-test('passes custom class name to MenuGroup', () => {
-  render(<DropdownGroup className="custom-class">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class');
-});
-
-test('passes no label by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('label: undefined')).toBeVisible();
-});
-
-test('passes custom label to MenuGroup', () => {
-  render(<DropdownGroup label="Test label">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('label: Test label')).toBeVisible();
-});
-
-test('passes h1 as labelHeadingLevel to MenuGroup by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible();
-});
-
-test('passes custom labelHeadingLevel to MenuGroup', () => {
-  render(<DropdownGroup labelHeadingLevel="h2">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible();
-});
-
-test('matches snapshot', () => {
-  const { asFragment } = render(
-    <DropdownGroup className="custom-class" label="Test label" labelHeadingLevel="h2">
-      {dropdownGroupChildren}
-    </DropdownGroup>
-  );
-
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    data-ouia-component-id="dropdown"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <div>
-      <div
-        class="customClass"
-        data-testid="menu-mock"
-      >
-        <div>
-          <div>
-            Dropdown children
-          </div>
-        </div>
-      </div>
-      <div>
-        Mock item
-      </div>
-      <p>
-        isPlain: true
-      </p>
-      <p>
-        isScrollable: true
-      </p>
-      <p>
-        minWidth: undefined
-      </p>
-    </div>
-    <p>
-      zIndex: 9999
-    </p>
-    <p>
-      isOpen: true
-    </p>
-    <div>
-      <button>
-        Dropdown
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`matches snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="custom-class"
-    data-testid="menu-group-mock"
-  >
-    <div>
-      Dropdown Group children
-    </div>
-  </div>
-  <p>
-    label: Test label
-  </p>
-  <p>
-    labelHeadingLevel: h2
-  </p>
-</DocumentFragment>
-`;

package/src/next/components/Dropdown/examples/Dropdown.md

@@ -1,45 +0,0 @@
----
-id: Dropdown
-section: components
-cssPrefix: pf-c-dropdown
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList']
-beta: true
----
-
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-## Examples
-
-### Basic dropdowns
-Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. 
-
-A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback. 
-
-The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: 
-- Use the `isDisabled` property to disable an item.
-- Use the `onClick` property to trigger a callback for an action.
-
-This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
-
-```ts file="./DropdownBasic.tsx"
-```
-
-### With kebab toggle
-
-To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
-
-```ts file="./DropdownWithKebabToggle.tsx"
-```
-
-### With groups of items
-To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group. 
-
-```ts file="./DropdownWithGroups.tsx"
-```
-
-### With item descriptions
-
-To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label. 
-
-```ts file="./DropdownWithDescriptions.tsx"
-```

package/src/next/components/Dropdown/examples/DropdownBasic.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { Divider, MenuToggle } from '@patternfly/react-core';
-
-export const DropdownBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
-    // eslint-disable-next-line no-console
-    console.log('selected', itemId);
-    setIsOpen(false);
-  };
-
-  return (
-    <Dropdown
-      isOpen={isOpen}
-      onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
-        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-          Dropdown
-        </MenuToggle>
-      )}
-    >
-      <DropdownList>
-        <DropdownItem itemId={0} key="link">
-          Link
-        </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
-          Action
-        </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled link">
-          Disabled link
-        </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-          Disabled action
-        </DropdownItem>
-        <Divider key="separator" />
-        <DropdownItem itemId={4} key="separated link">
-          Separated link
-        </DropdownItem>
-        <DropdownItem itemId={5} key="separated action">
-          Separated action
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  );
-};

package/src/next/components/Dropdown/index.ts

@@ -1,4 +0,0 @@
-export * from './Dropdown';
-export * from './DropdownGroup';
-export * from './DropdownItem';
-export * from './DropdownList';