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

package/scss/components/{InlineEdit → InlineEditV1}/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use './inline-edit';
+@use './inline-edit-v1';

package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.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/InlineEditV2/_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.
+//
+
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/text-input';

package/scss/components/InlineEditV2/_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 './inline-edit-v2';

package/scss/components/InlineEditV2/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './inline-edit-v2';

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

@@ -0,0 +1,83 @@
+//
+// 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.
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/type';
+
+$block-class: #{$pkg-prefix}--inline-edit-v2;
+$carbon-input: #{$carbon-prefix}--text-input;
+
+.#{$block-class} {
+  display: flex;
+  align-items: center;
+  background: transparent;
+  cursor: pointer;
+}
+
+.#{$block-class}-readonly {
+  cursor: not-allowed;
+}
+
+.#{$block-class}:hover {
+  background: $field-01;
+}
+
+.#{$block-class}:hover .#{$block-class}__btn-edit {
+  visibility: visible;
+}
+
+.#{$block-class}__btn-edit {
+  visibility: hidden;
+}
+
+.#{$block-class}-focused {
+  background: $field-01;
+  outline: 2px solid $focus;
+}
+
+.#{$block-class}__text-input {
+  flex: 1;
+}
+
+.#{$block-class}__text-input-label {
+  display: none;
+}
+
+.#{$block-class}__warning-icon {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  margin-right: 0.4375rem;
+  color: $support-error;
+}
+
+.#{$block-class}__warning-text {
+  @include type.type-style('label-01');
+
+  margin-top: $spacing-03;
+  color: $support-error;
+}
+
+// overrides
+.#{$block-class}__text-input.#{$carbon-input} {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.#{$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-input}:focus,
+.#{$block-class}__text-input.#{$carbon-input}:active {
+  outline: none;
+}

package/scss/components/InlineEditV2/_storybook-styles.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.
+//
+.inline-edit-v2-example {
+  width: 15rem;
+}

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -1 +1,8 @@
-@use '../AddSelect/add-select';
+//
+// 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 '../AddSelect/add-select' as *;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// 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.

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/OptionsTile/_options-tile.scss

@@ -21,12 +21,19 @@
 $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class} {
-  border-bottom: 1px solid $border-subtle-01;
-  background-color: $layer-01;
+  position: relative;
+  border-bottom: 1px solid $border-subtle;
+  background-color: $layer;
 }
 
 .#{$block-class}__toggle-container {
-  position: relative;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: calc(
+    #{$spacing-05} + 2rem + #{$spacing-05}
+  ); // spacing + toggle width + spacing
 }
 
 .#{$block-class}__toggle {

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/SingleAddSelect/_carbon-imports.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 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.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 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.

package/scss/components/SingleAddSelect/_index.scss

@@ -1 +1,8 @@
+//
+// Copyright IBM Corp. 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 './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -1 +1,8 @@
-@use '../AddSelect/add-select';
+//
+// Copyright IBM Corp. 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 '../AddSelect/add-select' as *;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.

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) {
@@ -202,6 +202,8 @@ $motion-duration: $duration-moderate-02;
     @include breakpoint-up('md') {
       max-width: 60%;
     }
+
+    word-break: break-word;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {

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

@@ -21,14 +21,16 @@
 @use './ExportModal/index-with-carbon' as *;
 @use './ExpressiveCard/index-with-carbon' as *;
 @use './HTTPErrors/index-with-carbon' as *;
-@use './InlineEdit/index-with-carbon' as *;
+@use './InlineEditV1/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
+@use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;
 @use './PageHeader/index-with-carbon' as *;
 @use './ProductiveCard/index-with-carbon' as *;
 @use './RemoveModal/index-with-carbon' as *;
 @use './Saving/index-with-carbon' as *;
 @use './SidePanel/index-with-carbon' as *;
+@use './SingleAddSelect/index-with-carbon' as *;
 @use './StatusIcon/index-with-carbon' as *;
 @use './TagSet/index-with-carbon' as *;
 @use './Tearsheet/index-with-carbon' as *;

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

@@ -21,15 +21,18 @@
 @use './ExportModal';
 @use './ExpressiveCard';
 @use './HTTPErrors';
-@use './InlineEdit';
+@use './InlineEditV1';
 @use './ImportModal';
+@use './MultiAddSelect';
 @use './NotificationsPanel';
 @use './PageHeader';
 @use './ProductiveCard';
 @use './RemoveModal';
 @use './Saving';
 @use './SidePanel';
+@use './SingleAddSelect';
 @use './StatusIcon';
 @use './TagSet';
 @use './Tearsheet';
 @use './UserProfileImage';
+@use './WebTerminal';

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

@@ -42,6 +42,8 @@
 @use './UserProfileImage/index-with-carbon' as *;
 @use './EditSidePanel/index-with-carbon' as *;
 @use './OptionsTile/index-with-carbon' as *;
-@use './InlineEdit/index-with-carbon' as *;
+@use './InlineEditV1/index-with-carbon' as *;
+@use './InlineEditV2/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

@@ -23,6 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
+@use './FilterSummary/index';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './ModifiedTabs';
@@ -42,9 +43,11 @@
 @use './UserProfileImage';
 @use './EditSidePanel';
 @use './OptionsTile';
-@use './InlineEdit';
+@use './InlineEditV1';
+@use './InlineEditV2';
 @use './DataSpreadsheet';
 @use './Datagrid';
 @use './EditTearsheet';
 @use './EditTearsheetNarrow';
 @use './EditFullPage';
+@use './EditUpdateCards';