@carbon/ibm-products 1.33.0 → 1.34.0

package/lib/global/js/utils/motionConstants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EASINGS = exports.DURATIONS = void 0;
+
+var _getBezierValues = require("./getBezierValues");
+
+var _motion = require("@carbon/motion");
+
+/**
+ * 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.
+ */
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(_motion.fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(_motion.fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(_motion.moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(_motion.moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(_motion.slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(_motion.slow02) // '700ms'
+
+};
+exports.DURATIONS = DURATIONS;
+var EASINGS = {
+  productive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
+  },
+  expressive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
+  }
+};
+exports.EASINGS = EASINGS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,28 +50,29 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.19.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.20",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.21",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^29.0.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.6",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest": "^29.1.2",
+    "jest-config-ibm-cloud-cognitive": "^0.24.7",
+    "jest-environment-jsdom": "^29.1.2",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.1.3",
+    "npm-check-updates": "^16.3.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.9",
-    "yargs": "^17.5.1"
+    "sass": "^1.55.0",
+    "yargs": "^17.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@carbon/telemetry": "^0.1.0",
+    "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -87,11 +88,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.55.0",
     "@carbon/type": "^10.45.0",
-    "carbon-components": "^10.58.1",
-    "carbon-components-react": "^7.59.1",
+    "carbon-components": "^10.58.3",
+    "carbon-components-react": "^7.59.3",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "1ac4bda25833dab9426808f9d397d0ea4c5534e4"
+  "gitHead": "4d7381ec5c70fafb0f37ab93673fe6f7ccd85fb0"
 }

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

@@ -93,3 +93,7 @@ $block-class: #{$pkg-prefix}--datagrid;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$block-class}-story__hidden-column-id-snippet {
+  padding-top: $spacing-07;
+}

package/scss/components/InlineEditV2/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './inline-edit-v2';

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -0,0 +1,81 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/text-input/text-input';
+
+@mixin inline-edit-v2 {
+  $block-class: #{$pkg-prefix}--inline-edit-v2;
+  $carbon-text-input: #{$carbon-prefix}--text-input;
+
+  .#{$block-class} {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    cursor: pointer;
+
+    &-readonly {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      background: $hover-ui;
+    }
+
+    &:hover .#{$block-class}__btn-edit {
+      visibility: visible;
+    }
+
+    &__btn-edit {
+      visibility: hidden;
+    }
+
+    &-focused {
+      background: $hover-ui;
+      outline: 2px solid $focus;
+    }
+
+    &__text-input {
+      flex: 1;
+    }
+
+    &__warning-icon {
+      color: $support-01;
+    }
+
+    &__warning-text {
+      @include carbon--type-style('caption-01');
+
+      margin-top: $spacing-03;
+      color: $support-01;
+    }
+  }
+
+  // overrides
+  .#{$block-class}__text-input.#{$carbon-text-input} {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-text-input} {
+    color: $disabled-02;
+    cursor: not-allowed;
+  }
+
+  .#{$block-class}__text-input.#{$carbon-text-input}:focus,
+  .#{$block-class}__text-input.#{$carbon-text-input}:active {
+    outline: none;
+  }
+}
+
+@include exports('inline-edit-v2') {
+  @include inline-edit-v2;
+}

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -32,8 +32,8 @@
   height: 2.5rem;
   padding: $spacing-04;
   border: $spacing-01 solid transparent;
-  background-color: transparent;
   border-radius: 0;
+  background-color: transparent;
   cursor: pointer;
   transition: background-color $duration--fast-02 motion(standard, productive);
   // stylelint-disable-next-line max-nesting-depth

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

@@ -471,6 +471,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       vertical-align: middle;
     }
 
+    .#{$block-class}__title-wrapper {
+      @include carbon--type-style('productive-heading-04');
+    }
+
     .#{$block-class}__page-actions {
       flex: 0 0 100%;
       margin-top: $spacing-05;

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

@@ -24,49 +24,6 @@
 $block-class: #{$pkg-prefix}--side-panel;
 $action-set-block-class: #{$pkg-prefix}--action-set;
 
-@mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
-  @keyframes side-panel-entrance-right {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(#{$size}); // the size width of the side panel
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
-  @keyframes side-panel-entrance-left {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(-#{$size}); // the size width of the side panel
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin sidePanelEntrance(
-  $placement: 'right',
-  $size: map-get($side-panel-sizes, md)
-) {
-  width: $size;
-  max-width: 100%;
-  @if $placement == right {
-    @include sidePanelEntranceRight($size);
-  } @else {
-    @include sidePanelEntranceLeft($size);
-  }
-}
-
 @mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
   width: $size;
   max-width: 100%;
@@ -92,32 +49,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin side-panel {
-  @keyframes side-panel-exit-left {
-    0% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    100% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(calc(-1 * #{map-get($side-panel-sizes, md)}));
-    }
-  }
-
-  @keyframes side-panel-exit-right {
-    0% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    100% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(map-get($side-panel-sizes, md));
-    }
-  }
-
   .#{$block-class}__container {
     --#{$block-class}--subtitle-opacity: 1;
     --#{$block-class}--title-container-height: 0;
@@ -137,7 +68,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     box-sizing: border-box;
     background-color: $ui-01;
     color: $text-01;
-    transition: transform $duration--moderate-02 carbon--motion(standard);
     @each $size, $size_value in $side-panel-sizes {
       &.#{$block-class}__container--#{$size} {
         @include setPanelSize($size_value);
@@ -149,14 +79,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
         }
       }
       &.#{$block-class}__container-right-placement.#{$block-class}__container--#{$size} {
-        @include sidePanelEntrance(right, $size_value);
-
         right: 0;
         border-left: 1px solid $decorative-01;
       }
       &.#{$block-class}__container-left-placement.#{$block-class}__container--#{$size} {
-        @include sidePanelEntrance(left, $size_value);
-
         left: 0;
         border-right: 1px solid $decorative-01;
       }
@@ -519,7 +445,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     width: 100%;
     height: 100%;
     background-color: $overlay-01;
-    transition: background-color $duration--moderate-02 carbon--motion(standard);
   }
 }
 

package/scss/components/_index.scss

@@ -48,3 +48,5 @@
 @import './EditTearsheet/index';
 @import './EditTearsheetNarrow/index';
 @import './EditFullPage/index';
+
+@import './InlineEditV2/index';