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

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

@@ -0,0 +1,404 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/type' as *;
+@use './variables';
+
+$row-heights: (
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3rem,
+  xl: 4rem,
+);
+
+@each $size, $size-value in $row-heights {
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--text-input,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number
+    input[type='number'],
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{variables.$block-class}__inline-edit--select
+    .#{c4p-settings.$carbon-prefix}--list-box.#{c4p-settings.$carbon-prefix}--dropdown,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--date.#{variables.$block-class}__inline-edit--date-#{$size}
+    .#{c4p-settings.$carbon-prefix}--date-picker__input {
+    height: $size-value;
+  }
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
+    height: calc(#{$size-value} - 0.25rem);
+  }
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{variables.$block-class}__inline-edit--select
+    .#{c4p-settings.$carbon-prefix}--list-box {
+    max-height: none;
+  }
+}
+
+@mixin input-outline($color: $focus) {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  outline: $spacing-01 solid $color;
+  outline-offset: calc(-1 * #{$spacing-01});
+
+  @media screen and (prefers-contrast) {
+    outline-style: dotted;
+  }
+}
+
+.#{variables.$block-class}__inline-edit-cell {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$pkg-prefix}--inline-edit__after-input-elements {
+  display: flex;
+  align-items: center;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button {
+  width: 100%;
+  height: calc(100% + 2px); // account for borders
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: $spacing-05;
+  color: $text-secondary;
+  cursor: pointer;
+  outline: 0; // handled by active class
+  .#{variables.$block-class}__label-icon {
+    height: $spacing-05;
+    padding-right: $spacing-05;
+  }
+  &.#{variables.$block-class}__inline-edit-button--non-edit {
+    padding-left: 0;
+    cursor: default;
+  }
+  .#{variables.$block-class}__inline-edit-button-icon {
+    height: $spacing-05;
+    fill: $icon-secondary;
+  }
+  &.#{variables.$block-class}__inline-edit-button--date {
+    @include font-family($name: mono);
+  }
+  &.#{variables.$block-class}__inline-edit-button--selection {
+    justify-content: flex-start;
+  }
+  // Always show renderIcon if inline edit columns are less than half of total columns
+  &:not(.#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+    .#{variables.$block-class}__inline-edit-button-icon {
+      display: none;
+    }
+
+    /* stylelint-disable-next-line */
+    &:hover {
+      .#{variables.$block-class}__inline-edit-button-icon {
+        display: block;
+      }
+    }
+  }
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button:not([data-disabled='true']):hover {
+  background-color: $layer-active;
+  color: $text-primary;
+  .#{variables.$block-class}__inline-edit-button-icon {
+    fill: $icon-primary;
+  }
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active:not([data-disabled='true']) {
+  background-color: $layer-active;
+  color: $text-primary;
+  cursor: text;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active {
+  @include input-outline;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button--disabled:not(.#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+  color: $button-disabled;
+  cursor: not-allowed;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button
+  .#{variables.$block-class}__inline-edit-button-label {
+  overflow: hidden;
+  padding-right: $spacing-05;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button
+  .#{variables.$block-class}__inline-edit-button-label.#{variables.$block-class}__inline-edit-button-label-with-icon {
+  padding-right: $spacing-09;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{c4p-settings.$carbon-prefix}--text-input,
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number'] {
+  height: $spacing-09;
+}
+
+.#{variables.$block-class}__inline-edit-button-icon {
+  position: absolute;
+  right: $spacing-05;
+}
+
+.#{variables.$block-class}__table-with-inline-edit.#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__cell-inline-edit {
+  position: relative;
+  padding: 0;
+  .#{variables.$block-class}__inline-edit-button--non-edit {
+    padding-left: $spacing-05;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--number input[type='number'] {
+    min-width: auto;
+    padding-right: $spacing-05;
+  }
+}
+
+.#{variables.$block-class}__inline-edit--select
+  .#{variables.$block-class}__inline-edit--select-item {
+  padding-bottom: $spacing-05;
+  padding-left: $spacing-05;
+}
+
+.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker {
+  width: inherit;
+}
+
+.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
+  .#{c4p-settings.$carbon-prefix}--date-picker__input {
+  width: 100%;
+  height: $spacing-09; // default row height
+  max-height: none;
+}
+
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker-container {
+  width: inherit;
+}
+
+.#{variables.$block-class}__inline-edit--date.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
+  .#{c4p-settings.$carbon-prefix}--date-picker__input {
+  overflow: hidden;
+  width: 100%;
+  max-width: none;
+  padding-right: $spacing-07;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__carbon-row-hover-active
+  td {
+  border-top-color: $layer-hover;
+  background-color: $layer-hover;
+}
+
+// Custom border/outline for the focus region area, because of the scrolling
+// containers, using default border caused grid area width to be changed and
+// outlines were not present be
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-grid-active::before {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 50px);
+  background-color: $link-inverse;
+  content: '';
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-grid-active::after {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  height: calc(100% - 50px);
+  background-color: $link-inverse;
+  content: '';
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__table-grid-active
+  thead::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: var(--#{variables.$block-class}--grid-width);
+  height: 2px;
+  background-color: $link-inverse;
+}
+
+.#{variables.$block-class}
+  .#{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);
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__table-container {
+  outline: 2px solid $link-inverse;
+  outline-offset: -2px;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  ~ .#{c4p-settings.$carbon-prefix}--form-requirement,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  .#{c4p-settings.$carbon-prefix}--form-requirement {
+  position: absolute;
+  z-index: 3;
+  top: calc(100% - #{$spacing-01});
+  width: 100%;
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+  margin: 0;
+  background-color: $layer-01;
+  outline: $spacing-01 solid $support-error;
+  outline-offset: calc(-1 * #{$spacing-01});
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--list-box[data-invalid]:focus-within
+  ~ .#{c4p-settings.$carbon-prefix}--form-requirement {
+  outline: $spacing-01 solid $focus;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--list-box__invalid-icon,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--text-input__invalid-icon,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__invalid {
+  z-index: 4;
+  top: calc(100% + #{$spacing-04} + #{$spacing-01});
+  right: $spacing-03;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__invalid {
+  top: calc(100% + #{$spacing-02} + #{$spacing-01});
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--form-requirement::before {
+  position: absolute;
+  top: 0;
+  left: $spacing-01;
+  width: calc(100% - (#{$spacing-01} * 2));
+  height: $spacing-01;
+  background-color: $layer-01;
+  content: '';
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--form-requirement::after {
+  position: absolute;
+  top: $spacing-01;
+  left: $spacing-03;
+  width: calc(100% - (#{$spacing-03} * 2));
+  height: 1px;
+  background-color: $layer-accent-01;
+  content: '';
+}
+
+.#{variables.$block-class} tbody tr:hover {
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+    .#{c4p-settings.$carbon-prefix}--form-requirement::before {
+    background-color: $layer-accent-01;
+  }
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+    .#{c4p-settings.$carbon-prefix}--form-requirement::after {
+    background-color: transparent;
+  }
+}
+
+// Keep input focus states using $support-01 when inline edit cell is invalid
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--text-input:focus,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number']:focus,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number']:focus
+  ~ .#{c4p-settings.$carbon-prefix}--number__controls
+  .#{c4p-settings.$carbon-prefix}--number__control-btn:hover,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__control-btn:focus {
+  outline-color: $support-error;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number'][data-invalid]:focus
+  ~ .#{c4p-settings.$carbon-prefix}--number__controls
+  .#{c4p-settings.$carbon-prefix}--number__control-btn.up-icon::after {
+  background-color: $support-error;
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -1,13 +1,14 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
+* (c) Copyright IBM Corp. 2020 - 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
 @use '@carbon/styles/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/motion' as *;
 @use './variables' as *;
 
 .#{c4p-settings.$carbon-prefix}--data-table
@@ -18,3 +19,17 @@
     border-bottom: 1px solid $layer-accent-01;
   }
 }
+
+.#{$block-class} .#{$block-class}__expander-icon {
+  transition: transform $duration-fast-01 motion('standard', 'productive');
+}
+
+.#{$block-class} .#{$block-class}__expander-icon--open {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}__expanded-row
+  .#{$block-class}__carbon-row-expanded
+  td:first-child {
+  border-bottom: none;
+}

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -7,20 +7,43 @@
 */
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use './variables';
 
 .#{variables.$block-class}__right-sticky-column-cell {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid $layer-accent-01;
 }
 
 .#{variables.$block-class}__right-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay;
+}
+
+.#{variables.$block-class}__left-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  left: 0;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid $layer-accent-01;
+}
+
+.#{variables.$block-class}__left-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  z-index: 1;
+  left: 0;
+}
+
+.#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
+.#{variables.$block-class}__left-sticky-column-header.#{variables.$block-class}__left-sticky-column-header--with-extra-select-column {
+  left: $spacing-08;
 }
 
 .#{variables.$block-class}__sticky-noShadow {
@@ -37,3 +60,9 @@
   /* stylelint-disable-next-line */
   right: 6px !important; // offset the vertical scroll bar in the table body
 }
