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

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

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

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -64,6 +64,10 @@ $row-heights: (
   }
 }
 
+.#{variables.$block-class} {
+  --#{variables.$block-class}--grid-header-height: 0;
+}
+
 .#{variables.$block-class}__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -249,7 +253,9 @@ $row-heights: (
   bottom: 0;
   left: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
   background-color: $link-inverse;
   content: '';
 }
@@ -261,15 +267,16 @@ $row-heights: (
   right: 0;
   bottom: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
   background-color: $link-inverse;
   content: '';
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-grid-active
-  .#{variables.$block-class}__table-grid-active
-  thead::before {
+  .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
   top: 0;
@@ -284,7 +291,9 @@ $row-heights: (
   .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
-  height: calc(100% - 2px);
+  height: calc(
+    100% - 2px - var(--#{variables.$block-class}--grid-header-height)
+  );
 }
 
 .#{variables.$block-class}
@@ -294,6 +303,12 @@ $row-heights: (
   outline-offset: -2px;
 }
 
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-inline-edit
+  .#{variables.$block-class}__table-container {
+  padding-top: $spacing-01;
+}
+
 .#{variables.$block-class}
   .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   [data-invalid]

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -65,6 +65,7 @@
 .#{variables.$block-class}__customize-columns-select-all {
   display: flex;
   height: $spacing-09;
+  align-items: center;
   padding-left: $spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-01;
@@ -75,6 +76,7 @@
 .#{variables.$block-class}__customize-columns-select-all-selected {
   display: flex;
   height: $spacing-09;
+  align-items: center;
   padding-left: $spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-selected-01;

package/scss/components/EditUpdateCards/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from EditUpdateCards in this file.
+// EditUpdateCards uses the following Carbon components:

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/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/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,7 +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 motion(standard);
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}__container--#{$size} {
       @include setPanelSize($size_value);
@@ -152,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;
     }
@@ -283,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;
   }
@@ -303,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)
@@ -358,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;
@@ -533,5 +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 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/_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';