@carbon/ibm-products 2.25.0 → 2.27.0

package/scss/components/Tearsheet/_tearsheet.scss

@@ -93,6 +93,22 @@ $motion-duration: $duration-moderate-02;
     transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container {
+    border: 1px solid transparent;
+    /* override carbon ai removing background gradient */
+    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
+        padding-box,
+      linear-gradient(
+          to bottom,
+          var(--cds-ai-border-start, #78a9ff),
+          var(--cds-ai-border-end, #d0e2ff)
+        )
+        border-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    box-shadow: 0 4px 10px 2px $ai-drop-shadow;
+  }
+
   // extra specificity to ensure this transition overrides the carbon default
   &.#{$block-class}.#{$block-class} .#{$block-class}__container {
     transition: transform $motion-duration motion(entrance, expressive),
@@ -223,8 +239,14 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide
+    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
+  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
+    padding-right: $spacing-11;
+  }
+
+  &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    padding-right: $spacing-10;
+    margin-right: $spacing-09;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -292,6 +314,10 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
+  &.#{$block-class}--has-slug .#{$block-class}__main {
+    @include utilities.callout-gradient('default', 0);
+  }
+
   &.#{$block-class}--wide .#{$block-class}__content {
     // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
     .#{$carbon-prefix}--pagination,
@@ -320,7 +346,8 @@ $motion-duration: $duration-moderate-02;
     .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
     /* stylelint-disable-next-line prettier/prettier */
     .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
+    .#{$carbon-prefix}--date-picker--light
+      .#{$carbon-prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -340,4 +367,9 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide .#{$block-class}__buttons {
     background: $background;
   }
+
+  &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug {
+    inset-inline-end: 0;
+  }
 }

package/scss/components/UserAvatar/_user-avatar.scss

@@ -10,6 +10,8 @@
 @use '../../global/styles/mixins';
 @use '@carbon/colors' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -23,7 +25,22 @@
 
 $block-class: #{$pkg-prefix}--user-avatar;
 
+$sizes: (
+  xl: $spacing-10,
+  lg: $spacing-09,
+  md: $spacing-07,
+  sm: $spacing-06,
+);
+
+@mixin size($size) {
+  $_size: map-get($sizes, $size);
+
+  width: $_size;
+  height: $_size;
+}
+
 .#{$block-class} {
+  position: relative;
   display: flex;
   width: 4rem;
   height: 4rem;
@@ -31,20 +48,27 @@ $block-class: #{$pkg-prefix}--user-avatar;
   justify-content: center;
   border: 0.5px solid transparent;
   border-radius: 100%;
+  color: $text-inverse;
   outline: none;
   outline-offset: 3px;
 }
 
-@mixin setBgColor($color) {
-  // stylelint-disable-next-line carbon/theme-token-use
-  background-color: $color;
+.#{$block-class} svg {
+  color: $icon-inverse;
+}
 
-  &:focus {
+.#{$block-class}__tooltip {
+  &:focus-within .#{$block-class} {
     // stylelint-disable-next-line carbon/theme-token-use
     outline: 2px solid $focus;
   }
 }
 
+@mixin setBgColor($color) {
+  // stylelint-disable-next-line carbon/theme-token-use
+  background-color: $color;
+}
+
 .#{$block-class}--light-cyan {
   @include setBgColor($cyan-50);
 }
@@ -52,3 +76,22 @@ $block-class: #{$pkg-prefix}--user-avatar;
 .#{$block-class}--dark-cyan {
   @include setBgColor($cyan-60);
 }
+.#{$block-class}--xl {
+  @include size('xl');
+  @include type.type-style('heading-04');
+}
+
+.#{$block-class}--lg {
+  @include size('lg');
+  @include type.type-style('heading-03');
+}
+
+.#{$block-class}--md {
+  @include size('md');
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class}--sm {
+  @include size('sm');
+  @include type.type-style('label-01');
+}

package/scss/components/_index-with-carbon.scss

@@ -47,6 +47,7 @@
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;
 @use './SimpleHeader/index-with-carbon' as *;
+@use './BigNumbers/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
 @use './InterstitialScreenView/index-with-carbon' as *;
@@ -61,4 +62,5 @@
 @use './DelimitedList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;
+@use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -62,6 +62,7 @@
 @use './Guidebanner';
 @use './InlineTip';
 @use './NonLinearReading';