+
+.#{variables.$block-class}__select-all-toggle-on.#{variables.$block-class}__select-all-sticky-left {
+  position: sticky;
+  z-index: 1;
+  left: 0;
+}

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

@@ -17,22 +17,31 @@
     position: inherit;
     display: flex;
     flex-flow: column;
-    /* stylelint-disable-next-line declaration-no-important */
-    padding-top: 0 !important;
+    padding: 0;
+    margin: 0;
   }
 }
 
-.#{variables.$block-class}__customize-columns-checkbox {
+.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+  margin-bottom: 0;
+}
+.#{variables.$block-class}__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  /* stylelint-disable-next-line declaration-no-important */
-  margin-bottom: 0 !important; // reset the bottom provided by carbon
 }
 
 .#{variables.$block-class}__customize-columns-modal--actions {
   display: flex;
+  height: $spacing-09;
   flex-flow: row;
-  margin-bottom: $spacing-06;
+  background-color: $field-02;
+}
+
+.#{variables.$block-class}__customize-columns-modal--actions
+  input[role='searchbox'] {
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: none;
 }
 
 .#{variables.$block-class}__customize-columns-modal--actions > button {
@@ -40,7 +49,9 @@
 }
 
 .#{variables.$block-class}__customize-columns-instructions {
+  padding-left: $spacing-05;
   margin-bottom: $spacing-06;
