From 71e30096716818a929770b763aef115bbc3d26e9 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 9 Oct 2024 17:02:26 +0200 Subject: [PATCH 01/13] remove deprecated properties from extensions --- .../react-flow/nodes/NodeContent.tsx | 11 +--- src/extensions/react-flow/nodes/_nodes.scss | 55 ------------------- 2 files changed, 1 insertion(+), 65 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index ed79f808..ceecbdaf 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -112,12 +112,6 @@ export interface NodeContentProps * Also the depiction is displayed larger. */ enlargeHeader?: boolean; - /** - * @deprecated - * Set the type of used highlights to mark the node. - * Replaced by `intent` and `highlightColor` properties. - */ - highlightedState?: HighlightingState | HighlightingState[]; /** * Defines how the borders of a node are displayed. * Use this property to overwrite default styles. @@ -288,6 +282,7 @@ const addHandles = ( }); }; +// @deprecated probably not used anymore, we check and may remove it const gethighlightedStateClasses = (state: HighlightingState | HighlightingState[], baseClassName: string) => { const hightlights = typeof state === "string" ? [state] : state; return hightlights.map((item: HighlightingState) => `${baseClassName}--highlight-${item}`).join(" "); @@ -329,7 +324,6 @@ export function NodeContent({ footerContent, size = "small", minimalShape = "circular", - highlightedState, intent, border, highlightColor, @@ -513,9 +507,6 @@ export function NodeContent({ .map((highlight) => ` ${eccgui}-graphviz__node--highlight-${highlight}`) .join("") : "") + - (highlightedState - ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) - : "") + (animated ? ` ${eccgui}-graphviz__node--animated` : "") + (introductionTime && !introductionDone ? ` ${eccgui}-graphviz__node--introduction` : "") + (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") + diff --git a/src/extensions/react-flow/nodes/_nodes.scss b/src/extensions/react-flow/nodes/_nodes.scss index 5d707bf0..f7207f95 100644 --- a/src/extensions/react-flow/nodes/_nodes.scss +++ b/src/extensions/react-flow/nodes/_nodes.scss @@ -555,58 +555,3 @@ flex-shrink: 0; text-align: center; } - -// Node highlights (@deprecated) // FIXME: remove in v24.0.0 - -.#{$eccgui}-graphviz__node--highlight-success, -.#{$eccgui}-graphviz__node--highlight-warning, -.#{$eccgui}-graphviz__node--highlight-danger { - &::before { - position: absolute; - inset: -2 * $reactflow-node-border-width; - z-index: -1; - display: block; - content: " "; - border-radius: inherit; - box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text !important; - } -} - -.#{$eccgui}-graphviz__node--highlight-match, -.#{$eccgui}-graphviz__node--highlight-altmatch { - &::after { - position: absolute; - inset: -2 * $reactflow-node-border-width; - z-index: -1; - display: block; - content: " "; - border-radius: inherit; - box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent; - } - - &.#{$eccgui}-graphviz__node--highlight-success, - &.#{$eccgui}-graphviz__node--highlight-warning, - &.#{$eccgui}-graphviz__node--highlight-danger { - &::after { - inset: -4 * $reactflow-node-border-width; - } - } -} - -.#{$eccgui}-graphviz__node--highlight-success { - &::before { - box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text !important; - } -} - -.#{$eccgui}-graphviz__node--highlight-warning { - &::before { - box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text !important; - } -} - -.#{$eccgui}-graphviz__node--highlight-altmatch { - &::after { - box-shadow: 0 0 0 2 * $reactflow-node-border-width color.complement($eccgui-color-primary) !important; - } -} From a999c07bf68308ae823e9d1f73c518ed23ff4ecc Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 23 Oct 2024 16:33:49 +0200 Subject: [PATCH 02/13] remove deprecated properties from components --- CHANGELOG.md | 23 +++++++ src/components/Accordion/Accordion.tsx | 13 ---- src/components/Accordion/AccordionItem.tsx | 7 --- src/components/Accordion/accordion.scss | 5 -- src/components/Breadcrumb/BreadcrumbList.tsx | 7 --- src/components/Card/CardHeader.tsx | 12 +--- src/components/Grid/Grid.tsx | 5 -- src/components/Grid/GridColumn.tsx | 6 -- src/components/Icon/BaseIcon.tsx | 4 +- src/components/Notification/Notification.tsx | 19 +----- src/components/Notification/notification.scss | 3 +- src/components/Table/Table.tsx | 9 +-- src/components/Tag/Tag.tsx | 9 +-- src/components/TextField/TextArea.tsx | 47 +-------------- src/components/TextField/TextField.tsx | 60 +++---------------- src/components/Workspace/WorkspaceContent.tsx | 2 +- 16 files changed, 45 insertions(+), 186 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d5af6c4..a54967b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,29 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - allow `next` and `legacy` as branch names - switch icons for `item-clone` and `item-copy` to Carbon's `` and `` +### Deprecated + +- `` and `` + + - `description` and `iconTitle`: use `title` as replacement. + +- `TableRowHeightSize` type: use `TableProps["size"]` directly + +### Migration from v23 to v24 + +- upgrade Typescript to v5 +- upgrade Node to at least v18, see **Changed** section for more info about it +- remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs + - `` + - `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config + - `` + - `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement + - `iconName`: was deprecated and now removed, use `icon` property + - `` + - `size`: use only "small", "medium" or "large" as value + - `` + - `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead + ## [23.8.0] - 2024-08-19 ### Added diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index c2de20ad..7536a293 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -19,26 +19,14 @@ export interface AccordionProps extends Omit { const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header; @@ -59,7 +47,6 @@ export const Accordion = ({ (className ? ` ${className}` : "") } align={align} - size={carbonAccordionSizeMapping[size]} {...otherProps} > {children} diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx index bedef5b2..1c3b18a1 100644 --- a/src/components/Accordion/AccordionItem.tsx +++ b/src/components/Accordion/AccordionItem.tsx @@ -32,11 +32,6 @@ export interface AccordionItemProps * Defines how much space is used for the separation between the accordion item and the next one. */ separationSize?: sizeOptions; - /** - * minimize white space and paddings - * @deprecated Use `whitespaceSize="none"` on `Accordion` or `AccordionItem` instead. - */ - condensed?: boolean; /** * do not use borders as visible separations on accordion item */ @@ -55,7 +50,6 @@ export const AccordionItem = ({ elevated = false, whitespaceSize = "medium", separationSize = "none", - condensed = false, noBorder = false, ...otherProps }: AccordionItemProps) => { @@ -75,7 +69,6 @@ export const AccordionItem = ({ ? ` ${eccgui}-accordion__item--contentspace-${contentWhitespaceSize}` : "") + (separationSize !== "none" ? ` ${eccgui}-accordion__item--separationspace-${separationSize}` : "") + - (condensed ? ` ${eccgui}-accordion__item--condensed` : "") + (noBorder ? ` ${eccgui}-accordion__item--noborder` : "") } title={label} diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss index 8e05aaed..7e399ffc 100644 --- a/src/components/Accordion/accordion.scss +++ b/src/components/Accordion/accordion.scss @@ -22,12 +22,10 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default; --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace}; --#{$eccgui}-accordion-separation: 0; } -.#{$eccgui}-accordion__item--condensed, .#{$eccgui}-accordion__container--global-headerspace-none, .#{$eccgui}-accordion__item--headerspace-none { --#{$eccgui}-accordion-header-height: 0; } -.#{$eccgui}-accordion__item--condensed, .#{$eccgui}-accordion__container--global-contentspace-none, .#{$eccgui}-accordion__item--contentspace-none { --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-block-whitespace * 0.25}; @@ -100,7 +98,6 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default; } } - .#{$eccgui}-accordion__item--condensed &, .#{$eccgui}-accordion__container--global-contentspace-none &, .#{$eccgui}-accordion__item--contentspace-none & { .#{$prefix}--accordion__arrow { @@ -155,14 +152,12 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default; margin: 0; } - .#{$eccgui}-accordion__item--condensed &, .#{$eccgui}-accordion__container--global-contentspace-none &, .#{$eccgui}-accordion__item--contentspace-none & { padding-right: 0; padding-left: 0; } - .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &, .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none :not(.#{$eccgui}-accordion__item--fullwidth) &, diff --git a/src/components/Breadcrumb/BreadcrumbList.tsx b/src/components/Breadcrumb/BreadcrumbList.tsx index 2438cdbf..8fbb736b 100644 --- a/src/components/Breadcrumb/BreadcrumbList.tsx +++ b/src/components/Breadcrumb/BreadcrumbList.tsx @@ -31,11 +31,6 @@ export interface BreadcrumbListProps Is only used if the breadcrumb item have not defined an own `onClick` handler. */ onItemClick?(itemUrl: string | undefined, event: object): boolean | void; - /** - native attributes for the unordered HTML list (ul) - @deprecated will be removed because the BlueprintJS `Breadcrumbs` component does not support native `ul` attributes. Use `wrapperProps` as alternate way to add native attributes to a container `div` element. - */ - htmlUlProps?: React.HTMLAttributes; /** * If set then a `div` element is used as wrapper. * It uses the attributes given via this property. @@ -64,7 +59,6 @@ export const BreadcrumbList = ({ className = "", // itemDivider = "/", onItemClick, - htmlUlProps, ignoreOverflow = false, latenOverflow = false, wrapperProps, @@ -109,7 +103,6 @@ export const BreadcrumbList = ({ const breadcrumbs = ( { children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined; - /** - * @deprecated use `whitespaceAmount` option of `` - */ - densityHigh?: OverviewItemProps["densityHigh"]; - /** - * @deprecated use `whitespaceAmount` option of `` - */ - hasSpacing?: OverviewItemProps["hasSpacing"]; } -export const CardHeader = ({ children, className = "", densityHigh = true, ...otherProps }: CardHeaderProps) => { +export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => { const actions: any[] = []; const description: any[] = []; @@ -39,7 +31,7 @@ export const CardHeader = ({ children, className = "", densityHigh = true, ...ot return (
- + {description.length > 0 && {description}} {actions} diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 968dd044..e0517b0e 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -21,11 +21,6 @@ export interface GridProps * Provide a HTML element name to render instead of the default `div`. */ as?: "article" | "section" | "div"; - /** - * @deprecated - * This is set always by default. - */ - fullWidth?: boolean; } /** diff --git a/src/components/Grid/GridColumn.tsx b/src/components/Grid/GridColumn.tsx index 8112b177..e53865b9 100644 --- a/src/components/Grid/GridColumn.tsx +++ b/src/components/Grid/GridColumn.tsx @@ -23,11 +23,6 @@ export interface GridColumnProps extends Omit, "max * Overwrite column sizes by using the original size config of the Carbon grid column. */ carbonSizeConfig?: Pick, "max" | "xlg" | "lg" | "md" | "sm">; - /** - * @deprecated - * Grid column always uses full width if it is the only column and does not have any othe size config. - */ - full?: boolean; } /** @@ -39,7 +34,6 @@ export const GridColumn = ({ className = "", small = false, medium = false, - full, verticalAlign = "top", carbonSizeConfig, ...otherProps diff --git a/src/components/Icon/BaseIcon.tsx b/src/components/Icon/BaseIcon.tsx index b1f7354d..7de20dbc 100644 --- a/src/components/Icon/BaseIcon.tsx +++ b/src/components/Icon/BaseIcon.tsx @@ -34,7 +34,7 @@ export interface BaseIconProps extends Omit>; /** - * @deprecated Use `title` as replacement. + * @deprecated (v25) Use `title` as replacement. */ iconTitle?: CarbonIconProps["title"]; } diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx index 316dda8b..9f257bd8 100644 --- a/src/components/Notification/Notification.tsx +++ b/src/components/Notification/Notification.tsx @@ -44,13 +44,6 @@ export interface NotificationProps * This defines the colorization and the icon symbol. */ danger?: boolean; - /** - * @deprecated - * Notification uses the the given space more flexible. - * Deprecation notice: Property name will removed in future versions. - * Please use `flexWidth`. - */ - fullWidth?: boolean; /** * Notification uses the the given space more flexible. * Default notification is displayed in min and max limits. @@ -62,11 +55,6 @@ export interface NotificationProps * Set it to false if you need to prevent automatically set icon regarding the notification type. */ icon?: false | React.ReactElement | React.ReactElement; - /** - * @deprecated - * Icon used as depiction that is displayed with the notification. - */ - iconName?: ValidIconName | null; /** * If set then a `div` element is used as wrapper. * It uses the attributes given via this property. @@ -87,9 +75,7 @@ export const Notification = ({ warning = false, danger = false, neutral = false, - fullWidth = false, // deprecated flexWidth = false, - iconName = "state-info", // deprecated icon, timeout, wrapperProps, @@ -98,7 +84,7 @@ export const Notification = ({ ...otherProps }: NotificationProps) => { let intentLevel: string = IntentClassNames.INFO; - let iconSymbol = iconName; + let iconSymbol = "state-info"; switch (true) { case success: intentLevel = IntentClassNames.SUCCESS; @@ -119,7 +105,7 @@ export const Notification = ({ let notificationIcon = icon !== false ? icon : undefined; if (icon !== false && !notificationIcon && !!iconSymbol) { - notificationIcon = ; + notificationIcon = ; } const content = actions ? ( @@ -139,7 +125,6 @@ export const Notification = ({ `${eccgui}-notification ` + intentLevel + (className ? ` ${className}` : "") + - (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") + // deprecated (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") + (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`) } diff --git a/src/components/Notification/notification.scss b/src/components/Notification/notification.scss index 4ca52593..89c774a6 100644 --- a/src/components/Notification/notification.scss +++ b/src/components/Notification/notification.scss @@ -60,8 +60,7 @@ } } -.#{$eccgui}-notification--flexwidth, -.#{$eccgui}-notification--fullwidth { +.#{$eccgui}-notification--flexwidth { min-width: 0; max-width: none; } diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 12646993..94fe7d4f 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -4,8 +4,8 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated -export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted; +// @deprecated (v25) use `TableProps["size"]` +export type TableRowHeightSize = "small" | "medium" | "large"; // workaround to get type/interface type CarbonTableProps = React.ComponentProps; @@ -14,8 +14,6 @@ export interface TableProps React.TableHTMLAttributes { /** * Sets basically the height of a row inside the table. - * Please use only `small`, `medium` and `large`. - * `compact` and `tall` are deprecated. */ size?: TableRowHeightSize; /** @@ -42,9 +40,6 @@ export const tableRowHeightSizes: Record = { small: "xs", medium: "sm", large: "md", - // deprecated values - compact: "xs", - tall: "md", }; export function Table({ diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 5a48dbdc..b0923489 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -47,14 +47,6 @@ export interface TagProps * Icon displayed left from the tag label. */ icon?: ValidIconName | React.ReactElement | React.ReactElement; - - // deprecated - - /** - * @deprecated - * **deprecated**, use `minimal=false` plus `emphasis="stronger"` - */ - emphasized?: never; } function Tag({ @@ -76,6 +68,7 @@ function Tag({ try { color = Color(backgroundColor); } catch (ex) { + // eslint-disable-next-line no-console console.warn("Received invalid background color for tag: " + backgroundColor); } diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx index 01ae7103..842e80ba 100644 --- a/src/components/TextField/TextArea.tsx +++ b/src/components/TextField/TextArea.tsx @@ -15,26 +15,6 @@ import { ValidIconName } from "../Icon/canonicalIconNames"; import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation"; export interface TextAreaProps extends Omit { - /** - * when set to true the input takes a blue border color - * @deprecated Use the `intent` property. - */ - hasStatePrimary?: boolean; - /** - * when set to true the input takes a green border color - * @deprecated Use the `intent` property. - */ - hasStateSuccess?: boolean; - /** - * when set to true the input takes an orange border color - * @deprecated Use the `intent` property. - */ - hasStateWarning?: boolean; - /** - * when set to true the input takes a red border color - * @deprecated Use the `intent` property. - */ - hasStateDanger?: boolean; /** * Intent state of the text area. */ @@ -62,16 +42,13 @@ export interface TextAreaProps extends Omit { export const TextArea = ({ className = "", - hasStatePrimary = false, - hasStateSuccess = false, - hasStateWarning = false, - hasStateDanger = false, rows = 5, invisibleCharacterWarning, leftIcon, rightElement, wrapperDivProps, - ...otherProps + intent, + ...otherBlueprintTextAreaProps }: TextAreaProps) => { const textAreaCallback = React.useCallback( (textAreaElement: HTMLTextAreaElement) => { @@ -148,26 +125,6 @@ export const TextArea = ({ [leftIcon, rightElement] ); - let deprecatedIntent; - switch (true) { - case hasStatePrimary: - deprecatedIntent = IntentDefinitions.PRIMARY; - break; - case hasStateSuccess: - deprecatedIntent = IntentDefinitions.SUCCESS; - break; - case hasStateWarning: - deprecatedIntent = IntentDefinitions.WARNING; - break; - case hasStateDanger: - deprecatedIntent = IntentDefinitions.DANGER; - break; - default: - break; - } - - const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps; - let iconIntent; switch (intent) { case "edited": diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index c71e132d..8322e849 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -3,7 +3,7 @@ import { Classes as BlueprintClassNames, HTMLInputProps, InputGroup as BlueprintInputGroup, - InputGroupProps2, + InputGroupProps as BlueprintInputGroupProps, Intent as BlueprintIntent, MaybeElement, } from "@blueprintjs/core"; @@ -16,27 +16,7 @@ import Icon from "../Icon/Icon"; import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation"; export interface TextFieldProps - extends Partial & HTMLInputProps> { - /** - * The input element is displayed with primary color scheme. - * @deprecated - */ - hasStatePrimary?: boolean; - /** - * The input element is displayed with success (some type of green) color scheme. - * @deprecated - */ - hasStateSuccess?: boolean; - /** - * The input element is displayed with warning (some type of orange) color scheme. - * @deprecated - */ - hasStateWarning?: boolean; - /** - * The input element is displayed with danger (some type of red) color scheme. - * @deprecated - */ - hasStateDanger?: boolean; + extends Partial & HTMLInputProps> { /** * Intent state of the text field. */ @@ -63,39 +43,19 @@ export interface TextFieldProps */ export const TextField = ({ className = "", - hasStatePrimary = false, - hasStateSuccess = false, - hasStateWarning = false, - hasStateDanger = false, fullWidth = true, leftIcon, invisibleCharacterWarning, escapeToBlur = false, - ...otherProps + intent, + ...otherBlueprintInputGroupProps }: TextFieldProps) => { const inputRef = React.useRef(null); - let deprecatedIntent; - switch (true) { - case hasStatePrimary: - deprecatedIntent = IntentDefinitions.PRIMARY; - break; - case hasStateSuccess: - deprecatedIntent = IntentDefinitions.SUCCESS; - break; - case hasStateWarning: - deprecatedIntent = IntentDefinitions.WARNING; - break; - case hasStateDanger: - deprecatedIntent = IntentDefinitions.DANGER; - break; - default: - break; - } const handleLabelEscape = React.useCallback(() => { inputRef.current?.blur(); - if (otherProps.inputRef) { - const otherInputRef = otherProps.inputRef as RefObject; + if (otherBlueprintInputGroupProps.inputRef) { + const otherInputRef = otherBlueprintInputGroupProps.inputRef as RefObject; if (otherInputRef.current) { otherInputRef.current.blur(); } @@ -109,13 +69,11 @@ export const TextField = ({ handleLabelEscape(); return false; } - return otherProps.onKeyDown?.(event); + return otherBlueprintInputGroupProps.onKeyDown?.(event); }, - [otherProps.onKeyDown, escapeToBlur] + [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur] ); - const { intent = deprecatedIntent, ...otherBlueprintInputGroupProps } = otherProps; - let iconIntent; switch (intent) { case "edited": @@ -169,7 +127,7 @@ export const TextField = ({ } dir={"auto"} onChange={maybeWrappedOnChange} - onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined} + onKeyDown={otherBlueprintInputGroupProps.onKeyDown || escapeToBlur ? onKeyDown : undefined} /> ); }; diff --git a/src/components/Workspace/WorkspaceContent.tsx b/src/components/Workspace/WorkspaceContent.tsx index 316bc516..e5b893c7 100644 --- a/src/components/Workspace/WorkspaceContent.tsx +++ b/src/components/Workspace/WorkspaceContent.tsx @@ -10,7 +10,7 @@ export type WorkspaceContentProps = GridProps; export const WorkspaceContent = ({ children, className = "", ...restProps }: WorkspaceContentProps) => { return ( - + {children} ); From 2603153a14da5cb82938bfdd88712f50ff3e5406 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 23 Oct 2024 16:37:31 +0200 Subject: [PATCH 03/13] update chnagelog --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a54967b1..a05fb3f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,9 +42,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Deprecated - `` and `` - - `description` and `iconTitle`: use `title` as replacement. - - `TableRowHeightSize` type: use `TableProps["size"]` directly ### Migration from v23 to v24 From 535fde4655fe20413fab816c15c0044a6d1a200f Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 24 Oct 2024 17:51:22 +0200 Subject: [PATCH 04/13] fix card header --- src/components/Card/CardHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card/CardHeader.tsx b/src/components/Card/CardHeader.tsx index 659394bc..54baf975 100644 --- a/src/components/Card/CardHeader.tsx +++ b/src/components/Card/CardHeader.tsx @@ -31,7 +31,7 @@ export const CardHeader = ({ children, className = "", ...otherProps }: CardHead return (
- + {description.length > 0 && {description}} {actions} From 101614d2ed235661acfe1211aaad3623d752e4b6 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 28 Oct 2024 17:04:12 +0100 Subject: [PATCH 05/13] remove types and interface that have been set as deprecated before --- CHANGELOG.md | 3 +++ .../ActivityControl/ActivityControlWidget.tsx | 6 ----- .../ActivityControl/SilkActivityControl.tsx | 26 ++++++------------- .../ElapsedDateTimeDisplay.tsx | 12 ++++++--- src/cmem/markdown/Markdown.tsx | 2 -- src/cmem/react-flow/nodes/StickyNoteNode.tsx | 4 +-- .../AutoSuggestion/AutoSuggestion.tsx | 3 --- .../AutoSuggestion/AutoSuggestionList.tsx | 3 --- .../AutocompleteField/AutoCompleteField.tsx | 7 +---- src/components/Button/Button.tsx | 5 ---- src/components/Dialog/AlertDialog.tsx | 3 --- src/components/Icon/canonicalIconNames.tsx | 12 +++------ src/components/MultiSelect/MultiSelect.tsx | 3 --- src/components/Spinner/Spinner.tsx | 9 +++---- src/components/Tooltip/Tooltip.tsx | 4 +-- .../react-flow/minimap/_minimap.scss | 22 ---------------- src/extensions/react-flow/minimap/utils.ts | 7 ++--- .../react-flow/nodes/NodeContent.tsx | 22 +++------------- .../react-flow/nodes/NodeDefault.tsx | 3 --- .../react-flow/nodes/sharedTypes.ts | 1 - 20 files changed, 37 insertions(+), 120 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a05fb3f6..31ee07eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,6 +59,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `size`: use only "small", "medium" or "large" as value - `` - `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead + - `IconSized` type: use `CarbonIconType` + - `TimeUnits` type: use `ElapsedDateTimeDisplayUnits` + - `MarkdownParserProps` interface: use `MarkdownProps` ## [23.8.0] - 2024-08-19 diff --git a/src/cmem/ActivityControl/ActivityControlWidget.tsx b/src/cmem/ActivityControl/ActivityControlWidget.tsx index 95aa7990..dfa754e4 100644 --- a/src/cmem/ActivityControl/ActivityControlWidget.tsx +++ b/src/cmem/ActivityControl/ActivityControlWidget.tsx @@ -83,9 +83,6 @@ export interface ActivityControlWidgetProps extends TestableComponent { timerExecutionMsg?: JSX.Element | null; } -// @deprecated use `ActivityControlWidgetProps` -export type IActivityControlProps = ActivityControlWidgetProps; - interface IActivityContextMenu extends TestableComponent { // Tooltip for the context menu tooltip?: string; @@ -106,9 +103,6 @@ export interface ActivityControlWidgetAction extends TestableComponent { hasStateWarning?: boolean; } -// @deprecated use `ActivityControlWidgetAction` -export type IActivityAction = ActivityControlWidgetAction; - interface IActivityMenuAction extends ActivityControlWidgetAction { // Optional link href?: string; diff --git a/src/cmem/ActivityControl/SilkActivityControl.tsx b/src/cmem/ActivityControl/SilkActivityControl.tsx index e38421af..284d86a0 100644 --- a/src/cmem/ActivityControl/SilkActivityControl.tsx +++ b/src/cmem/ActivityControl/SilkActivityControl.tsx @@ -4,7 +4,7 @@ import { Intent } from "@blueprintjs/core/src/common/intent"; import { Icon, Spacing } from "../../"; import { IntentTypes } from "../../common/Intent"; import { TestableComponent } from "../../components/interfaces"; -import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay"; +import { ElapsedDateTimeDisplay, ElapsedDateTimeDisplayUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay"; import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes"; import { ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget"; @@ -42,13 +42,13 @@ export interface SilkActivityControlProps extends TestableComponent { action: string | (() => any); }; // DI activity actions - executeActivityAction: (action: ActivityAction) => void; + executeActivityAction: (action: SilkActivityControlAction) => void; /** If specified, the activity control will offer a "Start prioritized" button while the activity is in the waiting state. * When the button is clicked it should start the activity via the startPrioritized endpoint. */ executePrioritized?: () => void; // Get the translation for a specific key - translate: (key: ActivityControlTranslationKeys) => string; + translate: (key: SilkActivityControlTranslationKeys) => string; // When defined the elapsed time since the last start is displayed next to the label elapsedTimeOfLastStart?: { // Prefix before the elapsed time @@ -56,7 +56,7 @@ export interface SilkActivityControlProps extends TestableComponent { // Suffix after the elapsed time suffix?: string; // The translation of the time units - translate: (unit: TimeUnits) => string; + translate: (unit: ElapsedDateTimeDisplayUnits) => string; }; // configure how the widget is displayed layoutConfig?: SilkActivityControlLayoutProps; @@ -65,7 +65,7 @@ export interface SilkActivityControlProps extends TestableComponent { /** * The translation of the time units */ - translateUnits?: (unit: TimeUnits) => string; + translateUnits?: (unit: ElapsedDateTimeDisplayUnits) => string; } export interface SilkActivityControlLayoutProps { @@ -83,9 +83,6 @@ export interface SilkActivityControlLayoutProps { labelWrapper?: JSX.Element; } -// @deprecated use `SilkActivityControlLayoutProps` -export type IActivityControlLayoutProps = SilkActivityControlLayoutProps; - const defaultLayout: SilkActivityControlLayoutProps = { small: false, border: false, @@ -131,9 +128,6 @@ export interface SilkActivityExecutionReportProps { stackTrace?: IStacktrace; } -// @deprecated use `SilkActivityExecutionReportProps` -export type IActivityExecutionReport = SilkActivityExecutionReportProps; - interface IStacktrace { // The final error message of the stacktrace errorMessage?: string; @@ -143,17 +137,13 @@ interface IStacktrace { cause?: IStacktrace; } -// @deprecated use `SilkActivityControlTranslationKeys` -export type ActivityControlTranslationKeys = +export type SilkActivityControlTranslationKeys = | "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized"; -export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys; -// @deprecated use `SilkActivityControlAction` -export type ActivityAction = "start" | "cancel" | "restart"; -export type SilkActivityControlAction = ActivityAction; +export type SilkActivityControlAction = "start" | "cancel" | "restart"; /** Silk activity control. */ export function SilkActivityControl(props: SilkActivityControlProps) { @@ -178,7 +168,7 @@ export function useSilkActivityControl({ layoutConfig = defaultLayout, hideMessageOnStatus = () => false, executePrioritized, - translateUnits = (unit: TimeUnits) => unit.toString(), + translateUnits = (unit: ElapsedDateTimeDisplayUnits) => unit.toString(), ...props }: SilkActivityControlProps) { const [activityStatus, setActivityStatus] = useState(initialStatus); diff --git a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx index c9e7885b..d465d98a 100644 --- a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx +++ b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx @@ -2,9 +2,15 @@ import React, { useEffect, useState } from "react"; import { TestableComponent } from "../../components/interfaces"; -// @deprecated use `ElapsedDateTimeDisplayUnits` -export type TimeUnits = "second" | "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days"; -export type ElapsedDateTimeDisplayUnits = TimeUnits; +export type ElapsedDateTimeDisplayUnits = + | "second" + | "seconds" + | "minute" + | "minutes" + | "hour" + | "hours" + | "day" + | "days"; export interface ElapsedDateTimeDisplayProps extends TestableComponent { // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC) diff --git a/src/cmem/markdown/Markdown.tsx b/src/cmem/markdown/Markdown.tsx index 25edcc48..ec77f07e 100644 --- a/src/cmem/markdown/Markdown.tsx +++ b/src/cmem/markdown/Markdown.tsx @@ -42,8 +42,6 @@ export interface MarkdownProps extends TestableComponent { */ linkTargetName?: false | string; } -/* @deprecated use `MarkdownProps` */ -export type MarkdownParserProps = MarkdownProps; const configDefault = { /* diff --git a/src/cmem/react-flow/nodes/StickyNoteNode.tsx b/src/cmem/react-flow/nodes/StickyNoteNode.tsx index 9804d968..04bb4dd8 100644 --- a/src/cmem/react-flow/nodes/StickyNoteNode.tsx +++ b/src/cmem/react-flow/nodes/StickyNoteNode.tsx @@ -1,8 +1,8 @@ import React, { memo } from "react"; -import { NodeDefault, NodeProps } from "./../../../extensions/react-flow/nodes/NodeDefault"; +import { NodeDefault, NodeDefaultProps } from "./../../../extensions/react-flow/nodes/NodeDefault"; -export const StickyNoteNode = memo((node: NodeProps) => { +export const StickyNoteNode = memo((node: NodeDefaultProps) => { const { data, ...otherNodeProps } = node; data.minimalShape = data.minimalShape ?? "none"; diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx index cd9fb8de..4351d6ad 100644 --- a/src/components/AutoSuggestion/AutoSuggestion.tsx +++ b/src/components/AutoSuggestion/AutoSuggestion.tsx @@ -140,9 +140,6 @@ export interface AutoSuggestionProps { mode?: string; } -// @deprecated -export type IProps = AutoSuggestionProps; - // Meta data regarding a request interface RequestMetaData { requestId: string | undefined; diff --git a/src/components/AutoSuggestion/AutoSuggestionList.tsx b/src/components/AutoSuggestion/AutoSuggestionList.tsx index 95497098..aa1c2169 100644 --- a/src/components/AutoSuggestion/AutoSuggestionList.tsx +++ b/src/components/AutoSuggestion/AutoSuggestionList.tsx @@ -34,9 +34,6 @@ export interface AutoSuggestionListProps extends Omit { const listItem = ( diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx index 169fbc01..a1713105 100644 --- a/src/components/AutocompleteField/AutoCompleteField.tsx +++ b/src/components/AutocompleteField/AutoCompleteField.tsx @@ -17,12 +17,7 @@ import { Spinner, } from "../../index"; -import { IElementWidth as IElementWidthOrig, IRenderModifiers as IRenderModifiersOrig } from "./interfaces"; - -// @deprecated import from `src/components/AutocompleteField/interfaces` -export type IElementWidth = IElementWidthOrig; -// @deprecated import from `src/components/AutocompleteField/interfaces` -export type IRenderModifiers = IRenderModifiersOrig; +import { IRenderModifiers } from "./interfaces"; type SearchFunction = (value: string) => T[]; type AsyncSearchFunction = (value: string) => Promise; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index ad565b4d..189a39e3 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -14,11 +14,6 @@ import Icon from "../Icon/Icon"; import Badge, { BadgeProps } from "./../Badge/Badge"; import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip"; -/** @deprecated will be removed, there is no replacement */ -export type AnchorOrButtonProps = - | Omit - | Omit; - interface AdditionalButtonProps { /** * Always use this when the button triggers an affirmative action, e.g. confirm a process. diff --git a/src/components/Dialog/AlertDialog.tsx b/src/components/Dialog/AlertDialog.tsx index 10cb2c3f..271286b2 100644 --- a/src/components/Dialog/AlertDialog.tsx +++ b/src/components/Dialog/AlertDialog.tsx @@ -19,9 +19,6 @@ export interface AlertDialogProps extends Omit { danger?: boolean; } -// @deprecated -export type IAlertDialogProps = AlertDialogProps; - /** * Special element to display alert notification in modal dialogs. * Inherits all properties from `SimpleDialog`, except `intent`. diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx index 367d8b46..ad55e108 100644 --- a/src/components/Icon/canonicalIconNames.tsx +++ b/src/components/Icon/canonicalIconNames.tsx @@ -1,14 +1,6 @@ import * as icons from "@carbon/react/icons"; import { CarbonIconType as IconType } from "@carbon/react/icons"; -export type CarbonIconType = IconType; - -/** - * @deprecated - * use CarbonIconType instead - */ -export type IconSized = CarbonIconType; - const canonicalIcons = { "application-activities": icons.Activity, "application-dataintegration": icons.DataUnstructured, @@ -180,6 +172,8 @@ const canonicalIcons = { undefined: icons.Undefined, }; -export type ValidIconName = keyof typeof canonicalIcons; const canonicalIconNames: Record = canonicalIcons; + +export type CarbonIconType = IconType; +export type ValidIconName = keyof typeof canonicalIcons; export default canonicalIconNames; diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index 9637f442..5ae7feb6 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -18,9 +18,6 @@ export interface MultiSelectSelectionProps { createdItems: Partial[]; } -// @deprecated use `MultiSelectSelectionProps` -export type SelectedParamsType = MultiSelectSelectionProps; - interface MultiSelectCommonProps extends TestableComponent, Pick, "items" | "placeholder" | "openOnKeyDown"> { diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx index bcc66b43..24957f18 100644 --- a/src/components/Spinner/Spinner.tsx +++ b/src/components/Spinner/Spinner.tsx @@ -8,12 +8,9 @@ import { import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -// @deprecated use `SpinnerProps['position']` -export type SpinnerPosition = "local" | "inline" | "global"; -// @deprecated use `SpinnerProps['size']` -export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"; -// @deprecated use `SpinnerProps['stroke']` -export type SpinnerStroke = "thin" | "medium" | "bold"; +type SpinnerPosition = "local" | "inline" | "global"; +type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"; +type SpinnerStroke = "thin" | "medium" | "bold"; type Intent = "inherit" | "primary" | "success" | "warning" | "danger"; /** A spinner that is either displayed globally or locally. */ diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 8d7f3bfb..e128aa30 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -7,7 +7,7 @@ import { import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -import { Markdown, MarkdownParserProps } from "./../../cmem/markdown/Markdown"; +import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown"; export interface TooltipProps extends Omit { /** @@ -32,7 +32,7 @@ export interface TooltipProps extends Omit { /** * Set properties for the Markdown parser */ - markdownProps?: Omit; + markdownProps?: Omit; } export const Tooltip = ({ diff --git a/src/extensions/react-flow/minimap/_minimap.scss b/src/extensions/react-flow/minimap/_minimap.scss index 590c5334..fe613e23 100644 --- a/src/extensions/react-flow/minimap/_minimap.scss +++ b/src/extensions/react-flow/minimap/_minimap.scss @@ -8,28 +8,6 @@ } } -.#{$eccgui}-graphviz__minimap__node--highlight-match { - stroke: $eccgui-color-accent; - stroke-width: 5; -} -.#{$eccgui}-graphviz__minimap__node--highlight-altmatch { - stroke: complement($eccgui-color-primary); - stroke-width: 5; -} -.#{$eccgui}-graphviz__minimap__node--highlight-success { - stroke: $eccgui-color-success-text; - stroke-width: 5; -} -.#{$eccgui}-graphviz__minimap__node--highlight-warning { - stroke: $eccgui-color-warning-text; - stroke-width: 7; -} -.#{$eccgui}-graphviz__minimap__node--highlight-danger { - fill: $eccgui-color-danger-text; - stroke: $eccgui-color-danger-text; - stroke-width: 9; -} - .react-flow__minimap-node { // FIXME: this is a first basic implementation, later it should be possible to highlight without overwriting stroke/fill colors diff --git a/src/extensions/react-flow/minimap/utils.ts b/src/extensions/react-flow/minimap/utils.ts index a0717b7b..71ddfa84 100644 --- a/src/extensions/react-flow/minimap/utils.ts +++ b/src/extensions/react-flow/minimap/utils.ts @@ -1,15 +1,12 @@ import { intentClassName } from "../../../common/Intent"; import { CLASSPREFIX as eccgui } from "./../../../configuration/constants"; -import { nodeContentUtils } from "./../nodes/NodeContent"; const nodeClassName = (node: any) => { const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type; - const stateClass = node.data?.highlightedState - ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) - : ""; + // TODO: re-implement the evaluation of node.data.highlightColor so it is highlighted the same way in the minimap, too. const intentClass = node.data?.intent ? intentClassName(node.data.intent) : ""; - return `${typeClass} ${intentClass} ${stateClass}`; + return `${typeClass} ${intentClass}`; }; const nodeColor = (node: any) => { diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index ceecbdaf..b072f51d 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -13,8 +13,8 @@ import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupp import { HandleDefault, HandleNextProps, HandleProps } from "./../handles/HandleDefault"; import { NodeContentExtensionProps } from "./NodeContentExtension"; -import { NodeProps } from "./NodeDefault"; -import { HighlightingState, NodeHighlightColor } from "./sharedTypes"; +import { NodeDefaultProps } from "./NodeDefault"; +import { NodeHighlightColor } from "./sharedTypes"; type NodeContentHandleLegacyProps = HandleProps; @@ -22,14 +22,7 @@ type NodeContentHandleNextProps = HandleNextProps; export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps; -// @deprecated use `NodeContentProps['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`) -export type { HighlightingState }; - -// @deprecated use `HandleDefaultProps` -export type IHandleProps = NodeContentHandleLegacyProps; - -// @deprecated use `NodeContentProps['nodeDimensions']` -export type NodeDimensions = { +type NodeDimensions = { width: number; height: number; }; @@ -165,7 +158,7 @@ export interface NodeContentProps * Callback function to provide content for the tooltip on a node with a defined `minimalShape`. * If you do not want a tooltip in this state you need to provide a callback that returns an empty value. */ - getMinimalTooltipData?: (node: NodeProps) => NodeContentData; + getMinimalTooltipData?: (node: NodeDefaultProps) => NodeContentData; /** * Set if a handle is displayed even if it does not allow a connection to an edge. */ @@ -282,12 +275,6 @@ const addHandles = ( }); }; -// @deprecated probably not used anymore, we check and may remove it -const gethighlightedStateClasses = (state: HighlightingState | HighlightingState[], baseClassName: string) => { - const hightlights = typeof state === "string" ? [state] : state; - return hightlights.map((item: HighlightingState) => `${baseClassName}--highlight-${item}`).join(" "); -}; - const MemoHandler = React.memo( (props: MemoHandlerProps) => , (prev, next) => { @@ -687,5 +674,4 @@ const evaluateHighlightColors = ( export const nodeContentUtils = { evaluateHighlightColors, - gethighlightedStateClasses, }; diff --git a/src/extensions/react-flow/nodes/NodeDefault.tsx b/src/extensions/react-flow/nodes/NodeDefault.tsx index 5bd1ac01..f63974f4 100644 --- a/src/extensions/react-flow/nodes/NodeDefault.tsx +++ b/src/extensions/react-flow/nodes/NodeDefault.tsx @@ -16,9 +16,6 @@ export interface NodeDefaultProps data: NodeContentProps; } -// @deprecated use NodeDefaultProps -export type NodeProps = NodeDefaultProps; - /** * The `NodeDefault` element manages the display of React-Flow nodes. * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container. diff --git a/src/extensions/react-flow/nodes/sharedTypes.ts b/src/extensions/react-flow/nodes/sharedTypes.ts index 73b74eee..6688d448 100644 --- a/src/extensions/react-flow/nodes/sharedTypes.ts +++ b/src/extensions/react-flow/nodes/sharedTypes.ts @@ -1,3 +1,2 @@ import Color from "color"; -export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch"; export type NodeHighlightColor = "default" | "alternate" | Color | string; From fc9b7226fabbdeade88384337d0655188caed5f5 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 29 Oct 2024 08:48:37 +0100 Subject: [PATCH 06/13] deprecate old SuggestField interfaces properly --- CHANGELOG.md | 2 ++ .../AutocompleteField/AutoCompleteField.tsx | 17 +++++++++++------ src/components/AutocompleteField/index.ts | 1 + src/components/AutocompleteField/interfaces.ts | 7 +++++-- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 31ee07eb..88e44d32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -44,6 +44,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` and `` - `description` and `iconTitle`: use `title` as replacement. - `TableRowHeightSize` type: use `TableProps["size"]` directly +- `IRenderModifiers` interface: use `SuggestFieldItemRendererModifierProps` +- `IElementWidth` type: use `SuggestFieldItemRendererModifierProps["styleWidth"]` ### Migration from v23 to v24 diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx index a1713105..81e8be9a 100644 --- a/src/components/AutocompleteField/AutoCompleteField.tsx +++ b/src/components/AutocompleteField/AutoCompleteField.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from "react"; import { HTMLInputProps as BlueprintHTMLInputProps, - InputGroupProps2 as BlueprintInputGroupProps, + InputGroupProps as BlueprintInputGroupProps, } from "@blueprintjs/core"; -import { Suggest2 as BlueprintSuggest } from "@blueprintjs/select"; +import { Suggest as BlueprintSuggest } from "@blueprintjs/select"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import { @@ -17,7 +17,7 @@ import { Spinner, } from "../../index"; -import { IRenderModifiers } from "./interfaces"; +import { SuggestFieldItemRendererModifierProps } from "./interfaces"; type SearchFunction = (value: string) => T[]; type AsyncSearchFunction = (value: string) => Promise; @@ -59,7 +59,12 @@ export interface AutoCompleteFieldProps { * @param handleClick The function that needs to be called when the rendered item gets clicked. Else a selection * via mouse is not possible. This only needs to be used when returning a JSX.Element. */ - itemRenderer(item: T, query: string, modifiers: IRenderModifiers, handleClick: () => any): string | JSX.Element; + itemRenderer( + item: T, + query: string, + modifiers: SuggestFieldItemRendererModifierProps, + handleClick: () => any + ): string | JSX.Element; /** Renders the string that should be displayed in the input field after the item has been selected. */ @@ -115,7 +120,7 @@ export interface AutoCompleteFieldProps { /** Renders how the option to newly create an item should look like in the selection list. */ itemRenderer: ( query: string, - modifiers: IRenderModifiers, + modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler ) => JSX.Element | undefined; @@ -327,7 +332,7 @@ export function AutoCompleteField(props: AutoCompleteFieldProps if (!modifiers.matchesPredicate) { return null; } - const relevantModifiers: IRenderModifiers = { + const relevantModifiers: SuggestFieldItemRendererModifierProps = { active: modifiers.active, disabled: modifiers.disabled, highlightingEnabled: highlightingEnabled, diff --git a/src/components/AutocompleteField/index.ts b/src/components/AutocompleteField/index.ts index 82fce258..34448810 100644 --- a/src/components/AutocompleteField/index.ts +++ b/src/components/AutocompleteField/index.ts @@ -1,5 +1,6 @@ import { createNewItemRendererFactory } from "./autoCompleteFieldUtils"; export * from "./AutoCompleteField"; +export * from "./interfaces"; export const autoCompleteFieldUtils = { createNewItemRendererFactory, }; diff --git a/src/components/AutocompleteField/interfaces.ts b/src/components/AutocompleteField/interfaces.ts index ff59fc40..2c40ad3c 100644 --- a/src/components/AutocompleteField/interfaces.ts +++ b/src/components/AutocompleteField/interfaces.ts @@ -1,4 +1,4 @@ -export interface IRenderModifiers { +export interface SuggestFieldItemRendererModifierProps { active: boolean; disabled?: boolean; // The width styles that should be given to the rendered option items @@ -6,7 +6,10 @@ export interface IRenderModifiers { highlightingEnabled: boolean; } -/** Style object to be used in menu option items. */ +/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps` */ +export type IRenderModifiers = SuggestFieldItemRendererModifierProps; + +/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps["styleWidth"]` */ export interface IElementWidth { minWidth: string; maxWidth: string; From eef2574726d06d3ed6ef697dc9f91fb1004f1ea0 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 29 Oct 2024 09:47:12 +0100 Subject: [PATCH 07/13] remove derecated interfaces --- src/cmem/ActivityControl/ActivityControlTypes.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/cmem/ActivityControl/ActivityControlTypes.ts b/src/cmem/ActivityControl/ActivityControlTypes.ts index 12746530..11437fbe 100644 --- a/src/cmem/ActivityControl/ActivityControlTypes.ts +++ b/src/cmem/ActivityControl/ActivityControlTypes.ts @@ -1,5 +1,4 @@ -// @deprecated use `SilkActivityStatusProps` -export interface IActivityStatus { +export interface SilkActivityStatusProps { // Optional project ID project?: string; // Optional task ID @@ -23,7 +22,7 @@ export interface IActivityStatus { // If the activity has been cancelled cancelled: boolean; // The concrete status ID - concreteStatus: ConcreteActivityStatus; + concreteStatus: SilkActivityStatusConcrete; // If there was an error, this contains the exception message exceptionMessage?: string | null; // The runtime in ms @@ -33,10 +32,8 @@ export interface IActivityStatus { // The queue time spent waiting before workflow is executed as date time, e.g. "2021-09-07T09:34:53.153Z" queueTime?: string; } -export type SilkActivityStatusProps = IActivityStatus; -// @deprecated use `SilkActivityStatusConcrete` -export type ConcreteActivityStatus = +export type SilkActivityStatusConcrete = | "Cancelled" | "Failed" | "Successful" @@ -44,4 +41,3 @@ export type ConcreteActivityStatus = | "Running" | "Waiting" | "Canceling"; -export type SilkActivityStatusConcrete = ConcreteActivityStatus; From 57c83324592e4783112f424821bcc52336592e41 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 29 Oct 2024 15:27:27 +0100 Subject: [PATCH 08/13] set all legacy support components as deprecated, they are going to removed in v25 --- src/legacy-replacements/Button/AffirmativeButton.tsx | 1 + src/legacy-replacements/Button/Button.tsx | 2 ++ src/legacy-replacements/Button/DismissiveButton.tsx | 1 + src/legacy-replacements/Button/DisruptiveButton.tsx | 1 + src/legacy-replacements/Checkbox/Checkbox.tsx | 2 ++ src/legacy-replacements/Radio/RadioButton.tsx | 2 ++ src/legacy-replacements/Tabs/Tabs.tsx | 9 +++++---- src/legacy-replacements/TextField/TextField.tsx | 2 ++ 8 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/legacy-replacements/Button/AffirmativeButton.tsx b/src/legacy-replacements/Button/AffirmativeButton.tsx index 6d0a8239..734f3270 100644 --- a/src/legacy-replacements/Button/AffirmativeButton.tsx +++ b/src/legacy-replacements/Button/AffirmativeButton.tsx @@ -2,6 +2,7 @@ import React from "react"; import { ButtonReplacement } from "./Button"; +/** @deprecated (v25) all legacy component support will be removed, switch to `