@carbon/ibm-products 1.4.0 → 1.7.0

package/scss/components/PageHeader/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './page-header.scss';
+@import './page-header';

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

@@ -80,7 +80,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   $duration: 1000ms;
 
   $animation: background-appear;
-  @if ($with-shadow) {
+  @if $with-shadow {
     $animation: background-and-shadow-appear;
   }
 
@@ -434,6 +434,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title--editable {
       display: flex;
       overflow: visible;
+      // move to match non-editable version position
+      margin-top: calc(-1 * #{$spacing-01});
+      margin-left: calc(-1 * #{$spacing-05});
     }
 
     .#{$block-class}__title-skeleton {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -36,10 +36,6 @@
       align-items: center;
       justify-content: space-between;
       border-top: 1px solid $ui-03;
-
-      .#{$carbon-prefix}--btn svg {
-        margin-left: $spacing-03;
-      }
     }
 
     .#{$block-class}__footer-no-button {

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

@@ -25,7 +25,7 @@ $block-class: #{$pkg-prefix}--side-panel;
 $action-set-block-class: #{$pkg-prefix}--action-set;
 
 @mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
-  @keyframes sidePanelEntranceRight {
+  @keyframes side-panel-entrance-right {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -39,7 +39,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
-  @keyframes sidePanelEntranceLeft {
+  @keyframes side-panel-entrance-left {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -90,7 +90,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin side-panel {
-  @keyframes sidePanelExitLeft {
+  @keyframes side-panel-exit-left {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -102,7 +102,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     }
   }
 
-  @keyframes sidePanelExitRight {
+  @keyframes side-panel-exit-right {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -186,6 +186,15 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       &::before {
         @include setDividerStyles();
       }
+      &.#{$block-class}__title-container--reduced-motion {
+        z-index: 5;
+        border-bottom: 1px solid $decorative-01;
+        margin-bottom: $spacing-05;
+      }
+      &.#{$block-class}__title-container--reduced-motion.#{$block-class}__title-container--no-title-animation {
+        border-bottom: 0;
+        margin-bottom: 0;
+      }
       &.#{$block-class}__on-detail-step .#{$block-class}__collapsed-title-text {
         top: $spacing-09;
       }
@@ -444,7 +453,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     background-color: $field-02;
   }
 
-  @keyframes sidePanelOverlayEntrance {
+  @keyframes side-panel-overlay-entrance {
     0% {
       opacity: 0;
     }
@@ -453,7 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     }
   }
 
-  @keyframes sidePanelOverlayExit {
+  @keyframes side-panel-overlay-exit {
     0% {
       opacity: 1;
     }

package/scss/components/StatusIcon/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './status-icon.scss';
+@import './status-icon';

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

@@ -72,7 +72,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function clr($name, $theme: light) {
+@function --clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -111,6 +111,8 @@ $block-class: #{$pkg-prefix}--status-icon;
 @each $theme in $themes {
   @each $icon in $icons {
     @each $theme-key in $themes {
+      .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger
+        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
       .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
         @if $icon == in-progress {
           @media (prefers-reduced-motion: reduce) {
@@ -119,14 +121,14 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-token-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
           transform: scaleY(-1);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

package/scss/components/TagSet/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './tag-set.scss';
+@import './tag-set';

package/scss/components/UserProfileImage/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './user-profile-image.scss';
+@import './user-profile-image';

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

@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function get-background-color($color, $key, $contrast-key) {
+@function --get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -60,7 +60,7 @@ $theme-keys: map-keys($themes);
       @each $contrast-key in $theme-keys {
         .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
           // stylelint-disable-next-line carbon/theme-token-use
-          background-color: get-background-color($color, $key, $contrast-key);
+          background-color: --get-background-color($color, $key, $contrast-key);
         }
       }
     }

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

@@ -4,7 +4,7 @@
 $web-terminal-width: 36.5rem;
 $block-class: #{$pkg-prefix}--web-terminal;
 
-@keyframes webTerminalEntrance {
+@keyframes web-terminal-entrance {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
@@ -16,7 +16,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
   }
 }
 
-@keyframes webTerminalExit {
+@keyframes web-terminal-exit {
   0% {
     opacity: 1;
     transform: translateX(0);

package/scss/components/_index.scss

@@ -45,3 +45,4 @@
 @import './OptionsTile/index';
 @import './CancelableTextEdit/index';
 @import './InlineEdit/index';
+@import './DataSpreadsheet/index';

package/scss/global/styles/_project-settings.scss

@@ -6,7 +6,11 @@
 //
 
 // set required feature flags for carbon
-@import '../../generated/feature-flags/feature-flags';
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true,
+  enable-css-custom-properties: true,
+);
 
 // import the carbon import-once mechanism
 @import '@carbon/import-once/scss/import-once';

package/es/generated/feature-flags/feature-flags.js

@@ -1,15 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-// ******************************
-// *
-// * ONLY EDIT IN /common-files/feature-flags files elsewhere are copies
-// * created by a pre-commit step
-// *
-// ******************************
-export default {
-  'enable-css-custom-properties': false
-};

package/lib/generated/feature-flags/feature-flags.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-// ******************************
-// *
-// * ONLY EDIT IN /common-files/feature-flags files elsewhere are copies
-// * created by a pre-commit step
-// *
-// ******************************
-var _default = {
-  'enable-css-custom-properties': false
-};
-exports.default = _default;

package/scss/generated/feature-flags/_feature-flags.scss

@@ -1,19 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// ******************************
-// *
-// * ONLY EDIT IN /common-files/feature-flags files elsewhere are copies
-// * created by a pre-commit step
-// *
-// ******************************
-
-$feature-flags: (
-  ui-shell: true,
-  grid-columns-16: true,
-  enable-css-custom-properties: true,
-);