update template names

patternfly · Jun 12, 2024 · 3e2bf68 · 3e2bf68
1 parent 0b2bd09
commit 3e2bf68
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 85 deletions.
diff --git a/...rc/components/Dropdown/DropdownSimple.tsx → ...rc/components/Dropdown/SimpleDropdown.tsx b/...rc/components/Dropdown/DropdownSimple.tsx → ...rc/components/Dropdown/SimpleDropdown.tsx
@@ -10,7 +10,7 @@ import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/reac
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
 import { OUIAProps } from '@patternfly/react-core/dist/esm/helpers';
 
-export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
+export interface SimpleDropdownItem extends Omit<DropdownItemProps, 'content'> {
   /** Content of the dropdown item. If the isDivider prop is true, this prop will be ignored. */
   content?: React.ReactNode;
   /** Unique identifier for the dropdown item, which is used in the dropdown onSelect callback */
@@ -25,9 +25,9 @@ export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
   isDivider?: boolean;
 }
 
-export interface DropdownSimpleProps extends Omit<DropdownProps, 'toggle'>, OUIAProps {
+export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle'>, OUIAProps {
   /** Initial items of the dropdown. */
-  initialItems?: DropdownSimpleItem[];
+  initialItems?: SimpleDropdownItem[];
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Flag indicating the dropdown should be disabled. */
@@ -54,7 +54,7 @@ export interface DropdownSimpleProps extends Omit<DropdownProps, 'toggle'>, OUIA
   toggleProps?: MenuToggleProps;
 }
 
-const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
+const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
   innerRef,
   initialItems,
   onSelect: onSelectProp,
@@ -68,7 +68,7 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
   toggleProps,
   shouldFocusToggleOnSelect,
   ...props
-}: DropdownSimpleProps) => {
+}: SimpleDropdownProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onSelect = (event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
@@ -132,8 +132,8 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
   );
 };
 
-export const DropdownSimple = React.forwardRef((props: DropdownSimpleProps, ref: React.Ref<any>) => (
-  <DropdownSimpleBase {...props} innerRef={ref} />
+export const SimpleDropdown = React.forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
+  <SimpleDropdownBase {...props} innerRef={ref} />
 ));
 
