@carbon/ibm-products 1.34.1 → 1.35.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -53,25 +53,25 @@
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.21",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.22",
     "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.1.2",
-    "jest-config-ibm-cloud-cognitive": "^0.24.7",
-    "jest-environment-jsdom": "^29.1.2",
+    "jest": "^29.2.0",
+    "jest-config-ibm-cloud-cognitive": "^0.24.8",
+    "jest-environment-jsdom": "^29.2.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.3.4",
+    "npm-check-updates": "^16.3.11",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.55.0",
     "yargs": "^17.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
+    "@babel/runtime": "^7.19.4",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
@@ -95,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "0081b89c74c41c34d946066440d7698cd7254756"
+  "gitHead": "bbcd35f7810843ce378dd7f7b9fcadde123cbd4a"
 }

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -0,0 +1,87 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditUpdateCards uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditUpdateCards
+
+// EditUpdateCards uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditUpdateCards
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-update-cards {
+  $block-class: #{$pkg-prefix}--edit-update-cards;
+
+  .#{$block-class} {
+    &##{$block-class}--edit {
+      /* Used id for overriding the SVG path fill */
+
+      .#{$pkg-prefix}--card__header,
+      .#{$pkg-prefix}--card__footer {
+        button {
+          &:hover {
+            background-color: $hover-primary;
+          }
+
+          &:focus {
+            box-shadow: none;
+          }
+
+          svg {
+            path {
+              // stylelint-disable-next-line carbon/theme-token-use
+              fill: $white-0;
+            }
+          }
+
+          &.#{$pkg-prefix}--loading {
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+      .#{$pkg-prefix}--card__footer {
+        // stylelint-disable-next-line carbon/theme-token-use
+        background-color: $blue-60;
+        // stylelint-disable-next-line carbon/theme-token-use
+        color: $white-0;
+      }
+      .#{$pkg-prefix}--loading {
+        animation-duration: $duration--slow-02;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: rotate;
+        animation-timing-function: $carbon--standard-easing;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+    &:not(.#{$block-class}__actions-bottom) {
+      &##{$block-class}--edit {
+        .#{$pkg-prefix}--card__header {
+          // stylelint-disable-next-line carbon/theme-token-use
+          background-color: $blue-60;
+          // stylelint-disable-next-line carbon/theme-token-use
+          color: $white-0;
+        }
+      }
+    }
+  }
+}
+
+@include exports('edit-update-cards') {
+  @include edit-update-cards;
+}

package/scss/components/EditUpdateCards/_index.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 './edit-update-cards';

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

@@ -0,0 +1,56 @@
+//
+// 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';
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+#root {
+  width: 100%;
+}
+
+@mixin edit-update-cards {
+  $block-class: #{$pkg-prefix}--edit-update-cards;
+
+  .#{$block-class} {
+    textarea,
+    input,
+    select {
+      width: 100%;
+      height: auto;
+      padding: 0;
+      font-size: carbon--type-scale(3);
+      letter-spacing: 0;
+      // stylelint-disable-next-line carbon/type-token-use
+      line-height: 1.5;
+    }
+  }
+  .#{$block-class}--items {
+    margin-bottom: $spacing-06;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .#{$block-class}--icon-text {
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-right: $spacing-01;
+
+      path {
+        // stylelint-disable-next-line carbon/theme-token-use
+        fill: $green-50;
+      }
+    }
+  }
+}
+
+@include exports('edit-update-cards') {
+  @include edit-update-cards;
+}

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

@@ -12,7 +12,7 @@
 
 @mixin inline-edit-v2 {
   $block-class: #{$pkg-prefix}--inline-edit-v2;
-  $carbon-text-input: #{$carbon-prefix}--text-input;
+  $carbon-input: #{$carbon-prefix}--text-input;
 
   .#{$block-class} {
     display: flex;
@@ -25,7 +25,7 @@
     }
 
     &:hover {
-      background: $hover-ui;
+      background: $field-01;
     }
 
     &:hover .#{$block-class}__btn-edit {
@@ -37,7 +37,7 @@
     }
 
     &-focused {
-      background: $hover-ui;
+      background: $field-01;
       outline: 2px solid $focus;
     }
 
@@ -46,6 +46,8 @@
     }
 
     &__warning-icon {
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      margin-right: 0.4375rem;
       color: $support-01;
     }
 
@@ -58,20 +60,21 @@
   }
 
   // overrides
-  .#{$block-class}__text-input.#{$carbon-text-input} {
+  .#{$block-class}__text-input.#{$carbon-input} {
     border: none;
     background: transparent;
     cursor: pointer;
     outline: none;
   }
 
-  .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-text-input} {
-    color: $disabled-02;
+  .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
+  .#{$block-class}-readonly
+    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
     cursor: not-allowed;
   }
 
-  .#{$block-class}__text-input.#{$carbon-text-input}:focus,
-  .#{$block-class}__text-input.#{$carbon-text-input}:active {
+  .#{$block-class}__text-input.#{$carbon-input}:focus,
+  .#{$block-class}__text-input.#{$carbon-input}:active {
     outline: none;
   }
 }

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

@@ -0,0 +1,3 @@
+.inline-edit-v2-example {
+  width: 15rem;
+}

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

@@ -204,7 +204,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       top: calc(
         var(--#{$block-class}--title-text-height) +
-          var(--#{$block-class}--label-text-height) + #{$spacing-09}
+          var(--#{$block-class}--label-text-height)
       );
       background-color: $ui-01;
     }
@@ -224,7 +224,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 
     .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
       position: fixed;
-      top: $spacing-09;
       height: calc(
         var(--#{$block-class}--title-text-height) +
           var(--#{$block-class}--label-text-height)
@@ -279,7 +278,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       top: calc(
         var(--#{$block-class}--title-text-height) +
-          var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
+          var(--#{$block-class}--subtitle-container-height)
       );
       width: 100%;
       border-bottom: 1px solid $decorative-01;

package/scss/components/_index.scss

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