+
)}
),
}}
- hasStateDanger={hasError}
+ intent={hasError ? "danger" : undefined}
messageText={hasError ? validationErrorText : undefined}
>
{withRightElement}
@@ -765,4 +750,4 @@ const AutoSuggestion = ({
);
};
-export default AutoSuggestion;
+export default CodeAutocompleteField;
diff --git a/src/components/AutoSuggestion/AutoSuggestionList.tsx b/src/components/AutoSuggestion/AutoSuggestionList.tsx
index d883c6f27..ff524fad3 100644
--- a/src/components/AutoSuggestion/AutoSuggestionList.tsx
+++ b/src/components/AutoSuggestion/AutoSuggestionList.tsx
@@ -15,13 +15,13 @@ import {
Spinner,
Tooltip,
} from "./../../";
-import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+import { CodeAutocompleteFieldSuggestionWithReplacementInfo } from "./AutoSuggestion";
export interface AutoSuggestionListProps extends Omit
, "children"> {
// The options of the drop down
- options: Array;
+ options: Array;
// Called when an item has been selected from the drop down
- onItemSelectionChange: (item: ISuggestionWithReplacementInfo) => any;
+ onItemSelectionChange: (item: CodeAutocompleteFieldSuggestionWithReplacementInfo) => any;
// If the drop down is visible
isOpen: boolean;
// If the drop down should show a loading state
@@ -29,7 +29,7 @@ export interface AutoSuggestionListProps extends Omit any;
+ itemToHighlight: (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => any;
/** horizontal and vertical offset values in relation to the cursor */
offsetValues?: { x: number; y: number };
}
@@ -86,7 +86,7 @@ export const AutoSuggestionList = ({
offsetValues,
...otherDivProps
}: AutoSuggestionListProps) => {
- const [hoveredItem, setHoveredItem] = React.useState(undefined);
+ const [hoveredItem, setHoveredItem] = React.useState(undefined);
// Refs of list items
const [refs] = React.useState[]>([]);
const dropdownRef = React.useRef(null);
@@ -123,7 +123,7 @@ export const AutoSuggestionList = ({
Fetching suggestions
);
diff --git a/src/components/AutoSuggestion/ExtendedCodeEditor.tsx b/src/components/AutoSuggestion/ExtendedCodeEditor.tsx
index 179681eaf..4dc9e3a3a 100644
--- a/src/components/AutoSuggestion/ExtendedCodeEditor.tsx
+++ b/src/components/AutoSuggestion/ExtendedCodeEditor.tsx
@@ -67,8 +67,6 @@ export interface ExtendedCodeEditorProps {
readOnly?: boolean;
}
-export type IEditorProps = ExtendedCodeEditorProps;
-
/** Supports single-line and multiline editing. */
export const ExtendedCodeEditor = ({
multiline = false,
@@ -113,11 +111,7 @@ export const ExtendedCodeEditor = ({
name=""
enableTab={enableTab}
additionalExtensions={[...multilineExtensions]}
- outerDivAttributes={{
- className: `${eccgui}-${
- multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`
- }`,
- }}
+ className={multiline ? undefined : `${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}
{...codeEditorProps}
/>
);
diff --git a/src/components/AutoSuggestion/index.ts b/src/components/AutoSuggestion/index.ts
deleted file mode 100644
index 2261d0c02..000000000
--- a/src/components/AutoSuggestion/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { AutoSuggestionProps } from "./AutoSuggestion";
-import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
-import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./ExtendedCodeEditor";
-
-export { AutoSuggestionList, ExtendedCodeEditor };
-
-export type { AutoSuggestionProps, AutoSuggestionListProps, ExtendedCodeEditorProps };
diff --git a/src/components/AutocompleteField/AutoCompleteField.stories.tsx b/src/components/AutocompleteField/AutoCompleteField.stories.tsx
deleted file mode 100644
index 937f5a794..000000000
--- a/src/components/AutocompleteField/AutoCompleteField.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Meta } from "@storybook/react";
-
-import { AutoCompleteField } from "./../../../index";
-export { Default } from "../SuggestField/SuggestField.stories";
-
-export default {
- title: "Forms/AutoCompleteField",
- component: AutoCompleteField,
- parameters: {
- controls: {
- exclude: /.*/g,
- },
- },
-} as Meta;
diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx
index f51aca4d5..84e585f73 100644
--- a/src/components/AutocompleteField/AutoCompleteField.tsx
+++ b/src/components/AutocompleteField/AutoCompleteField.tsx
@@ -23,9 +23,11 @@ type SearchFunction = (value: string) => T[];
type AsyncSearchFunction = (value: string) => Promise;
/**
- * @deprecated (v25) replaced by SuggestFieldProps
+ * Parameters for the auto-complete field parameterized by T and U.
+ * @param T is the input data structure/type of the items that can be selected.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
*/
-export interface AutoCompleteFieldProps {
+export interface SuggestFieldProps {
/**
* Additional class names.
*/
@@ -158,12 +160,7 @@ export interface AutoCompleteFieldProps {
loadMoreResults?: () => Promise;
}
-/**
- * @deprecated (v25) replaced by SuggestFieldProps
- */
-export type IAutoCompleteFieldProps = AutoCompleteFieldProps;
-
-AutoCompleteField.defaultProps = {
+SuggestField.defaultProps = {
autoFocus: false,
disabled: false,
onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `(props: AutoCompleteFieldProps) {
+export function SuggestField(props: SuggestFieldProps) {
const {
className,
reset,
@@ -368,7 +375,7 @@ function AutoCompleteField(props: AutoCompleteFieldProps {
- return (props: AutoCompleteFieldProps
- className={`${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
+ className={`${eccgui}-suggestfield ${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
disabled={disabled}
// Need to display error messages in list
items={requestError ? [requestError as unknown as T] : filtered}
@@ -505,4 +512,4 @@ function AutoCompleteField(props: AutoCompleteFieldProps
) => {
// Return custom render function
- return (query: string, modifiers: IRenderModifiers, handleClick: React.MouseEventHandler) => {
+ return (query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler) => {
let textElement = itemTextRenderer(query);
if (typeof textElement === "string") {
textElement = (
diff --git a/src/components/AutocompleteField/index.ts b/src/components/AutocompleteField/index.ts
deleted file mode 100644
index 344488100..000000000
--- a/src/components/AutocompleteField/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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 2c40ad3c3..97ef84428 100644
--- a/src/components/AutocompleteField/interfaces.ts
+++ b/src/components/AutocompleteField/interfaces.ts
@@ -6,11 +6,7 @@ export interface SuggestFieldItemRendererModifierProps {
highlightingEnabled: boolean;
}
-/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps` */
-export type IRenderModifiers = SuggestFieldItemRendererModifierProps;
-
-/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps["styleWidth"]` */
-export interface IElementWidth {
+interface IElementWidth {
minWidth: string;
maxWidth: string;
}
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index d2899b5ae..72c9fda10 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -33,10 +33,6 @@ const TemplateFull: StoryFn = (args) => (
export const FullExample = TemplateFull.bind({});
FullExample.args = {
- hasStatePrimary: false,
- hasStateSuccess: false,
- hasStateWarning: false,
- hasStateDanger: false,
elevated: false,
affirmative: false,
disruptive: false,
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 9f7563ae1..e15b40968 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -30,26 +30,6 @@ interface AdditionalButtonProps {
* The button is displayed with primary color scheme.
*/
elevated?: boolean;
- /**
- * The button is displayed with primary color scheme.
- * @deprecated (v25) use `intent="primary"` instead.
- */
- hasStatePrimary?: boolean;
- /**
- * The button is displayed with success (some type of green) color scheme.
- * @deprecated (v25) use `intent="success"` instead.
- */
- hasStateSuccess?: boolean;
- /**
- * The button is displayed with warning (some type of orange) color scheme.
- * @deprecated (v25) use `intent="warning"` instead.
- */
- hasStateWarning?: boolean;
- /**
- * The button is displayed with danger (some type of red) color scheme.
- * @deprecated (v25) use `intent="danger"` instead.
- */
- hasStateDanger?: boolean;
/**
* Content displayed in a badge that is attached to the button.
* By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
@@ -94,10 +74,6 @@ export const Button = ({
affirmative = false,
disruptive = false,
elevated = false,
- hasStatePrimary = false,
- hasStateSuccess = false,
- hasStateWarning = false,
- hasStateDanger = false,
icon,
rightIcon,
tooltip = null,
@@ -107,19 +83,13 @@ export const Button = ({
intent,
...restProps
}: ButtonProps) => {
- let intention;
+ let intentByFunction;
switch (true) {
- case affirmative || elevated || hasStatePrimary:
- intention = BlueprintIntent.PRIMARY;
- break;
- case hasStateSuccess:
- intention = BlueprintIntent.SUCCESS;
- break;
- case hasStateWarning:
- intention = BlueprintIntent.WARNING;
+ case affirmative || elevated:
+ intentByFunction = BlueprintIntent.PRIMARY;
break;
- case disruptive || hasStateDanger:
- intention = BlueprintIntent.DANGER;
+ case disruptive:
+ intentByFunction = BlueprintIntent.DANGER;
break;
default:
break;
@@ -131,7 +101,7 @@ export const Button = ({
,
+ extends Pick,
Pick {}
-const constructBadgeProperties = ({
- hasStatePrimary,
- hasStateSuccess,
- hasStateWarning,
- hasStateDanger,
- minimal,
- outlined,
- badgeProps = {},
-}: constructBadgePropertiesProps) => {
+const constructBadgeProperties = ({ intent, minimal, outlined, badgeProps = {} }: constructBadgePropertiesProps) => {
if (badgeProps.intent) return badgeProps;
- if (hasStatePrimary) badgeProps["intent"] = "accent";
- if (hasStateSuccess) badgeProps["intent"] = "success";
- if (hasStateWarning) badgeProps["intent"] = "warning";
- if (hasStateDanger) badgeProps["intent"] = "danger";
+ if (intent) badgeProps["intent"] = intent;
if (!badgeProps.tagProps || typeof badgeProps.tagProps.minimal === "undefined") {
if (!minimal && !outlined) {
badgeProps["tagProps"] = { ...badgeProps.tagProps, minimal: true };
diff --git a/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx b/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx
deleted file mode 100644
index 0215bc7dd..000000000
--- a/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
-
-export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {}
-
-/**
- * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
- * This is comparable to a one line code editor.
- *
- * Example usage: input of a path string offering auto-completion for each single part of the path.
- */
-export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
- // Currently this works only as an alias element for `AutoSuggestion`.
- return (
- , TestableComponent {
- /**
- * Set primary state.
- * This is not routed through automatically.
- * @deprecated (v25) use `intent="primary"` instead.
- */
- hasStatePrimary?: boolean;
- /**
- * Set success state.
- * This is not routed through automatically.
- * @deprecated (v25) use `intent="success"` instead.
- */
- hasStateSuccess?: boolean;
- /**
- * Set warning state.
- * This is not routed through automatically.
- * @deprecated (v25) use `intent="warning"` instead.
- */
- hasStateWarning?: boolean;
- /**
- * Set danger state.
- * This is not routed through automatically.
- * @deprecated (v25) use `intent="danger"` instead.
- */
- hasStateDanger?: boolean;
/**
* Intent state of the field item.
*/
@@ -69,10 +36,6 @@ export interface FieldItemProps extends React.HTMLAttributes, Te
* Form element that manages the combination of label, helper texts, input element and feedback messages.
*/
export const FieldItem = ({
- hasStatePrimary = false,
- hasStateSuccess = false,
- hasStateWarning = false,
- hasStateDanger = false,
children,
className,
disabled,
@@ -82,24 +45,6 @@ export const FieldItem = ({
intent,
...otherProps
}: FieldItemProps) => {
- let classIntent = "";
- switch (true) {
- case hasStatePrimary:
- classIntent = " " + IntentClassNames.PRIMARY;
- break;
- case hasStateSuccess:
- classIntent = " " + IntentClassNames.SUCCESS;
- break;
- case hasStateWarning:
- classIntent = " " + IntentClassNames.WARNING;
- break;
- case hasStateDanger:
- classIntent = " " + IntentClassNames.DANGER;
- break;
- default:
- break;
- }
-
const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
const label = {messageText}
+ {messageText}
) : (
- {messageText}
+ {messageText}
));
return (
diff --git a/src/components/Form/FieldSet.tsx b/src/components/Form/FieldSet.tsx
index d9814fa17..9e9fbaec5 100644
--- a/src/components/Form/FieldSet.tsx
+++ b/src/components/Form/FieldSet.tsx
@@ -9,26 +9,6 @@ export interface FieldSetProps extends Omit {
- let classIntent = "";
- switch (true) {
- case hasStatePrimary:
- classIntent = " " + IntentClassNames.PRIMARY;
- break;
- case hasStateSuccess:
- classIntent = " " + IntentClassNames.SUCCESS;
- break;
- case hasStateWarning:
- classIntent = " " + IntentClassNames.WARNING;
- break;
- case hasStateDanger:
- classIntent = " " + IntentClassNames.DANGER;
- break;
- default:
- break;
- }
-
- const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-
const userhelp =
helperText &&
(typeof helperText === "string" ? (
@@ -109,7 +65,7 @@ export const FieldSet = ({
className={
`${eccgui}-fieldset` +
(className ? " " + className : "") +
- (intentClass || classIntent) +
+ (intent ? " " + IntentClassNames[intent.toUpperCase()] : "") +
(boxed ? ` ${eccgui}-fieldset--boxed` : "")
}
{...otherProps}
diff --git a/src/components/Icon/BaseIcon.tsx b/src/components/Icon/BaseIcon.tsx
index 7de20dbcd..ddb31eead 100644
--- a/src/components/Icon/BaseIcon.tsx
+++ b/src/components/Icon/BaseIcon.tsx
@@ -32,19 +32,10 @@ export interface BaseIconProps extends Omit>;
- /**
- * @deprecated (v25) Use `title` as replacement.
- */
- iconTitle?: CarbonIconProps["title"];
}
/**
@@ -58,8 +49,6 @@ function BaseIcon({
tooltipText,
tooltipProps,
intent,
- description,
- iconTitle,
tabIndex,
...restProps
}: BaseIconProps) {
@@ -70,9 +59,6 @@ function BaseIcon({
const icon = (
{
+export interface MultiSuggestFieldSelectionProps {
newlySelected?: T;
selectedItems: T[];
createdItems: Partial[];
}
-interface MultiSelectCommonProps
+interface MultiSuggestFieldCommonProps
extends TestableComponent,
Pick, "items" | "placeholder" | "openOnKeyDown"> {
/**
@@ -38,7 +37,7 @@ interface MultiSelectCommonProps
/**
* function handler that would be called anytime an item is selected/deselected or an item is created/removed
*/
- onSelection?: (params: MultiSelectSelectionProps) => void;
+ onSelection?: (params: MultiSuggestFieldSelectionProps) => void;
/**
* Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
*/
@@ -82,26 +81,6 @@ interface MultiSelectCommonProps
* Intent state of the multi select.
*/
intent?: BlueprintIntent;
- /**
- * The input element is displayed with primary color scheme.
- * @deprecated (v25) use `intent="primary"` instead.
- */
- hasStatePrimary?: boolean;
- /**
- * The input element is displayed with success (some type of green) color scheme.
- * @deprecated (v25) use `intent="success"` instead.
- */
- hasStateSuccess?: boolean;
- /**
- * The input element is displayed with warning (some type of orange) color scheme.
- * @deprecated (v25) use `intent="warning"` instead.
- */
- hasStateWarning?: boolean;
- /**
- * The input element is displayed with danger (some type of red) color scheme.
- * @deprecated (v25) use `intent="danger"` instead.
- */
- hasStateDanger?: boolean;
/**
* Disables the input element
*/
@@ -135,12 +114,12 @@ interface MultiSelectCommonProps
limitHeightOpened?: boolean | number;
}
-/** @deprecated (v25) use MultiSuggestFieldProps */
-export type MultiSelectProps = MultiSelectCommonProps &
+export type MultiSuggestFieldProps = MultiSuggestFieldCommonProps &
(
| {
/**
- * Predefined selected values
+ * Predefined selected values.
+ * `prePopulateWithItems` cannot be used then.
*/
selectedItems?: T[];
prePopulateWithItems?: never;
@@ -148,17 +127,22 @@ export type MultiSelectProps = MultiSelectCommonProps &
| {
selectedItems?: never;
/**
- * When set to true will set the multi-select value with all the items provided
+ * When set to `true` will set the multi-select value with all the items provided.
+ * `selectedItems` cannot be used then.
*/
prePopulateWithItems?: boolean;
}
);
/**
- * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
- * New name for this component is `MultiSuggestField`.
+ * Element behaves very similar to `SuggestField` but allows multiple selections.
+ * Its value does not represent a string but a stack of objects.
+ *
+ * Example usage: input field for user created tags.
+ *
+ * Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
*/
-function MultiSelect({
+export function MultiSuggestField({
items,
selectedItems: externalSelectedItems,
prePopulateWithItems,
@@ -173,10 +157,6 @@ function MultiSelect({
noResultText = "No results.",
newItemCreationText = "Add new item",
newItemPostfix = " (new item)",
- hasStatePrimary,
- hasStateDanger,
- hasStateSuccess,
- hasStateWarning,
disabled,
createNewItemFromQuery,
requestDelay = 0,
@@ -189,7 +169,7 @@ function MultiSelect({
limitHeightOpened,
intent,
...otherMultiSelectProps
-}: MultiSelectProps) {
+}: MultiSuggestFieldProps) {
// Options created by a user
const createdItems = useRef([]);
// Options passed ouside (f.e. from the backend)
@@ -212,24 +192,6 @@ function MultiSelect({
timeoutId?: number;
}>({});
- let stateIntent;
- switch (true) {
- case hasStatePrimary:
- stateIntent = BlueprintIntent.PRIMARY;
- break;
- case hasStateSuccess:
- stateIntent = BlueprintIntent.SUCCESS;
- break;
- case hasStateWarning:
- stateIntent = BlueprintIntent.WARNING;
- break;
- case hasStateDanger:
- stateIntent = BlueprintIntent.DANGER;
- break;
- default:
- break;
- }
-
/** Update external items when they change
* e.g for auto-complete when query change
*/
@@ -479,7 +441,8 @@ function MultiSelect({
({
"data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
...inputProps,
} as React.InputHTMLAttributes,
- className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+ className: `${eccgui}-multisuggestfield ${eccgui}-multiselect` + (className ? ` ${className}` : ""),
fill: fullWidth,
inputRef: inputRef,
- intent: intent || stateIntent,
+ intent: intent,
addOnBlur: true,
onKeyDown: handleOnKeyDown,
onKeyUp: handleOnKeyUp,
@@ -584,8 +547,8 @@ function MultiSelect({
// we still return the Blueprint element here because it was already used like that
/**
- * @deprecated (v25) use directly > (`ofType` also returns the original BlueprintJS element, not ours!)
+ * @deprecated (v26) use directly > (`ofType` also returns the original BlueprintJS element, not ours!)
*/
-MultiSelect.ofType = BlueprintMultiSelect.ofType;
+MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
-export default MultiSelect;
+export default MultiSuggestField;
diff --git a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
index 94f9ce897..028c8b88c 100644
--- a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
+++ b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
@@ -29,7 +29,7 @@ export default {
component: MultiSuggestField,
argTypes: {
items: {
- control: "none",
+ control: false,
},
intent: {
...helpersArgTypes.exampleIntent,
diff --git a/src/components/MultiSuggestField/MultiSuggestField.tsx b/src/components/MultiSuggestField/MultiSuggestField.tsx
deleted file mode 100644
index 8fcd28853..000000000
--- a/src/components/MultiSuggestField/MultiSuggestField.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import MultiSelect, { MultiSelectProps, MultiSelectSelectionProps } from "../MultiSelect/MultiSelect";
-
-export type MultiSuggestFieldSelectionProps = MultiSelectSelectionProps;
-
-export interface MultiSuggestFieldProps extends Omit, "onSelection"> {
- /**
- * function handler that would be called anytime an item is selected/deselected or an item is created/removed
- */
- onSelection?: (params: MultiSuggestFieldSelectionProps) => void;
-}
-
-/**
- * Element behaves very similar to `SuggestField` but allows multiple selections.
- * Its value does not represent a string but a stack of objects.
- *
- * Example usage: input field for user created tags.
- */
-export function MultiSuggestField({ className, ...otherProps }: MultiSuggestFieldProps) {
- // Currently this works only as an alias element for `MultiSelect`.
- return (
-
- className={`${eccgui}-multisuggestfield` + (className ? ` ${className}` : "")}
- {...(otherProps as MultiSelectProps)}
- />
- );
-}
-
-// we still return the Blueprint element here because it was already used like that
-/**
- * @deprecated (v25) use directly > (`ofType` also returns the original BlueprintJS element, not ours!)
- */
-MultiSuggestField.ofType = MultiSelect.ofType;
diff --git a/src/components/MultiSuggestField/index.ts b/src/components/MultiSuggestField/index.ts
new file mode 100644
index 000000000..a4a03e2ff
--- /dev/null
+++ b/src/components/MultiSuggestField/index.ts
@@ -0,0 +1 @@
+export * from "./../MultiSelect/MultiSelect";
\ No newline at end of file
diff --git a/src/components/Notification/Notification.stories.tsx b/src/components/Notification/Notification.stories.tsx
index a0dd4fff1..9ff6df1cd 100644
--- a/src/components/Notification/Notification.stories.tsx
+++ b/src/components/Notification/Notification.stories.tsx
@@ -10,7 +10,7 @@ export default {
component: Notification,
argTypes: {
message: {
- control: "none",
+ control: false,
},
icon: {
...helpersArgTypes.exampleIcon,
@@ -45,17 +45,17 @@ export const ExampleNeutralMessage = TemplateFull.bind({});
ExampleNeutralMessage.args = {
message: ;
- /**
- * Notification has a neutral color scheme.
- * @deprecated (v25) use `intent="neutral"` instead.
- */
- neutral?: boolean;
- /**
- * Notification is a success info.
- * This defines the colorization and the icon symbol.
- * @deprecated (v25) use `intent="success"` instead.
- */
- success?: boolean;
- /**
- * Notification is a warning alert.
- * This defines the colorization and the icon symbol.
- * @deprecated (v25) use `intent="warning"` instead.
- */
- warning?: boolean;
- /**
- * Notification is a danger alert.
- * This defines the colorization and the icon symbol.
- * @deprecated (v25) use `intent="danger"` instead.
- */
- danger?: boolean;
/**
* Notification uses the the given space more flexible.
* Default notification is displayed in min and max limits.
@@ -79,42 +56,17 @@ export const Notification = ({
children,
className,
message,
- success = false,
- warning = false,
- danger = false,
- neutral = false,
flexWidth = false,
icon,
timeout,
wrapperProps,
"data-test-id": dataTestId,
"data-testid": dataTestid,
- intent,
+ intent = "info",
...otherProps
}: NotificationProps) => {
- let intentLevel: string = IntentClassNames.INFO;
- let iconSymbol = "state-info";
- switch (true) {
- case success:
- intentLevel = IntentClassNames.SUCCESS;
- iconSymbol = "state-success";
- break;
- case warning:
- intentLevel = IntentClassNames.WARNING;
- iconSymbol = "state-warning";
- break;
- case danger:
- intentLevel = IntentClassNames.DANGER;
- iconSymbol = "state-danger";
- break;
- case neutral:
- intentLevel = IntentClassNames.NEUTRAL;
- break;
- }
-
- const intents: Array = ["info", "success", "warning", "danger"];
const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
- const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : iconSymbol;
+ const intentIconSymbol = intent !== "neutral" ? `state-${intent}` : false;
let notificationIcon = icon !== false ? icon : undefined;
if (icon !== false && !notificationIcon && !!intentIconSymbol) {
@@ -136,7 +88,7 @@ export const Notification = ({
{
- /**
- * Displays the element using reduced height and less white space inside.
- * @deprecated (v25) use property directly on `OverviewItem` children.
- */
- densityHigh?: boolean;
/**
* Add a bit white space around each of the contained items.
*/
@@ -30,7 +25,6 @@ export interface OverviewItemListProps extends React.HTMLAttributes 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2
diff --git a/src/components/OverviewItem/overviewitem.scss b/src/components/OverviewItem/overviewitem.scss
index 72daced37..41744f93f 100644
--- a/src/components/OverviewItem/overviewitem.scss
+++ b/src/components/OverviewItem/overviewitem.scss
@@ -76,16 +76,14 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
}
}
-.#{$eccgui}-overviewitem__item--highdensity,
-.#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
+.#{$eccgui}-overviewitem__item--highdensity {
// same fix for Firefox v132+ like for the normal element height
- // height: $button-height; // mini-units(4);
min-height: $button-height;
max-height: $button-height;
& > .#{$eccgui}-overviewitem__depiction {
- width: $button-height; // mini-units(4);
- height: $button-height; // mini-units(4);
+ width: $button-height;
+ height: $button-height;
}
}
@@ -93,8 +91,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
box-sizing: content-box;
padding: $eccgui-size-overviewitem-spacing * 0.5;
- &.#{$eccgui}-overviewitem__item--highdensity,
- .#{$eccgui}-overviewitem__list--highdensity > li > & {
+ &.#{$eccgui}-overviewitem__item--highdensity {
box-sizing: border-box;
& > .#{$eccgui}-overviewitem__depiction {
@@ -136,9 +133,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
.#{$eccgui}-overviewitem__description {
display: flex;
- flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
+ flex-direction: column;
place-content: stretch flex-start;
align-items: stretch;
overflow: hidden;
@@ -175,9 +172,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
.#{$eccgui}-overviewitem__actions {
display: flex;
- flex-flow: row nowrap;
flex-grow: 0;
flex-shrink: 0;
+ flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
diff --git a/src/components/OverviewItem/stories/OverviewItemList.stories.tsx b/src/components/OverviewItem/stories/OverviewItemList.stories.tsx
index 9266e4d23..8ab7cf946 100644
--- a/src/components/OverviewItem/stories/OverviewItemList.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItemList.stories.tsx
@@ -24,7 +24,6 @@ export const ItemList = Template.bind({});
ItemList.args = {
hasSpacing: true,
hasDivider: true,
- densityHigh: false,
columns: 1,
children: Array(4).fill( {
+export interface SpinnerProps extends Omit {
/**
- * intent value or a valid css color definition
- * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
+ * Must be a valid css color definition.
+ * `intent` property will always overwrite this setting.
*/
- color?: Intent | string;
+ color?: Color | string | "inherit";
/**
* Intent state of the field item.
*/
@@ -60,12 +61,6 @@ export interface SpinnerProps extends Omit {
const [showSpinner, setShowSpinner] = useState(!delay || delay <= 0);
@@ -90,7 +83,7 @@ export const Spinner = ({
}
return;
}, [showSpinner, delay]);
- const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
+
const internSizes = {
thin: 100,
medium: 50,
@@ -99,9 +92,6 @@ export const Spinner = ({
const spinnerElement = position === "inline" ? "span" : "div";
- const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
- const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
-
let spinnerSize;
let spinnerStroke;
switch (position) {
@@ -129,7 +119,7 @@ export const Spinner = ({
className={
`${eccgui}-spinner` +
` ${eccgui}-spinner--position-${position}` +
- ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+ (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
` ${eccgui}-spinner--size-${spinnerSize}` +
(showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
(className ? " " + className : "")
@@ -138,8 +128,15 @@ export const Spinner = ({
/>
);
- if (spinnerColor && spinnerIntent === "usercolor") {
- spinner = {spinner} ;
+ if (!intent) {
+ try {
+ const spinnerColor = color === "inherit" ? color : Color(color).rgb().toString();
+ spinner = {spinner} ;
+ } catch {
+ spinner = {spinner} ;
+ // eslint-disable-next-line no-console
+ console.warn("Spinner received invalid color property: " + color);
+ }
}
return position === "global" ? (
diff --git a/src/components/Spinner/spinner.scss b/src/components/Spinner/spinner.scss
index 98ff4debb..d90e13b37 100644
--- a/src/components/Spinner/spinner.scss
+++ b/src/components/Spinner/spinner.scss
@@ -21,6 +21,7 @@ $eccgui-size-spinner-xlarge: 256px !default;
span.#{$eccgui}-spinner {
display: inline-flex;
+ height: auto;
vertical-align: text-top;
}
diff --git a/src/components/SuggestField/SuggestField.tsx b/src/components/SuggestField/SuggestField.tsx
deleted file mode 100644
index 6e9a811a9..000000000
--- a/src/components/SuggestField/SuggestField.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import AutoCompleteField, { AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
-
-/**
- * Parameters for the auto-complete field parameterized by T and U.
- * @param T is the input data structure/type of the items that can be selected.
- * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
- */
-export type SuggestFieldProps = AutoCompleteFieldProps;
-
-/**
- * A component with the appearance of an input field that allows to select and optionally create new items.
- * It shows suggestions for the entered text from which the user can select any option.
- * It has the following fixed behavior:
- *
- * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
- * - When changing an existing item the input text is set to the original value in order to be able to edit the original value.
- * - When for a specific input text, the only item returns is the currently set item itself, all items are shown below it, to make
- * clear that there are still other items to choose from.
- * - The suggestions are fetched with a short delay, so not too many unnecessary requests are fired.
- * - Items where itemRenderer returns a string have a default representation, i.e. highlighting of search words, active flag etc.
- */
-export function SuggestField({ className, ...otherProps }: SuggestFieldProps) {
- // Currently this works only as an alias element for `AutoCompleteField`.
- return (
-
- className={`${eccgui}-suggestfield` + (className ? ` ${className}` : "")}
- {...otherProps}
- />
- );
-}
diff --git a/src/components/SuggestField/index.ts b/src/components/SuggestField/index.ts
index fa03542b9..8714d8626 100644
--- a/src/components/SuggestField/index.ts
+++ b/src/components/SuggestField/index.ts
@@ -1,5 +1,11 @@
import { createNewItemRendererFactory } from "./../AutocompleteField/autoCompleteFieldUtils";
-export * from "./SuggestField";
+
+export * from "./../AutocompleteField/AutoCompleteField";
+export * from "./../AutocompleteField/interfaces";
+
export const suggestFieldUtils = {
createNewItemRendererFactory,
};
+
+// @deprecated (v26) use `suggestFieldUtils`
+export const autoCompleteFieldUtils = suggestFieldUtils;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 94fe7d4f7..0f2e9b828 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -4,8 +4,7 @@ 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";
-// @deprecated (v25) use `TableProps["size"]`
-export type TableRowHeightSize = "small" | "medium" | "large";
+type TableRowHeightSize = "small" | "medium" | "large";
// workaround to get type/interface
type CarbonTableProps = React.ComponentProps;
diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx
index ad541f611..8e91322c1 100644
--- a/src/components/Table/TableContainer.tsx
+++ b/src/components/Table/TableContainer.tsx
@@ -9,7 +9,7 @@ import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
+import { TableProps, tableRowHeightSizes } from "./Table";
export interface TableDataContainerProps
extends Omit<
@@ -21,7 +21,7 @@ export interface TableDataContainerProps
>,
React.TableHTMLAttributes {
children(signature: any): JSX.Element;
- size?: TableRowHeightSize;
+ size?: TableProps["size"];
}
export interface TableSimpleContainerProps
extends Omit,
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index 4590953d2..7be3fd16f 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -40,8 +40,9 @@ export const transformTabProperties = ({
let color = Color("#ffffff");
try {
color = Color(backgroundColor);
- } catch (ex) {
- console.warn("Received invalid background color for tag: " + backgroundColor);
+ } catch {
+ // eslint-disable-next-line no-console
+ console.warn("Tag received invalid backgroundColor property: " + backgroundColor);
}
colorStyles = {
backgroundColor: `${color.rgb().toString()}`,
diff --git a/src/components/TextField/SearchField.tsx b/src/components/TextField/SearchField.tsx
index 5343617eb..eb5ca37f9 100644
--- a/src/components/TextField/SearchField.tsx
+++ b/src/components/TextField/SearchField.tsx
@@ -7,12 +7,7 @@ import IconButton from "../Icon/IconButton";
import TextField, { TextFieldProps } from "./TextField";
-export interface SearchFieldProps
- extends TestableComponent,
- Omit<
- TextFieldProps,
- "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
- > {
+export interface SearchFieldProps extends TestableComponent, Omit {
/**
* Placeholder text for search box.
*/
diff --git a/src/components/TextField/stories/SearchField.stories.tsx b/src/components/TextField/stories/SearchField.stories.tsx
index 7f25c166f..b25b486b0 100644
--- a/src/components/TextField/stories/SearchField.stories.tsx
+++ b/src/components/TextField/stories/SearchField.stories.tsx
@@ -15,10 +15,6 @@ export default {
rightElement: {
...helpersArgTypes.exampleIcon,
},
- hasStatePrimary: { table: { disable: true } },
- hasStateSuccess: { table: { disable: true } },
- hasStateWarning: { table: { disable: true } },
- hasStateDanger: { table: { disable: true } },
fullWidth: { table: { disable: true } },
},
} as Meta;
diff --git a/src/components/Typography/OverflowText.tsx b/src/components/Typography/OverflowText.tsx
index 6a707edbc..a5c55385e 100644
--- a/src/components/Typography/OverflowText.tsx
+++ b/src/components/Typography/OverflowText.tsx
@@ -1,7 +1,7 @@
import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
export interface OverflowTextProps extends React.HTMLAttributes, TestableComponent {
/**
@@ -25,11 +25,6 @@ export interface OverflowTextProps extends React.HTMLAttributes, Te
* HTML element that is used for the component.
*/
useHtmlElement?: "p" | "div" | "span";
- /**
- * Used for all other necessary properties.
- * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
- */
- [key: string]: any;
}
/** Prevents text from overflowing. */
diff --git a/src/components/index.ts b/src/components/index.ts
index 1bda7d0d5..6f7fdf95b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,16 +1,13 @@
export * from "./Accordion";
export * from "./Application";
-export * from "./AutocompleteField";
-export * from "./SuggestField";
-export * from "./AutoSuggestion";
-export * from "./CodeAutocompleteField";
export * from "./Badge/Badge";
export * from "./Breadcrumb";
export * from "./Button/Button";
export * from "./Card";
export * from "./Chat";
export * from "./Checkbox/Checkbox";
-export * from "./TextReducer/TextReducer";
+export * from "./CodeAutocompleteField";
+export * from "./ContentGroup/ContentGroup";
export * from "./ContextOverlay";
export * from "./Depiction/Depiction";
export * from "./Dialog";
@@ -25,8 +22,7 @@ export * from "./Label/Label";
export * from "./Link/Link";
export * from "./List/List";
export * from "./Menu";
-export * from "./MultiSelect/MultiSelect";
-export * from "./MultiSuggestField/MultiSuggestField";
+export * from "./MultiSuggestField";
export * from "./Notification";
export * from "./OverviewItem";
export * from "./Pagination/Pagination";
@@ -40,17 +36,18 @@ export * from "./Skeleton/Skeleton";
export * from "./Spinner/Spinner";
export * from "./Sticky";
export * from "./Structure";
+export * from "./SuggestField";
export * from "./Switch/Switch";
export * from "./Table";
export * from "./Tabs";
export * from "./Tag";
export * from "./TextField";
+export * from "./TextReducer/TextReducer";
export * from "./Toolbar";
export * from "./Tooltip/Tooltip";
export * from "./Tree/Tree";
export * from "./Typography";
-export * from "./Workspace";
-export * from "./ContentGroup/ContentGroup";
export * from "./VisualTour/VisualTour";
+export * from "./Workspace";
export * from "./interfaces";
diff --git a/src/configuration/_variables.scss b/src/configuration/_variables.scss
index 75e06e07a..57d1e46cb 100644
--- a/src/configuration/_variables.scss
+++ b/src/configuration/_variables.scss
@@ -36,8 +36,6 @@ $eccgui-color-applicationheader-text: eccgui-color-var("identity", "text", "900"
$eccgui-color-applicationheader-background: eccgui-color-var("identity", "background", "500") !default;
$eccgui-color-workspace-text: eccgui-color-var("identity", "text", "700") !default;
$eccgui-color-workspace-background: eccgui-color-var("identity", "background", "300") !default;
-$eccgui-color-application-text: $eccgui-color-workspace-text !default; // @deprecated (v25) unsupported config variable will be removed
-$eccgui-color-application-background: $eccgui-color-workspace-background !default; // @deprecated (v25) unsupported config variable will be removed
// -- Configuration stack of typography ----------------------------------------
diff --git a/src/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx
index edb22a2e0..281394be4 100644
--- a/src/extensions/codemirror/CodeMirror.tsx
+++ b/src/extensions/codemirror/CodeMirror.tsx
@@ -36,7 +36,7 @@ import {
} from "./tests/codemirrorTestHelper";
import { ExtensionCreator } from "./types";
-export interface CodeEditorProps extends TestableComponent {
+export interface CodeEditorProps extends Omit, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
// Is called with the editor instance that allows access via the CodeMirror API
setEditorView?: (editor: EditorView | undefined) => void;
/**
@@ -55,7 +55,6 @@ export interface CodeEditorProps extends TestableComponent {
/**
* Handler method to receive onChange events.
* As input the new value is given.
- * @deprecated (v25) use `(v: string) => void` in future
*/
onChange?: (v: string) => void;
/**
@@ -101,7 +100,11 @@ export interface CodeEditorProps extends TestableComponent {
/** Long lines are wrapped and displayed on multiple lines */
wrapLines?: boolean;
- outerDivAttributes?: Omit, "id" | "data-test-id">;
+ /**
+ * Add properties to the `div` used as warpper element.
+ * @deprecated (v26) You can now use all properties directly on `CodeEditor`.
+ */
+ outerDivAttributes?: Omit, "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">;
/**
* Size in spaces that is used for a tabulator key.
@@ -187,6 +190,7 @@ const ModeToolbarSupport: ReadonlyArray = ["markdown"]
* Includes a code editor, currently we use CodeMirror library as base.
*/
export const CodeEditor = ({
+ className,
onChange,
onSelection,
onMouseDown,
@@ -214,7 +218,6 @@ export const CodeEditor = ({
enableTab = false,
height,
useLinting = false,
- "data-test-id": dataTestId,
autoFocus = false,
disabled = false,
intent,
@@ -491,14 +494,13 @@ export const CodeEditor = ({
// overwrite/extend some attributes
id={id ? id : name ? `codemirror-${name}` : undefined}
ref={parent}
- // @deprecated (v25) fallback with static test id will be removed
- data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
+ {...otherCodeEditorProps}
className={
`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+ (className ? ` ${className}` : "") +
(outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
(hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
}
- {...otherCodeEditorProps}
>
{hasToolbarSupport && editorToolbar(mode)}
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
index 3a39599ee..2a57eabde 100644
--- a/src/extensions/react-flow/_react-flow_v12.scss
+++ b/src/extensions/react-flow/_react-flow_v12.scss
@@ -7,6 +7,7 @@
.react-flow {
direction: ltr;
+ z-index: 0;
}
.react-flow__pane {
@@ -178,22 +179,31 @@ svg.react-flow__connectionline {
pointer-events: none;
background-color: $reactflow-background-color;
border: solid 1px $eccgui-color-separation-divider;
+
+ pattern path {
+ opacity: $eccgui-opacity-ghostly;
+ stroke: #{eccgui-color-var("identity", "text", "300")};
+ }
}
-.react-flow__background-pattern {
+.react-flow__background-pattern,
+.react-flow__background pattern path:first-child {
opacity: $eccgui-opacity-ghostly;
+ stroke: #{eccgui-color-var("identity", "text", "500")};
}
-.react-flow__background-pattern.dots {
- fill: $eccgui-color-separation-divider;
+.react-flow__background-pattern.dots,
+.react-flow__background pattern circle:first-child {
+ opacity: $eccgui-opacity-muted;
+ fill: #{eccgui-color-var("identity", "text", "700")};
}
-.react-flow__background-pattern.lines {
- stroke: $eccgui-color-separation-divider;
+.react-flow__background-pattern.cross {
+ stroke: #{eccgui-color-var("identity", "text", "300")};
}
-.react-flow__background-pattern.cross {
- stroke: $eccgui-color-separation-divider;
+.react-flow__background-pattern.lines {
+ stroke: #{eccgui-color-var("identity", "text", "300")};
}
.react-flow__attribution {
diff --git a/src/extensions/react-flow/edges/edgeTypes.ts b/src/extensions/react-flow/edges/edgeTypes.ts
deleted file mode 100644
index 1a510d8c3..000000000
--- a/src/extensions/react-flow/edges/edgeTypes.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- We need to replicate some elements from react flow because they
-
- 1. do not export all sub elements, e.g. edges
- 2. we need to add additional features for better usage
-*/
-
-import { EdgeDefault } from "./EdgeDefault";
-import { EdgeStep } from "./EdgeStep";
-import { EdgeStraight } from "./EdgeStraight";
-
-/**
- * @deprecated (v25) will be removed without replacement, define it yourself or use `