carbon-react 120.1.0 → 120.2.1

package/esm/__spec_helper__/test-utils.js

@@ -105,10 +105,14 @@ export const getDefaultValue = value => {
 };
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = mount(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct margins", () => {
       let margin;
       let marginLeft;
@@ -153,10 +157,14 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 };
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = mount(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct paddings", () => {
       let padding;
       let paddingLeft;

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -75,7 +75,8 @@ Crumb.propTypes = {
   "onClick": PropTypes.func,
   "onKeyDown": PropTypes.func,
   "onMouseDown": PropTypes.func,
-  "placeholderTabIndex": PropTypes.bool
+  "placeholderTabIndex": PropTypes.bool,
+  "removeAriaLabelOnIcon": PropTypes.bool
 };
 Crumb.displayName = "Crumb";
 export default Crumb;

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

@@ -96,8 +96,10 @@ const ButtonToggleGroup = ({
       // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
       // get called with null when the component is about to be unmounted, and it has been unmounted by the time
       // the setTimeout completes
+      /* istanbul ignore else */
       if (button) {
         const innerButtons = getInnerButtons();
+        /* istanbul ignore if */
         if (!innerButtons) {
           setFirstButton(undefined);
         } else if (button === innerButtons[0]) {

package/esm/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, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/link/link.component.d.ts

@@ -28,6 +28,8 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     rel?: string;
     /** @ignore @private internal prop to be set when no href or onClick passed */
     placeholderTabIndex?: boolean;
+    /** @ignore @private internal prop to be set when no aria-label should be specified */
+    removeAriaLabelOnIcon?: boolean;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
 export default Link;

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

@@ -26,6 +26,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
   variant = "default",
   isDarkBackground,
   placeholderTabIndex,
+  removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
   const l = useLocale();
@@ -52,7 +53,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
       type: icon,
       bgSize: "extra-small",
       disabled: disabled,
-      ariaLabel: ariaLabel,
+      ariaLabel: removeAriaLabelOnIcon ? undefined : ariaLabel,
       tooltipMessage: tooltipMessage,
       tooltipPosition: tooltipPosition
     }) : null;
@@ -171,6 +172,7 @@ Link.propTypes = {
   "onMouseDown": PropTypes.func,
   "placeholderTabIndex": PropTypes.bool,
   "rel": PropTypes.string,
+  "removeAriaLabelOnIcon": PropTypes.bool,
   "target": PropTypes.string,
   "tooltipMessage": PropTypes.string,
   "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),

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

@@ -112,6 +112,7 @@ export const MenuItem = ({
     rel,
     onClick,
     icon,
+    removeAriaLabelOnIcon: true,
     selected,
     variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,

package/esm/components/note/note.component.js

@@ -68,7 +68,9 @@ export const Note = ({
   }) : preview), createdDate && /*#__PURE__*/React.createElement(StyledNoteContent, {
     hasPreview: !!React.Children.count(previews),
     hasInlineControl: !!inlineControl
-  }, /*#__PURE__*/React.createElement(StyledFooter, null, name && /*#__PURE__*/React.createElement(StyledFooterContent, {
+  }, /*#__PURE__*/React.createElement(StyledFooter, {
+    "data-element": "note-footer"
+  }, name && /*#__PURE__*/React.createElement(StyledFooterContent, {
     hasName: !!name
   }, name), /*#__PURE__*/React.createElement(StyledFooterContent, {
     hasName: !!name

package/esm/components/portrait/portrait.config.d.ts

@@ -1,32 +1,9 @@
 export declare const PORTRAIT_SHAPES: string[];
-export declare const PORTRAIT_SIZES: string[];
-export declare const PORTRAIT_SIZE_PARAMS: {
-    XS: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    S: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    M: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    ML: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    L: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    XL: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    XXL: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-};
+declare type PortraitSize = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+export declare const PORTRAIT_SIZES: PortraitSize[];
+declare type PortraitSizeParams = Record<PortraitSize, {
+    dimensions: number;
+    iconDimensions: number;
+}>;
+export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
+export {};

package/esm/components/typography/typography.component.d.ts

@@ -44,9 +44,12 @@ export interface TypographyProps extends SpaceProps, TagProps {
     opacity?: string | number;
     /** @private @ignore */
     className?: string;
+    /** Set whether it will be visually hidden
+     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
+    screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

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

@@ -27,6 +27,7 @@ export const Typography = ({
   opacity,
   children,
   className,
+  screenReaderOnly,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
@@ -48,7 +49,8 @@ export const Typography = ({
     backgroundColor: backgroundColor,
     bg: bg,
     opacity: opacity,
-    className: className
+    className: className,
+    screenReaderOnly: screenReaderOnly
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";

package/esm/components/typography/typography.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import styledColor from "../../style/utils/color";
 import baseTheme from "../../style/themes/base";
+import visuallyHidden from "../../style/utils/visually-hidden";
 const getAs = variant => {
   switch (variant) {
     case "h1-large":
@@ -149,7 +150,8 @@ const StyledTypography = styled.span.attrs(({
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
+  truncate,
+  screenReaderOnly
 }) => css`
     font-style: normal;
     font-size: ${size};
@@ -165,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
     ${truncate && css`
       overflow: hidden;
     `};
+    ${screenReaderOnly && visuallyHidden}
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};

package/lib/__spec_helper__/test-utils.js

@@ -133,10 +133,14 @@ const getDefaultValue = value => {
 exports.getDefaultValue = getDefaultValue;
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = (0, _enzyme.mount)(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct margins", () => {
       let margin;
       let marginLeft;
@@ -182,10 +186,14 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 exports.testStyledSystemMargin = testStyledSystemMargin;
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = (0, _enzyme.mount)(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct paddings", () => {
       let padding;
       let paddingLeft;

package/lib/components/breadcrumbs/crumb/crumb.component.js

@@ -82,7 +82,8 @@ Crumb.propTypes = {
   "onClick": _propTypes.default.func,
   "onKeyDown": _propTypes.default.func,
   "onMouseDown": _propTypes.default.func,
-  "placeholderTabIndex": _propTypes.default.bool
+  "placeholderTabIndex": _propTypes.default.bool,
+  "removeAriaLabelOnIcon": _propTypes.default.bool
 };
 Crumb.displayName = "Crumb";
 var _default = Crumb;

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

@@ -106,8 +106,10 @@ const ButtonToggleGroup = ({
       // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
       // get called with null when the component is about to be unmounted, and it has been unmounted by the time
       // the setTimeout completes
+      /* istanbul ignore else */
       if (button) {
         const innerButtons = getInnerButtons();
+        /* istanbul ignore if */
         if (!innerButtons) {
           setFirstButton(undefined);
         } else if (button === innerButtons[0]) {

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, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...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/link/link.component.d.ts

@@ -28,6 +28,8 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     rel?: string;
     /** @ignore @private internal prop to be set when no href or onClick passed */
     placeholderTabIndex?: boolean;
+    /** @ignore @private internal prop to be set when no aria-label should be specified */
+    removeAriaLabelOnIcon?: boolean;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
 export default Link;

package/lib/components/link/link.component.js

@@ -35,6 +35,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   variant = "default",
   isDarkBackground,
   placeholderTabIndex,
+  removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
@@ -61,7 +62,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
       type: icon,
       bgSize: "extra-small",
       disabled: disabled,
-      ariaLabel: ariaLabel,
+      ariaLabel: removeAriaLabelOnIcon ? undefined : ariaLabel,
       tooltipMessage: tooltipMessage,
       tooltipPosition: tooltipPosition
     }) : null;
@@ -181,6 +182,7 @@ Link.propTypes = {
   "onMouseDown": _propTypes.default.func,
   "placeholderTabIndex": _propTypes.default.bool,
   "rel": _propTypes.default.string,
+  "removeAriaLabelOnIcon": _propTypes.default.bool,
   "target": _propTypes.default.string,
   "tooltipMessage": _propTypes.default.string,
   "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),

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

@@ -121,6 +121,7 @@ const MenuItem = ({
     rel,
     onClick,
     icon,
+    removeAriaLabelOnIcon: true,
     selected,
     variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,

package/lib/components/note/note.component.js

@@ -75,7 +75,9 @@ const Note = ({
   }) : preview), createdDate && /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, {
     hasPreview: !!_react.default.Children.count(previews),
     hasInlineControl: !!inlineControl
-  }, /*#__PURE__*/_react.default.createElement(_note.StyledFooter, null, name && /*#__PURE__*/_react.default.createElement(_note.StyledFooterContent, {
+  }, /*#__PURE__*/_react.default.createElement(_note.StyledFooter, {
+    "data-element": "note-footer"
+  }, name && /*#__PURE__*/_react.default.createElement(_note.StyledFooterContent, {
     hasName: !!name
   }, name), /*#__PURE__*/_react.default.createElement(_note.StyledFooterContent, {
     hasName: !!name

package/lib/components/portrait/portrait.config.d.ts

@@ -1,32 +1,9 @@
 export declare const PORTRAIT_SHAPES: string[];
-export declare const PORTRAIT_SIZES: string[];
-export declare const PORTRAIT_SIZE_PARAMS: {
-    XS: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    S: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    M: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    ML: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    L: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    XL: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-    XXL: {
-        dimensions: number;
-        iconDimensions: number;
-    };
-};
+declare type PortraitSize = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+export declare const PORTRAIT_SIZES: PortraitSize[];
+declare type PortraitSizeParams = Record<PortraitSize, {
+    dimensions: number;
+    iconDimensions: number;
+}>;
+export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
+export {};

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

@@ -44,9 +44,12 @@ export interface TypographyProps extends SpaceProps, TagProps {
     opacity?: string | number;
     /** @private @ignore */
     className?: string;
+    /** Set whether it will be visually hidden
+     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
+    screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -34,6 +34,7 @@ const Typography = ({
   opacity,
   children,
   className,
+  screenReaderOnly,
   ...rest
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
@@ -55,7 +56,8 @@ const Typography = ({
     backgroundColor: backgroundColor,
     bg: bg,
     opacity: opacity,
-    className: className
+    className: className,
+    screenReaderOnly: screenReaderOnly
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
 };
 exports.Typography = Typography;

package/lib/components/typography/typography.style.js

@@ -8,6 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -158,7 +159,8 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
+  truncate,
+  screenReaderOnly
 }) => (0, _styledComponents.css)`
     font-style: normal;
     font-size: ${size};
@@ -174,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     ${truncate && (0, _styledComponents.css)`
       overflow: hidden;
     `};
+    ${screenReaderOnly && _visuallyHidden.default}
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "120.1.0",
+  "version": "120.2.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -38,7 +38,8 @@
     "prepare": "husky install",
     "test:ct": "playwright test -c playwright-ct.config.ts",
     "test:ct:ui": "playwright test --ui -c playwright-ct.config.ts",
-    "test:ct:report": "npx playwright show-report"
+    "test:ct:report": "npx playwright show-report",
+    "clear-playwright-cache": "rimraf ./playwright/.cache"
   },
   "repository": {
     "type": "git",