carbon-react 144.15.0 → 144.17.0

package/esm/components/button/button.component.js

@@ -9,6 +9,8 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -82,6 +84,10 @@ const Button = /*#__PURE__*/React.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -12,7 +12,9 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import Logger from "../../../__internal__/utils/logger";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+let deprecatedClassNameWarningShown = false;
 const ButtonToggleGroup = ({
   children,
   fieldHelp,
@@ -38,6 +40,10 @@ const ButtonToggleGroup = ({
   className,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;

package/esm/components/detail/detail.component.js

@@ -4,24 +4,32 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const Detail = ({
   className,
   icon,
   footnote,
   children,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledDetail, _extends({
-  className: `carbon-detail ${className}`
-}, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
-  type: icon,
-  "data-element": "icon"
-}), /*#__PURE__*/React.createElement(StyledDetailContent, {
-  "data-element": "detail-content",
-  hasIcon: !!icon
-}, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
-  "data-element": "footnote",
-  "data-role": "footnote",
-  hasIcon: !!icon
-}, footnote));
+}) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Detail' component.");
+    deprecatedClassNameWarningShown = true;
+  }
+  return /*#__PURE__*/React.createElement(StyledDetail, _extends({
+    className: `carbon-detail ${className}`
+  }, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
+    type: icon,
+    "data-element": "icon"
+  }), /*#__PURE__*/React.createElement(StyledDetailContent, {
+    "data-element": "detail-content",
+    hasIcon: !!icon
+  }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
+    "data-element": "footnote",
+    "data-role": "footnote",
+    hasIcon: !!icon
+  }, footnote));
+};
 Detail.displayName = "Detail";
 export default Detail;

package/esm/components/dialog/dialog.component.js

