@carbon/ibm-products 1.8.0 → 1.11.0

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -26,6 +26,7 @@
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(-38.5rem); // the height of the notification panel
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);
@@ -37,6 +38,7 @@
       opacity: 1;
       transform: translateY(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -204,6 +206,7 @@
         padding: 0;
         color: $text-01;
         opacity: 0;
+
         &:hover,
         &:focus {
           opacity: 1;

package/scss/components/OptionsTile/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/OptionsTile/_options-tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -12,6 +12,10 @@
 // Other Carbon settings.
 @import 'carbon-components/scss/globals/scss/helper-mixins';
 
+// PageHeader uses the following Carbon components:
+// Toggle
+@import 'carbon-components/scss/components/toggle/toggle';
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin options-tile {
@@ -44,7 +48,7 @@
     box-sizing: border-box;
     align-items: center;
     padding-right: $spacing-05;
-    grid-template-columns: 3rem 1fr 1rem;
+    grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
   }
 
   .#{$block-class}__header {
@@ -53,6 +57,10 @@
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
+  .#{$block-class}__header::-webkit-details-marker {
+    display: none;
+  }
+
   .#{$block-class}__header:hover {
     background-color: $hover-ui;
   }
@@ -61,11 +69,11 @@
     @include focus-outline('outline');
   }
 
-  .#{$block-class}__title {
+  .#{$block-class}__heading {
     grid-column: 2;
   }
 
-  .#{$block-class}__heading {
+  .#{$block-class}__title {
     @include carbon--type-style('productive-heading-01');
 
     color: $text-01;
@@ -88,7 +96,7 @@
   .#{$block-class}__summary--warn,
   .#{$block-class}__summary--locked {
     column-gap: $spacing-02;
-    grid-template-columns: 1rem 1fr;
+    grid-template-columns: 1rem 1fr; // icon, text
   }
 
   .#{$block-class}__summary--invalid {
@@ -110,11 +118,15 @@
   .#{$block-class}__summary-text {
     overflow: hidden;
     height: max-content;
+    // spacing-05 + toggle width
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc(#{$spacing-05} + 2rem);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .#{$block-class}__chevron {
+    display: block;
     justify-self: center;
     transition: transform $duration--fast-02 motion(standard, productive);
   }
@@ -195,18 +207,6 @@
     margin-top: $spacing-01;
   }
 
-  .#{$block-class}--lg .#{$block-class}__summary-text {
-    // spacing-05 + toggle width
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(#{$spacing-05} + 1rem);
-  }
-
-  .#{$block-class}--xl .#{$block-class}__summary-text {
-    // spacing-05 + toggle width
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(#{$spacing-05} + 2rem);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .#{$block-class}__summary,
     .#{$block-class}__chevron {

package/scss/components/OptionsTile/_storybook-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,9 +10,9 @@
 $block-class: #{$pkg-prefix}--options-tile;
 
 .#{$block-class} {
-  width: 70vw;
-  min-width: 32rem;
-  max-width: 64rem;
+  width: 80vw;
+  min-width: 16rem;
+  max-width: 48rem;
 }
 
 .#{$block-class}__content p {

package/scss/components/PageHeader/_page-header.scss

@@ -41,6 +41,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   from {
     background-color: var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
   }
@@ -50,6 +51,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--from-color);
     box-shadow: 0 1px 0 var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
     box-shadow: 0 1px 0 var(--to-color-shadow);
@@ -207,8 +209,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__breadcrumb-row--has-breadcrumbs
       .#{$block-class}__action-bar-column {
       // back button displayed only
-      max-width: $left-section-alt-width;
-      flex: 0 1 $left-section-alt-width;
+      max-width: $right-section-alt-width;
+      flex: 0 1 $right-section-alt-width;
 
       @include carbon--breakpoint(md) {
         max-width: $right-section-std-width;
@@ -251,6 +253,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__breadcrumb-column {
+      overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
       max-width: 100%;
       flex: 0 0 100%;
 

package/scss/components/SidePanel/_side-panel.scss

@@ -31,6 +31,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -45,6 +46,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(-#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -56,8 +58,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   $placement: 'right',
   $size: map-get($side-panel-sizes, md)
 ) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
   @if $placement == right {
     @include sidePanelEntranceRight($size);
   } @else {
@@ -66,8 +68,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
 }
 
 @mixin setDividerStyles() {
@@ -95,6 +97,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -107,6 +110,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -183,6 +187,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       );
       padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
       background-color: $ui-01;
+
       &::before {
         @include setDividerStyles();
       }
@@ -442,14 +447,14 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   }
 
   // form fields should receive correct background color
-  .#{$block-class}__container .bx--text-input,
-  .#{$block-class}__container .bx--text-area,
-  .#{$block-class}__container .bx--search-input,
-  .#{$block-class}__container .bx--select-input,
-  .#{$block-class}__container .bx--dropdown,
-  .#{$block-class}__container .bx--dropdown-list,
-  .#{$block-class}__container .bx--number input[type='number'],
-  .#{$block-class}__container .bx--date-picker__input {
+  .#{$block-class}__container .#{$carbon-prefix}--text-input,
+  .#{$block-class}__container .#{$carbon-prefix}--text-area,
+  .#{$block-class}__container .#{$carbon-prefix}--search-input,
+  .#{$block-class}__container .#{$carbon-prefix}--select-input,
+  .#{$block-class}__container .#{$carbon-prefix}--dropdown,
+  .#{$block-class}__container .#{$carbon-prefix}--dropdown-list,
+  .#{$block-class}__container .#{$carbon-prefix}--number input[type='number'],
+  .#{$block-class}__container .#{$carbon-prefix}--date-picker__input {
     background-color: $field-02;
   }
 
