diff --git a/src/components/ButtonDropdown/ButtonDropdown.tsx b/src/components/ButtonDropdown/ButtonDropdown.tsx index ad11598b7..28e6ccd56 100644 --- a/src/components/ButtonDropdown/ButtonDropdown.tsx +++ b/src/components/ButtonDropdown/ButtonDropdown.tsx @@ -5,7 +5,6 @@ import styles from './ButtonDropdown.module.css'; import { DropdownMenu } from '../..'; import type { ClickableStyleProps } from '../ClickableStyle'; -// TODO: This component is deprecated and will be replaced by the Menu component export interface Props { /** * Aria label to be attacehd to the dropdown trigger button. @@ -63,9 +62,13 @@ export interface Props { } /** + * The ButtonDropdown component is deprecated and will be removed in a future release. + * * `import {ButtonDropdown} from "@chanzuckerberg/eds";` * * Contains the button and the dropdown. + * + * @deprecated */ export const ButtonDropdown = ({ fullWidth, diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css index b06663c61..e1dbd06f9 100644 --- a/src/components/Menu/Menu.module.css +++ b/src/components/Menu/Menu.module.css @@ -16,12 +16,12 @@ } .menu__button { - background-color: var(--light-color-button-background); + background-color: var(--eds-theme-color-form-background); } -/* // is getting overridden by a style in clickablestyle */ -.menu__button--icon { - color: var(--eds-theme-color-button-secondary-neutral-text); +/* Needed to create higher specificity than ClickableStyle. TODO: improve */ +.menu__button--icon.menu__button--icon.menu__button--icon { + color: var(--eds-theme-color-icon-neutral-default); } .menu__item { diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index dac7f956b..6c71531fc 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -24,7 +24,7 @@ export const Default: StoryObj = { render: (args) => ( Documentation Links - + & { export type MenuItemProps = ExtractProps & { href?: string; icon?: IconName; - onClick?: () => any; + onClick?: MouseEventHandler; }; export type MenuButtonProps = ExtractProps; @@ -74,7 +75,6 @@ const MenuItems = (props: MenuItemsProps) => ( ); diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx index f952585fa..b14ca82b6 100644 --- a/src/components/Popover/Popover.stories.tsx +++ b/src/components/Popover/Popover.stories.tsx @@ -49,7 +49,6 @@ export const Default: StoryObj = { export const Arrow: StoryObj = { args: { - // maybe gets shallow merged with the default args (?) children: ( <> Open Popover diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx index d878cd709..558e4c907 100644 --- a/src/components/Popover/Popover.test.tsx +++ b/src/components/Popover/Popover.test.tsx @@ -17,7 +17,6 @@ describe('', () => { }); it('should open Popover with trigger button', () => { - // this test is redundant b/c of the snapshot above render(); expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument(); const triggerButton = screen.getByTestId('popover-trigger-button'); diff --git a/src/components/PopoverListItem/PopoverListItem.module.css b/src/components/PopoverListItem/PopoverListItem.module.css index 1f4b36efd..0c9aa602d 100644 --- a/src/components/PopoverListItem/PopoverListItem.module.css +++ b/src/components/PopoverListItem/PopoverListItem.module.css @@ -19,7 +19,7 @@ .popover-list-item--disabled { color: var(--eds-theme-color-text-disabled); - pointer-events: none; + cursor: not-allowed; } .popover-list-item__icon { diff --git a/src/components/PopoverListItem/PopoverListItem.stories.tsx b/src/components/PopoverListItem/PopoverListItem.stories.tsx index a06a0168d..55443660e 100644 --- a/src/components/PopoverListItem/PopoverListItem.stories.tsx +++ b/src/components/PopoverListItem/PopoverListItem.stories.tsx @@ -16,7 +16,7 @@ type Args = React.ComponentProps; export const Default: StoryObj = { args: { - children: <>Default list item, + children: 'Default list item', }, }; diff --git a/src/components/PopoverListItem/PopoverListItem.tsx b/src/components/PopoverListItem/PopoverListItem.tsx index 033902119..1989b4a96 100644 --- a/src/components/PopoverListItem/PopoverListItem.tsx +++ b/src/components/PopoverListItem/PopoverListItem.tsx @@ -11,6 +11,9 @@ export interface Props { * Whether the list item is treated as highlighted in its container */ active?: boolean; + /** + * Child node(s) that can be nested inside component + */ children: ReactNode; /** * Whether the list item is treated as disabled @@ -31,7 +34,7 @@ export interface Props { * * `import {PopoverListItem} from "@chanzuckerberg/eds";` * - * This abstracts the structure of a item in a popover, when the popover contains a + * This abstracts the structure of an item in a popover, when the popover contains a * list of items (e.g., Menus and Selects) * - Contains styles for when active/disabled or not * - contains styles for when there is an icon on the left @@ -48,9 +51,19 @@ export const PopoverListItem = React.forwardRef( className, ); - // use `as` to use a/button when appropriate + const ariaIsDisabled = disabled + ? { + 'aria-disabled': true, + } + : {}; + return ( -
+
{icon ? (
diff --git a/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap b/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap index 32660ac95..c84d6eb6f 100644 --- a/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap +++ b/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap @@ -38,6 +38,7 @@ exports[` Default story renders snapshot 1`] = ` exports[` Disabled story renders snapshot 1`] = `