carbon-react 125.9.3 → 125.11.0

package/esm/style/design-tokens/debug-theme.util.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
         colorsActionMinor500: string;
         colorsActionMinor550: string;
         colorsActionMinor600: string;
+        colorsActionMinor700: string;
         colorsActionMinor850: string;
         colorsActionMinor900: string;
         colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
         colorsActionMinorYin065: string;
         colorsActionMinorYin090: string;
         colorsActionMinorYang100: string;
+        colorsActionMinorGray700: string;
         colorsActionDisabled400: string;
         colorsActionDisabled500: string;
         colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
         colorsSemanticFocus250: string;
         colorsSemanticFocus500: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive400: string;
         colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
         colorsReadOnly500: string;
         colorsReadOnly600: string;
         colorsComponentsLeftnavWinterStandardBackground: string;
+        colorsComponentsLeftnavWinterStandardBackgroundChild: string;
+        colorsComponentsLeftnavWinterStandardDividerOnDark: string;
         colorsComponentsLeftnavWinterStandardHover: string;
         colorsComponentsLeftnavWinterStandardSelected: string;
         colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
         sizing450: string;
         sizing500: string;
         sizing525: string;
+        sizing550: string;
         sizing600: string;
         sizing700: string;
         sizing800: string;
         sizing900: string;
         sizing1000: string;
+        sizing1100: string;
         sizing1200: string;
         sizing1300: string;
+        sizing1500: string;
         sizing1600: string;
+        sizing2000: string;
+        sizing2500: string;
+        sizing3000: string;
+        sizing7000: string;
         sizing010: string;
         sizing025: string;
         sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
         spacing000: string;
         spacing010: string;
         spacing025: string;
+        spacing035: string;
         spacing050: string;
         spacing060: string;
         spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
         spacingNeg025: string;
         spacingNeg050: string;
         spacingNeg075: string;
+        spacingNeg100: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
         typographyLinkTextFocusS: string;
         typographyLinkTextFocusM: string;
         typographyLinkTextFocusL: string;
+        typographyLoaderMessageXs: string;
+        typographyLoaderMessageS: string;
+        typographyLoaderMessageM: string;
+        typographyLoaderMessageL: string;
+        typographyLoaderMessageXl: string;
         typographyMenuLabelM: string;
         typographyMenuLabelL: string;
         typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyNoteEditorNameM: string;
+        typographyNoteDateM: string;
+        typographyNoteParagraphM: string;
+        typographyNoteParagraphListM: string;
+        typographyNoteTitleM: string;
         typographyPageStateTitleM: string;
         typographyPageStateSubtitleM: string;
         typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
         typographyTileSubscriptionPriceM: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
-        typographyNoteEditorNameM: string;
-        typographyNoteDateM: string;
-        typographyNoteParagraphM: string;
-        typographyNoteParagraphListM: string;
-        typographyNoteTitleM: string;
         opacity300: string;
         opacity600: string;
         opacity800: string;

package/esm/style/themes/sage/index.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
         colorsActionMinor500: string;
         colorsActionMinor550: string;
         colorsActionMinor600: string;
+        colorsActionMinor700: string;
         colorsActionMinor850: string;
         colorsActionMinor900: string;
         colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
         colorsActionMinorYin065: string;
         colorsActionMinorYin090: string;
         colorsActionMinorYang100: string;
+        colorsActionMinorGray700: string;
         colorsActionDisabled400: string;
         colorsActionDisabled500: string;
         colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
         colorsSemanticFocus250: string;
         colorsSemanticFocus500: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive400: string;
         colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
         colorsReadOnly500: string;
         colorsReadOnly600: string;
         colorsComponentsLeftnavWinterStandardBackground: string;
+        colorsComponentsLeftnavWinterStandardBackgroundChild: string;
+        colorsComponentsLeftnavWinterStandardDividerOnDark: string;
         colorsComponentsLeftnavWinterStandardHover: string;
         colorsComponentsLeftnavWinterStandardSelected: string;
         colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
         sizing450: string;
         sizing500: string;
         sizing525: string;
+        sizing550: string;
         sizing600: string;
         sizing700: string;
         sizing800: string;
         sizing900: string;
         sizing1000: string;
+        sizing1100: string;
         sizing1200: string;
         sizing1300: string;
+        sizing1500: string;
         sizing1600: string;
+        sizing2000: string;
+        sizing2500: string;
+        sizing3000: string;
+        sizing7000: string;
         sizing010: string;
         sizing025: string;
         sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
         spacing000: string;
         spacing010: string;
         spacing025: string;
+        spacing035: string;
         spacing050: string;
         spacing060: string;
         spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
         spacingNeg025: string;
         spacingNeg050: string;
         spacingNeg075: string;
+        spacingNeg100: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
         typographyLinkTextFocusS: string;
         typographyLinkTextFocusM: string;
         typographyLinkTextFocusL: string;
