carbon-react 116.0.1 → 116.1.0

package/esm/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -39,5 +39,5 @@ export interface AdvancedColorPickerProps extends MarginProps {
     /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
     selectedColor?: string;
 }
-declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
+export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
 export default AdvancedColorPicker;

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

@@ -322,4 +322,5 @@ AdvancedColorPicker.propTypes = {
   "role": PropTypes.string,
   "selectedColor": PropTypes.string
 };
+export { AdvancedColorPicker };
 export default AdvancedColorPicker;

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

@@ -1,5 +1,7 @@
 import React from "react";
 export interface BadgeProps {
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
     /** The badge will be added to this element */
     children: React.ReactNode;
     /** The number rendered in the badge component */
@@ -7,5 +9,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ children, counter, onClick }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => JSX.Element;
 export default Badge;

package/esm/components/badge/badge.component.js

@@ -1,25 +1,45 @@
+function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
-import { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter } from "./badge.style";
+import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
 
 const Badge = ({
+  "aria-label": ariaLabel,
   children,
   counter = 0,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, counter > 0 && /*#__PURE__*/React.createElement(StyledButton, {
-    "data-component": "badge",
-    buttonType: "secondary",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(StyledCrossIcon, {
-    "data-element": "badge-cross-icon",
-    type: "cross"
-  }), /*#__PURE__*/React.createElement(StyledCounter, {
-    "data-element": "badge-counter"
-  }, counter > 99 ? 99 : counter)), children);
+  const shouldDisplayCounter = counter > 0;
+  const counterToDisplay = counter > 99 ? 99 : counter;
+
+  const renderCorrectBadge = () => {
+    const props = onClick ? {
+      buttonType: "secondary",
+      onClick
+    } : {
+      "aria-label": ariaLabel
+    };
+
+    if (shouldDisplayCounter) {
+      return /*#__PURE__*/React.createElement(StyledBadge, _extends({
+        "data-component": "badge"
+      }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
+        "data-element": "badge-cross-icon",
+        type: "cross"
+      }), /*#__PURE__*/React.createElement(StyledCounter, {
+        "data-element": "badge-counter"
+      }, counterToDisplay));
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, renderCorrectBadge(), children);
 };
 
 Badge.propTypes = {
+  "aria-label": PropTypes.string,
   "children": PropTypes.node,
   "counter": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "onClick": PropTypes.func

package/esm/components/badge/badge.style.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
+    as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
+}, "as">;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };
+export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/esm/components/badge/badge.style.js

@@ -1,7 +1,17 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import StyledIcon from "../icon/icon.style";
 import Button from "../button";
 import Icon from "../icon";
+const commonStyles = `
+  overflow: hidden;
+  border-radius: 50%;
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  padding: 0;
+  margin-right: 0;
+  background: var(--colorsActionMajorYang100);
+`;
 const StyledBadgeWrapper = styled.div`
   position: relative;
   display: inline-block;
@@ -11,46 +21,64 @@ const StyledCounter = styled.div`
   font-size: 12px;
   margin-top: -1px;
 `;
-const StyledButton = styled(Button)`
-  padding: 0;
-  width: 22px;
-  min-height: 22px;
-  border-radius: 50%;
-  overflow: hidden;
-  text-align: center;
-  position: absolute;
-  top: -11px;
-  right: -11px;
-  margin-right: 0;
-  background: var(--colorsActionMajorYang100);
+const StyledBadge = styled.span.attrs(({
+  onClick
+}) => ({
+  as: onClick ? Button : undefined
+}))`
+  ${commonStyles}
+  cursor: default;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 18px;
+  min-height: 18px;
+  border: solid 2px transparent;
+  border-color: var(--colorsActionMajor500);
+  color: var(--colorsActionMajor500);
 
   ::-moz-focus-inner {
     border: none;
   }
 
-  &:hover,
-  &:focus {
-    background: var(--colorsActionMajor500);
-    border: none;
-    ${StyledCounter} {
-      display: none;
-    }
+  ${({
+  onClick
+}) => css`
+    ${onClick && `
+      ${commonStyles}
+      width: 22px;
+      min-height: 22px;
+      text-align: center;
+
+      ::-moz-focus-inner {
+        border: none;
+      }
 
-    ${StyledIcon} {
-      display: block;
-      width: auto;
-      height: auto;
-      margin-right: 0;
+      &:hover,
+      &:focus {
+        background: var(--colorsActionMajor500);
+        border: none;
+        ${StyledCounter} {
+          display: none;
+        }
 
-      :before {
-        font-size: 16px;
-        color: var(--colorsActionMajorYang100);
+        ${StyledIcon} {
+          display: block;
+          width: auto;
+          height: auto;
+          margin-right: 0;
+
+          :before {
+            font-size: 16px;
+            color: var(--colorsActionMajorYang100);
+          }
+        }
       }
-    }
-  }
+    `}
+  `}
 `;
 const StyledCrossIcon = styled(Icon)`
   margin: 0;
   display: none;
 `;
-export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };
+export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/lib/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -39,5 +39,5 @@ export interface AdvancedColorPickerProps extends MarginProps {
     /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
     selectedColor?: string;
 }
-declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
+export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
 export default AdvancedColorPicker;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.AdvancedColorPicker = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -168,6 +168,7 @@ const AdvancedColorPicker = ({
   })))));
 };
 