+@use './BigNumbers';
 @use './TruncatedList';
 @use './InterstitialScreen';
 @use './InterstitialScreenView';
@@ -69,4 +70,5 @@
 @use './DelimitedList';
 @use './FullPageError';
 @use './SearchBar';
+@use './StringFormatter';
 @use './UserAvatar';

package/es/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.d.ts

@@ -1,2 +0,0 @@
-export const ColumnHeaderSlug: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';

package/es/node_modules/@carbon/icon-helpers/es/index.js

@@ -1,140 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { typeof as _typeof } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-var _excluded = ["width", "height", "viewBox"],
-  _excluded2 = ["tabindex"];
-/**
- * Copyright IBM Corp. 2018, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var defaultAttributes = {
-  // Reference:
-  // https://github.com/IBM/carbon-components-react/issues/1392
-  // https://github.com/PolymerElements/iron-iconset-svg/pull/47
-  // `focusable` is a string attribute which is why we do not use a boolean here
-  focusable: 'false',
-  preserveAspectRatio: 'xMidYMid meet'
-};
-
-/**
- * Get supplementary HTML attributes for a given <svg> element based on existing
- * attributes.
- */
-function getAttributes() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    width = _ref.width,
-    height = _ref.height,
-    _ref$viewBox = _ref.viewBox,
-    viewBox = _ref$viewBox === void 0 ? "0 0 ".concat(width, " ").concat(height) : _ref$viewBox,
-    attributes = _objectWithoutProperties(_ref, _excluded);
-  var tabindex = attributes.tabindex,
-    rest = _objectWithoutProperties(attributes, _excluded2);
-  var iconAttributes = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultAttributes), rest), {}, {
-    width: width,
-    height: height,
-    viewBox: viewBox
-  });
-
-  // TODO: attributes.title assumes that the consumer will implement <title> and
-  // correctly set `aria-labelledby`.
-  if (iconAttributes['aria-label'] || iconAttributes['aria-labelledby'] || iconAttributes.title) {
-    iconAttributes.role = 'img';
-
-    // Reference:
-    // https://allyjs.io/tutorials/focusing-in-svg.html
-    if (tabindex !== undefined && tabindex !== null) {
-      iconAttributes.focusable = 'true';
-      iconAttributes.tabindex = tabindex;
-    }
-  } else {
-    iconAttributes['aria-hidden'] = true;
-  }
-  return iconAttributes;
-}
-
-export { defaultAttributes, getAttributes };

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -1,73 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { getAttributes } from '../../icon-helpers/es/index.js';
-import PropTypes from '../../../prop-types/index.js';
-import React__default from 'react';
-
-var _excluded = ["className", "children", "tabIndex", "xmlns", "preserveAspectRatio"],
-  _excluded2 = ["tabindex"];
-
-/**
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    tabIndex = _ref.tabIndex,
-    _ref$xmlns = _ref.xmlns,
-    xmlns = _ref$xmlns === void 0 ? 'http://www.w3.org/2000/svg' : _ref$xmlns,
-    _ref$preserveAspectRa = _ref.preserveAspectRatio,
-    preserveAspectRatio = _ref$preserveAspectRa === void 0 ? 'xMidYMid meet' : _ref$preserveAspectRa,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _getAttributes = getAttributes(_objectSpread2(_objectSpread2({}, rest), {}, {
-      tabindex: tabIndex
-    })),
-    tabindex = _getAttributes.tabindex,
-    attrs = _objectWithoutProperties(_getAttributes, _excluded2);
-  var props = attrs;
-  if (className) {
-    props.className = className;
-  }
-  if (tabindex !== undefined && tabindex !== null) {
-    if (typeof tabindex === 'number') {
-      props.tabIndex = tabindex;
-    } else {
-      props.tabIndex = Number(tabIndex);
-    }
-  }
-  if (ref) {
-    props.ref = ref;
-  }
-  if (xmlns) {
-    props.xmlns = xmlns;
-  }
-  if (preserveAspectRatio) {
-    props.preserveAspectRatio = preserveAspectRatio;
-  }
-  return /*#__PURE__*/React__default.createElement('svg', props, children);
-});
-Icon.displayName = 'Icon';
-Icon.propTypes = {
-  'aria-hidden': PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['true', 'false'])]),
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  preserveAspectRatio: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  viewBox: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xmlns: PropTypes.string
-};
-
-export { Icon as default };