+
   @include type.type-style('body-long-01');
 
   color: $text-primary;
@@ -50,3 +61,31 @@
   position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
   overflow: auto;
 }
+
+.#{variables.$block-class}__customize-columns-select-all {
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer-01;
+}
+.#{variables.$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover-01;
+}
+.#{variables.$block-class}__customize-columns-select-all-selected {
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer-selected-01;
+}
+
+.#{variables.$block-class}__customize-columns-select-all-selected:hover {
+  background-color: $background-selected-hover;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__customize-columns-modal
+  .#{c4p-settings.$carbon-prefix}--modal-content {
+  margin-bottom: 0;
+}

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

@@ -8,10 +8,10 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
 
 .#{variables.$block-class}__row-size-dropdown {
-  position: absolute;
   padding: $spacing-05;
   background-color: $background;
 
@@ -23,3 +23,11 @@
 
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
+  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  // Used to fix layout issue with IconButton caret inside of Popover component
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  left: -4px;
+}

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/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

@@ -140,8 +140,7 @@ $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);
+  transition: transform $duration-moderate-02 motion(standard);
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}__container--#{$size} {
       @include setPanelSize($size_value);
@@ -389,8 +388,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 +533,5 @@ $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);
+  transition: background-color $duration-moderate-02 motion(standard);
 }

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) {