@eccenca/gui-elements 24.4.1 → 25.0.0-featurecolorwheelinputcmem7327.0

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ApplicationViewability, ApplicationViewabilityProps, CLASSPREFIX as eccgui } from "../../../index";
+
+import { Default as ApplicationViewabilityStory } from "./../stories/ApplicationViewability.stories";
+
+const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
+    const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
+    const element = container.getElementsByClassName(
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+    );
+    expect(element.length).toBe(1);
+    return element;
+};
+
+describe("ApplicationViewability", () => {
+    it("should be visible on `show=screen`", () => {
+        applyViewabilityAndCheckClass({ show: "screen" });
+        /**
+         * Currently we cannot really test visibility via jest if it is defined by S/CSS rules because those styles are not known.
+         * Looks like it is not too easy to include and test them.
+         * So we only test for the correct CSS class.
+         */
+        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `hide=screen`", () => {
+        applyViewabilityAndCheckClass({ hide: "screen" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+    it("should be visible on `hide=print`", () => {
+        applyViewabilityAndCheckClass({ hide: "print" });
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `show=print`", () => {
+        applyViewabilityAndCheckClass({ show: "print" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+});

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -34,9 +34,6 @@ export interface CodeAutocompleteFieldSuggestionBase {
     description?: string;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionBase */
-export type ISuggestionBase = CodeAutocompleteFieldSuggestionBase;
-
 /** Same as CodeAutocompleteFieldSuggestionBase, but with the query that was used to fetch this suggestion. */
 export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends CodeAutocompleteFieldSuggestionBase {
     // The query this result was filtered by
@@ -47,9 +44,6 @@ export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends Code
     length: number;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionWithReplacementInfo */
-export type ISuggestionWithReplacementInfo = CodeAutocompleteFieldSuggestionWithReplacementInfo;
-
 /** The suggestions for a specific substring of the given input string. */
 export interface CodeAutocompleteFieldReplacementResult {
     // The range of the input string that should be replaced
@@ -63,9 +57,6 @@ export interface CodeAutocompleteFieldReplacementResult {
     replacements: CodeAutocompleteFieldSuggestionBase[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldReplacementResult */
-export type IReplacementResult = CodeAutocompleteFieldReplacementResult;
-
 export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     // Repeats the input string from the corresponding request
     inputString: string;
@@ -74,9 +65,6 @@ export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     replacementResults: CodeAutocompleteFieldReplacementResult[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldPartialAutoCompleteResult */
-export type IPartialAutoCompleteResult = CodeAutocompleteFieldPartialAutoCompleteResult;
-
 /** Validation result */
 export interface CodeAutocompleteFieldValidationResult {
     // If the input value is valid or not
@@ -91,13 +79,7 @@ export interface CodeAutocompleteFieldValidationResult {
     };
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldValidationResult */
-export type IValidationResult = CodeAutocompleteFieldValidationResult;
-
-/**
- * @deprecated (v25) use `CodeAutocompleteFieldProps` instead.
- */
-export interface AutoSuggestionProps {
+export interface CodeAutocompleteFieldProps {
     /** Additional class name.
      */
     className?: string;
@@ -180,9 +162,12 @@ interface RequestMetaData {
 }
 
 /**
- * @deprecated (support already removed) use `CodeAutocompleteField` as replacement.
+ * 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.
  */
-const AutoSuggestion = ({
+export const CodeAutocompleteField = ({
     className,
     label,
     initialValue,
@@ -206,8 +191,8 @@ const AutoSuggestion = ({
     reInitOnInitialValueChange = false,
     height,
     readOnly,
-    outerDivAttributes
-}: AutoSuggestionProps) => {
+    outerDivAttributes,
+}: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
     const dropdownXYoffset = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
@@ -317,12 +302,11 @@ const AutoSuggestion = ({
             };
             if (parseError) {
                 const { message, start, end } = parseError;
-                const { toOffset, fromOffset } = getOffsetRange(cm, start, end);
                 clearCurrentErrorMarker();
                 const { from, to } = markText({
                     view: cm,
-                    from: fromOffset,
-                    to: toOffset,
+                    from: start,
+                    to: end,
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
@@ -626,7 +610,7 @@ const AutoSuggestion = ({
                     handleEscapePressed();
                     break;
                 default:
-                //do nothing
+                    //do nothing
                     closeDropDown();
             }
         }
@@ -676,7 +660,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
-        readOnly
+        readOnly,
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -684,7 +668,7 @@ const AutoSuggestion = ({
         <div
             id={id}
             ref={autoSuggestionDivRef}
-            className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            className={`${eccgui}-codeautocompletefield ${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
             {...outerDivAttributes}
         >
             <div
@@ -751,12 +735,12 @@ const AutoSuggestion = ({
                         {label}
                         &nbsp;
                         {(pathValidationPending || suggestionsPending) && (
-                            <Spinner size="tiny" position="inline" description="Validating value path" />
+                            <Spinner size="tiny" position="inline" />
                         )}
                     </>
                 ),
             }}
-            hasStateDanger={hasError}
+            intent={hasError ? "danger" : undefined}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}
@@ -766,4 +750,4 @@ const AutoSuggestion = ({
     );
 };
 
-export default AutoSuggestion;
+export default CodeAutocompleteField;

package/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<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
-    options: Array<ISuggestionWithReplacementInfo>;
+    options: Array<CodeAutocompleteFieldSuggestionWithReplacementInfo>;
     // 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<React.HTMLAttributes<HTMLD
     // The item from the drop down that is active
     currentlyFocusedIndex: number;
     // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
-    itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+    itemToHighlight: (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => any;
     /** horizontal and vertical offset values in relation to the cursor */
     offsetValues?: { x: number; y: number };
 }
@@ -43,6 +43,13 @@ const ListItem = ({ item }: any, ref: any) => {
                         <Highlighter label={item.value} searchValue={item.query} />
                     </OverflowText>
                 </OverviewItemLine>
+                {item.label ? (
+                    <OverviewItemLine small={true} >
+                        <OverflowText>
+                            <Highlighter label={item.label} searchValue={item.query} />
+                        </OverflowText>
+                    </OverviewItemLine>
+                ) : null}
                 {item.description ? (
                     <OverviewItemLine small={true}>
                         <OverflowText>
@@ -79,7 +86,7 @@ export const AutoSuggestionList = ({
     offsetValues,
     ...otherDivProps
 }: AutoSuggestionListProps) => {
-    const [hoveredItem, setHoveredItem] = React.useState<ISuggestionWithReplacementInfo | undefined>(undefined);
+    const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
     const [refs] = React.useState<React.RefObject<Element>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -116,7 +123,7 @@ export const AutoSuggestionList = ({
         <OverviewItem hasSpacing>
             <OverviewItemLine>Fetching suggestions</OverviewItemLine>
             <Spacing size="tiny" vertical={true} />
-            <Spinner position="inline" description="" />
+            <Spinner position="inline" />
         </OverviewItem>
     );
 

package/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}
         />
     );

package/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { render } from "@testing-library/react";
 import { EditorView } from "@codemirror/view";
+import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -23,9 +23,11 @@ type SearchFunction<T> = (value: string) => T[];
 type AsyncSearchFunction<T> = (value: string) => Promise<T[]>;
 
 /**
- * @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<T, UPDATE_VALUE> {
+export interface SuggestFieldProps<T, UPDATE_VALUE> {
     /**
      * Additional class names.
      */
@@ -158,12 +160,7 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-/**
- * @deprecated (v25) replaced by SuggestFieldProps
- */
-export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
-
-AutoCompleteField.defaultProps = {
+SuggestField.defaultProps = {
     autoFocus: false,
     disabled: false,
     onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
@@ -173,9 +170,19 @@ AutoCompleteField.defaultProps = {
 };
 
 /**
- * @deprecated (support already removed) use `SuggestField` as replacement.
+ * 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 returned 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.
  */
-function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPDATE_VALUE>) {
+export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE_VALUE>) {
     const {
         className,
         reset,
@@ -368,7 +375,7 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
         setQuery("");
     };
     const requestErrorRenderer = () => {
-        return <Notification danger={true} message={requestError} />;
+        return <Notification intent="danger" message={requestError} />;
     };
     // Optional clear button to reset the selected value
     const clearButton =
@@ -468,7 +475,7 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
 
     return (
         <BlueprintSuggest<T>
-            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}
@@ -487,6 +494,7 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}
+            popoverContentProps={{className: "nodrag"}}
             selectedItem={selectedItem}
             fill={fill}
             {...createNewItemProps}
@@ -505,4 +513,4 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
     );
 }
 
-export default AutoCompleteField;
+export default SuggestField;

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -5,7 +5,7 @@ import MenuItem from "../Menu/MenuItem";
 import OverflowText from "../Typography/OverflowText";
 
 import { TestIconProps } from "./../Icon/TestIcon";
-import { IRenderModifiers } from "./interfaces";
+import { SuggestFieldItemRendererModifierProps } from "./interfaces";
 
 /**
  * Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
@@ -18,7 +18,7 @@ export const createNewItemRendererFactory = (
     iconName?: ValidIconName | React.ReactElement<TestIconProps>
 ) => {
     // Return custom render function
-    return (query: string, modifiers: IRenderModifiers, handleClick: React.MouseEventHandler<HTMLElement>) => {
+    return (query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler<HTMLElement>) => {
         let textElement = itemTextRenderer(query);
         if (typeof textElement === "string") {
             textElement = (

package/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;
 }

package/src/components/Button/Button.stories.tsx

@@ -20,7 +20,7 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
         },
     },
 } as Meta<typeof Button>;
@@ -33,10 +33,6 @@ const TemplateFull: StoryFn<typeof Button> = (args) => (
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
-    hasStatePrimary: false,
-    hasStateSuccess: false,
-    hasStateWarning: false,
-    hasStateDanger: false,
     elevated: false,
     affirmative: false,
     disruptive: false,
@@ -66,6 +62,8 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
         <Button {...args} affirmative text="Affirmative action" />
         <Spacing vertical />
         <Button {...args} disruptive text="Disruptive action" />
+        <Spacing vertical />
+        <Button {...args} elevated text="Elevated action" />
     </OverlaysProvider>
 );
 export const ButtonSemantics = TemplateSemantic.bind({});
@@ -78,6 +76,10 @@ const TemplateIntent: StoryFn<typeof Button> = (args) => (
         <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
         <Button {...args} text="Danger" intent="danger" />
+        <Spacing vertical />
+        <Button {...args} text="Primary" intent="primary" />
+        <Spacing vertical />
+        <Button {...args} text="Accent" intent="accent" />
     </OverlaysProvider>
 );
 export const ButtonIntent = TemplateIntent.bind({});

package/src/components/Button/Button.tsx

@@ -17,39 +17,23 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     affirmative?: boolean;
     /**
      * Always use this when the button triggers an disruptive action, e.g. delete or remove.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with danger color intent.
      */
     disruptive?: boolean;
     /**
      * Use this when a button is important enough to highlight it in a set of other buttons.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     elevated?: boolean;
     /**
-     * The button is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
+     * Intent state visualized by color.
      */
-    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;
+    intent?: BlueprintIntent | "accent";
     /**
      * 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.
@@ -69,18 +53,21 @@ interface AdditionalButtonProps {
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+     * Icon displayed on button start.
      */
-    //href?: string;
     icon?: ValidIconName | JSX.Element;
+    /**
+     * Icon displayed on button end.
+     */
     rightIcon?: ValidIconName | JSX.Element;
-    //target?: string;
 }
 
-interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "icon" | "rightIcon"> {}
+interface ExtendedButtonProps
+    extends AdditionalButtonProps,
+        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
     extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon"> {}
+        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -94,10 +81,6 @@ export const Button = ({
     affirmative = false,
     disruptive = false,
     elevated = false,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     icon,
     rightIcon,
     tooltip = null,
@@ -107,19 +90,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 = "accent";
             break;
-        case disruptive || hasStateDanger:
-            intention = BlueprintIntent.DANGER;
+        case disruptive:
+            intentByFunction = BlueprintIntent.DANGER;
             break;
         default:
             break;
@@ -131,7 +108,7 @@ export const Button = ({
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={(intent || intention) as BlueprintIntent}
+            intent={(intent || intentByFunction) as BlueprintIntent}
             icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >
@@ -140,10 +117,7 @@ export const Button = ({
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({
-                        hasStatePrimary,
-                        hasStateSuccess,
-                        hasStateWarning,
-                        hasStateDanger,
+                        intent,
                         minimal: restProps.minimal,
                         outlined: restProps.outlined,
                         badgeProps,
@@ -163,26 +137,12 @@ export const Button = ({
 };
 
 interface constructBadgePropertiesProps
-    extends Pick<
-            ButtonProps,
-            "hasStatePrimary" | "hasStateSuccess" | "hasStateWarning" | "hasStateDanger" | "badgeProps"
-        >,
+    extends Pick<ButtonProps, "intent" | "badgeProps">,
         Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
-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 };