@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.4

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

@@ -0,0 +1,85 @@
+//
+// 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.
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+@use '@carbon/colors/' as *;
+@use '@carbon/motion/' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// 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.
+/* stylelint-disable max-nesting-depth */
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  &##{$block-class}--edit {
+    /* Used id for overriding the SVG path fill */
+
+    .#{c4p-settings.$pkg-prefix}--card__header,
+    .#{c4p-settings.$pkg-prefix}--card__footer {
+      button {
+        &:hover {
+          // stylelint-disable-next-line carbon/theme-token-use
+          background-color: $blue-60-hover;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        svg {
+          path {
+            // stylelint-disable-next-line carbon/theme-token-use
+            fill: $white-0;
+          }
+        }
+
+        &.#{c4p-settings.$pkg-prefix}--loading {
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+    .#{c4p-settings.$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;
+    }
+    .#{c4p-settings.$pkg-prefix}--loading {
+      animation-duration: $duration-slow-02;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: rotate;
+      animation-timing-function: motion(standard, productive);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+  &:not(.#{$block-class}__actions-bottom) {
+    &##{$block-class}--edit {
+      .#{c4p-settings.$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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './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.
+//
+
+@use './edit-update-cards';

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

@@ -0,0 +1,55 @@
+//
+// 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.
+//
+
+@use '@carbon/colors/' as *;
+@use '@carbon/type/' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+/* stylelint-disable max-nesting-depth */
+#root {
+  width: 100%;
+}
+
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  textarea,
+  input,
+  select {
+    width: 100%;
+    height: auto;
+    padding: 0;
+    // stylelint-disable-next-line
+    font-size: 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;
+    }
+  }
+}

package/scss/components/InlineEdit/_inline-edit.scss

@@ -105,8 +105,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     overflow: hidden;
     // positions text and placeholder including when showing placeholder
     // NOTE: Using flex does strange things to a caret in content editable
-    width: calc(100% - var(--#{$block-class}--toolbar-width) - $spacing-05);
-    max-width: calc(100% - var(--#{$block-class}--toolbar-width) - $spacing-05);
+    width: calc(100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05});
+    max-width: calc(
+      100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
+    );
     min-height: var(--#{$block-class}--size);
     /* stylelint-disable-next-line carbon/layout-token-use */
     margin-right: var(--#{$block-class}--toolbar-width);

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

@@ -60,8 +60,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   max-height: 38.5rem;
   background-color: $background;
   color: $text-primary;
-  transition: transform $duration-fast-02;
-  transition-timing-function: motion(standard);
+  transition: transform $duration-fast-02 motion(standard);
 
   .#{$block-class}__header-container {
     position: sticky;
@@ -123,8 +122,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     background-color: $background;
     cursor: pointer;
     text-align: left;
-    transition: background-color $duration-moderate-02;
-    transition-timing-function: motion(standard);
+    transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
       margin-bottom: $spacing-02;
       color: $text-on-color;
@@ -236,8 +234,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     margin: 0 auto;
     background-color: $layer-02;
     content: '';
-    transition: background-color $duration-moderate-02;
-    transition-timing-function: motion(standard);
+    transition: background-color $duration-moderate-02 motion(standard);
   }
   .#{$block-class}__notification-today:hover
     + .#{$block-class}__notification-today:not(:first-of-type):before,

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

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

package/scss/components/RemoveModal/_remove-modal.scss

@@ -21,10 +21,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--remove-modal;
   padding-right: $spacing-05;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
-  display: none;
-}
-
 .#{$block-class}__body {
   padding-right: 20%;
   margin-bottom: $spacing-05;

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

@@ -26,49 +26,6 @@
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$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%;
@@ -93,32 +50,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   -webkit-line-clamp: 2;
 }
 
-@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;
@@ -140,8 +71,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   box-sizing: border-box;
   background-color: $layer-01;
   color: $text-primary;
-  transition: transform $duration-moderate-02;
-  transition-timing-function: motion(standard);
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}__container--#{$size} {
       @include setPanelSize($size_value);
@@ -153,14 +82,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       }
     }
     &.#{$block-class}__container-right-placement.#{$block-class}__container--#{$size} {
-      @include sidePanelEntrance(right, $size_value);
-
       right: 0;
       border-left: 1px solid $border-subtle-02;
     }
     &.#{$block-class}__container-left-placement.#{$block-class}__container--#{$size} {
-      @include sidePanelEntrance(left, $size_value);
-
       left: 0;
       border-right: 1px solid $border-subtle-02;
     }
@@ -284,7 +209,7 @@ $action-set-block-class: #{c4p-settings.$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: $layer-01;
   }
@@ -304,7 +229,6 @@ $action-set-block-class: #{c4p-settings.$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)
@@ -359,7 +283,7 @@ $action-set-block-class: #{c4p-settings.$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 $layer-active-01;
@@ -389,8 +313,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding: 0 $spacing-05;
     margin-bottom: $spacing-03;
     background-color: $layer-01;
-    transition: transform $duration-moderate-01;
-    transition-timing-function: motion(standard);
+    transition: transform $duration-moderate-01 motion(standard);
     .#{$block-class}__action-toolbar-button {
       min-width: 2rem;
       &.#{$block-class}__action-toolbar-icon-only-button {
@@ -535,6 +458,4 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   width: 100%;
   height: 100%;
   background-color: $overlay;
-  transition: background-color $duration-moderate-02;
-  transition-timing-function: motion(standard);
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/themes/scss/themes';
 @use '@carbon/styles/scss/type';
 
 $story-prefix: side-panel-stories__;
@@ -38,3 +39,7 @@ $story-prefix: side-panel-stories__;
     margin: $spacing-05 0 $spacing-04;
   }
 }
+
+.#{$story-prefix}header {
+  @include theme(themes.$g100);
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -47,8 +47,8 @@ $motion-duration: $duration-moderate-02;
     /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal');
     align-items: flex-end;
-    // stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use
-    transition: visibility 0 linear,
+    // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+    transition: visibility 0s linear,
       background-color $motion-duration motion(entrance, expressive),
       opacity $motion-duration motion(entrance, expressive);
     @media (prefers-reduced-motion: reduce) {

package/scss/components/_index-released-only.scss

@@ -33,3 +33,4 @@
 @use './TagSet';
 @use './Tearsheet';
 @use './UserProfileImage';
+@use './WebTerminal';

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

@@ -45,3 +45,4 @@
 @use './InlineEdit/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
+@use './EditUpdateCards/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -48,3 +48,4 @@
 @use './EditTearsheet';
 @use './EditTearsheetNarrow';
 @use './EditFullPage';
+@use './EditUpdateCards';