@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/src/includes/carbon-components/_variables.scss

@@ -0,0 +1,107 @@
+// Stack of Carbon variables that are necessary to use their framework
+// TODO: calculate them from own configuration variables, all unchanged variables are commented out
+
+/// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
+$css--font-face: false !default;
+
+/// If true, includes the `css-helpers()` mixin
+$css--helpers: false !default;
+
+/// If true, includes the `css-body()` mixin
+$css--body: false !default;
+
+/// If true, the `layer()` mixin sets `box-shadow` values
+$css--use-layer: true !default;
+
+/// If true, include reset CSS
+$css--reset: false !default;
+
+/// If true, include default type
+$css--default-type: false !default;
+
+/// Used with `css--font-face` feature flag, if true, uses Plex font families instead of Helvetica
+$css--plex: false !default;
+
+$feature-flags: (
+    ui-shell: true,
+    grid-columns-16: true,
+    // not necessary, we include 16 columns grid directly
+) !default;
+
+// ⚠️ Manage deprecations
+$deprecations--entry: true;
+$deprecations--reasons: ();
+$deprecations--message: "Deprecated code was found, this code will be removed before the next release of Carbon.";
+
+$carbon--base-font-size: $eccgui-size-typo-base !default;
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/vendor/@carbon/layout/convert";
+
+$caption-01: (
+    font-size: carbon--rem($eccgui-size-typo-caption),
+    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+) !default;
+$label-01: (
+    font-size: carbon--rem($eccgui-size-typo-caption),
+    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+) !default;
+$helper-text-01: (
+    font-size: carbon--rem($eccgui-size-typo-caption),
+    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+) !default;
+$body-short-01: (
+    font-size: carbon--rem($eccgui-size-typo-text),
+    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+) !default;
+$body-long-01: (
+    font-size: carbon--rem($eccgui-size-typo-text),
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+$code-01: (
+    font-family: $eccgui-font-family-monospace,
+    font-size: carbon--rem($eccgui-size-typo-caption),
+    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+) !default;
+$heading-01: (
+    font-size: carbon--rem($eccgui-size-typo-text),
+    font-weight: 600,
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+
+$body-short-02: (
+    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+$body-long-02: (
+    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
+) !default;
+$code-02: (
+    font-family: $eccgui-font-family-monospace,
+    font-size: carbon--rem($eccgui-size-typo-text),
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+$heading-02: (
+    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    font-weight: 600,
+    line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
+) !default;
+
+$ui-01: transparent !default;
+$ui-02: $eccgui-color-workspace-background !default;
+$ui-03: $pt-divider-black !default;
+$text-01: $eccgui-color-applicationheader-text !default;
+$text-02: $eccgui-color-workspace-text !default;
+$link-01: $eccgui-color-accent !default;
+$hover-primary-text: $eccgui-color-info-text !default;
+$hover-field: $button-background-color-hover !default;
+$hover-ui: $hover-field !default;
+$visited-link: purple !default;
+$disabled-02: rgba($text-01, $eccgui-opacity-disabled) !default;
+
+$layout-04: carbon--rem(
+    $eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio
+) !default; // regular height of text input
+$spacing-05: carbon--rem($eccgui-size-inline-whitespace) !default;
+
+// fetch some imports even earlier than normally necessary to have them ready before auto-included by library elements
+@import "./../../components/Button/button";

package/src/index.scss

@@ -0,0 +1,190 @@
+// == load default configuration ===============================================
+
+@import "./configuration/variables";
+
+// == Necessary imports from libraries =========================================
+
+/*
+    Our own imports are at the end to rule higher if necessary.
+
+    TODO: when finished we only should see includes from own elements here, even
+    if we use element includes from libraries there.
+*/
+
+// -- BlueprintJS --------------------------------------------------------------
+
+// calculate blueprintjs configuration
+@import "./includes/blueprintjs/variables";
+// load blueprintjs requsists
+@import "~@blueprintjs/core/src/common/variables";
+// already included via bjs variables @import "~@blueprintjs/colors/src/colors";
+// currently not needed @import "~@blueprintjs/core/src/reset";
+// currently not needed @import "~@blueprintjs/core/src/typography";
+@import "~@blueprintjs/core/src/accessibility/focus-states";
+// load blueprintjs components
+// currently not needed @import "~@blueprintjs/core/src/components/alert/alert";
+// used in own component @import "~@blueprintjs/core/src/components/breadcrumbs/breadcrumbs";
+// used in own component @import "~@blueprintjs/core/src/components/button/button";
+@import "~@blueprintjs/core/src/components/button/button-group";
+// currently not needed @import "~@blueprintjs/core/src/components/callout/callout";
+// used in own component @import "~@blueprintjs/core/src/components/card/card";
+@import "~@blueprintjs/core/src/components/collapse/collapse";
+@import "~@blueprintjs/core/src/components/context-menu/context-menu";
+@import "~@blueprintjs/core/src/components/divider/divider";
+// used in own component @import "~@blueprintjs/core/src/components/dialog/dialog";
+// currently not needed @import "~@blueprintjs/core/src/components/drawer/drawer";
+@import "~@blueprintjs/core/src/components/editable-text/editable-text";
+// used in own component @import "~@blueprintjs/core/src/components/forms/index";
+@import "~@blueprintjs/core/src/components/html-select/html-select";
+// currently not needed @import "~@blueprintjs/core/src/components/html-table/html-table";
+@import "~@blueprintjs/core/src/components/hotkeys/hotkeys";
+// not used @import "~@blueprintjs/core/src/components/icon/icon";
+// used in own component @import "~@blueprintjs/core/src/components/menu/menu";
+@import "~@blueprintjs/core/src/components/navbar/navbar";
+@import "~@blueprintjs/core/src/components/non-ideal-state/non-ideal-state";
+// used in breadcrumbs component @import "~@blueprintjs/core/src/components/overflow-list/overflow-list";
+@import "~@blueprintjs/core/src/components/overlay/overlay";
+@import "~@blueprintjs/core/src/components/panel-stack/panel-stack";
+// used in own component @import "~@blueprintjs/core/src/components/popover/popover";
+@import "~@blueprintjs/core/src/components/portal/portal";
+@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";
+@import "~@blueprintjs/core/src/components/skeleton/skeleton";
+@import "~@blueprintjs/core/src/components/slider/slider";
+// used in own component @import "~@blueprintjs/core/src/components/spinner/spinner";
+// used in own component @import @import "~@blueprintjs/core/src/components/tabs/tabs";
+// used in own component @import "~@blueprintjs/core/src/components/tag/tag";
+// used in own component @import "~@blueprintjs/core/src/components/tag-input/tag-input";
+// used in own component @import "~@blueprintjs/core/src/components/toast/toast";
+// used in own component @import "~@blueprintjs/core/src/components/tooltip/tooltip";
+@import "~@blueprintjs/core/src/components/tree/tree";
+
+// -- Carbon Elements ----------------------------------------------------------
+
+/*
+    ATTENTION: Blueprint and Carbon seem to share some variable names,
+    e.g. `$button-padding` and maybe some more ... loading Carbon config here
+    leads to some unwanted style results of Blueprint components later, but as
+    we want to prevent double usage of same elements we need to figure this out
+    later anyway.
+*/
+
+// calculate carbon configuration
+@import "./includes/carbon-components/variables";
+// load carbon requsists
+@import "~carbon-components/scss/globals/scss/feature-flags";
+@import "~carbon-components/scss/globals/scss/vars";
+@import "~carbon-components/scss/globals/scss/colors";
+@import "~carbon-components/scss/globals/scss/theme";
+@import "~carbon-components/scss/globals/scss/mixins";
+@import "~carbon-components/scss/globals/scss/layout";
+@import "~carbon-components/scss/globals/scss/spacing";
+// currently not needed @import "~carbon-components/scss/globals/scss/typography";
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+// currently not needed @import "~carbon-components/scss/globals/scss/css--reset";
+// currently not needed @import "~carbon-components/scss/globals/scss/css--font-face";
+// currently not needed @import "~carbon-components/scss/globals/scss/css--helpers";
+// currently not needed @import "~carbon-components/scss/globals/scss/css--body";
+// used in own component @import '~carbon-components/scss/globals/grid/grid';
+// load carbon components
+// not used @import '~carbon-components/scss/components/button/button';
+@import "~carbon-components/scss/components/copy-button/copy-button";
+@import "~carbon-components/scss/components/file-uploader/file-uploader";
+// not used @import '~carbon-components/scss/components/checkbox/checkbox';
+@import "~carbon-components/scss/components/combo-box/combo-box";
+// not used @import '~carbon-components/scss/components/radio-button/radio-button';
+@import "~carbon-components/scss/components/toggle/toggle";
+@import "~carbon-components/scss/components/search/search";
+@import "~carbon-components/scss/components/select/select";
+@import "~carbon-components/scss/components/text-input/text-input";
+@import "~carbon-components/scss/components/text-area/text-area";
+@import "~carbon-components/scss/components/number-input/number-input";
+@import "~carbon-components/scss/components/form/form";
+// used in own component @import "~carbon-components/scss/components/link/link";
+@import "~carbon-components/scss/components/list-box/list-box";
+@import "~carbon-components/scss/components/list/list";
+// used in own component @import "~carbon-components/scss/components/data-table/data-table";
+// not used @import '~carbon-components/scss/components/structured-list/structured-list';
+@import "~carbon-components/scss/components/code-snippet/code-snippet";
+@import "~carbon-components/scss/components/overflow-menu/overflow-menu";
+@import "~carbon-components/scss/components/content-switcher/content-switcher";
+@import "~carbon-components/scss/components/date-picker/date-picker";
+@import "~carbon-components/scss/components/dropdown/dropdown";
+// currently not needed @import "~carbon-components/scss/components/loading/loading";
+@import "~carbon-components/scss/components/modal/modal";
+@import "~carbon-components/scss/components/multi-select/multi-select";
+// currently not needed @import '~carbon-components/scss/components/notification/inline-notification';
+// currently not needed @import '~carbon-components/scss/components/notification/toast-notification';
+// not used @import '~carbon-components/scss/components/tooltip/tooltip';
+// currently not needed @import "~carbon-components/scss/components/tabs/tabs";
+// not used @import '~carbon-components/scss/components/tag/tag';
+// used in own component @import '~carbon-components/scss/components/pagination/pagination';
+// used in own component @import "~carbon-components/scss/components/accordion/accordion";
+@import "~carbon-components/scss/components/progress-indicator/progress-indicator";
+// not used @import '~carbon-components/scss/components/breadcrumb/breadcrumb';
+@import "~carbon-components/scss/components/toolbar/toolbar";
+@import "~carbon-components/scss/components/time-picker/time-picker";
+@import "~carbon-components/scss/components/slider/slider";
+@import "~carbon-components/scss/components/tile/tile";
+@import "~carbon-components/scss/components/skeleton/skeleton";
+@import "~carbon-components/scss/components/inline-loading/inline-loading";
+// currently not needed @import '~carbon-components/scss/components/pagination-nav/pagination-nav';
+// used in own component @import '~carbon-components/scss/components/ui-shell/ui-shell'; // experimental
+
+// other 3rd party libs
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/xq-light.css";
+
+// == Load element styles ======================================================
+
+@import "./components/Typography/typography";
+@import "./components/Application/application";
+@import "./components/Workspace/workspace";
+@import "./components/Grid/grid";
+@import "./components/Icon/icon";
+@import "./components/Menu/menu";
+@import "./components/ContextOverlay/contextoverlay";
+@import "./components/SimpleTable/simpletable";
+@import "./components/Button/button";
+@import "./components/OverviewItem/overviewitem";
+@import "./components/Breadcrumb/breadcrumb";
+@import "./components/Dialog/dialog";
+@import "./components/Card/card";
+@import "./components/Separation/separation";
+@import "./components/Tooltip/tooltip";
+@import "./components/Structure/titles";
+@import "./components/Accordion/accordion";
+@import "./components/Label/label";
+@import "./components/Form/form";
+@import "./components/Checkbox/checkbox";
+@import "./components/RadioButton/radiobutton";
+@import "./components/TextField/textfield";
+@import "./components/AutocompleteField/autocompletefield";
+@import "./components/Pagination/pagination";
+@import "./components/Toolbar/toolbar";
+@import "./components/Tag/tag";
+@import "./components/TagInput/taginput";
+@import "./components/Notification/notification";
+@import "./components/Link/link";
+@import "./components/Spinner/spinner";
+@import "./components/Tabs/tabs";
+@import "./components/PropertyValuePair/propertyvalue";
+@import "./components/Iframe/iframe";
+
+// == load tweaks ==============================================================
+
+@import "./shame";
+
+// == Some aftermath ===========================================================
+
+// -- Carbon Elements ----------------------------------------------------------
+
+// Cycle through all the deprecation reasons, if any exist, that have been
+// accumulated through the @import process.
+@if (length($deprecations--reasons) > 0) {
+    $deprecations--message: "";
+    @each $reason in $deprecations--reasons {
+        $deprecations--message: "#{$deprecations--message} REASON: #{$reason}";
+    }
+
+    @warn $deprecations--message;
+}

package/src/index.ts

@@ -0,0 +1,238 @@
+import ApplicationContainer from "./components/Application/ApplicationContainer";
+import ApplicationHeader from "./components/Application/ApplicationHeader";
+import ApplicationContent from "./components/Application/ApplicationContent";
+import ApplicationSidebarNavigation from "./components/Application/ApplicationSidebarNavigation";
+import ApplicationSidebarToggler from "./components/Application/ApplicationSidebarToggler";
+import ApplicationTitle from "./components/Application/ApplicationTitle";
+import ApplicationToolbar from "./components/Application/ApplicationToolbar";
+import ApplicationToolbarSection from "./components/Application/ApplicationToolbarSection";
+import ApplicationToolbarAction from "./components/Application/ApplicationToolbarAction";
+import ApplicationToolbarPanel from "./components/Application/ApplicationToolbarPanel";
+
+import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
+import OverflowText from "./components/Typography/OverflowText";
+import WhiteSpaceContainer from "./components/Typography/WhiteSpaceContainer";
+import Highlighter from "./components/Typography/Highlighter";
+
+import Grid from "./components/Grid/Grid";
+import GridRow from "./components/Grid/GridRow";
+import GridColumn from "./components/Grid/GridColumn";
+
+import WorkspaceContent from "./components/Workspace/WorkspaceContent";
+import WorkspaceMain from "./components/Workspace/WorkspaceMain";
+import WorkspaceSide from "./components/Workspace/WorkspaceSide";
+import WorkspaceHeader from "./components/Workspace/WorkspaceHeader";
+
+import Icon from "./components/Icon/Icon";
+import IconButton from "./components/Icon/IconButton";
+
+import Label from "./components/Label/Label";
+import Button from "./components/Button/Button";
+import Checkbox from "./components/Checkbox/Checkbox";
+import RadioButton from "./components/RadioButton/RadioButton";
+import Tabs from "./components/Tabs/Tabs";
+import TextField from "./components/TextField/TextField";
+import TextArea from "./components/TextField/TextArea";
+import SearchField from "./components/TextField/SearchField";
+import Switch from "./components/Switch/Switch";
+import NumericInput from "./components/NumericInput/NumericInput";
+import FieldItem from "./components/Form/FieldItem";
+import FieldItemRow from "./components/Form/FieldItemRow";
+import FieldSet from "./components/Form/FieldSet";
+import { AutoCompleteField } from "./components/AutocompleteField/AutoCompleteField";
+
+import Menu from "./components/Menu/Menu";
+import MenuItem from "./components/Menu/MenuItem";
+import MenuDivider from "./components/Menu/MenuDivider";
+
+import ContextOverlay from "./components/ContextOverlay/ContextOverlay";
+import ContextMenu from "./components/ContextOverlay/ContextMenu";
+
+import Pagination from "./components/Pagination/Pagination";
+
+import Tag from "./components/Tag/Tag";
+import TagList from "./components/Tag/TagList";
+
+import Notification from "./components/Notification/Notification";
+import Toast from "./components/Notification/Toast";
+import { Select } from "@blueprintjs/select";
+
+import { Iframe } from "./components/Iframe/Iframe";
+import { IframeModal } from "./components/Iframe/IframeModal";
+
+import {
+    OverviewItem,
+    OverviewItemActions,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    OverviewItemList,
+} from "./components/OverviewItem";
+
+import {
+    TableContainer,
+    Table,
+    TableHead,
+    TableRow,
+    TableBody,
+    TableCell,
+    TableHeader,
+} from "./components/SimpleTable";
+
+import BreadcrumbList from "./components/Breadcrumb/BreadcrumbList";
+import BreadcrumbItem from "./components/Breadcrumb/BreadcrumbItem";
+
+import Modal from "./components/Dialog/Modal";
+import SimpleDialog from "./components/Dialog/SimpleDialog";
+import AlertDialog from "./components/Dialog/AlertDialog";
+
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardOptions,
+    CardContent,
+    CardActions,
+    CardActionsAux,
+} from "./components/Card";
+
+import Spacing from "./components/Separation/Spacing";
+import Divider from "./components/Separation/Divider";
+
+import Tooltip from "./components/Tooltip/Tooltip";
+
+import Toolbar from "./components/Toolbar/Toolbar";
+import ToolbarSection from "./components/Toolbar/ToolbarSection";
+
+import Section from "./components/Structure/Section";
+import SectionHeader from "./components/Structure/SectionHeader";
+import TitlePage from "./components/Structure/TitlePage";
+import TitleMainsection from "./components/Structure/TitleMainsection";
+import TitleSubsection from "./components/Structure/TitleSubsection";
+
+import Accordion from "./components/Accordion/Accordion";
+import AccordionItem from "./components/Accordion/AccordionItem";
+
+import Link from "./components/Link/Link";
+
+import Spinner from "./components/Spinner/Spinner";
+
+import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
+
+import * as TypographyClassNames from "./components/Typography/classnames";
+import {ClassNames as IntentClassNames} from "./common/Intent";
+import { openInNewTab } from "./common/utils/openInNewTab";
+import { ProgressBar } from "./components/ProgressBar/ProgressBar";
+import List from "./components/List/List";
+
+const HelperClasses = {
+    Typography: TypographyClassNames,
+    Intent: IntentClassNames,
+};
+
+const Utilities = {
+     openInNewTab
+}
+
+export {
+    ApplicationContainer,
+    ApplicationHeader,
+    ApplicationContent,
+    ApplicationSidebarNavigation,
+    ApplicationSidebarToggler,
+    ApplicationTitle,
+    ApplicationToolbar,
+    ApplicationToolbarSection,
+    ApplicationToolbarAction,
+    ApplicationToolbarPanel,
+    HtmlContentBlock,
+    OverflowText,
+    WhiteSpaceContainer,
+    Highlighter,
+    Grid,
+    GridRow,
+    GridColumn,
+    List,
+    WorkspaceContent,
+    WorkspaceMain,
+    WorkspaceSide,
+    WorkspaceHeader,
+    Menu,
+    MenuItem,
+    MenuDivider,
+    ContextOverlay,
+    ContextMenu,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    OverviewItemActions,
+    OverviewItemList,
+    TableContainer,
+    Table,
+    TableHead,
+    TableRow,
+    TableBody,
+    TableCell,
+    TableHeader,
+    Icon,
+    IconButton,
+    Label,
+    Button,
+    Checkbox,
+    RadioButton,
+    Tabs,
+    TextField,
+    TextArea,
+    SearchField,
+    Switch, // TODO: scss styles
+    NumericInput, // TODO: scss styles
+    FieldItem,
+    FieldItemRow,
+    FieldSet,
+    BreadcrumbList,
+    BreadcrumbItem,
+    Modal,
+    SimpleDialog,
+    AlertDialog,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardOptions,
+    CardContent,
+    CardActions,
+    CardActionsAux,
+    Spacing,
+    Divider,
+    Tooltip,
+    Section,
+    SectionHeader,
+    TitlePage,
+    TitleMainsection,
+    TitleSubsection,
+    Accordion,
+    AccordionItem,
+    Toolbar,
+    ToolbarSection,
+    Tag,
+    TagList,
+    Pagination,
+    Notification,
+    Link,
+    Spinner,
+    PropertyName,
+    PropertyValue,
+    PropertyValuePair,
+    PropertyValueList,
+    Toast,
+    HelperClasses,
+    Select, // TODO: include as own element
+    AutoCompleteField,
+    ProgressBar,
+    Iframe,
+    IframeModal,
+    Utilities
+};
+
+export * from "./cmem";
+export * from "./extensions/react-flow";

package/src/legacy-replacements/Button/AffirmativeButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonReplacement } from "./Button";
+
+export function AffirmativeButtonReplacement ({
+    children,
+    ...otherProps
+}: any) {
+    return (
+        <ButtonReplacement
+            {...otherProps}
+            affirmative={true}
+        >
+            {children}
+        </ButtonReplacement>
+    );
+}

package/src/legacy-replacements/Button/Button.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Button from "../../components/Button/Button";
+
+export const iconMappings: {[key: string]: any } = {
+    "edit": "item-edit",
+    "delete": "item-remove",
+    "expand_more": "toggler-showmore",
+    "expand_less": "toggler-showless",
+    "arrow_nextpage": "navigation-forth",
+    "arrow_back": "navigation-back"
+};
+
+export function ButtonReplacement ({
+    children,
+    className,
+    fabSize,
+    iconName,
+    tooltip,
+    progress,
+    disabled = false,
+    affirmative = false,
+    dismissive = true,
+    disruptive = false,
+    raised = false,
+    colored = false,
+    ...otherProps
+}: any) {
+    if (process.env.NODE_ENV === 'development') {
+        const debugMsg = ["This button element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Button)."];
+        if (typeof otherProps.accent !== "undefined") {
+            debugMsg.push("Button 'accent' property is not supported on legacy replacement element.");
+            delete otherProps.accent;
+        }
+        if (typeof otherProps.badge !== "undefined") {
+            debugMsg.push("Button 'badge' property is not supported on legacy replacement element.");
+            delete otherProps.badge;
+        }
+        if (typeof otherProps.ripple !== "undefined") {
+            debugMsg.push("Button 'ripple' property is not supported on legacy replacement element.");
+            delete otherProps.ripple;
+        }
+        if (typeof progress !== "undefined") {
+            debugMsg.push("Button 'progress' property is not fully supported on legacy replacement element, it only shows a loading spinner in the button.");
+        }
+        debugMsg.forEach(element => console.debug(element));
+    }
+    if (typeof otherProps.accent !== "undefined") {
+        delete otherProps.accent;
+    }
+    if (typeof otherProps.badge !== "undefined") {
+        delete otherProps.badge;
+    }
+    if (typeof otherProps.ripple !== "undefined") {
+        delete otherProps.ripple;
+    }
+    return (
+        <Button
+            {...otherProps}
+            className={className}
+            minimal={!!iconName && raised === false ? true : false}
+            icon={iconName ? (iconName && iconMappings[iconName] ? iconMappings[iconName] : iconName) : undefined}
+            tooltip={!!tooltip ? tooltip : false}
+            disabled={disabled}
+            affirmative={affirmative}
+            disruptive={disruptive}
+            hasStatePrimary={ !!fabSize || colored || !dismissive}
+            large={!!fabSize && fabSize !== "mini"}
+            loading={!!progress ? true : false}
+        >
+            {children}
+        </Button>
+    );
+}

package/src/legacy-replacements/Button/DismissiveButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonReplacement } from "./Button";
+
+export function DismissiveButtonReplacement ({
+    children,
+    ...otherProps
+}: any) {
+    return (
+        <ButtonReplacement
+            {...otherProps}
+            dismissive={true}
+        >
+            {children}
+        </ButtonReplacement>
+    );
+}

package/src/legacy-replacements/Button/DisruptiveButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonReplacement } from "./Button";
+
+export function DisruptiveButtonReplacement ({
+    children,
+    ...otherProps
+}: any) {
+    return (
+        <ButtonReplacement
+            {...otherProps}
+            disruptive={true}
+        >
+            {children}
+        </ButtonReplacement>
+    );
+}