From a22da0d962de8aef9a711e9c4a3c5155f3f7547f Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Tue, 14 Feb 2023 11:20:04 -0500 Subject: [PATCH 1/4] add onFocus to Breadcrumb, Button, AnchorButton --- .../core/src/components/breadcrumbs/breadcrumb.tsx | 3 ++- .../core/src/components/button/abstractButton.tsx | 3 ++- packages/core/test/menu/menuItemTests.tsx | 13 ++++++++----- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/breadcrumbs/breadcrumb.tsx b/packages/core/src/components/breadcrumbs/breadcrumb.tsx index 76fba19221..98329e26f2 100644 --- a/packages/core/src/components/breadcrumbs/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumbs/breadcrumb.tsx @@ -24,7 +24,7 @@ import { Icon } from "../icon/icon"; // eslint-disable-next-line deprecation/deprecation export type BreadcrumbProps = IBreadcrumbProps; /** @deprecated use BreadcrumbProps */ -export interface IBreadcrumbProps extends ActionProps, LinkProps { +export interface IBreadcrumbProps extends ActionProps, LinkProps { children?: React.ReactNode; /** Whether this breadcrumb is the current breadcrumb. */ @@ -68,6 +68,7 @@ export const Breadcrumb: React.FC = props => { className={classes} href={props.href} onClick={props.disabled ? undefined : props.onClick} + onFocus={props.disabled ? undefined : props.onFocus} tabIndex={props.disabled ? undefined : 0} target={props.target} > diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx index a6e5948537..07a2e60ee7 100644 --- a/packages/core/src/components/button/abstractButton.tsx +++ b/packages/core/src/components/button/abstractButton.tsx @@ -34,7 +34,7 @@ import { Spinner } from "../spinner/spinner"; export type ButtonProps = IButtonProps; /** @deprecated use ButtonProps */ export interface IButtonProps - extends ActionProps, + extends ActionProps, // eslint-disable-next-line deprecation/deprecation IElementRefProps { /** @@ -156,6 +156,7 @@ export abstract class AbstractButton { }); it("supports HTML props", () => { - const func = () => false; - const item = shallow().find("a"); - assert.strictEqual(item.prop("onClick"), func); - assert.strictEqual(item.prop("onKeyDown"), func); - assert.strictEqual(item.prop("onMouseMove"), func); + const mouseHandler = (_event: React.MouseEvent) => false; + const keyHandler = (_event: React.KeyboardEvent) => false; + const item = shallow( + , + ).find("a"); + assert.strictEqual(item.prop("onClick"), mouseHandler); + assert.strictEqual(item.prop("onKeyDown"), keyHandler); + assert.strictEqual(item.prop("onMouseMove"), mouseHandler); }); it("children appear in submenu", () => { From 2fd405c3e9596b9e99f6c6c1c69282791bdcce3c Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Tue, 14 Feb 2023 11:26:31 -0500 Subject: [PATCH 2/4] fix DialogStepButtonProps: --- packages/core/src/components/dialog/dialogStepButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/dialog/dialogStepButton.tsx b/packages/core/src/components/dialog/dialogStepButton.tsx index 9ac633f13b..b4ae3f4e99 100644 --- a/packages/core/src/components/dialog/dialogStepButton.tsx +++ b/packages/core/src/components/dialog/dialogStepButton.tsx @@ -16,11 +16,11 @@ import * as React from "react"; -import { AnchorButton, ButtonProps } from "../button/buttons"; +import { AnchorButton, AnchorButtonProps } from "../button/buttons"; import { Tooltip, TooltipProps } from "../tooltip/tooltip"; // omit "elementRef", which is the only property with a different type in ButtonProps vs. AnchorButtonProps -export type DialogStepButtonProps = Partial> & { +export type DialogStepButtonProps = Partial> & { /** If defined, the button will be wrapped with a tooltip with the specified content. */ // eslint-disable-next-line deprecation/deprecation tooltipContent?: TooltipProps["content"]; From e772259306d4d7d826474f481ad18b37b2aca558 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Tue, 14 Feb 2023 13:00:33 -0500 Subject: [PATCH 3/4] fix DialogStepButtonProps regression --- .../src/components/button/abstractButton.tsx | 18 ++++++-- packages/core/src/components/button/button.md | 2 +- .../components/dialog/dialogStepButton.tsx | 4 +- packages/core/test/alert/alertTests.tsx | 18 ++++---- .../core/test/buttons/abstractButtonTests.tsx | 42 +++++++++++++++++++ packages/core/test/buttons/buttonTests.tsx | 8 ++-- .../no-deprecated-type-references.test.ts | 10 ++--- 7 files changed, 77 insertions(+), 25 deletions(-) create mode 100644 packages/core/test/buttons/abstractButtonTests.tsx diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx index 07a2e60ee7..2d615d2ee6 100644 --- a/packages/core/src/components/button/abstractButton.tsx +++ b/packages/core/src/components/button/abstractButton.tsx @@ -30,11 +30,21 @@ import { import { Icon, IconName, IconSize } from "../icon/icon"; import { Spinner } from "../spinner/spinner"; -// eslint-disable-next-line deprecation/deprecation -export type ButtonProps = IButtonProps; /** @deprecated use ButtonProps */ -export interface IButtonProps - extends ActionProps, +export type IButtonProps = ButtonProps; + +/** + * Props interface for both the Button and AnchorButton components. + * + * Note that it is useful for the props for the two components to be assignable to each other, which we can allow + * by omitting the `elementRef` prop as `DialogStepButton` does. This is mostly for backwards compatibility, but it is + * a feature we like to preserve because the components are so similar and distinguishing between them in their event + * handlers is usually unnecessary. For this reason, we extend `ActionProps` rather than `ActionProps`. + * + * @see {@link ActionProps} + */ +export interface ButtonProps + extends ActionProps, // eslint-disable-next-line deprecation/deprecation IElementRefProps { /** diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md index 413a7a2869..08406e55b8 100644 --- a/packages/core/src/components/button/button.md +++ b/packages/core/src/components/button/button.md @@ -56,7 +56,7 @@ The two button components each support arbitrary HTML props for their underlying DOM element (`