From ef1e5404c5544287bf3428941e2ef766bb72844b Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Wed, 10 May 2023 12:57:22 -0400 Subject: [PATCH] [v5] fix: various backwards-compatibility fixes --- packages/core/src/common/props.ts | 2 ++ packages/core/src/components/icon/icon.tsx | 26 ++++++++++++------- packages/core/src/components/index.ts | 4 ++- packages/core/src/components/toast/toaster.ts | 3 +++ packages/popover2/src/index.ts | 9 +++++-- 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/packages/core/src/common/props.ts b/packages/core/src/common/props.ts index 9ae9fb0ce2..27763b234e 100644 --- a/packages/core/src/common/props.ts +++ b/packages/core/src/common/props.ts @@ -118,6 +118,7 @@ const INVALID_PROPS = [ "elementRef", // not used anymore in Blueprint v5.x, but kept for backcompat if consumers use this naming pattern "fill", "icon", + "iconSize", "inputClassName", "inputRef", "intent", @@ -135,6 +136,7 @@ const INVALID_PROPS = [ "rightElement", "rightIcon", "round", + "size", "small", "tagName", "text", diff --git a/packages/core/src/components/icon/icon.tsx b/packages/core/src/components/icon/icon.tsx index 69879cffcb..5176553f19 100644 --- a/packages/core/src/components/icon/icon.tsx +++ b/packages/core/src/components/icon/icon.tsx @@ -19,12 +19,14 @@ import * as React from "react"; import { IconComponent, IconName, Icons, IconSize, SVGIconProps } from "@blueprintjs/icons"; -import { Classes, DISPLAYNAME_PREFIX, IntentProps, MaybeElement, Props } from "../../common"; +import { Classes, DISPLAYNAME_PREFIX, IntentProps, MaybeElement, Props, removeNonHTMLProps } from "../../common"; // re-export for convenience, since some users won't be importing from or have a direct dependency on the icons package export { IconName, IconSize }; -export interface IconProps extends IntentProps, Props, SVGIconProps { +export type IconHTMLAttributes = Omit, "children" | "title">; + +export interface IconProps extends IntentProps, Props, SVGIconProps, IconHTMLAttributes { /** * Whether the component should automatically load icon contents using an async import. * @@ -49,6 +51,14 @@ export interface IconProps extends IntentProps, Props, SVGIconProps { */ icon: IconName | MaybeElement; + /** + * Alias for `size` prop. Kept around for backwards-compatibility with Blueprint v4.x, + * will be removed in v6.0. + * + * @deprecated use `size` prop instead + */ + iconSize?: number; + /** Props to apply to the `SVG` element */ svgProps?: React.HTMLAttributes; } @@ -58,10 +68,7 @@ export interface IconProps extends IntentProps, Props, SVGIconProps { * * @see https://blueprintjs.com/docs/#core/components/icon */ -export const Icon: React.FC, "title">> = React.forwardRef< - any, - IconProps ->((props, ref) => { +export const Icon: React.FC = React.forwardRef((props, ref) => { const { icon } = props; if (icon == null || typeof icon === "boolean") { return null; @@ -73,7 +80,6 @@ export const Icon: React.FC, autoLoad, className, color, - size, icon: _icon, intent, tagName, @@ -83,6 +89,8 @@ export const Icon: React.FC, ...htmlProps } = props; const [Component, setIconComponent] = React.useState(); + // eslint-disable-next-line deprecation/deprecation + const size = props.size ?? props.iconSize; React.useEffect(() => { let shouldCancelIconLoading = false; @@ -113,7 +121,7 @@ export const Icon: React.FC, ? Classes.ICON_LARGE : undefined; return React.createElement(tagName!, { - ...htmlProps, + ...removeNonHTMLProps(htmlProps), "aria-hidden": title ? undefined : true, className: classNames( Classes.ICON, @@ -138,7 +146,7 @@ export const Icon: React.FC, htmlTitle={htmlTitle} ref={ref} svgProps={svgProps} - {...htmlProps} + {...removeNonHTMLProps(htmlProps)} /> ); } diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index 8183a7b2e2..e7018a5292 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -78,6 +78,7 @@ export { Panel, PanelProps } from "./panel-stack2/panelTypes"; export { PopoverProps, Popover, PopoverInteractionKind } from "./popover/popover"; export { DefaultPopoverTargetHTMLProps, + PopoverPosition, PopoverSharedProps, PopoverTargetProps, PopoverClickTargetHandlers, @@ -104,7 +105,8 @@ export { Tag, TagProps } from "./tag/tag"; export { TagInput, TagInputProps, TagInputAddMethod } from "./tag-input/tagInput"; export { OverlayToaster, OverlayToasterProps } from "./toast/overlayToaster"; export { Toast, ToastProps } from "./toast/toast"; -export { Toaster, ToastOptions, ToasterPosition } from "./toast/toaster"; +// eslint-disable-next-line deprecation/deprecation +export { Toaster, ToasterInstance, ToastOptions, ToasterPosition } from "./toast/toaster"; export { TooltipProps, Tooltip } from "./tooltip/tooltip"; export { Tree, TreeProps } from "./tree/tree"; export { TreeNodeInfo, TreeEventHandler } from "./tree/treeTypes"; diff --git a/packages/core/src/components/toast/toaster.ts b/packages/core/src/components/toast/toaster.ts index cf4aac8f4f..41c0ff58d3 100644 --- a/packages/core/src/components/toast/toaster.ts +++ b/packages/core/src/components/toast/toaster.ts @@ -44,3 +44,6 @@ export interface Toaster { /** Returns the props for all current toasts. */ getToasts(): ToastOptions[]; } + +/** @deprecated use `Toaster` type instead */ +export type ToasterInstance = Toaster; diff --git a/packages/popover2/src/index.ts b/packages/popover2/src/index.ts index d31f397366..fc22cfa864 100644 --- a/packages/popover2/src/index.ts +++ b/packages/popover2/src/index.ts @@ -66,8 +66,13 @@ export { PopoverTargetProps as Popover2TargetProps, /** @deprecated import from @blueprintjs/core instead */ PopperBoundary, - /** @deprecated import from @blueprintjs/core instead */ - PopperCustomModifier, + /** + * N.B. this misspelling was present in @blueprintjs/popover2 v4, we'll keep it around for now since it will + * be getting migrated to the correct spelling in @blueprintjs/core v5 anyway. + * + * @deprecated import from @blueprintjs/core instead (with corrected spelling) + */ + PopperCustomModifier as PopperCustomModifer, /** @deprecated import from @blueprintjs/core instead */ PopperModifierOverrides, /** @deprecated import from @blueprintjs/core instead */