+        typographyLoaderMessageXs: string;
+        typographyLoaderMessageS: string;
+        typographyLoaderMessageM: string;
+        typographyLoaderMessageL: string;
+        typographyLoaderMessageXl: string;
         typographyMenuLabelM: string;
         typographyMenuLabelL: string;
         typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyNoteEditorNameM: string;
+        typographyNoteDateM: string;
+        typographyNoteParagraphM: string;
+        typographyNoteParagraphListM: string;
+        typographyNoteTitleM: string;
         typographyPageStateTitleM: string;
         typographyPageStateSubtitleM: string;
         typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
         typographyTileSubscriptionPriceM: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
-        typographyNoteEditorNameM: string;
-        typographyNoteDateM: string;
-        typographyNoteParagraphM: string;
-        typographyNoteParagraphListM: string;
-        typographyNoteTitleM: string;
         opacity300: string;
         opacity600: string;
         opacity800: string;

package/lib/components/heading/heading.style.d.ts

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/pill/pill.component.d.ts

@@ -4,7 +4,9 @@ export interface PillProps extends StyledPillProps {
     /** The content to display inside of the pill.  */
     children: string;
     /** Change the color of a status pill. */
-    colorVariant?: "neutral" | "negative" | "positive" | "warning";
+    colorVariant?: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
+    /** Sets the colour styling when a status pill is rendered on a dark background. */
+    isDarkBackground?: boolean;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -22,5 +24,5 @@ export interface PillProps extends StyledPillProps {
     /** @private @ignore title attribute passed down to underlying element */
     title?: string;
 }
-export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
+export declare const Pill: ({ wrapText, borderColor, colorVariant, isDarkBackground, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
 export default Pill;

package/lib/components/pill/pill.component.js

@@ -12,10 +12,12 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+let neutralWhiteWarnTriggered = false;
 const Pill = ({
   wrapText,
   borderColor,
   colorVariant = "neutral",
+  isDarkBackground = false,
   children,
   fill = false,
   maxWidth,
@@ -25,23 +27,31 @@ const Pill = ({
   size = "M",
   ariaLabelOfRemoveButton = "remove pill",
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
-  inFill: fill,
-  colorVariant: colorVariant,
-  isDeletable: !!onDelete,
-  pillRole: pillRole,
-  size: size,
-  borderColor: borderColor,
-  onClick: onClick
-}, (0, _tags.default)("pill", rest), {
-  maxWidth: maxWidth,
-  wrapText: wrapText
-}, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-  onClick: onDelete,
-  "data-element": "close",
-  "aria-label": ariaLabelOfRemoveButton
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "cross"
-})));
+}) => {
+  if (!neutralWhiteWarnTriggered && !isDarkBackground && colorVariant === "neutralWhite" && !fill) {
+    neutralWhiteWarnTriggered = true;
+    // eslint-disable-next-line no-console
+    console.warn("[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " + "Please set the `isDarkBackground` and `fill` props to true or use another color variant.");
+  }
+  return /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
+    inFill: fill,
+    colorVariant: colorVariant,
+    isDarkBackground: isDarkBackground,
+    isDeletable: !!onDelete,
+    pillRole: pillRole,
+    size: size,
+    borderColor: borderColor,
+    onClick: onClick
+  }, (0, _tags.default)("pill", rest), {
+    maxWidth: maxWidth,
+    wrapText: wrapText
+  }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    onClick: onDelete,
+    "data-element": "close",
+    "aria-label": ariaLabelOfRemoveButton
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "cross"
+  })));
+};
 exports.Pill = Pill;
 var _default = exports.default = Pill;

package/lib/components/pill/pill.style.config.d.ts

@@ -9,10 +9,12 @@ interface StyledPillConfig {
         negative: StyledPillInnerConfigProps;
         warning: StyledPillInnerConfigProps;
         positive: StyledPillInnerConfigProps;
+        information: StyledPillInnerConfigProps;
+        neutralWhite: StyledPillInnerConfigProps;
     };
     tag: {
         primary: StyledPillInnerConfigProps;
     };
 }
-declare const _default: () => StyledPillConfig;
+declare const _default: (isDarkBackground: boolean) => StyledPillConfig;
 export default _default;