@@ -457,6 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -466,6 +472,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }

package/scss/components/StatusIcon/_status-icon.scss

@@ -82,6 +82,7 @@ $block-class: #{$pkg-prefix}--status-icon;
   0% {
     transform: scaleY(-1) rotate(360deg);
   }
+
   100% {
     transform: scaleY(-1) rotate(0deg);
   }

package/scss/components/TagSet/_storybook-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 '../../global/styles/display-box';

package/scss/components/Tearsheet/_tearsheet.scss

@@ -152,8 +152,7 @@
     }
 
     &.#{$block-class}--wide .#{$block-class}__header--with-close-icon {
-      padding-right: $spacing-05;
-      margin-right: $spacing-09;
+      padding-right: $spacing-10;
     }
 
     .#{$block-class}__header-content {

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -66,6 +66,15 @@ $theme-keys: map-keys($themes);
     }
   }
 
+  .#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip {
+    &:hover,
+    &:focus {
+      svg {
+        fill: $ui-01;
+      }
+    }
+  }
+
   .#{$block-class} {
     display: flex;
     flex-direction: column;

package/scss/components/WebTerminal/_web-terminal.scss

@@ -10,6 +10,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
   }
+
   100% {
     opacity: 1;
     transform: translateX(0);
@@ -21,6 +22,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     opacity: 1;
     transform: translateX(0);
   }
+
   100% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use

package/scss/global/styles/_display-box.scss

@@ -0,0 +1,62 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 '../../global/styles/project-settings';
+
+$block-class: 'ccs-sb--display-box';
+
+$indicator-width: $spacing-02;
+$indicator-height: $spacing-04;
+
+/**
+  Adds a box indicating the extent of the available space to the displayed component
+*/
+.#{$block-class} {
+  position: relative;
+  display: inline-block;
+  padding-top: $spacing-05; // space for the indicators
+  color: $text-05;
+}
+
+.#{$block-class}__indicator {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  border-bottom: 1px solid $text-05;
+  white-space: nowrap;
+  @include carbon--type-style('helper-text-01');
+}
+
+.#{$block-class}__message {
+  position: absolute;
+  bottom: $spacing-02;
+}
+
+.sb-main-centered .#{$block-class}__message {
+  left: 50%;
+  min-width: 100vh;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+.#{$block-class}__indicator--left,
+.#{$block-class}__indicator--right {
+  position: absolute;
+  bottom: calc(-1 * $indicator-height);
+  width: 0;
+  height: 0;
+  border-top: $indicator-height solid $text-05;
+  border-right: $indicator-width solid transparent;
+  border-left: $indicator-width solid transparent;
+}
+
+.#{$block-class}__indicator--left {
+  left: calc(-1 * $indicator-width);
+}
+
+.#{$block-class}__indicator--right {
+  right: calc(-1 * $indicator-width);
+}

package/es/components/DataSpreadsheet/createActiveCellFn.js

@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2022, 2022
- *
- * 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 { px } from '@carbon/layout';
-import { pkg } from '../../settings';
-export var createActiveCellFn = function createActiveCellFn(_ref) {
-  var placementElement = _ref.placementElement,
-      coords = _ref.coords,
-      _ref$addToHeader = _ref.addToHeader,
-      addToHeader = _ref$addToHeader === void 0 ? false : _ref$addToHeader,
-      contextRef = _ref.contextRef,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      onActiveCellChange = _ref.onActiveCellChange,
-      activeCellValue = _ref.activeCellValue;
-
-  if (!coords) {
-    return;
-  } // If the active cell is in the column header row (very first), we need to append this element
-  // to `.${blockClass}__header--container`, otherwise it should be appended to `.${blockClass}__listContainer` firstElementChild
-
-
-  var activeElementContainer = addToHeader ? contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__header--container")) : contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
-  var relativePosition = {
-    top: placementElement.getBoundingClientRect().top - activeElementContainer.getBoundingClientRect().top,
-    left: placementElement.getBoundingClientRect().left - activeElementContainer.getBoundingClientRect().left
-  };
-  var activeCellButton = (contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"))) || document.createElement('button');
-  activeCellButton.classList.add("".concat(blockClass, "__active-cell--highlight"), "".concat(blockClass, "--interactive-cell-element"));
-  activeCellButton.style.width = px(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetWidth);
-  activeCellButton.style.height = px(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetHeight);
-  activeCellButton.style.left = px(relativePosition.left);
-  activeCellButton.style.top = px(relativePosition.top);
-  activeCellButton.setAttribute('data-active-row-index', typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? coords.row : 'header');
-  activeCellButton.setAttribute('data-active-column-index', typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' ? coords.column : 'header');
-  activeElementContainer.appendChild(activeCellButton);
-  activeCellButton.focus();
-
-  if (typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number') {
-    onActiveCellChange(activeCellValue);
-  }
-};