+exports.AdvancedColorPicker = AdvancedColorPicker;
 AdvancedColorPicker.propTypes = {
   "aria-describedby": _propTypes.default.string,
   "aria-label": _propTypes.default.string,

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

@@ -1,5 +1,7 @@
 import React from "react";
 export interface BadgeProps {
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
     /** The badge will be added to this element */
     children: React.ReactNode;
     /** The number rendered in the badge component */
@@ -7,5 +9,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ children, counter, onClick }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => JSX.Element;
 export default Badge;

package/lib/components/badge/badge.component.js

@@ -13,25 +13,45 @@ var _badge = require("./badge.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || 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); }
+
 const Badge = ({
+  "aria-label": ariaLabel,
   children,
   counter = 0,
   onClick
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_badge.StyledBadgeWrapper, null, counter > 0 && /*#__PURE__*/_react.default.createElement(_badge.StyledButton, {
-    "data-component": "badge",
-    buttonType: "secondary",
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
-    "data-element": "badge-cross-icon",
-    type: "cross"
-  }), /*#__PURE__*/_react.default.createElement(_badge.StyledCounter, {
-    "data-element": "badge-counter"
-  }, counter > 99 ? 99 : counter)), children);
+  const shouldDisplayCounter = counter > 0;
+  const counterToDisplay = counter > 99 ? 99 : counter;
+
+  const renderCorrectBadge = () => {
+    const props = onClick ? {
+      buttonType: "secondary",
+      onClick
+    } : {
+      "aria-label": ariaLabel
+    };
+
+    if (shouldDisplayCounter) {
+      return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
+        "data-component": "badge"
+      }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
+        "data-element": "badge-cross-icon",
+        type: "cross"
+      }), /*#__PURE__*/_react.default.createElement(_badge.StyledCounter, {
+        "data-element": "badge-counter"
+      }, counterToDisplay));
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_badge.StyledBadgeWrapper, null, renderCorrectBadge(), children);
 };
 
 exports.Badge = Badge;
 Badge.propTypes = {
+  "aria-label": _propTypes.default.string,
   "children": _propTypes.default.node,
   "counter": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "onClick": _propTypes.default.func

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
+    as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
+}, "as">;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };
+export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/lib/components/badge/badge.style.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCounter = exports.StyledCrossIcon = exports.StyledButton = exports.StyledBadgeWrapper = void 0;
+exports.StyledCounter = exports.StyledCrossIcon = exports.StyledBadgeWrapper = exports.StyledBadge = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
@@ -15,6 +15,20 @@ var _icon2 = _interopRequireDefault(require("../icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+const commonStyles = `
+  overflow: hidden;
+  border-radius: 50%;
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  padding: 0;
+  margin-right: 0;
+  background: var(--colorsActionMajorYang100);
+`;
 const StyledBadgeWrapper = _styledComponents.default.div`
   position: relative;
   display: inline-block;
@@ -26,45 +40,63 @@ const StyledCounter = _styledComponents.default.div`
   margin-top: -1px;
 `;
 exports.StyledCounter = StyledCounter;
-const StyledButton = (0, _styledComponents.default)(_button.default)`
-  padding: 0;
-  width: 22px;
-  min-height: 22px;
-  border-radius: 50%;
-  overflow: hidden;
-  text-align: center;
-  position: absolute;
-  top: -11px;
-  right: -11px;
-  margin-right: 0;
-  background: var(--colorsActionMajorYang100);
+const StyledBadge = _styledComponents.default.span.attrs(({
+  onClick
+}) => ({
+  as: onClick ? _button.default : undefined
+}))`
+  ${commonStyles}
+  cursor: default;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 18px;
+  min-height: 18px;
+  border: solid 2px transparent;
+  border-color: var(--colorsActionMajor500);
+  color: var(--colorsActionMajor500);
 
   ::-moz-focus-inner {
     border: none;
   }
 
-  &:hover,
-  &:focus {
-    background: var(--colorsActionMajor500);
-    border: none;
-    ${StyledCounter} {
-      display: none;
-    }
+  ${({
+  onClick
+}) => (0, _styledComponents.css)`
+    ${onClick && `
+      ${commonStyles}
+      width: 22px;
+      min-height: 22px;
+      text-align: center;
+
+      ::-moz-focus-inner {
+        border: none;
+      }
+
+      &:hover,
+      &:focus {
+        background: var(--colorsActionMajor500);
+        border: none;
+        ${StyledCounter} {
+          display: none;
+        }
 
-    ${_icon.default} {
-      display: block;
-      width: auto;
-      height: auto;
-      margin-right: 0;
+        ${_icon.default} {
+          display: block;
+          width: auto;
+          height: auto;
+          margin-right: 0;
 
-      :before {
-        font-size: 16px;
-        color: var(--colorsActionMajorYang100);
+          :before {
+            font-size: 16px;
+            color: var(--colorsActionMajorYang100);
+          }
+        }
       }
-    }
-  }
+    `}
+  `}
 `;
-exports.StyledButton = StyledButton;
+exports.StyledBadge = StyledBadge;
 const StyledCrossIcon = (0, _styledComponents.default)(_icon2.default)`
   margin: 0;
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "116.0.1",
+  "version": "116.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",