Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/dropdown expandable menu #1129

Merged
merged 11 commits into from
Oct 11, 2023
Merged

Feat/dropdown expandable menu #1129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8583f96
adding docs, tests, changed context usage, added console log for nest…
chris-cedrone-cengage Sep 12, 2023
d58121b
merging dev
chris-cedrone-cengage Sep 12, 2023
923b459
First review of Laura's findings, bereft of the test revisions at pre…
chris-cedrone-cengage Sep 20, 2023
4a2ddd4
merging dev
chris-cedrone-cengage Sep 20, 2023
41a7ba7
fixing keyboard navigation, added a prop to Accordion to accommodate,…
chris-cedrone-cengage Sep 21, 2023
6ab7930
fixing keyboard navigation on disabled items, Laura's notes
chris-cedrone-cengage Oct 2, 2023
8eed276
Laura's latest review, adding some tests
chris-cedrone-cengage Oct 5, 2023
b6f4735
merging dev
chris-cedrone-cengage Oct 5, 2023
d8970d8
adding new list item component due to inherited icon issues
chris-cedrone-cengage Oct 5, 2023
4fc3b4e
Laura's notes
chris-cedrone-cengage Oct 6, 2023
55898ea
Laura's note, removing unnecessary props
chris-cedrone-cengage Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/feat-dropdownExpandableMenu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': minor
---

feat(DropdownExpandableMenu): A new menu item display for the Dropdown component which enables expandable lists by one level.
15 changes: 13 additions & 2 deletions packages/react-magma-dom/src/components/Accordion/AccordionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ import { transparentize } from 'polished';
export interface AccordionButtonProps
extends UseAccordionButtonProps,
React.HTMLAttributes<HTMLButtonElement> {
/**
* For use in components repurposing Accordion with custom keyboard navigation with it's elements.
* @internal
*/
customOnKeyDown?: () => void;
/**
* @internal
*/
Expand Down Expand Up @@ -90,7 +95,13 @@ export const AccordionButton = React.forwardRef<
HTMLButtonElement,
AccordionButtonProps
>((props, forwardedRef) => {
const { children, testId, isInverse: isInverseProp, ...rest } = props;
const {
children,
testId,
customOnKeyDown,
isInverse: isInverseProp,
...rest
} = props;
const theme = React.useContext(ThemeContext);
const isInverse = useIsInverse(isInverseProp);

Expand Down Expand Up @@ -126,7 +137,7 @@ export const AccordionButton = React.forwardRef<
isExpanded={isExpanded}
isInverse={isInverse}
onClick={handleClick}
onKeyDown={handleKeyDown}
onKeyDown={customOnKeyDown ? customOnKeyDown : handleKeyDown}
ref={ref}
theme={theme}
>
Expand Down
156 changes: 155 additions & 1 deletion packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,21 @@ import { Card, CardBody } from '../Card';
import { Input } from '../Input';
import { Checkbox } from '../Checkbox';
import { PasswordInput } from '../PasswordInput';
import { SettingsIcon, MenuIcon } from 'react-magma-icons';
import {
LocalPizzaIcon,
LunchDiningIcon,
MenuIcon,
RestaurantMenuIcon,
SettingsIcon,
} from 'react-magma-icons';
import { Story, Meta } from '@storybook/react/types-6-0';
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';

const Template: Story<DropdownProps> = args => (
<div style={{ margin: '150px auto', textAlign: 'center' }}>
Expand Down Expand Up @@ -407,3 +418,146 @@ export const NoItems = args => {
</ButtonGroup>
);
};

export const ExpandableItems = args => {
return (
<Dropdown {...args}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
</DropdownContent>
</Dropdown>
);
};

export const ExpandableItemsWithIcons = args => {
return (
<Dropdown {...args} width={220}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup isMulti={false} defaultIndex={0}>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
Longer title area breaking lines within the
DropdownExpandableMenuButton component
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem disabled>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
<DropdownDivider />
<DropdownMenuItem icon={<LocalPizzaIcon />}>Pizza</DropdownMenuItem>
</DropdownContent>
</Dropdown>
);
};

export const ExpandableItemsWithIconsAndConsoleWarning = args => {
return (
<Dropdown {...args} width={220}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
<DropdownDivider />
<DropdownMenuItem icon={<LocalPizzaIcon />}>Pizza</DropdownMenuItem>
</DropdownContent>
</Dropdown>
);
};
Loading
Loading