@eccenca/gui-elements 23.8.0 → 24.0.0-rc.0

package/src/components/Pagination/pagination.scss

@@ -1,11 +1,15 @@
-@use "~@carbon/styles/scss/components/pagination/pagination";
+@use "~@carbon/react/scss/components/pagination/pagination";
 @include pagination.pagination;
 
 $eccgui-color-pagination-background: transparent !default;
 $eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
 $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
+$eccgui-size-pagination-height-medium: $pt-button-height !default;
+$eccgui-size-pagination-height-small: $pt-button-height-small !default;
+$eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
 .#{$prefix}--pagination {
+    min-block-size: $eccgui-size-pagination-height-medium;
     font-size: $eccgui-size-typo-pagination;
     background-color: $eccgui-color-pagination-background;
 
@@ -15,8 +19,17 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
     }
 }
 
+.#{$prefix}--pagination__left {
+    padding: 0 $eccgui-size-block-whitespace * 0.5;
+}
+
 span.#{$prefix}--pagination__text {
+    margin-inline-start: $eccgui-size-block-whitespace * 0.5;
     color: $eccgui-color-pagination-text;
+
+    .#{$prefix}--pagination__right & {
+        margin-inline-end: $eccgui-size-block-whitespace * 0.5;
+    }
 }
 
 .#{$eccgui}-pagination--hidepagesize {
@@ -29,6 +42,12 @@ span.#{$prefix}--pagination__text {
     }
 }
 
+.#{$prefix}--pagination__button--backward {
+    .#{$prefix}--pagination:not(.#{$eccgui}-pagination--hidepageselect) & {
+        border-left: 1px solid $border-subtle;
+    }
+}
+
 .#{$prefix}--pagination__button--no-index {
     // TODO: revalidate if this is still necessary using the latest version of carbon lib
     color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
@@ -38,6 +57,10 @@ span.#{$prefix}--pagination__text {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
         display: none;
     }
+
+    & .#{$prefix}--select__item-count .#{$prefix}--select-input {
+        border-inline-end: none;
+    }
 }
 
 .#{$eccgui}-pagination--hidepageselect {
@@ -66,4 +89,50 @@ span.#{$prefix}--pagination__text {
     .#{$prefix}--pagination__button {
         border-left: none;
     }
+
+    .#{$prefix}--pagination__right {
+        border-inline-start: none;
+    }
+}
+
+// Fix pagination height, align it with button height
+.#{$prefix}--pagination--sm {
+    min-block-size: $eccgui-size-pagination-height-small;
+}
+
+.#{$prefix}--pagination--lg {
+    min-block-size: $eccgui-size-pagination-height-large;
+}
+
+.#{$prefix}--pagination__button,
+.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    inline-size: $eccgui-size-pagination-height-medium;
+    block-size: $eccgui-size-pagination-height-medium;
+    min-block-size: $eccgui-size-pagination-height-medium;
+
+    .#{$prefix}--pagination--sm & {
+        inline-size: $eccgui-size-pagination-height-small;
+        block-size: $eccgui-size-pagination-height-small;
+        min-block-size: $eccgui-size-pagination-height-small;
+    }
+
+    .#{$prefix}--pagination--lg & {
+        inline-size: $eccgui-size-pagination-height-large;
+        block-size: $eccgui-size-pagination-height-large;
+        min-block-size: $eccgui-size-pagination-height-large;
+    }
+}
+
+.#{$prefix}--select-input {
+    .#{$prefix}--pagination & {
+        line-height: $eccgui-size-pagination-height-medium;
+    }
+
+    .#{$prefix}--pagination--sm & {
+        line-height: $eccgui-size-pagination-height-small;
+    }
+
+    .#{$prefix}--pagination--lg & {
+        line-height: $eccgui-size-pagination-height-large;
+    }
 }

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
     argTypes: {},
-} as ComponentMeta<typeof ProgressBar>;
+} as Meta<typeof ProgressBar>;
 
-const ProgressBarExample: ComponentStory<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;
+const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;
 
 export const Default = ProgressBarExample.bind({});
 Default.args = {

package/src/components/RadioButton/Stories/RadioButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, RadioButton } from "../../../../index";
 
@@ -10,9 +10,9 @@ export default {
     argTypes: {
         onChange: { action: "clicked" },
     },
-} as ComponentMeta<typeof RadioButton>;
+} as Meta<typeof RadioButton>;
 