-DropdownSimple.displayName = 'DropdownSimple';
+SimpleDropdown.displayName = 'SimpleDropdown';
diff --git a/...ropdown/__tests__/DropdownSimple.test.tsx → ...ropdown/__tests__/SimpleDropdown.test.tsx b/...ropdown/__tests__/DropdownSimple.test.tsx → ...ropdown/__tests__/SimpleDropdown.test.tsx
@@ -1,38 +1,38 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DropdownSimple } from '../DropdownSimple';
+import { SimpleDropdown } from '../SimpleDropdown';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('Dropdown toggle', () => {
   test('Renders dropdown toggle as not disabled when isDisabled is not true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toBeDisabled();
   });
 
   test('Renders dropdown toggle as disabled when isDisabled is true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" isDisabled />);
+    render(<SimpleDropdown toggleContent="Dropdown" isDisabled />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toBeDisabled();
   });
 
   test('Passes toggleVariant', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleVariant="plain" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleVariant="plain" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.plain);
   });
 
   test('Passes toggleAriaLabel', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
 
     expect(screen.getByRole('button')).toHaveAccessibleName('Aria label content');
   });
 
   test('Calls onToggle with next isOpen state when dropdown toggle is clicked', async () => {
     const onToggle = jest.fn();
     const user = userEvent.setup();
-    render(<DropdownSimple onToggle={onToggle} toggleContent="Dropdown" />);
+    render(<SimpleDropdown onToggle={onToggle} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -46,7 +46,7 @@ describe('Dropdown toggle', () => {
     render(
       <div>
         <button>Actual</button>
-        <DropdownSimple initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
+        <SimpleDropdown initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
       </div>
     );
 
@@ -59,7 +59,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -73,7 +73,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -82,21 +82,21 @@ describe('Dropdown toggle', () => {
   });
 
   test('Does not pass isToggleFullWidth to menu toggle by default', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toHaveClass(styles.modifiers.fullWidth);
   });
 
   test('Passes isToggleFullWidth to menu toggle when passed in', () => {
-    render(<DropdownSimple isToggleFullWidth toggleContent="Dropdown" />);
+    render(<SimpleDropdown isToggleFullWidth toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.fullWidth);
   });
 
   test('Does not focus toggle on item select by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -109,7 +109,7 @@ describe('Dropdown toggle', () => {
   test('Focuses toggle on item select when shouldFocusToggleOnSelect is true', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -120,7 +120,7 @@ describe('Dropdown toggle', () => {
   });
 
   test('Matches snapshot', () => {
-    const { asFragment } = render(<DropdownSimple toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -133,7 +133,7 @@ describe('Dropdown items', () => {
       { value: 'separator', isDivider: true }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -147,7 +147,7 @@ describe('Dropdown items', () => {
   test('Renders with a link item', async () => {
     const items = [{ content: 'Link', value: 1, to: '#' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -159,7 +159,7 @@ describe('Dropdown items', () => {
   test('Renders with items not disabled by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -171,7 +171,7 @@ describe('Dropdown items', () => {
   test('Renders with a disabled item', async () => {
     const items = [{ content: 'Action', value: 1, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -183,7 +183,7 @@ describe('Dropdown items', () => {
   test('Spreads props on item', async () => {
     const items = [{ content: 'Action', value: 1, id: 'Test' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -196,7 +196,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -213,7 +213,7 @@ describe('Dropdown items', () => {
       { content: 'Action 2', value: 2 }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -227,7 +227,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -244,7 +244,7 @@ describe('Dropdown items', () => {
       { content: 'Link', value: 'separator', to: '#', ouiaId: '3' }
     ];
     const user = userEvent.setup();
-    const { asFragment } = render(<DropdownSimple ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);

diff --git a/..._snapshots__/DropdownSimple.test.tsx.snap → ..._snapshots__/SimpleDropdown.test.tsx.snap b/..._snapshots__/DropdownSimple.test.tsx.snap → ..._snapshots__/SimpleDropdown.test.tsx.snap
diff --git a/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md b/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
@@ -4,30 +4,21 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['DropdownSimple', 'DropdownSimpleItem']
+propComponents: ['SimpleDropdown', 'SimpleDropdownItem']
 ---
 
 Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
 
 For custom use cases, please see the dropdown component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
-import {
-Checkbox,
-Divider,
-Dropdown,
-DropdownItem,
-DropdownList,
-Flex,
-FlexItem,
-MenuToggle
-} from '@patternfly/react-core';
-import { DropdownSimple } from '@patternfly/react-templates';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+import { SimpleDropdown } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
 ### Simple
 
-```ts file="./DropdownSimpleExample.tsx"
+```ts file="./SimpleDropdownExample.tsx"
 
 ```
diff --git a/...opdown/examples/DropdownSimpleExample.tsx → ...opdown/examples/SimpleDropdownExample.tsx b/...opdown/examples/DropdownSimpleExample.tsx → ...opdown/examples/SimpleDropdownExample.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
-import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
+import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DropdownSimpleExample: React.FunctionComponent = () => {
+export const SimpleDropdownExample: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const items: DropdownSimpleItem[] = [
+  const items: SimpleDropdownItem[] = [
     // eslint-disable-next-line no-console
     { content: 'Action', value: 1, onClick: () => console.log('Action clicked') },
     // Prevent default click behavior on link for example purposes
@@ -21,25 +21,25 @@ export const DropdownSimpleExample: React.FunctionComponent = () => {
     <React.Fragment>
       <Checkbox
         id="simple-example-disabled-toggle"
-        label="Disable dropdown simple toggles"
+        label="Disable simple dropdown toggles"
         isChecked={isDisabled}
         onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
       <Flex gap={{ default: 'gapLg' }}>
         <FlexItem>
-          <DropdownSimple initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
+          <SimpleDropdown initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plainText"
             initialItems={items}
             isDisabled={isDisabled}
             toggleContent="Dropdown with plainText styling"
           />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plain"
             initialItems={items}
             isDisabled={isDisabled}

diff --git a/packages/react-templates/src/components/Dropdown/index.ts b/packages/react-templates/src/components/Dropdown/index.ts
@@ -1 +1 @@
-export * from './DropdownSimple';
+export * from './SimpleDropdown';
diff --git a/...es/src/components/Select/SelectSimple.tsx → ...es/src/components/Select/SimpleSelect.tsx b/...es/src/components/Select/SelectSimple.tsx → ...es/src/components/Select/SimpleSelect.tsx
@@ -8,18 +8,18 @@ import {
 } from '@patternfly/react-core/dist/esm/components/Select';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 
-export interface SelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+export interface SimpleSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
   content: React.ReactNode;
   /** Value of the select option. */
   value: string | number;
 }
 
-export interface SelectSimpleProps extends Omit<SelectProps, 'toggle'> {
+export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions?: SelectSimpleOption[];
+  initialOptions?: SimpleSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, selection: string | number) => void;
   /** Callback triggered when the select opens or closes. */
@@ -34,7 +34,7 @@ export interface SelectSimpleProps extends Omit<SelectProps, 'toggle'> {
   toggleProps?: MenuToggleProps;
 }
 
-const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
+const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -44,7 +44,7 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   toggleWidth = '200px',
   toggleProps,
   ...props
-}: SelectSimpleProps) => {
+}: SimpleSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
 
@@ -106,8 +106,8 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   );
 };
 
-export const SelectSimple = React.forwardRef((props: SelectSimpleProps, ref: React.Ref<any>) => (
-  <SelectSimpleBase {...props} innerRef={ref} />
+export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
+  <SimpleSelectBase {...props} innerRef={ref} />
 ));
 
-SelectSimple.displayName = 'SelectSimple';
+SimpleSelect.displayName = 'SimpleSelect';