-
Notifications
You must be signed in to change notification settings - Fork 321
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(MenuItem): separate MenuIcon logic from MenuItem (#2104)
- Loading branch information
1 parent
7ea79e3
commit c2dec4a
Showing
7 changed files
with
168 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .iconWrapper { | ||
| margin-right: var(--spacing-small); | ||
|
|
||
| &.withBackgroundColor { | ||
| border-radius: var(--spacing-xs); | ||
|
|
||
| &.disabled { | ||
| opacity: 0.4; | ||
| } | ||
|
|
||
| .icon { | ||
| color: var(--text-color-on-primary); | ||
| } | ||
| } | ||
|
|
||
| &.disabled .icon { | ||
| cursor: not-allowed; | ||
| color: var(--disabled-text-color); | ||
| } | ||
|
|
||
| .icon { | ||
| color: var(--icon-color); | ||
|
|
||
| &.selected { | ||
| color: var(--primary-color); | ||
| } | ||
| } | ||
| } |
41 changes: 41 additions & 0 deletions
41
packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from "react"; | ||
| import Icon from "../../../../Icon/Icon"; | ||
| import Flex from "../../../../Flex/Flex"; | ||
| import cx from "classnames"; | ||
| import styles from "./MenuItemIcon.module.scss"; | ||
| import { MenuItemIconProps } from "./MenuItemIcon.types"; | ||
|
|
||
| const MenuItemIcon = ({ | ||
| icon, | ||
| type, | ||
| label, | ||
| disabled, | ||
| selected, | ||
| backgroundColor, | ||
| wrapperClassName | ||
| }: MenuItemIconProps) => ( | ||
| <Flex | ||
| justify={Flex.justify.CENTER} | ||
| className={cx( | ||
| styles.iconWrapper, | ||
| { | ||
| [styles.disabled]: disabled, | ||
| [styles.withBackgroundColor]: !!backgroundColor | ||
| }, | ||
| wrapperClassName | ||
| )} | ||
| style={{ ...(backgroundColor && { backgroundColor }) }} | ||
| > | ||
| <Icon | ||
| iconType={type || (typeof icon === "function" ? Icon.type.SVG : Icon.type.ICON_FONT)} | ||
| clickable={false} | ||
| icon={icon} | ||
| iconLabel={label} | ||
| className={cx(styles.icon, { [styles.selected]: !disabled && selected })} | ||
| ignoreFocusStyle | ||
| iconSize={18} | ||
| /> | ||
| </Flex> | ||
| ); | ||
|
|
||
| export default MenuItemIcon; |
33 changes: 33 additions & 0 deletions
33
packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { SubIcon } from "../../../../../types"; | ||
| import { IconType } from "../../../../Icon/IconConstants"; | ||
|
|
||
| export interface MenuItemIconProps { | ||
| /** | ||
| * Icon to be displayed. Can be a string or an icon component. | ||
| */ | ||
| icon?: SubIcon; | ||
| /** | ||
| * Icon type to be used. | ||
| */ | ||
| type?: IconType; | ||
| /** | ||
| * Label for the icon, used for accessibility. | ||
| */ | ||
| label?: string; | ||
| /** | ||
| * Indicates whether the icon is disabled. Disabled icons appear faded and do not respond to user interactions. | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * Indicates whether the icon is selected. Selected icons have a different visual style. | ||
| */ | ||
| selected?: boolean; | ||
| /** | ||
| * Background color for the icon wrapper. | ||
| */ | ||
| backgroundColor?: string; | ||
| /** | ||
| * Additional class name for the icon wrapper. | ||
| */ | ||
| wrapperClassName?: string; | ||
| } |
42 changes: 42 additions & 0 deletions
42
...core/src/components/Menu/MenuItem/components/MenuItemIcon/__tests__/MenuItemIcon.jest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { render, screen } from "@testing-library/react"; | ||
| import "@testing-library/jest-dom"; | ||
| import MenuItemIcon from "../MenuItemIcon"; | ||
| import { MenuItemIconProps } from "../MenuItemIcon.types"; | ||
|
|
||
| function renderMenuItemIcon(props: Partial<MenuItemIconProps> = {}) { | ||
| return render(<MenuItemIcon icon="test-icon" label="Test Icon" {...props} />); | ||
| } | ||
|
|
||
| describe("MenuItemIcon", () => { | ||
| it("should render the icon correctly", () => { | ||
| const { getByLabelText } = renderMenuItemIcon(); | ||
| expect(getByLabelText("Test Icon")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should apply the disabled style if the disabled prop is true", () => { | ||
| const { getByLabelText } = renderMenuItemIcon({ disabled: true }); | ||
| const iconWrapper = getByLabelText("Test Icon").parentNode; | ||
| expect(iconWrapper).toHaveClass("disabled"); | ||
| }); | ||
|
|
||
| it("should apply the selected style if the selected prop is true and not disabled", () => { | ||
| const { getByLabelText } = renderMenuItemIcon({ selected: true }); | ||
| screen.logTestingPlaygroundURL(); | ||
| expect(getByLabelText("Test Icon")).toHaveClass("selected"); | ||
| }); | ||
|
|
||
| it("should not apply the selected style if the icon is disabled", () => { | ||
| const { getByLabelText } = renderMenuItemIcon({ | ||
| selected: true, | ||
| disabled: true | ||
| }); | ||
| expect(getByLabelText("Test Icon")).not.toHaveClass("selected"); | ||
| }); | ||
|
|
||
| it("should set the background color if backgroundColor prop is provided", () => { | ||
| const { getByLabelText } = renderMenuItemIcon({ backgroundColor: "red" }); | ||
| const iconWrapper = getByLabelText("Test Icon").parentNode; | ||
| expect(iconWrapper).toHaveClass("withBackgroundColor"); | ||
| expect(iconWrapper).toHaveStyle("background-color: red"); | ||
| }); | ||
| }); |