-const Template: ComponentStory<typeof RadioButton> = (args) => <RadioButton {...args} />;
+const Template: StoryFn<typeof RadioButton> = (args) => <RadioButton {...args} />;
 
 export const SimpleTextLabel = Template.bind({});
 SimpleTextLabel.args = {

package/src/components/Separation/Stories/Divider.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Button, Divider } from "./../../../../index";
 export default {
     title: "Components/Separation/Divider",
     component: Divider,
     argTypes: {},
-} as ComponentMeta<typeof Divider>;
+} as Meta<typeof Divider>;
 
 // buttons used for only showing space with elements
-const DividerExample: ComponentStory<typeof Divider> = (args) => (
+const DividerExample: StoryFn<typeof Divider> = (args) => (
     <>
         <Button children="Example element" />
         <Divider {...args} />

package/src/components/Separation/Stories/Spacing.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "../../Button/Button";
 import Spacing from "../Spacing";
@@ -9,10 +9,10 @@ export default {
     argTypes: {
         size: { control: "radio" },
     },
-} as ComponentMeta<typeof Spacing>;
+} as Meta<typeof Spacing>;
 
 // buttons used for only showing space with elements
-const SpacingExample: ComponentStory<typeof Spacing> = (args) => (
+const SpacingExample: StoryFn<typeof Spacing> = (args) => (
     <>
         <Button children="Example element" />
         <Spacing {...args} />

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Spinner from "../Spinner";
 export default {
@@ -11,9 +11,9 @@ export default {
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },
         stroke: { control: "radio", options: ["thin", "medium", "bold"] },
     },
-} as ComponentMeta<typeof Spinner>;
+} as Meta<typeof Spinner>;
 
-const SpinnerExample: ComponentStory<typeof Spinner> = (args) => (
+const SpinnerExample: StoryFn<typeof Spinner> = (args) => (
     <div style={{ height: "300px", minHeight: "20vw", position: "relative" }}>
         <Spinner {...args} />
     </div>

package/src/components/Switch/Stories/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Switch from "../Switch";
 
@@ -7,9 +7,9 @@ export default {
     title: "Forms/Switch",
     component: Switch,
     argTypes: {},
-} as ComponentMeta<typeof Switch>;
+} as Meta<typeof Switch>;
 
-const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
+const Template: StoryFn<typeof Switch> = (args) => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Table/Table.tsx

@@ -1,15 +1,14 @@
 import React from "react";
-import {
-    DataTableSize as CarbonDataTableSize,
-    Table as CarbonTable,
-    TableProps as CarbonTableProps,
-} from "carbon-components-react";
+import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@carbon/react";
 
+// import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
 export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
 
+// workaround to get type/interface
+type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
 export interface TableProps
     extends Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
         React.TableHTMLAttributes<HTMLTableElement> {

package/src/components/Table/TableCell.tsx

@@ -1,8 +1,11 @@
 import React from "react";
-import { TableCell as CarbonTableCell, TableCellProps as CarbonTableCellProps } from "carbon-components-react";
+import { TableCell as CarbonTableCell } from "@carbon/react";
 
+// import { TableCellProps as CarbonTableCellProps } from "@carbon/react/es/components/DataTable/TableCell"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+// workaround to get type/interface
+type CarbonTableCellProps = React.ComponentProps<typeof CarbonTableCell>;
 export interface TableCellProps extends CarbonTableCellProps, React.TdHTMLAttributes<HTMLTableCellElement> {
     /**
      * By default all table cell content is aligned to the left of the cell.

package/src/components/Table/TableContainer.tsx

@@ -1,16 +1,24 @@
 import React from "react";
 import {
     DataTable as CarbonDataTable,
+    DataTableHeader as CarbonDataTableHeader,
     DataTableProps as CarbonDataTableProps,
-    TableContainerProps as CarbonTableContainerProps,
-} from "carbon-components-react";
+    DataTableRow as CarbonDataTableRow,
+} from "@carbon/react";
+import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/es/components/DataTable/TableContainer";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
 
 interface TableDataContainerProps
-    extends Omit<CarbonDataTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+    extends Omit<
+            CarbonDataTableProps<
+                Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>,
+                Array<CarbonDataTableHeader>
+            >,
+            "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+        >,
         React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
     size?: TableRowHeightSize;

package/src/components/Table/TableExpandHeader.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    TableExpandHeader as CarbonTableExpandHeader,
-    TableExpandHeaderProps as CarbonTableExpandHeaderProps,
-} from "carbon-components-react";
+import { TableExpandHeader as CarbonTableExpandHeader } from "@carbon/react";
+import { TableExpandHeaderProps as CarbonTableExpandHeaderProps } from "@carbon/react/es/components/DataTable/TableExpandHeader";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestIconProps } from "../Icon";
@@ -11,7 +9,10 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import IconButton from "./../Icon/IconButton";
 
 export interface TableExpandHeaderProps
-    extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">,
+    extends Omit<
+            CarbonTableExpandHeaderProps,
+            "children" | "ariaLabel" | "enableExpando" | "expandIconDescription" | "aria-label"
+        >,
         React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
@@ -44,6 +45,7 @@ export function TableExpandHeader({
             isExpanded={isExpanded}
             onExpand={onExpand}
             enableToggle={false}
+            aria-label="" // workaround to fix difference between types on this properties
             {...otherCarbonTableExpandHeaderProps}
         >
             {enableToggle && toggleButton}

package/src/components/Table/TableExpandRow.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { TableExpandRowProps as CarbonTableExpandRowProps } from "carbon-components-react";
-import { usePrefix as carbonPrefix } from "carbon-components-react/es/index";
+import { TableExpandRow as CarbonTableExpandRow } from "@carbon/react";
+// import { TableExpandRowProps as CarbonTableExpandRowProps } from "@carbon/react/es/components/DataTable/TableExpandRow"; // TODO: check later again, currently interface is not exported
+import { usePrefix as carbonPrefix } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import IconButton from "./../Icon/IconButton";
 import { TableCell } from "./index";
 
+// workaround to get type/interface
+type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;
 export interface TableExpandRowProps
-    extends Omit<CarbonTableExpandRowProps, "ariaLabel" | "expandIconDescription">,
+    extends Omit<CarbonTableExpandRowProps, "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
         React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.

package/src/components/Table/TableRow.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { TableRow as CarbonTableRow, TableRowProps as CarbonTableRowProps } from "carbon-components-react";
+import { TableRow as CarbonTableRow } from "@carbon/react";
+import { TableRowProps as CarbonTableRowProps } from "@carbon/react/es/components/DataTable/TableRow";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Table/index.tsx

@@ -6,4 +6,4 @@ export * from "./TableExpandHeader";
 export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
-export { TableHead, TableBody, TableExpandedRow, TableHeader } from "carbon-components-react";
+export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";

package/src/components/Table/table.scss

@@ -1,13 +1,13 @@
 @use "sass:color";
 
 // import libs
-@use "~@carbon/styles/scss/components/data-table/data-table";
+@use "~@carbon/react/scss/components/data-table/data-table";
 
-// currently not needed @import "~@carbon/styles/scss/components/data-table/action";
-@use "~@carbon/styles/scss/components/data-table/expandable/index" as table-expandable;
+// currently not needed @import "~@carbon/react/scss/components/data-table/action";
+@use "~@carbon/react/scss/components/data-table/expandable/index" as table-expandable;
 
-// currently not needed @import ~@carbon/styles/scss/components/data-table/skeleton;
-@use "~@carbon/styles/scss/components/data-table/sort/index" as table-sort;
+// currently not needed @import ~@carbon/react/scss/components/data-table/skeleton;
+@use "~@carbon/react/scss/components/data-table/sort/index" as table-sort;
 @include data-table.data-table;
 
 // own vars

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
@@ -11,13 +11,13 @@ export default {
             control: "color",
         },
     },
-} as ComponentMeta<typeof TabDummyForStorybook>;
+} as Meta<typeof TabDummyForStorybook>;
 
 const Tab = (args) => {
     return <Tabs id="titledemo" tabs={[args]} />;
 };
 
-const TemplateFull: ComponentStory<typeof TabDummyForStorybook> = (args) => <Tab {...args} />;
+const TemplateFull: StoryFn<typeof TabDummyForStorybook> = (args) => <Tab {...args} />;
 
 export const TabElement = TemplateFull.bind({});
 TabElement.args = {

package/src/components/Tabs/stories/TabPanel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { TabPanel } from "./../../../";
 
@@ -8,9 +8,9 @@ export default {
     title: "Components/Tabs",
     component: TabPanel,
     argTypes: {},
-} as ComponentMeta<typeof TabPanel>;
+} as Meta<typeof TabPanel>;
 
-const TemplateFull: ComponentStory<typeof TabPanel> = (args) => <TabPanel {...args} />;
+const TemplateFull: StoryFn<typeof TabPanel> = (args) => <TabPanel {...args} />;
 
 export const TabPanelElement = TemplateFull.bind({});
 TabPanelElement.args = {

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
@@ -7,7 +7,7 @@ export default {
     title: "Components/Tabs",
     component: TabTitleOrg,
     argTypes: {},
-} as ComponentMeta<typeof TabTitleOrg>;
+} as Meta<typeof TabTitleOrg>;
 
 const TabTitle = (args) => {
     return (
@@ -23,7 +23,7 @@ const TabTitle = (args) => {
     );
 };
 
-const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
+const TemplateFull: StoryFn<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
 
 export const TabTitleElement = TemplateFull.bind({});
 TabTitleElement.args = {

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tabs, TabTitle } from "./../../../";
 
@@ -21,9 +21,9 @@ export default {
         },
         */
     },
-} as ComponentMeta<typeof Tabs>;
+} as Meta<typeof Tabs>;
 
-const TemplateFull: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+const TemplateFull: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const TabsContainerUncontrolled = TemplateFull.bind({});
 TabsContainerUncontrolled.args = {

package/src/components/Tag/stories/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
@@ -26,9 +26,9 @@ export default {
         },
         emphasized: { control: "none" },
     },
-} as ComponentMeta<typeof Tag>;
+} as Meta<typeof Tag>;
 
