@eccenca/gui-elements 24.0.0-rc.1 → 24.0.0-rc.3

package/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from "react"; // @see https://github.com/storybookjs/storybook/issues/8881#issuecomment-831937051
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { DividerProps } from "./../Separation/Divider";
+
+export interface FlexibleLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Use the exact space defined by the parent element.
+     * This parent element must be displayed using a fixed, relative or absolute position.
+     */
+    useAbsoluteSpace?: boolean;
+    /**
+     * If set then the container behaves similar to a column and displays its items on a vertical axis.
+     * Children could used as rows in this situation.
+     */
+    vertical?: boolean;
+    /**
+     * If true the used amount of space for each item is related to the amout of its content compared to each other.
+     * Otherwise the items use equal amounts as long this is possible.
+     */
+    noEqualItemSpace?: boolean;
+    /**
+     * Quick way to add whitespace between container children.
+     * For more complex usecases like dividers you need to use extra `<FlexibleLayoutItem/>` components in combination with `<Divider/>` components.
+     */
+    gapSize?: DividerProps["addSpacing"];
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * A `FlexibleLayoutContainer` can contain `FlexibleLayoutItem`s.
+ * Do not misuse it as grid because it comes without any predefined ratios for widths and heights.
+ */
+export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayoutContainerProps>(
+    (
+        {
+            children,
+            className = "",
+            useAbsoluteSpace,
+            vertical,
+            noEqualItemSpace,
+            gapSize = "none",
+            ...otherDivProps
+        }: FlexibleLayoutContainerProps,
+        ref
+    ) => {
+        return (
+            <div
+                className={
+                    `${eccgui}-flexible__container` +
+                    (useAbsoluteSpace ? ` ${eccgui}-flexible__container--absolutespace` : "") +
+                    (vertical ? ` ${eccgui}-flexible__container--vertical` : "") +
+                    (noEqualItemSpace ? ` ${eccgui}-flexible__container--notequalitemspace` : "") +
+                    (gapSize !== "none" ? ` ${eccgui}-flexible__container--gap-${gapSize}` : "") +
+                    (className ? " " + className : "")
+                }
+                ref={ref}
+                {...otherDivProps}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+export default FlexibleLayoutContainer;

package/src/components/FlexibleLayout/FlexibleLayoutItem.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface FlexibleLayoutItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Defines the ability for the item to grow.
+     * The factor defines how much space the item would take up compared to the other items with a grow factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot grow.
+     */
+    growFactor?: number;
+    /**
+     * Defines the ability for the item to shrink.
+     * The factor defines how strong the shrink effect has impact on the item compared to the other items with a shrink factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot shrink.
+     */
+    shrinkFactor?: number;
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * `FlexibleLayoutItem`s can contain `FlexibleLayoutContainer` for more partitions.
+ * `FlexibleLayoutItem` siblings will share all available space from the `FlexibleLayoutContainer` container.
+ */
+export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemProps>(
+    (
+        {
+            children,
+            className = "",
+            growFactor = 1,
+            shrinkFactor = 1,
+            style,
+            ...otherDivProps
+        }: FlexibleLayoutItemProps,
+        ref
+    ) => {
+        const sizing = {} as any;
+        if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) {
+            sizing[`--${eccgui}-flexible-item-grow`] = growFactor.toString(10);
+        }
+        if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 1) {
+            sizing[`--${eccgui}-flexible-item-shrink`] = shrinkFactor.toString(10);
+        }
+        return (
+            <div
+                className={`${eccgui}-flexible__item` + (className ? " " + className : "")}
+                style={{ ...(style ?? {}), ...sizing }}
+                ref={ref}
+                {...otherDivProps}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+export default FlexibleLayoutItem;

package/src/components/FlexibleLayout/flexiblelayout.scss

@@ -0,0 +1,48 @@
+.#{$eccgui}-flexible__container {
+    --#{$eccgui}-flexible-item-shrink: 1;
+    --#{$eccgui}-flexible-item-grow: 1;
+    --#{$eccgui}-flexible-container-gapsize: 0;
+
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: var(--#{$eccgui}-flexible-container-gapsize);
+    place-content: stretch center;
+    align-items: stretch;
+    width: 100%;
+}
+
+.#{$eccgui}-flexible__container--absolutespace {
+    position: absolute;
+    inset: 0;
+}
+
+.#{$eccgui}-flexible__container--vertical {
+    flex-direction: column;
+}
+
+.#{$eccgui}-flexible__container--gap-tiny {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-flexible__container--gap-small {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.5};
+}
+.#{$eccgui}-flexible__container--gap-medium {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace};
+}
+.#{$eccgui}-flexible__container--gap-large {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 1.5};
+}
+.#{$eccgui}-flexible__container--gap-xlarge {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 2};
+}
+
+.#{$eccgui}-flexible__item {
+    position: relative;
+    flex: var(--#{$eccgui}-flexible-item-grow) var(--#{$eccgui}-flexible-item-shrink) 100%;
+    min-width: 0;
+
+    .#{$eccgui}-flexible__container--notequalitemspace > & {
+        flex-basis: auto;
+    }
+}

