Skip to content

Commit

Permalink
adding new list item component due to inherited icon issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@chris-cedrone-cengage
chris-cedrone-cengage committed Oct 5, 2023
1 parent b6f4735 commit d8970d8
Show file tree
Hide file tree
Showing 8 changed files with 252 additions and 75 deletions.
65 changes: 49 additions & 16 deletions packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { Paragraph, Spacer } from '../..';
import { ButtonGroup } from '../ButtonGroup';
import { DropdownExpandableMenuButton } from './DropdownExpandableMenuButton';
import { DropdownExpandableMenuItem } from './DropdownExpandableMenuItem';
import { DropdownExpandableMenuListItem } from './DropdownExpandableMenuListItem';
import { DropdownExpandableMenuGroup } from './DropdownExpandableMenuGroup';
import { DropdownExpandableMenuPanel } from './DropdownExpandableMenuPanel';

Expand Down Expand Up @@ -427,17 +428,25 @@ export const ExpandableItems = args => {
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Domestic</DropdownMenuItem>
<DropdownMenuItem>Speck</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -458,17 +467,25 @@ export const ExpandableItemsWithIcons = args => {
DropdownExpandableMenuButton component
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem disabled>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Domestic</DropdownMenuItem>
<DropdownMenuItem>Speck</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -488,34 +505,50 @@ export const ExpandableItemsWithIconsAndConsoleWarning = args => {
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Domestic</DropdownMenuItem>
<DropdownMenuItem>Speck</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Domestic</DropdownMenuItem>
<DropdownMenuItem>Speck</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand Down
107 changes: 80 additions & 27 deletions packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
DropdownMenuNavItem,
DropdownExpandableMenuGroup,
DropdownExpandableMenuItem,
DropdownExpandableMenuListItem,
DropdownExpandableMenuButton,
DropdownExpandableMenuPanel,
} from './';
Expand Down Expand Up @@ -907,8 +908,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -932,8 +937,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand Down Expand Up @@ -961,8 +970,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>

Expand All @@ -971,8 +984,12 @@ describe('Dropdown', () => {
Bacon
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelTwoId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -998,8 +1015,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed Stuff</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed Stuff
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>

Expand All @@ -1008,8 +1029,12 @@ describe('Dropdown', () => {
Bacon
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelTwoId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -1029,7 +1054,7 @@ describe('Dropdown', () => {
expect(getByTestId(expandablePanelTwoId)).toBeInTheDocument();
});

it('should have only allow one open menu item when isMulti is false', () => {
it('should only allow one open menu item when isMulti is false', () => {
const { getByTestId, getByText, queryByTestId } = render(
<Dropdown>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
Expand All @@ -1040,8 +1065,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed Stuff</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed Stuff
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>

Expand All @@ -1050,8 +1079,12 @@ describe('Dropdown', () => {
Bacon
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelTwoId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand Down Expand Up @@ -1086,8 +1119,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -1113,8 +1150,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand All @@ -1140,8 +1181,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
Expand All @@ -1152,8 +1197,12 @@ describe('Dropdown', () => {
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownMenuItem>Domestic</DropdownMenuItem>
<DropdownMenuItem>Speck</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand Down Expand Up @@ -1198,8 +1247,12 @@ describe('Dropdown', () => {
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel testId={expandablePanelId}>
<DropdownMenuItem>Fresh</DropdownMenuItem>
<DropdownMenuItem>Processed</DropdownMenuItem>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ export const DropdownExpandableMenuButton = React.forwardRef<
}
}, []);

//Allows a custom function to be called when a key is pressed, if no function is needed, this overrides the default AccordionButton onKeyDown event.
//Allows a custom function to be called when a key is pressed that overrides the default AccordionButton onKeyDown event.
function handleCustomOnKeyDown() {
if (props.customOnKeyDown && typeof props.customOnKeyDown === 'function') {
return props.customOnKeyDown();
if (customOnKeyDown && typeof customOnKeyDown === 'function') {
return customOnKeyDown();
}
}

Expand Down
Loading

0 comments on commit d8970d8

Please sign in to comment.