package/lib/components/pill/pill.style.config.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = () => {
+var _default = isDarkBackground => {
   return {
     status: {
       neutral: {
-        varietyColor: "var(--colorsSemanticNeutral500)",
-        buttonFocus: "var(--colorsSemanticNeutral600)",
-        content: "var(--colorsSemanticNeutralYang100)"
+        varietyColor: isDarkBackground ? "var(--colorsSemanticNeutral400)" : "var(--colorsSemanticNeutral500)",
+        buttonFocus: isDarkBackground ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral600)",
+        content: isDarkBackground ? "var(--colorsSemanticNeutralYin090)" : "var(--colorsSemanticNeutralYang100)"
       },
       negative: {
-        varietyColor: "var(--colorsSemanticNegative500)",
-        buttonFocus: "var(--colorsSemanticNegative600)",
-        content: "var(--colorsSemanticNegativeYang100)"
+        varietyColor: isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)",
+        buttonFocus: isDarkBackground ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNegative600)",
+        content: isDarkBackground ? "var(--colorsSemanticNegativeYin090)" : "var(--colorsSemanticNegativeYang100)"
       },
       warning: {
         varietyColor: "var(--colorsSemanticCaution400)",
@@ -23,9 +23,19 @@ var _default = () => {
         content: "var(--colorsSemanticCautionYin090)"
       },
       positive: {
-        varietyColor: "var(--colorsSemanticPositive500)",
-        buttonFocus: "var(--colorsSemanticPositive600)",
-        content: "var(--colorsSemanticPositiveYang100)"
+        varietyColor: isDarkBackground ? "var(--colorsSemanticPositive400)" : "var(--colorsSemanticPositive500)",
+        buttonFocus: isDarkBackground ? "var(--colorsSemanticPositive500)" : "var(--colorsSemanticPositive600)",
+        content: isDarkBackground ? "var(--colorsSemanticPositiveYin090)" : "var(--colorsSemanticPositiveYang100)"
+      },
+      information: {
+        varietyColor: isDarkBackground ? "var(--colorsSemanticInfo400)" : "var(--colorsSemanticInfo500)",
+        buttonFocus: isDarkBackground ? "var(--colorsSemanticInfo500)" : "var(--colorsSemanticInfo600)",
+        content: isDarkBackground ? "var(--colorsSemanticInfoYin090)" : "var(--colorsSemanticInfoYang100)"
+      },
+      neutralWhite: {
+        varietyColor: "var(--colorsSemanticNeutralYang100)",
+        buttonFocus: "var(--colorsSemanticNeutralYin030)",
+        content: "var(--colorsSemanticNeutral500)"
       }
     },
     tag: {

package/lib/components/pill/pill.style.d.ts

@@ -15,7 +15,8 @@ export interface StyledPillProps extends MarginProps {
 interface AllStyledPillProps extends StyledPillProps {
     inFill?: boolean;
     isDeletable: boolean;
-    colorVariant: "neutral" | "negative" | "positive" | "warning";
+    isDarkBackground: boolean;
+    colorVariant: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
     pillRole: "tag" | "status";
 }
 declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;

package/lib/components/pill/pill.style.js

@@ -30,6 +30,7 @@ const StyledPill = _styledComponents.default.span`
   wrapText,
   borderColor,
   colorVariant,
+  isDarkBackground,
   isDeletable,
   inFill,
   maxWidth,
@@ -50,7 +51,7 @@ const StyledPill = _styledComponents.default.span`
       const {
         status,
         tag
-      } = (0, _pillStyle.default)();
+      } = (0, _pillStyle.default)(isDarkBackground);
       const {
         varietyColor,
         buttonFocus,
@@ -92,7 +93,7 @@ const StyledPill = _styledComponents.default.span`
       `}
 
       ${!inFill && (0, _styledComponents.css)`
-        color: var(--colorsUtilityYin090);
+        color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
       `}
 
       ${size === "S" && (0, _styledComponents.css)`
@@ -213,7 +214,7 @@ const StyledPill = _styledComponents.default.span`
 
           ${!inFill && (0, _styledComponents.css)`
             ${_icon.default} {
-              color: var(--colorsUtilityYin090);
+              color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
             }
           `}
         }

package/lib/components/step-flow/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepFlow } from "./step-flow.component";
+export type { StepFlowProps } from "./step-flow.component";

package/lib/components/step-flow/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StepFlow", {
+  enumerable: true,
+  get: function () {
+    return _stepFlow.default;
+  }
+});
+var _stepFlow = _interopRequireDefault(require("./step-flow.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/step-flow/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/step-flow/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/step-flow/step-flow.component.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface StepFlowProps extends MarginProps, TagProps {
+    /** A category for the user journey.  */
+    category?: string;
+    /** The title of the current step.  */
+    title: string;
+    /** Set the variant of the internal 'Typography' component which contains the title.
+     * However, despite the chosen variant the styling will always be overridden.
+     */
+    titleVariant?: "h1" | "h2";
+    /** The total steps in the user journey.  */
+    totalSteps: Steps;
+    /**
+     * The current step of the user journey. If the set `currentStep` is higher than
+     * `totalSteps`the value of `currentStep` will be that of `totalSteps` instead.
+     */
+    currentStep: Steps;
+    /** Determines if the progress indicator is shown. */
+    showProgressIndicator?: boolean;
+    /** Determines if the close icon button is shown */
+    showCloseIcon?: boolean;
+    /** function runs when user click dismiss button */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare type StepFlowHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const StepFlow: React.ForwardRefExoticComponent<StepFlowProps & React.RefAttributes<StepFlowHandle>>;
+export default StepFlow;