package/src/components/FlexibleLayout/index.ts

@@ -0,0 +1,2 @@
+export * from "./FlexibleLayoutContainer";
+export * from "./FlexibleLayoutItem";

package/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Divider, FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index";
+
+export default {
+    title: "Components/FlexibleLayout/Container",
+    component: FlexibleLayoutContainer,
+} as Meta<typeof FlexibleLayoutContainer>;
+
+const Template: StoryFn<typeof FlexibleLayoutContainer> = (args) => (
+    <div style={{ position: "relative", height: "400px" }}>
+        <FlexibleLayoutContainer {...args}>
+            <FlexibleLayoutItem>
+                <HtmlContentBlock>
+                    <LoremIpsum p={1} avgSentencesPerParagraph={3} random={false} />
+                </HtmlContentBlock>
+            </FlexibleLayoutItem>
+            <FlexibleLayoutItem>
+                <Divider />
+                <HtmlContentBlock>
+                    <LoremIpsum p={3} avgSentencesPerParagraph={2} random={false} />
+                </HtmlContentBlock>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index";
+
+export default {
+    title: "Components/FlexibleLayout/Item",
+    component: FlexibleLayoutItem,
+} as Meta<typeof FlexibleLayoutItem>;
+
+const Template: StoryFn<typeof FlexibleLayoutItem> = (args) => (
+    <FlexibleLayoutContainer horizontal>
+        <FlexibleLayoutItem {...args}>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} avgWordsPerSentence={3} random={false} />
+            </HtmlContentBlock>
+        </FlexibleLayoutItem>
+        <FlexibleLayoutItem>
+            <HtmlContentBlock>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </FlexibleLayoutItem>
+    </FlexibleLayoutContainer>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

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

package/src/components/Grid/GridColumn.tsx

@@ -23,11 +23,6 @@ export interface GridColumnProps extends Omit<CarbonGridColumnProps<"div">, "max
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
     carbonSizeConfig?: Pick<CarbonGridColumnProps<"div">, "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

package/src/components/Icon/BaseIcon.tsx

@@ -34,7 +34,7 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
     className?: string;
     /**
      * Description for icon as accessibility fallback.
-     * @deprecated Use `title` as replacement.
+     * @deprecated (v25) Use `title` as replacement.
      */
     description?: string;
     /**
@@ -42,7 +42,7 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-     * @deprecated Use `title` as replacement.
+     * @deprecated (v25) Use `title` as replacement.
      */
     iconTitle?: CarbonIconProps["title"];
 }

package/src/components/Icon/Icon.tsx

@@ -25,12 +25,8 @@ const findExistingIcon = (
 
 /**
  * Returns the first icon name that exists or the fallback icon name.
- * @deprecated use `iconUtils.findExistingIconName`
  */
-export const findExistingIconName = (
-    iconNames: string[],
-    fallbackIconName: ValidIconName = "undefined"
-): ValidIconName => {
+const findExistingIconName = (iconNames: string[], fallbackIconName: ValidIconName = "undefined"): ValidIconName => {
     let foundIconName: string = fallbackIconName;
     const iconNameStack = [...iconNames];
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {

package/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,
@@ -66,9 +58,9 @@ const canonicalIcons = {
     "entity-robot": icons.Bot,
 
     "item-add-artefact": icons.AddAlt,
-    "item-clone": icons.Copy,
+    "item-clone": icons.Replicate,
     "item-comment": icons.AddComment,
-    "item-copy": icons.CopyFile,
+    "item-copy": icons.Copy,
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,
@@ -180,6 +172,8 @@ const canonicalIcons = {
     undefined: icons.Undefined,
 };
 
-export type ValidIconName = keyof typeof canonicalIcons;
 const canonicalIconNames: Record<ValidIconName, CarbonIconType> = canonicalIcons;
+
+export type CarbonIconType = IconType;
+export type ValidIconName = keyof typeof canonicalIcons;
 export default canonicalIconNames;

package/src/components/Label/Label.tsx

@@ -30,6 +30,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * If there is no `isLayoutForElement` set then a `span` is used.
      */
     disabled?: boolean;
+    /**
+     * visual appearance of the label
+     */
+    emphasis?: "strong" | "normal";
 }
 
 export const Label = ({
@@ -41,6 +45,7 @@ export const Label = ({
     tooltip,
     tooltipProps,
     isLayoutForElement = "label",
+    emphasis = "normal",
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -66,7 +71,7 @@ export const Label = ({
             htmlElementstring,
             {
                 className:
-                    `${eccgui}-label` +
+                    `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,

package/src/components/Label/label.scss

@@ -21,6 +21,12 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     opacity: $eccgui-opacity-disabled;
 }
 
+.#{$eccgui}-label--strong {
+    .#{$eccgui}-label__text {
+        font-weight: bolder;
+    }
+}
+
 .#{$eccgui}-label__text {
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
         display: block;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -12,15 +12,13 @@ import { TestableComponent } from "../interfaces";
 
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
+/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
 export interface MultiSelectSelectionProps<T> {
     newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-// @deprecated use `MultiSelectSelectionProps<T>`
-export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
-
 interface MultiSelectCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
@@ -37,7 +35,6 @@ interface MultiSelectCommonProps<T>
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -124,6 +121,7 @@ interface MultiSelectCommonProps<T>
     searchPredicate?: (item: T, query: string) => boolean;
 }
 
+/** @deprecated (v25) use MultiSuggestFieldProps */
 export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
     (
         | {
@@ -143,13 +141,10 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
     );
 
 /**
- * **Element is deprecated for the current type of usage.**
- * Use `MultiSuggestField` as replacement.
- *
- * This component will be re-implemented later as a `Select` allowing multiple selections.
- * @deprecated
+ * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
+ * New name for this component is `MultiSuggestField`.
  */
-export function MultiSelect<T>({
+function MultiSelect<T>({
     items,
     selectedItems: externalSelectedItems,
     prePopulateWithItems,
@@ -439,7 +434,7 @@ export function MultiSelect<T>({
             <IconButton
                 disabled={disabled}
                 name="operation-clear"
-                data-test-id="clear-all-items" // @deprecated should be created from the given testid plus `_clearance` suffix
+                data-test-id={dataTestId ? dataTestId + "_clearance" : "clear-all-items"} // @deprecated (v25) automatically set test id will be removed
                 onClick={handleClear}
             />
         ) : undefined;
@@ -537,15 +532,10 @@ export function MultiSelect<T>({
     );
 }
 
-/** @deprecated */
-/*
-function ofType<U>() {
-    return (props: MultiSelectProps<U>) => <MultiSelect<U> {...props} />;
-}
-// */
-
 // we still return the Blueprint element here because it was already used like that
-// MultiSelect.ofType = ofType;
+/**
+ * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ */
 MultiSelect.ofType = BlueprintMultiSelect.ofType;
 
 export default MultiSelect;

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -3,7 +3,7 @@ import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
-import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
+import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
     p: 1,
@@ -135,7 +135,7 @@ const CreationTemplate: StoryFn = () => {
 
     const identity = useCallback((item: string): string => item, []);
 
-    const handleOnSelect = useCallback((params: MultiSelectSelectionProps<string>) => {
+    const handleOnSelect = useCallback((params: MultiSuggestFieldSelectionProps<string>) => {
         const selected = params.selectedItems;
 
         setSelectedValues(selected);

package/src/components/MultiSuggestField/MultiSuggestField.tsx

@@ -1,9 +1,16 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { MultiSelect, MultiSelectProps } from "../MultiSelect/MultiSelect";
+import MultiSelect, { MultiSelectProps, MultiSelectSelectionProps } from "../MultiSelect/MultiSelect";
 
-export type MultiSuggestFieldProps<T> = MultiSelectProps<T>;
+export type MultiSuggestFieldSelectionProps<T> = MultiSelectSelectionProps<T>;
+
+export interface MultiSuggestFieldProps<T> extends Omit<MultiSelectProps<T>, "onSelection"> {
+    /**
+     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
+     */
+    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
+}
 
 /**
  * Element behaves very similar to `SuggestField` but allows multiple selections.
@@ -16,7 +23,13 @@ export function MultiSuggestField<T>({ className, ...otherProps }: MultiSuggestF
     return (
         <MultiSelect<T>
             className={`${eccgui}-multisuggestfield` + (className ? ` ${className}` : "")}
-            {...otherProps}
+            {...(otherProps as MultiSelectProps<T>)}
         />
     );
 }
+
+// we still return the Blueprint element here because it was already used like that
+/**
+ * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ */
+MultiSuggestField.ofType = MultiSelect.ofType;

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
-import { MultiSuggestField } from "../MultiSuggestField";
+import { MultiSuggestField } from "../../../../index";
 import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
 const testLabels = ["label1", "label2", "label3", "label4", "label5"];
@@ -81,7 +81,7 @@ describe("MultiSuggestField", () => {
 
             expect(container.querySelectorAll("[data-tag-index]").length).toBe(selectedLength);
 
-            const clearButton = container.querySelector('[data-test-id="clear-all-items"');
+            const clearButton = container.querySelector('[data-test-id="multi-suggest-field_clearance"');
 
             expect(clearButton).toBeInTheDocument();
 
@@ -165,7 +165,7 @@ describe("MultiSuggestField", () => {
 
             const { rerender, container } = render(<MultiSuggestField {...args} data-test-id="multi-suggest-field" />);
 
-            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+            const clearButtonBefore = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
             expect(clearButtonBefore).not.toBeInTheDocument();
 
@@ -186,7 +186,7 @@ describe("MultiSuggestField", () => {
             });
 
             await waitFor(() => {
-                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+                const clearButtonAfter = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
                 expect(clearButtonAfter).toBeInTheDocument();
 
@@ -399,7 +399,7 @@ describe("MultiSuggestField", () => {
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
             const [input] = inputContainer.getElementsByTagName("input");
 
-            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+            const clearButtonBefore = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
             expect(clearButtonBefore).not.toBeInTheDocument();
 
@@ -451,7 +451,7 @@ describe("MultiSuggestField", () => {
             });
 
             await waitFor(() => {
-                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+                const clearButtonAfter = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
                 expect(clearButtonAfter).toBeInTheDocument();
 

package/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<IconProps> | React.ReactElement<TestIconProps>;
-    /**
-     * @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 = <Icon name={iconSymbol} />;
+        notificationIcon = <Icon name={iconSymbol as ValidIconName} />;
     }
 
     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`)
             }

package/src/components/Notification/notification.scss

@@ -60,8 +60,7 @@
     }
 }
 
-.#{$eccgui}-notification--flexwidth,
-.#{$eccgui}-notification--fullwidth {
+.#{$eccgui}-notification--flexwidth {
     min-width: 0;
     max-width: none;
 }