@@ -5,6 +5,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import Logger from "../../__internal__/utils/logger";
 import { StyledDialog, StyledDialogTitle, StyledDialogContent, DialogPositioner } from "./dialog.style";
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
@@ -12,6 +13,7 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let deprecatedClassNameWarningShown = false;
 const Dialog = /*#__PURE__*/forwardRef(({
   className,
   "data-component": dataComponent = "dialog",
@@ -40,6 +42,10 @@ const Dialog = /*#__PURE__*/forwardRef(({
   closeButtonDataProps,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Dialog' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const locale = useLocale();
   const containerRef = useRef(null);
   const titleRef = useRef(null);

package/esm/components/help/help.component.js

@@ -8,6 +8,8 @@ import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import guid from "../../__internal__/utils/helpers/guid";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Help = ({
   as,
   ariaLabel = "help",
@@ -25,6 +27,10 @@ const Help = ({
   type = "help",
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Help' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const defaultTooltipId = useRef(guid());
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -6,6 +6,8 @@ import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from ".
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -30,6 +32,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'InlineInputs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   const ref = useRef(null);
   let inlineLabel = labelInline;

package/esm/components/link/link.component.js

@@ -7,6 +7,8 @@ import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Link = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -29,6 +31,10 @@ const Link = /*#__PURE__*/React.forwardRef(({
   removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Link' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [hasFocus, setHasFocus] = useState(false);
   const l = useLocale();
   const {

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -63,8 +63,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     icon: IconType;
     children?: React.ReactNode;
 }
-export declare const MenuItem: {
-    ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
-    displayName: string;
-};
+export declare const MenuItem: ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
 export default MenuItem;

package/esm/components/menu/menu-item/menu-item.component.js

@@ -8,8 +8,11 @@ import Events from "../../../__internal__/utils/helpers/events";
 import MenuContext from "../__internal__/menu.context";
 import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
+import MenuSegmentContext from "../menu-segment-title/menu-segment-title.context";
 import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const MenuItem = ({
   submenu,
   submenuMaxWidth,
@@ -35,9 +38,17 @@ export const MenuItem = ({
   "data-role": dataRole,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'MenuItem' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not pass `children` when `submenu` is an empty string") : invariant(false) : void 0;
+  const {
+    isChildOfSegment,
+    overriddenVariant
+  } = useContext(MenuSegmentContext);
   const {
     inFullscreenView,
     registerItem,
@@ -124,6 +135,9 @@ export const MenuItem = ({
     overrideColor,
     ref
   };
+  if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
+    elementProps.overrideColor = true;
+  }
   const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -187,5 +201,4 @@ export const MenuItem = ({
     inSubmenu: !!handleSubmenuKeyDown
   }), children));
 };
-MenuItem.displayName = "MenuItem";
 export default MenuItem;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1,11 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import { StyledTitle, StyledSegmentChildren } from "./menu-segment-title.style";
 import MenuContext from "../__internal__/menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
+import MenuSegmentContext from "./menu-segment-title.context";
 const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"];
 const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   children,
@@ -18,6 +19,10 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   const {
     submenuHasMaxWidth
   } = useContext(SubmenuContext);
+  const isChildOfFullscreenMenu = menuContext?.inFullscreenView || false;
+  const overriddenVariant = useMemo(() => {
+    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuContext.menuType) ? "default" : variant;
+  }, [isChildOfFullscreenMenu, menuContext.menuType, variant]);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/React.createElement(StyledTitle, _extends({
@@ -25,11 +30,18 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   }, tagComponent("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
-    variant: variant,
+    variant: overriddenVariant,
     shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/React.createElement(StyledSegmentChildren, {
-    "data-role": "menu-segment-children"
-  }, children));
+    "data-role": "menu-segment-children",
+    menuType: menuContext.menuType,
+    variant: overriddenVariant
+  }, /*#__PURE__*/React.createElement(MenuSegmentContext.Provider, {
+    value: {
+      isChildOfSegment: true,
+      overriddenVariant
+    }
+  }, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   MenuSegmentTitle.propTypes = {

package/esm/components/menu/menu-segment-title/menu-segment-title.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface MenuSegmentContextProps {
+    isChildOfSegment: boolean;
+    overriddenVariant: string;
+}
+export declare const MenuSegmentContext: React.Context<MenuSegmentContextProps>;
+export default MenuSegmentContext;

package/esm/components/menu/menu-segment-title/menu-segment-title.context.js

@@ -0,0 +1,6 @@
+import React from "react";
+export const MenuSegmentContext = /*#__PURE__*/React.createContext({
+  isChildOfSegment: false,
+  overriddenVariant: "default"
+});
+export default MenuSegmentContext;

package/esm/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -6,5 +6,8 @@ interface StyledTitleProps {
     shouldWrap?: boolean;
 }
 declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
-declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {
+    variant?: VariantType | undefined;
+    menuType: MenuType;
+}, never>;
 export { StyledTitle, StyledSegmentChildren };

package/esm/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -19,17 +19,25 @@ const StyledTitle = styled.h2`
   `}
 `;
 const StyledSegmentChildren = styled.ul`
-  padding: 0;
+  ${({
+  menuType,
+  variant
+}) => css`
+    padding: 0;
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+      ${variant === "alternate" && css`
+        background-color: ${menuConfigVariants[menuType].alternate};
+      `}
 
-    &:not(&:last-child) a,
-    &:not(&:last-child) button,
-    &:not(&:last-child) > span,
-    &:not(&:last-child) > div {
-      border-radius: var(--borderRadius000);
+      &:not(&:last-child) a,
+      &:not(&:last-child) button,
+      &:not(&:last-child) > span,
+      &:not(&:last-child) > div {
+        border-radius: var(--borderRadius000);
+      }
     }
-  }
+  `}
 `;
 export { StyledTitle, StyledSegmentChildren };

package/esm/components/message/message.component.js

@@ -10,6 +10,8 @@ import Icon from "../icon";
 import IconButton from "../icon-button";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Message = /*#__PURE__*/React.forwardRef(({
   open = true,
   transparent = false,
@@ -23,6 +25,10 @@ const Message = /*#__PURE__*/React.forwardRef(({
   showCloseIcon = true,
   ...props
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Message' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const messageRef = useRef(null);
   const refToPass = ref || messageRef;
   const marginProps = filterStyledSystemMarginProps(props);

package/esm/components/modal/modal.component.js

@@ -8,6 +8,8 @@ import Events from "../../__internal__/utils/helpers/events";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 import ModalContext from "./__internal__/modal.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Modal = ({
   children,
   "data-element": dataElement,
@@ -21,6 +23,10 @@ const Modal = ({
   topModalOverride,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Modal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const ref = useRef(null);
   const backgroundNodeRef = useRef(null);
   const contentNodeRef = useRef(null);

package/esm/components/pod/pod.component.js

@@ -2,9 +2,11 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
 import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
+let deprecatedClassNameWarningShown = false;
 const Pod = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -28,6 +30,10 @@ const Pod = /*#__PURE__*/React.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Pod' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [isEditFocused, setEditFocused] = useState(false);
   const [isEditHovered, setEditHovered] = useState(false);
   const [isDeleteFocused, setDeleteFocused] = useState(false);

package/esm/components/portal/portal.js

@@ -5,6 +5,8 @@ import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import StyledPortalEntrance from "./portal.style";
 import PortalContext from "./__internal__/portal.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Container = styled.div`
   ${({
   theme
@@ -22,6 +24,10 @@ export const Portal = ({
   onReposition,
   inertOptOut
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Portal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
   const {

package/esm/components/profile/profile.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle } from "./profile.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 function acronymize(str) {
   if (!str) return "";
   const matches = str.match(/\b\w/g);
@@ -23,6 +25,10 @@ export const Profile = ({
   darkBackground,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Profile' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const getInitials = () => {
     if (initials) return initials;
     return acronymize(name).slice(0, 3).toUpperCase();

package/esm/components/settings-row/settings-row.component.js

@@ -4,7 +4,9 @@ import PropTypes from "prop-types";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
 import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
+let deprecatedClassNameWarningShown = false;
 export const SettingsRow = ({
   title,
   headingType = "h3",
@@ -14,6 +16,10 @@ export const SettingsRow = ({
   className,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SettingsRow' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/React.createElement(Heading, {

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -4,7 +4,13 @@ import PropTypes from "prop-types";
 import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { StyledSimpleColor, StyledColorSampleBox, StyledTickIcon, StyledSimpleColorInput } from "./simple-color.style";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (!deprecatedClassNameWarningShown && props.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SimpleColor' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     onChange,
     onBlur,

package/esm/components/tabs/tab/tab.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import StyledTab from "./tab.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import TabContext from "./__internal__/tab.context";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const Tab = ({
   ariaLabelledby,
   className,
@@ -24,6 +26,10 @@ export const Tab = ({
   titleProps,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tab' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [tabErrors, setTabErrors] = useState({});
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});

package/esm/components/tabs/tabs.component.js

@@ -8,6 +8,8 @@ import StyledTabs from "./tabs.style";
 import TabsHeader from "./__internal__/tabs-header";
 import TabTitle from "./__internal__/tab-title";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Tabs = ({
   align = "left",
   className,
@@ -25,6 +27,10 @@ const Tabs = ({
   showValidationsSummary,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tabs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   if (position !== "left" && headerWidth !== undefined) {
     // eslint-disable-next-line no-console
     console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");

package/esm/components/tile-select/tile-select.component.js

@@ -7,8 +7,10 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Button from "../button";
 import Box from "../box";
 import Accordion from "./__internal__/accordion";
+import Logger from "../../__internal__/utils/logger";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+let deprecatedClassNameWarningShown = false;
 const checkPropTypeIsNode = prop => typeof prop !== "string";
 const TileSelect = /*#__PURE__*/React.forwardRef(({
   onChange,
@@ -35,6 +37,10 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   accordionExpanded,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'TileSelect' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
   const handleDeselect = () => onChange?.({

package/esm/components/toast/toast.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
+import Logger from "../../__internal__/utils/logger";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledToast, TypeIcon, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
@@ -11,6 +12,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import guid from "../../__internal__/utils/helpers/guid";
 import Typography from "../typography";
+let deprecatedClassNameWarningShown = false;
 const Toast = /*#__PURE__*/React.forwardRef(({
   align = "center",
   alignY,
@@ -27,6 +29,10 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   closeButtonDataProps,
   ...restProps
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Toast' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const isNotice = variant === "notice";
   const isNotification = variant === "notification";
   const locale = useLocale();

package/esm/components/typography/typography.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
@@ -34,6 +36,10 @@ export const Typography = ({
   "aria-hidden": ariaHidden,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Typography' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
     variant: variant,
     as: as,

package/lib/components/button/button.component.js

@@ -14,10 +14,12 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _buttonBar = _interopRequireDefault(require("../button-bar/__internal__/button-bar.context"));
 var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 var _batchSelection = _interopRequireDefault(require("../batch-selection/__internal__/batch-selection.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -91,6 +93,10 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,