-const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
+const Template: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Tag/stories/TagList.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tag, TagList } from "./../../../../index";
 
@@ -11,9 +11,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof TagList>;
+} as Meta<typeof TagList>;
 
-const Template: ComponentStory<typeof TagList> = (args) => <TagList {...args} />;
+const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 
 export const List = Template.bind({});
 List.args = {

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import SearchField from "./../SearchField";
 
@@ -13,9 +13,9 @@ export default {
         hasStateDanger: { table: { disable: true } },
         fullWidth: { table: { disable: true } },
     },
-} as ComponentMeta<typeof SearchField>;
+} as Meta<typeof SearchField>;
 
-const Template: ComponentStory<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
+const Template: StoryFn<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -23,7 +23,7 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (args) => {
+export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args) => {
     const [query, setQuery] = React.useState<string>("");
     return (
         <SearchField

package/src/components/TextField/stories/TextField.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import characters from "../../../common/utils/characters";
@@ -21,9 +21,9 @@ export default {
             ...helpersArgTypes.exampleIntent,
         },
     },
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
 
-const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args}></TextField>;
+const Template: StoryFn<typeof TextField> = (args) => <TextField {...args}></TextField>;
 
 export const Default = Template.bind({});
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "../Button/Button";
 import IconButton from "../Icon/IconButton";
@@ -15,9 +15,9 @@ export default {
         ToolbarSection,
     },
     argTypes: {},
-} as ComponentMeta<typeof Toolbar>;
+} as Meta<typeof Toolbar>;
 
-const Template: ComponentStory<typeof Toolbar> = (args) => (
+const Template: StoryFn<typeof Toolbar> = (args) => (
     <Toolbar {...args}>
         <ToolbarSection>
             <IconButton name="operation-undo" />

package/src/components/Tree/Tree.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LogoReact } from "@carbon/icons-react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Icon, OverflowText, Tag, TestIcon, Tree, TreeNodeInfo } from "./../../index";
 import { TreeNodeShadow as TreeNode } from "./Tree";
@@ -10,9 +10,9 @@ export default {
     component: Tree,
     subcomponents: { TreeNode },
     argTypes: {},
-} as ComponentMeta<typeof Tree>;
+} as Meta<typeof Tree>;
 
-const Template: ComponentStory<typeof Tree> = (args) => {
+const Template: StoryFn<typeof Tree> = (args) => {
     const [treeContents, setTreeContents] = React.useState(args.contents);
 
     return (

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
 
@@ -30,9 +30,9 @@ export default {
         paddingBottom: { ...whiteSpaceSizeOptions },
         paddingLeft: { ...whiteSpaceSizeOptions },
     },
-} as ComponentMeta<typeof WhiteSpaceContainerElement>;
+} as Meta<typeof WhiteSpaceContainerElement>;
 
-const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
+const Template: StoryFn<typeof WhiteSpaceContainerElement> = (args) => (
     <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
 );
 

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CodeEditor } from "./CodeMirror";
 
@@ -12,9 +12,9 @@ export default {
             action: "value changed",
         },
     },
-} as ComponentMeta<typeof CodeEditor>;
+} as Meta<typeof CodeEditor>;
 
-const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {